Bootstrap इत्यस्य आधारभूतसंरचनायाः प्रमुखखण्डेषु lowdown प्राप्नुवन्तु, यत्र अस्माकं दृष्टिकोणः उत्तमः, द्रुततरः, सशक्तः जालविकासः अपि अस्ति ।

HTML5 doctype इति

बूटस्ट्रैप् कतिपय HTML तत्त्वानां CSS गुणानाञ्च उपयोगं करोति येषां कृते HTML5 doctype इत्यस्य उपयोगः आवश्यकः भवति । भवतः सर्वेषां परियोजनानां आरम्भे तत् समावेशयन्तु।

<!doctype html>
<html lang="en">
  ...
</html>

मोबाईल प्रथम

Bootstrap 2 इत्यनेन सह वयं फ्रेमवर्कस्य प्रमुखपक्षेभ्यः वैकल्पिकमोबाइल-अनुकूलशैल्याः योजितवन्तः । Bootstrap 3 इत्यनेन सह वयं परियोजनां पुनः लिखितवन्तः यत् आरम्भादेव मोबाईल-अनुकूलं भवेत्। वैकल्पिकमोबाइलशैल्याः उपरि योजयितुं स्थाने, ते कोरमध्ये एव पक्त्वा भवन्ति। वस्तुतः, Bootstrap प्रथमं मोबाइल अस्ति . मोबाईल प्रथमशैल्याः पृथक् पृथक् सञ्चिकासु न अपितु सम्पूर्णे पुस्तकालये द्रष्टुं शक्यन्ते ।

सम्यक् रेण्डरिंग् सुनिश्चित्य स्पर्शजूमिंग् च सुनिश्चित्य, viewport meta tag इत्येतत् स्वस्य मध्ये योजयन्तु <head>।

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noviewport meta tag मध्ये योजयित्वा भवान् मोबाईल-उपकरणेषु जूम-क्षमतां निष्क्रियं कर्तुं शक्नोति । एतेन जूमिंग् निष्क्रियं भवति, अर्थात् उपयोक्तारः केवलं स्क्रॉल कर्तुं समर्थाः भवन्ति, तस्य परिणामेण भवतः साइट् किञ्चित् अधिकं देशी-अनुप्रयोगस्य इव अनुभूयते । समग्रतया वयं प्रत्येकस्मिन् साइट् मध्ये एतत् न अनुशंसयामः, अतः सावधानतां कुर्वन्तु!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

टाइपोग्राफी एवं लिंक

बूटस्ट्रैप् मूलभूतवैश्विकप्रदर्शनं, मुद्रणलेखनं, लिङ्कशैल्याः च सेट् करोति । विशेषतः वयं : १.

background-color: #fff;पर सेट करेंbody
अस्माकं मुद्रणमूलरूपेण @font-family-base, @font-size-base, तथा विशेषतानां उपयोगं कुर्वन्तु@line-height-base
माध्यमेन वैश्विकलिङ्कवर्णं सेट् कुर्वन्तु @link-colorतथा केवलं उपरि लिङ्क् अण्डरलाइन्स् प्रयोजयन्तु:hover

एताः शैल्याः अन्तः द्रष्टुं शक्यन्ते scaffolding.less.

सामान्यीकरण करें.css

उन्नत-क्रॉस्-ब्राउजर-प्रतिपादनार्थं वयं Normalize.css , Nicolas Gallagher तथा Jonathan Neal इत्येतयोः परियोजनायाः उपयोगं कुर्मः ।

पात्राणि

बूटस्ट्रैप् कृते साइट् सामग्रीं लपेटयितुं अस्माकं ग्रिड् सिस्टम् स्थापयितुं च एकं समाहितं तत्त्वम् आवश्यकम् अस्ति । भवान् स्वप्रकल्पेषु उपयोक्तुं द्वयोः पात्रयोः एकं चिन्वितुं शक्नोति । ध्यानं कुर्वन्तु यत्, कारणतः paddingअधिकं च, न द्वयोः अपि पात्रयोः नेस्टेबलम् अस्ति ।

.containerप्रतिक्रियाशीलनियतविस्तारपात्रस्य कृते उपयुज्यताम् ।

<div class="container">
  ...
</div>

.container-fluidपूर्णविस्तारस्य पात्रस्य कृते उपयुज्यताम् , यत् भवतः viewport इत्यस्य सम्पूर्णविस्तारं विस्तृतं भवति ।

<div class="container-fluid">
  ...
</div>

बूटस्ट्रैप् इत्यत्र प्रतिक्रियाशीलं, चलप्रथमद्रवजालप्रणाली अन्तर्भवति यत् यथा यथा उपकरणस्य अथवा दृश्यपोर्टस्य आकारः वर्धते तथा तथा 12 स्तम्भपर्यन्तं समुचितरूपेण स्केल करोति अस्मिन् सुलभविन्यासविकल्पानां कृते पूर्वनिर्धारितवर्गाः , अपि च अधिकशब्दार्थविन्यासजननार्थं शक्तिशालिनः मिश्रणानि समाविष्टानि सन्ति .

आमुख

भवतः सामग्रीं स्थापयति इति पङ्क्तिस्तम्भानां श्रृङ्खलायाम् माध्यमेन पृष्ठविन्यासनिर्माणार्थं जालप्रणालीनां उपयोगः भवति । अत्र Bootstrap grid system कथं कार्यं करोति इति दर्शितम् अस्ति ।

पङ्क्तयः सम्यक् संरेखणाय गद्दीकरणाय च .container(नियत-विस्तारस्य) अथवा (पूर्ण-विस्तारस्य) अन्तः अवश्यं स्थापनीयाः ।.container-fluid
स्तम्भानां क्षैतिजसमूहान् निर्मातुं पङ्क्तयः उपयुज्यताम् ।
सामग्री स्तम्भान्तर्गत स्थापनीय, केवलं स्तम्भाः एव पङ्क्तिसन्तानाः स्युः ।
पूर्वनिर्धारितजालवर्गाः इव जालविन्यासानां शीघ्रं निर्माणार्थं .rowच .col-xs-4उपलभ्यन्ते । अधिकशब्दार्थविन्यासानां कृते अपि न्यूनानि मिश्रणानि उपयोक्तुं शक्यन्ते ।
स्तम्भाः मार्गेण गटर्स् (स्तम्भसामग्रीणां मध्ये अन्तरालम्) निर्मान्ति padding। .rowसः पैडिंग् s इत्यत्र ऋणात्मकमार्जिनद्वारा प्रथमस्य अन्तिमस्य च स्तम्भस्य कृते पङ्क्तौ ऑफसेट् भवति ।
ऋणात्मकं मार्जिनम् अस्ति यत् अधोलिखितानि उदाहरणानि किमर्थं बहिः कृतानि सन्ति। इदं यथा जालस्तम्भानां अन्तः सामग्री अजालसामग्रीभिः सह पङ्क्तिबद्धा भवति ।
भवन्तः span कर्तुम् इच्छन्ति द्वादश उपलब्धस्तम्भानां संख्यां निर्दिश्य जालस्तम्भाः निर्मीयन्ते । यथा, त्रयः समानस्तम्भाः त्रीणि उपयुज्यन्ते स्म .col-xs-4।
यदि एकस्याः पङ्क्तौ १२ तः अधिकाः स्तम्भाः स्थापिताः सन्ति तर्हि अतिरिक्तस्तम्भानां प्रत्येकं समूहः एकैकरूपेण नूतनरेखायां वेष्टयिष्यति ।
जालवर्गाः ब्रेकपॉइण्ट् आकारेभ्यः अधिकं वा समानं वा स्क्रीनविस्तारयुक्तेषु उपकरणेषु प्रवर्तन्ते, तथा च लघुयन्त्रेषु लक्षितानि जालवर्गाणि अधिलिखन्ति । अतः, उदा. .col-md-*कस्मिंश्चित् तत्त्वे किमपि वर्गं प्रयोक्तुं न केवलं मध्यमयन्त्रेषु अपितु बृहत्यन्त्रेषु अपि तस्य स्टाइलिंग् प्रभावितं करिष्यति यदि कश्चन .col-lg-*वर्गः उपस्थितः नास्ति

एतेषां सिद्धान्तानां भवतः संहितायां प्रयोक्तुं उदाहरणानि पश्यन्तु ।

मीडिया प्रश्नाः

वयं अस्माकं Grid system मध्ये key breakpoints निर्मातुं अस्माकं Less files मध्ये निम्नलिखित media queries इत्यस्य उपयोगं कुर्मः ।

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

वयं कदाचित् एतेषु मीडियाप्रश्नेषु विस्तारं कुर्मः यत् max-widthCSS इत्येतत् संकीर्णतरं उपकरणसमूहं प्रति सीमितं कर्तुं a समावेशयितुं शक्नुमः ।

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

जालविकल्पाः

पश्यन्तु यत् Bootstrap जालप्रणाल्याः पक्षाः कथं सुलभसारणीयुक्तेन बहुषु उपकरणेषु कार्यं कुर्वन्ति ।

	अतिरिक्त लघु उपकरण फोन (<768px)	लघु उपकरण टैबलेट (≥768px)	मध्यम उपकरण डेस्कटॉप (≥992px)	बृहत् उपकरणानि डेस्कटॉप्स् (≥1200px)
जालव्यवहारः	सर्वदा क्षैतिजम्	आरम्भार्थं संकुचितम्, भङ्गबिन्दुभ्यः उपरि क्षैतिजम्
पात्र चौड़ाई	न कोऽपि (स्वतः) २.	७५०px इति	९७०px इति	११७०px
वर्ग उपसर्गः	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# स्तम्भों का	१२
स्तम्भ चौड़ाई	ऑटो	~62px	~81px	~97px
नाली चौड़ाई	३०px (स्तम्भस्य प्रत्येकं पार्श्वे १५px) ।
नेस्टेबल	आम्‌
ऑफसेट्	आम्‌
स्तम्भ आदेश	आम्‌

उदाहरण : स्तम्भित-से-क्षैतिज

ग्रिड् वर्गानां एकस्य समुच्चयस्य उपयोगेन .col-md-*, भवान् एकं मूलभूतं ग्रिड् प्रणालीं निर्मातुम् अर्हति यत् डेस्कटॉप् (मध्यम) उपकरणेषु क्षैतिजं भवितुं पूर्वं चलयन्त्रेषु टैब्लेट् उपकरणेषु च (अतिरिक्तलघुतः लघुपरिधिषु) स्तम्भितं आरभ्यते कस्मिन् अपि जालस्तम्भान् स्थापयन्तु .row.

.कोल-मद्-१

.कोल-मद्-८

.कोल-मद्-४

.कोल-मद्-६

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

उदाहरण : द्रव पात्र

स्वस्य बाह्यतमं परिवर्त्य किमपि नियत-विस्तार-जाल-विन्यासं पूर्ण-विस्तार-विन्यासे .containerपरिवर्तयन्तु .container-fluid।

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

उदाहरणम् : मोबाईल तथा डेस्कटॉप

न इच्छति यत् भवतः स्तम्भाः केवलं लघुयन्त्रेषु स्तम्भिताः भवेयुः? .col-xs-* .col-md-*स्वस्य स्तम्भेषु योजयित्वा अतिरिक्तलघुमध्यमयन्त्रजालवर्गाणां उपयोगं कुर्वन्तु । एतत् सर्वं कथं कार्यं करोति इति उत्तमविचाराय अधोलिखितं उदाहरणं पश्यन्तु ।

.कोल-क्सस्-१२ .कोल-मद्-८

.कोल-क्सस्-६ .कोल-मद्-४

.कोल-क्सस्-६

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

उदाहरणम् : मोबाईल, टैबलेट, डेस्कटॉप

.col-sm-*टैब्लेट् वर्गैः सह अधिकाधिकं गतिशीलं शक्तिशालिनं च विन्यासं निर्माय पूर्वोदाहरणे निर्माणं कुर्वन्तु ।

.कोल-क्सस्-१२ .कोल-स्म-६ .कोल-मद्-८

.कोल-क्सस्-६ .कोल-मद्-४

.कोल-क्सस-६ .कोल-स्म-४

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

उदाहरणम् : स्तम्भवेष्टनम्

यदि एकस्याः पङ्क्तौ १२ तः अधिकाः स्तम्भाः स्थापिताः सन्ति तर्हि अतिरिक्तस्तम्भानां प्रत्येकं समूहः एकैकरूपेण नूतनरेखायां वेष्टयिष्यति ।

.कोल-क्सस्-९

.col-xs-4
9 + 4 = 13 > 12 इति कारणतः अयं 4-स्तम्भ-विस्तारः दिवः एकः सङ्गत-एककरूपेण नूतनायां रेखायां वेष्टितः भवति ।

.col-xs-6
तदनन्तरं स्तम्भाः नूतनपङ्क्तौ निरन्तरं भवन्ति ।

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

प्रतिक्रियाशील स्तम्भ रीसेट करता है

उपलब्धजालस्य चतुर्णां स्तरैः सह भवन्तः मुद्देषु धावितुं बाध्यन्ते यत्र, कतिपयेषु विच्छेदबिन्दुषु, भवतः स्तम्भाः सर्वथा सम्यक् न स्पष्टाः भवन्ति यतः एकः अन्यस्मात् ऊर्ध्वः अस्ति। तत् समाधातुं, a इत्यस्य .clearfixअस्माकं प्रतिक्रियाशील-उपयोगितावर्गस्य च संयोजनस्य उपयोगं कुर्वन्तु ।

.col-xs-6 .col-sm-3
स्वस्य viewport इत्यस्य आकारं परिवर्तयन्तु अथवा उदाहरणार्थं स्वस्य दूरभाषे पश्यन्तु ।

.कोल-क्सस-६ .कोल-स्म-३

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

प्रतिक्रियाशील-विच्छेद-बिन्दुषु स्तम्भ-समाशोधनस्य अतिरिक्तं, भवन्तः आफ्सेट्, पुश, अथवा पुल्स् रीसेट् कर्तुं शक्नुवन्ति । एतत् जाल उदाहरणे क्रियायां पश्यन्तु .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

नाली निकालें

पङ्क्तितः नालिकाः निष्कासयन्तु तथा च .row-no-guttersवर्गेण सह स्तम्भाः सन्ति।

.कोल-क्सस्-१२ .कोल-मद्-८

.कोल-क्सस्-६ .कोल-मद्-४

.कोल-क्सस्-६

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

स्तम्भों को ऑफसेट करना

.col-md-offset-*क्लास् इत्यस्य उपयोगेन स्तम्भान् दक्षिणदिशि चालयन्तु । एते वर्गाः स्तम्भस्य वाममार्जिनं *स्तम्भैः वर्धयन्ति । यथा - चतुर्णां स्तम्भानां उपरि .col-md-offset-4गच्छति ।.col-md-4

.कोल-मद्-४

.कोल-मद्-४ .कोल-मद्-ऑफसेट्-४

.कोल-मद्-३ .कोल-मद्-ऑफसेट्-३

.कोल-मद्-६ .कोल-मद्-ऑफसेट्-३

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0भवान् वर्गैः सह निम्नजालस्तरात् अपि offsets अधिलिखितुं शक्नोति ।

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

नीडं स्तम्भाः

पूर्वनिर्धारितजालेन सह स्वस्य सामग्रीं नेस्ट् कर्तुं, विद्यमानस्य स्तम्भस्य अन्तः नूतनं स्तम्भसमूहं .rowच योजयन्तु । नेस्टेड् पङ्क्तयः स्तम्भसमूहः समाविष्टः भवेत् यत् १२ वा न्यूनतरं वा योजयति (भवतः सर्वेषां १२ उपलब्धानां स्तम्भानां उपयोगः आवश्यकः नास्ति) ।.col-sm-*.col-sm-*

स्तर 1: .col-sm-9

स्तर 2: .col-xs-8 .col-sm-6

स्तर 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

स्तम्भ आदेश

अस्माकं अन्तःनिर्मितजालस्तम्भानां क्रमं .col-md-push-*तथा .col-md-pull-*परिवर्तकवर्गैः सह सहजतया परिवर्तयन्तु ।

.कोल-मद्-९ .कोल-मद्-पुश-३

.कोल-मद्-३ .कोल-मद्-पुल-९

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

कम मिक्सिन एवं चर

द्रुतविन्यासानां कृते पूर्वनिर्मितजालवर्गाणां अतिरिक्तं , Bootstrap इत्यत्र स्वस्य सरलस्य, शब्दार्थविन्यासस्य शीघ्रं जननार्थं Less चराः, mixins च समाविष्टाः सन्ति ।

चर

चराः स्तम्भानां संख्यां, नालीविस्तारं, माध्यमप्रश्नबिन्दुं च निर्धारयन्ति यस्मिन् प्लवमानस्तम्भान् आरभ्यत इति । उपरि दस्तावेजितानां पूर्वनिर्धारितजालवर्गाणां जननार्थं वयं एतानि उपयुञ्ज्महे, तथैव अधः सूचीकृतानां custom mixins कृते अपि ।

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

मिक्सिन्

व्यक्तिगतजालस्तम्भानां कृते शब्दार्थ CSS जनयितुं जालचरैः सह मिश्रितानां उपयोगः भवति ।

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

उदाहरण प्रयोग

भवान् चरं स्वस्य कस्टम् मूल्येषु परिवर्तयितुं शक्नोति, अथवा केवलं तेषां पूर्वनिर्धारितमूल्यैः सह mixins इत्यस्य उपयोगं कर्तुं शक्नोति । अत्र पूर्वनिर्धारितसेटिंग्स् इत्यस्य उपयोगेन द्विस्तम्भविन्यासं निर्मातुं उदाहरणम् अस्ति यस्य मध्ये अन्तरं भवति ।

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

शीर्षकाणि

सर्वाणि HTML शीर्षकाणि, <h1>माध्यमेन <h6>, उपलभ्यन्ते । .h1through .h6classes अपि उपलभ्यन्ते, यतः यदा भवान् शीर्षकस्य font styling मेलयितुम् इच्छति परन्तु तदपि भवतः पाठः inline प्रदर्शितः भवेत् इति इच्छति ।

ह1. बूटस्ट्रैप शीर्षक	अर्धबोल्ड 36px
ह२. बूटस्ट्रैप शीर्षक	अर्धबोल्ड 30px
ह३. बूटस्ट्रैप शीर्षक	अर्धबोल्ड 24px
ह४ । बूटस्ट्रैप शीर्षक	अर्धबोल्ड 18px
ह५ । बूटस्ट्रैप शीर्षक	अर्धबोल्ड 14px
ह६ । बूटस्ट्रैप शीर्षक	अर्धबोल्ड 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>सामान्यटैग् अथवा .smallवर्गेण सह कस्मिन् अपि शीर्षके लघुतरं, गौणतरं पाठं रचयन्तु ।

ह1. बूटस्ट्रैप शीर्षक गौण पाठ

ह२. बूटस्ट्रैप शीर्षक गौण पाठ

ह३. बूटस्ट्रैप शीर्षक गौण पाठ

ह४ । बूटस्ट्रैप शीर्षक गौण पाठ

ह५ । बूटस्ट्रैप शीर्षक गौण पाठ

ह६ । बूटस्ट्रैप शीर्षक गौण पाठ

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

शरीर प्रतिलिपि

Bootstrap इत्यस्य वैश्विकं पूर्वनिर्धारितं 14pxfont-size अस्ति , यस्य a 1.428 अस्ति । एतत् सर्वेषु च परिच्छेदेषु प्रयुक्तम् । तदतिरिक्तं, (अनुच्छेदाः) स्वस्य गणितस्य रेखा-उच्चतायाः (पूर्वनिर्धारितरूपेण 10px) आर्धस्य अधः मार्जिनं प्राप्नुवन्ति ।line-height<body><p>

Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. नुल्लम इद डोलोर इद निभ उल्ट्रिसीस वेहिकुला।

सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Donec ullamcorper nulla गैर metus नीलामी fringilla. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. Donec ullamcorper nulla गैर metus नीलामी fringilla.

Maecenas sed diam eget risus varius blandit बैठना amet गैर मैग्ना. Donec id elit नॉन मि पोर्टा ग्रेविडा एट एगेट मेटस. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग.

<p>...</p>

सीसा शरीर प्रतिलिपि

योजयित्वा एकं अनुच्छेदं विशिष्टं कुरुत .lead.

Vivamus sagittis lacus vel augue laoreet रटरुम फौसिबस डोलोर नीलामी. Duis mollis, est गैर commodo luctus.

<p class="lead">...</p>

कम के साथ निर्मित

मुद्रणमापनं चरयोः Less चरयोः आधारेण भवति ।less : @font-size-baseand @line-height-base. प्रथमं सम्पूर्णे प्रयुक्तं आधार-फन्ट-आकारं द्वितीयं च आधार-रेखा-उच्चता । वयं तान् चरानाम् उपयोगं कुर्मः तथा च अस्माकं सर्वेषां प्रकारस्य मार्जिन्स्, पैडिंग्स्, रेखा-उच्चताः च निर्मातुं किञ्चित् सरलं गणितं च । तान् अनुकूलितं कुर्वन्तु तथा च Bootstrap अनुकूलितं भवति।

इनलाइन पाठ तत्व

चिह्नित पाठ

अन्यस्मिन् सन्दर्भे तस्य प्रासंगिकतायाः कारणेन पाठस्य रन इत्यस्य प्रकाशनार्थं <mark>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

भवन्तः mark tag इत्यस्य उपयोगं कर्तुं शक्नुवन्ति to...प्रमुखाकृष्टिपाठ।

You can use the mark tag to <mark>highlight</mark> text.

विलोपितः पाठः

विलोपितानां पाठखण्डानां सूचनाय <del>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

~~एषा पाठपङ्क्तिः विलोपितपाठत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।~~

<del>This line of text is meant to be treated as deleted text.</del>

पाठ के माध्यम से प्रहार करें

पाठस्य खण्डान् सूचयितुं ये पुनः प्रासंगिकाः न सन्ति तेषां कृते <s>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

~~एषा पाठपङ्क्तिः न पुनः समीचीना इति व्यवहर्तुं अभिप्रेता ।~~

<s>This line of text is meant to be treated as no longer accurate.</s>

सम्मिलितः पाठः

दस्तावेजे परिवर्तनं सूचयितुं <ins>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

एषा पाठपङ्क्तिः दस्तावेजे अतिरिक्तरूपेण व्यवहर्तुं अभिप्रेता अस्ति ।

<ins>This line of text is meant to be treated as an addition to the document.</ins>

रेखांकित पाठ

पाठस्य रेखांकनार्थं <u>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

एषा पाठपङ्क्तिः रेखांकितवत् प्रतिपादयिष्यति

<u>This line of text will render as underlined</u>

हल्केन शैल्याः सह HTML इत्यस्य पूर्वनिर्धारित-बोध-टैग्-इत्यस्य उपयोगं कुर्वन्तु ।

लघु पाठः

पाठस्य अन्तःरेखायाः अथवा खण्डानां बलंहीनं कर्तुं, <small>पाठं मातापितृणां आकारस्य ८५% सेट् कर्तुं टैग् इत्यस्य उपयोगं कुर्वन्तु । font-sizeहेडिंग् एलिमेण्ट्स् नेस्टेड् एलिमेण्ट्स् कृते स्वकीयं प्राप्नुवन्ति <small>।

.smallभवान् वैकल्पिकरूपेण कस्यचित् स्थाने with इत्यनेन सह अन्तःरेखातत्त्वस्य उपयोगं कर्तुं शक्नोति <small>।

एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।

<small>This line of text is meant to be treated as fine print.</small>

विक्रान्तः

गुरुतरेण font-weight इत्यनेन सह पाठस्य स्निपेट् इत्यस्य उपरि बलं दातुं ।

निम्नलिखित पाठस्य स्निपेट् गाढपाठरूपेण प्रतिपादितम् अस्ति |

<strong>rendered as bold text</strong>

इटालिकाः

इटालिकयुक्तं पाठस्य खण्डं बोधयितुं ।

निम्नलिखित पाठस्य स्निपेट् इटालिककृतपाठरूपेण प्रतिपादितम् अस्ति |

<em>rendered as italicized text</em>

वैकल्पिक तत्व

उपयोगं कर्तुं निःशङ्कं भवन्तु <b>तथा <i>च HTML5 मध्ये। <b>अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।

संरेखण वर्ग

पाठसंरेखणवर्गैः सह घटकेषु पाठं सहजतया पुनः संरेखयन्तु ।

वाम संरेखित पाठ।

केन्द्र संरेखित पाठ।

दक्षिण संरेखित पाठ।

न्याय्यः पाठः ।

न वेष्ट पाठः।

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

परिवर्तनवर्गाः

पाठबृहत्करणवर्गैः सह घटकेषु पाठं परिवर्तयन्तु ।

लघुपाठः ।

उदात्तपाठः ।

दीर्घलेखः पाठः ।

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

संक्षेपाः

<abbr>विस्तारितं संस्करणं होवर इत्यत्र दर्शयितुं संक्षिप्तनामानां संक्षिप्तनामानां च कृते HTML इत्यस्य तत्त्वस्य शैलीबद्धं कार्यान्वयनम् । विशेषतायुक्तेषु संक्षिप्तरूपेषु titleहल्के बिन्दुयुक्ता अधः सीमा भवति तथा च होवर इत्यत्र सहायताकर्सरः भवति, यत् होवर इत्यत्र अतिरिक्तसन्दर्भं सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः च प्रदाति

मूलसंक्षेपः

विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .

<abbr title="attribute">attr</abbr>

आद्यत्वम्

.initialismकिञ्चित् लघु font-size कृते संक्षिप्तरूपेण योजयन्तु ।

HTML इत्येतत् स्लाइस्ड् ब्रेड् इत्यस्मात् उत्तमं वस्तु अस्ति।

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

सम्बोधयति

निकटतम पूर्वज या सम्पूर्ण कार्य निकाय हेतु सम्पर्क जानकारी प्रस्तुत करें। सर्वाणि पङ्क्तयः <br>.

ट्विटर, इंक
1355 मार्केट स्ट्रीट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890

पूर्ण नाम
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ब्लॉककोट्स्

भवतः दस्तावेजस्य अन्तः अन्यस्मात् स्रोतः सामग्रीखण्डानां उद्धरणार्थं ।

पूर्वनिर्धारितं blockquote

<blockquote>उद्धरणरूपेण किमपि HTML परितः वेष्टयन्तु । सीधा उद्धरणार्थं वयं एकं <p>.

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ब्लॉककोट विकल्प

एकस्मिन् मानके सरलविविधतायाः कृते शैली सामग्री च परिवर्तनं भवति <blockquote>.

स्रोतस्य नामकरणम्

<footer>स्रोतस्य परिचयार्थं a योजयन्तु । स्रोतकार्यस्य नाम <cite>.

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

वैकल्पिक प्रदर्शनम्

.blockquote-reverseदक्षिण-संरेखित-सामग्री-सहितस्य blockquote कृते योजयन्तु ।

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः

<blockquote class="blockquote-reverse">
  ...
</blockquote>

सूचीति

अक्रमितम्

यस्मिन् द्रव्ये क्रमस्य स्पष्टतया महत्त्वं नास्ति तस्य सूची ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा amet एरत nunc
एगेट पोर्टिटोर लोरेम्

<ul>
  <li>...</li>
</ul>

आदेशित

यस्मिन् द्रव्ये क्रमः स्पष्टतया महत्त्वपूर्णं करोति तस्य सूची।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा amet एरत nunc
एगेट पोर्टिटोर लोरेम्

<ol>
  <li>...</li>
</ol>

अशैली

list-styleसूचीवस्तूनाम् (केवलं तत्कालीनबालानां) पूर्वनिर्धारितं वाममार्जिनं च निष्कासयन्तु । इदं केवलं तत्कालीनबालसूचीवस्तूनाम् एव प्रवर्तते , अर्थात् भवद्भिः कस्यापि नेस्टेड् सूचीनां कृते अपि वर्गं योजयितुं आवश्यकता भविष्यति ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा amet एरत nunc
एगेट पोर्टिटोर लोरेम्

<ul class="list-unstyled">
  <li>...</li>
</ul>

इनलाइन

सर्वाणि सूचीवस्तूनि एकस्मिन् पङ्क्तौ स्थापयन्तु with display: inline-block;and some light padding.

लोरेम् इप्सुम्
Phasellus iaculis इति
नुल्ला वोलुत्पात

<ul class="list-inline">
  <li>...</li>
</ul>

वर्णनम्‌

पदानाम् सूची तेषां सम्बद्धवर्णनैः सह ।

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
यूइस्मोदः: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.; Donec id elit नॉन मि पोर्टा ग्रेविडा एट एगेट मेटस.
मलेसुअदा पोर्टा: Etiam porta सेम malesuada मैग्ना मोलिस euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

क्षैतिज वर्णन

<dl>पार्श्वतः पार्श्वतः पङ्क्तिबद्धरूपेण पदानि वर्णनानि च कुर्वन्तु । पूर्वनिर्धारित s इव स्तम्भितं आरभ्यते <dl>, परन्तु यदा navbar विस्तारयति तदा एतानि कुर्वन्तु ।

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
यूइस्मोदः: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.; Donec id elit नॉन मि पोर्टा ग्रेविडा एट एगेट मेटस.
मलेसुअदा पोर्टा: Etiam porta सेम malesuada मैग्ना मोलिस euismod.
फेलिस euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor मौरिस condimentum निभ, उत fermentum massa justo बैठो amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

स्वतः च्छेदनम्

क्षैतिजवर्णनसूचिकाः तान् पदान् च्छेदयिष्यन्ति ये वामस्तम्भे युक्तं कर्तुं अतिदीर्घाः सन्ति text-overflow। संकीर्णतरेषु viewports मध्ये, ते पूर्वनिर्धारित stacked layout मध्ये परिवर्तयिष्यन्ति ।

इनलाइन

कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>।

यथा - <section>इनलाइन इति वेष्टनीयम् ।

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

उपयोगकर्ता इनपुट

<kbd>सामान्यतया कीबोर्डद्वारा प्रविष्टं निवेशं सूचयितुं the इत्यस्य उपयोगं कुर्वन्तु ।

निर्देशिकाः परिवर्तयितुं cdतदनन्तरं निर्देशिकायाः नाम टङ्कयन्तु ।
सेटिंग्स् सम्पादयितुं, नुदन्तु ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

मूलखण्डः

<pre>कोडस्य बहुपङ्क्तयः कृते उपयुज्यताम् । सम्यक् प्रतिपादनार्थं कोडमध्ये किमपि कोणकोष्ठकं अवश्यं पलायन्तु ।

<p>अत्र नमूना पाठः...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

भवान् वैकल्पिकरूपेण .pre-scrollableवर्गं योजयितुं शक्नोति, यत् 350px इत्यस्य max-height सेट् करिष्यति तथा च y-axis स्क्रॉलबारं प्रदास्यति ।

चर

चर-सूचनार्थं <var>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

y = म x + ख

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

नमूना आउटपुट

प्रोग्राम् तः नमूना आउटपुट् ब्लॉक् सूचयितुं <samp>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

अयं पाठः सङ्गणकप्रोग्रामात् नमूनानिर्गमरूपेण व्यवहर्तुं अभिप्रेतः ।

<samp>This text is meant to be treated as sample output from a computer program.</samp>

मूलभूत उदाहरणम्

.tableमूलभूत-स्टाइलिंग्-कृते—लघु-गद्दी-करणं तथा केवलं क्षैतिज-विभाजकाः— कस्मिन् अपि आधार-वर्गं योजयन्तु <table>। इदं सुपर अनावश्यकं प्रतीयते, परन्तु अन्येषां प्लगिन्स् कृते सारणीनां व्यापकं उपयोगं दृष्ट्वा यथा कैलेण्डर् तथा तिथिपिकर्, वयं अस्माकं कस्टम् सारणीशैल्याः पृथक् कर्तुं विकल्पितवन्तः।

वैकल्पिक सारणी कैप्शन।
# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

<table class="table">
  ...
</table>

धारीदाराः पङ्क्तयः

.table-stripedअन्तः कस्यापि सारणीपङ्क्तौ ज़ेबरा-पट्टिकां योजयितुं उपयुज्यताम् <tbody>।

क्रॉस-ब्राउजर संगतता

पट्टिकायुक्तानि सारणीः :nth-childCSS चयनकर्ताद्वारा शैलीकृताः भवन्ति, यत् Internet Explorer 8 मध्ये उपलब्धं नास्ति ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

<table class="table table-striped">
  ...
</table>

सीमायुक्ता सारणी

.table-borderedसारणीयाः कोष्ठकानां च सर्वेषु पार्श्वेषु सीमानां कृते योजयन्तु ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

<table class="table table-bordered">
  ...
</table>

पङ्क्तयः मंडराताः

.table-hoverएकस्य अन्तः सारणीपङ्क्तिषु एकं होवरस्थितिं सक्षमीकरणाय योजयन्तु <tbody>।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	ल्यारी	the Bird इति	@ twitter इति

<table class="table table-hover">
  ...
</table>

सघन तालिका

.table-condensedसेल पैडिंग को आधे में काटकर तालिकाओं को अधिक संकुचित बनाने के लिए जोड़ें ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	उपयोक्तृनाम
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-condensed">
  ...
</table>

सन्दर्भवर्गाः

सारणीपङ्क्तयः अथवा व्यक्तिगतकोशिकाः वर्णयितुं सन्दर्भवर्गाणां उपयोगं कुर्वन्तु ।

श्रेणी	वर्णनम्‌
`.active`	पङ्क्तिविशेषे वा कोष्ठके वा होवरवर्णं प्रयोजयति
`.success`	सफलं सकारात्मकं वा कार्यं सूचयति
`.info`	तटस्थं सूचनात्मकं परिवर्तनं वा क्रिया वा सूचयति
`.warning`	एकं चेतावनी सूचयति यस्य विषये ध्यानस्य आवश्यकता भवेत्
`.danger`	खतरनाकं सम्भाव्यं वा नकारात्मकं कार्यं सूचयति

# .	स्तम्भशीर्षकम्	स्तम्भशीर्षकम्	स्तम्भशीर्षकम्
१	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
२	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
३	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
४	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
५	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
६	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
७	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
८	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
९	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

सारणीपङ्क्तौ अथवा व्यक्तिगतकोष्ठे अर्थं योजयितुं वर्णस्य उपयोगः केवलं दृश्यसूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर् इत्यस्मै – न प्रसारितं भविष्यति सुनिश्चितं कुर्वन्तु यत् वर्णेन सूचिता सूचना सामग्रीतः एव स्पष्टा भवति (सम्बद्धसारणीपङ्क्तौ/कोष्ठे दृश्यमानः पाठः), अथवा वैकल्पिकसाधनेन समाविष्टः भवति, यथा .sr-onlyवर्गेण सह निगूढः अतिरिक्तपाठः

प्रतिक्रियाशील सारणी

लघुयन्त्रेषु (768px इत्यस्य अधः) क्षैतिजरूपेण स्क्रॉलं कर्तुं किमपि .tablein लपेट्य प्रतिक्रियाशीलसारणीः रचयन्तु । .table-responsive768px विस्तारात् अधिकं किमपि दृष्ट्वा एतेषु सारणीषु किमपि भेदं न पश्यन्ति ।

ऊर्ध्वाधर क्लिपिंग/ट्रंकेशन

प्रतिक्रियाशीलसारणीः , इत्यस्य उपयोगं कुर्वन्ति overflow-y: hidden, यत् सारणीयाः अधः वा उपरितनधारात् परं गच्छन्तीनां सामग्रीं क्लिप् करोति । विशेषतः, एतेन ड्रॉप्-डाउन-मेनू-इत्यादीनि तृतीय-पक्ष-विजेट्-इत्यादीनि च क्लिप्-ऑफ् कर्तुं शक्यते ।

Firefox तथा फील्डसेट्स्

Firefox इत्यस्य किञ्चित् अटपटे फील्डसेट् स्टाइलिंग् अस्ति widthयत् प्रतिक्रियाशीलसारणीयां बाधां जनयति । इदं Firefox-विशिष्टं हैकं विना अधिलिखितुं न शक्यते यत् वयं Bootstrap मध्ये न प्रदामः:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

अधिकविवरणार्थं, एतत् Stack Overflow उत्तरं पठन्तु ।

# .	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक
१	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
२	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
३	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक

# .	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक
१	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
२	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
३	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

मूलभूत उदाहरणम्

व्यक्तिगतरूपनियन्त्रणानि स्वयमेव किञ्चित् वैश्विकशैलिंगं प्राप्नुवन्ति । सह सर्वे पाठ्य <input>, <textarea>, <select>तत्त्वानि पूर्वनिर्धारितरूपेण .form-controlसेट् भवन्ति । इष्टतम-अन्तरालस्य कृते width: 100%;लेबल्-नियन्त्रणानि च लपेटयन्तु ।.form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

रूपसमूहान् निवेशसमूहैः सह न मिश्रयन्तु

रूपसमूहान् प्रत्यक्षतया निवेशसमूहैः सह न मिश्रयन्तु . अपि तु, इनपुट् समूहं form group इत्यस्य अन्तः नेस्ट् कुर्वन्तु ।

इनलाइन रूप

वाम-संरेखित-अन्तर्गत-अवरोध-नियन्त्रणानां कृते स्वस्य प्रपत्रे योजयन्तु .form-inline(यत् एकं भवितुम् आवश्यकं नास्ति ) । एतत् केवलं दृश्यपोर्ट्-अन्तर्गत-प्रपत्रेषु प्रवर्तते ये न्यूनातिन्यूनं 768px विस्तृताः सन्ति ।<form>

कस्टम् विस्तारस्य आवश्यकता भवेत्

Bootstrap मध्ये inputs तथा selects width: 100%;पूर्वनिर्धारितरूपेण प्रयुक्ताः सन्ति । inline forms इत्यस्य अन्तः वयं तत् रीसेट् कुर्मः width: auto;येन बहुविधानि नियन्त्रणानि एकस्मिन् रेखायां निवसितुं शक्नुवन्ति । भवतः विन्यासस्य आधारेण अतिरिक्त-अनुकूलित-विस्तारस्य आवश्यकता भवितुम् अर्हति ।

सदैव लेबल् योजयन्तु

यदि भवान् प्रत्येकं निवेशस्य कृते लेबलं न समावेशयति तर्हि स्क्रीन रीडर्-भ्यः भवतः प्रपत्रेषु समस्या भविष्यति। एतेषां inline forms कृते, भवान् .sr-onlyclass इत्यस्य उपयोगेन labels गोपयितुं शक्नोति । सहायकप्रौद्योगिकीनां कृते लेबलं प्रदातुं अन्ये वैकल्पिकविधयः सन्ति, यथा aria-label, aria-labelledbyअथवा titleविशेषता । यदि एतेषु कश्चन अपि उपस्थितः नास्ति तर्हि स्क्रीन रीडर्-जनाः placeholderविशेषतायाः उपयोगस्य आश्रयं कर्तुं शक्नुवन्ति, यदि वर्तते, परन्तु placeholderअन्येषां लेबलिंग-विधिनाम् प्रतिस्थापनरूपेण of इत्यस्य उपयोगः न सल्लाहितः इति ज्ञातव्यम्

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

क्षैतिज रूप

रूपे योजयित्वा क्षैतिजविन्यासे रूपनियन्त्रणानां लेबल्-समूहान् च संरेखयितुं Bootstrap इत्यस्य पूर्वनिर्धारितजालवर्गाणां उपयोगं कुर्वन्तु .form-horizontal(यत् एकं भवितुम् आवश्यकं नास्ति <form>) । .form-groupएवं कृत्वा s जालपङ्क्तयः इव व्यवहारं कर्तुं परिवर्तते , अतः .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

समर्थित नियंत्रण

उदाहरणरूपविन्यासे समर्थितानां मानकरूपनियन्त्रणानां उदाहरणानि ।

इनपुट्

अधिकांशतः सामान्य रूप नियंत्रण, पाठ-आधारित इनपुट क्षेत्र। सर्वेषां HTML5 प्रकाराणां समर्थनं समाविष्टम् अस्ति: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, तथा च color।

टाइप घोषणा आवश्यक है

इनपुट् केवलं पूर्णतया शैलीकृताः भविष्यन्ति यदि तेषां typeसम्यक् घोषितम् अस्ति।

<input type="text" class="form-control" placeholder="Text input">

इनपुट समूह

कस्यचित् पाठ-आधारितस्य पूर्वं/पश्चात् एकीकृतपाठं वा बटनं वा योजयितुं <input>, इनपुट् सम��हघटकं पश्यन्तु ।

पाठक्षेत्रम्

रूपनियन्त्रणं यत् पाठस्य बहुपङ्क्तयः समर्थयति। rowsआवश्यकतानुसारं विशेषतां परिवर्तयन्तु ।

<textarea class="form-control" rows="3"></textarea>

चेकबॉक्स एवं रेडियो

चेकबॉक्स् सूचीयां एकं वा अनेकं वा विकल्पं चयनार्थं भवति, रेडियो तु अनेकेभ्यः एकं विकल्पं चयनार्थं भवति ।

अक्षम चेकबॉक्स तथा रेडियो समर्थित हैं, परन्तु माता-पिता के होवर पर "अनुमत" कर्सर प्रदान करने के लिए <label>, आप मूल में .disabledवर्ग को जोड़ना होगा .radio, .radio-inline, , .checkboxया.checkbox-inline

पूर्वनिर्धारितं (स्तम्भितम्) .

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

इनलाइन चेकबॉक्स एवं रेडियो

एकस्मिन् एव रेखायां दृश्यमानानां नियन्त्रणानां कृते चेकबॉक्सानाम् अथवा रेडियोनां श्रृङ्खलायां .checkbox-inlineor क्लास् इत्यस्य उपयोगं कुर्वन्तु ।.radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

लेबल पाठं विना चेकबॉक्स तथा रेडियो

यदि भवतः अन्तः पाठः नास्ति तर्हि <label>निवेशः यथा भवान् अपेक्षते तथा स्थितः भवति । सम्प्रति केवलं नॉन-इनलाइन् चेकबॉक्स् रेडियो च कार्यं करोति । सहायकप्रौद्योगिकीनां कृते अद्यापि किञ्चित् प्रकारस्य लेबलं प्रदातुं स्मर्यताम् (उदाहरणार्थं, उपयोगः aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

चयनं करोति

ध्यानं कुर्वन्तु यत् अनेकेषु देशीयचयनमेनूषु-अर्थात् Safari तथा Chrome इत्यत्र—गोलकोणानि सन्ति ये गुणद्वारा परिवर्तयितुं न शक्यन्ते border-radius।

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>विशेषतायुक्तानां नियन्त्रणानां कृते multiple, बहुविकल्पाः पूर्वनिर्धारितरूपेण दर्शिताः भवन्ति ।

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

स्थिर नियंत्रण

यदा भवन्तः प्रपत्रस्य अन्तः प्रपत्रलेबलस्य पार्श्वे साधारणपाठं स्थापयितुं इच्छन्ति तदा a .form-control-staticइत्यत्र वर्गस्य उपयोगं कुर्वन्तु <p>।

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

फोकस अवस्था

outlineवयं केषुचित् रूपनियन्त्रणेषु पूर्वनिर्धारितशैल्याः निष्कास्य box-shadowतस्य स्थाने a इत्यस्य कृते प्रयोजयामः :focus।

डेमो`:focus` राज्य

उपरिष्टात् उदाहरणनिवेशः अस्माकं दस्तावेजीकरणे कस्टम् शैल्याः उपयोगं करोति यत् :focusa .form-control.

अक्षम अवस्था

disabledउपयोक्तृपरस्परक्रियाः निवारयितुं इनपुट् मध्ये boolean विशेषतां योजयन्तु । अक्षमनिवेशाः लघुतराः दृश्यन्ते तथा च not-allowedकर्सरं योजयन्ति ।

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

अक्षम क्षेत्रसमूहाः

एकदा एव अन्तः सर्वाणि नियन्त्रणानि निष्क्रियं disabledकर्तुं a इत्यत्र विशेषतां योजयन्तु ।<fieldset><fieldset>

की लिंक कार्यक्षमता के बारे में चेतावनी`<a>`

पूर्वनिर्धारितरूपेण, ब्राउजर्-इत्यनेन a इत्यस्य अन्तः सर्वाणि देशी-रूप-नियन्त्रणानि ( <input>, तत्त्वानि च) <select>अक्षमरूपेण व्यवहरन्ति, तेषु कीबोर्ड-मूषक-योः परस्परक्रियाः निवारयिष्यन्ति । परन्तु यदि भवतः रूपे तत्त्वानि अपि सन्ति तर्हि एतेभ्यः केवलं . यथा बटन्स् कृते अक्षमस्थितेः विषये विभागे (विशेषतः च एंकर-तत्त्वानां कृते उपखण्डे) उल्लेखितम्, एतत् CSS गुणम् अद्यापि मानकीकृतं नास्ति तथा च Opera 18 तथा अधः, अथवा Internet Explorer 11 मध्ये पूर्णतया समर्थितं नास्ति, तथा च विजयी अभवत् 't कीबोर्ड-उपयोक्तारः एतानि लिङ्कानि केन्द्रीकृत्य सक्रियीकरणं वा कर्तुं शक्नुवन्ति इति निवारयति । अतः सुरक्षितं भवितुं, एतादृशान् लिङ्कान् निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् इत्यस्य उपयोगं कुर्वन्तु ।<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

क्रॉस-ब्राउजर संगतता

यदा Bootstrap एताः शैल्याः सर्वेषु ब्राउजर् मध्ये प्रयोक्ष्यति, Internet Explorer 11 अपि च अधः disableda इत्यत्र विशेषतां पूर्णतया समर्थनं न कुर्वन्ति <fieldset>। एतेषु ब्राउजर्-मध्ये क्षेत्रसमूहं निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् उपयुज्यताम् ।

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

केवलं पठनीयं राज्यम्

readonlyइनपुट् इत्यस्य मूल्यस्य परिवर्तनं निवारयितुं निवेशस्य उपरि boolean विशेषतां योजयन्तु । केवलं पठनीयनिवेशाः लघुतराः दृश्यन्ते (अक्षमनिवेशानां इव), परन्तु मानककर्सरं धारयन्तु ।

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

सहायता पाठ

रूपनियन्त्रणानां कृते अवरोधस्तरीयसहायतापाठः ।

सहायतापाठं रूपनियन्त्रणैः सह सम्बद्धं करणम्

aria-describedbyसहायतापाठः विशेषतायाः उपयोगेन सह सम्बद्धेन रूपनियन्त्रणेन सह स्पष्टतया सम्बद्धः भवेत् । एतेन सुनिश्चितं भविष्यति यत् सहायकप्रौद्योगिकीः – यथा स्क्रीनरीडर् – उपयोक्ता नियन्त्रणं केन्द्रीक्रियते वा प्रविशति वा तदा एतत् सहायकपाठं घोषयिष्यन्ति।

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

प्रमाणीकरणं कथयति

बूटस्ट्रैप् इत्यत्र प्रपत्रनियन्त्रणेषु त्रुटिः, चेतावनी, सफलतास्थितयः च प्रमाणीकरणशैल्याः समाविष्टाः सन्ति । उपयोगाय, मूलतत्त्वे .has-warning, .has-error, अथवा योजयन्तु । .has-successतस्य तत्त्वस्य अन्तः कोऽपि .control-label, .form-control, तथा .help-blockच प्रमाणीकरणशैल्याः प्राप्स्यति ।

सहायक प्रौद्योगिकियों एवं वर्णअन्ध उपयोगकर्ताओं को सत्यापन अवस्था को संप्रेषित करना

एतासां प्रमाणीकरणशैल्याः उपयोगेन रूपनियन्त्रणस्य स्थितिं सूचयितुं केवलं दृश्यं, वर्ण-आधारितं सूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः - यथा स्क्रीन-रीडर् -भ्यः - अथवा वर्ण-अन्ध-उपयोक्तृभ्यः न प्रसारितं भविष्यति

राज्यस्य वैकल्पिकसूचकः अपि प्रदत्तः इति सुनिश्चितं कुर्वन्तु। उदाहरणार्थं, भवान् रूपनियन्त्रणस्य <label>पाठे एव स्थितिविषये संकेतं समावेशयितुं शक्नोति (यथा निम्नलिखितसङ्केत-उदाहरणे भवति), एकं Glyphicon.sr-only समावेशयितुं शक्नोति ( वर्गस्य उपयोगेन समुचितवैकल्पिकपाठेन सह - Glyphicon उदाहरणानि पश्यन्तु ), अथवा एकं अतिरिक्त सहायता पाठ अवरुद्ध। विशेषतः सहायकप्रौद्योगिकीनां कृते अमान्यरूपनियन्त्रणानि अपि aria-invalid="true"विशेषतां नियुक्तुं शक्यन्ते ।

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

वैकल्पिक चिह्नों के साथ

भवन्तः वैकल्पिकप्रतिक्रियाचिह्नानि अपि योजयितुं शक्नुवन्ति तथा च दक्षिणचिह्नं योजयितुं शक्नुवन्ति .has-feedback।

प्रतिक्रियाचिह्नानि केवलं पाठतत्त्वैः सह कार्यं कुर्वन्ति <input class="form-control">।

चिह्नानि, लेबलानि, निवेशसमूहानि च

लेबलरहितनिवेशानां कृते तथा दक्षिणभागे ऐड- ऑनयुक्तानां निवेशसमूहानां कृते प्रतिक्रियाचिह्नानां मैनुअल्स्थापनम् आवश्यकम् अस्ति । सुलभताकारणात् सर्वेषां निवेशानां कृते लेबल् प्रदातुं भवान् दृढतया प्रोत्साहितः अस्ति। यदि भवान् लेबल्-प्रदर्शनं निवारयितुम् इच्छति तर्हि .sr-onlyवर्गेन सह तान् गोपयतु । यदि भवन्तः लेबल् विना अवश्यं कुर्वन्ति तर्हि topप्रतिक्रियाचिह्नस्य मूल्यं समायोजयन्तु । इनपुट् समूहानां कृते, rightस्वस्य एडॉन् इत्यस्य विस्तारस्य आधारेण मूल्यं समुचितपिक्सेलमूल्ये समायोजयन्तु ।

सहायकप्रौद्योगिकीभ्यः चिह्नस्य अर्थं प्रसारयन्

सहायकप्रौद्योगिकयः – यथा स्क्रीनरीडर् – चिह्नस्य अर्थं सम्यक् प्रसारयन्ति इति सुनिश्चित्य, अतिरिक्तगुप्तपाठः वर्गेण सह समाविष्टः भवेत् तथा च स्पष्टतया तस्य उपयोगेन सह .sr-onlyसम्बद्धेन रूपनियन्त्रणेन सह सम्बद्धः भवेत् aria-describedbyवैकल्पिकरूपेण अर्थः (उदाहरणार्थं पाठप्रविष्टिक्षेत्रविशेषस्य चेतावनी अस्ति इति तथ्यम्) वास्तविकस्य पाठस्य परिवर्तनम् इत्यादिना अन्येन कस्मिंश्चित् रूपेण प्रसारितं भवति इति सुनिश्चितं कुर्वन्तु<label> सह सम्बद्धस्य वास्तविकस्य पाठस्य परिवर्तनम्

यद्यपि निम्नलिखित उदाहरणेषु पूर्वमेव पाठे एव स्वस्वरूपनियन्त्रणानां प्रमाणीकरणस्थितेः उल्लेखः कृतः अस्ति तथापि <label>उपर्युक्ता तकनीकः ( .sr-onlyपाठस्य उपयोगेन aria-describedby) दृष्टान्तार्थं समाविष्टा अस्ति

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

क्षैतिज एवं इनलाइन रूपों में वैकल्पिक चिह्न

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

गुप्तलेबलयुक्तानि `.sr-only`वैकल्पिकचिह्नानि

यदि भवान् .sr-onlyकस्यचित् प्रपत्रनियन्त्रणस्य गोपनार्थं वर्गस्य उपयोगं करोति <label>(अन्यलेबलिंगविकल्पानां उपयोगं न कृत्वा, यथा aria-labelविशेषता), तर्हि Bootstrap स्वयमेव एकवारं योजितं कृत्वा चिह्नस्य स्थितिं समायोजयिष्यति

@ .

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

आकार निर्धारण को नियंत्रित करें

इत्यादिवर्गाणां उपयोगेन ऊर्ध्वताः सेट् कुर्वन्तु .input-lg, तथा च जालस्तम्भवर्गाणां उपयोगेन विस्तारं सेट् कुर्वन्तु यथा .col-lg-*.

ऊंचाई आकार निर्धारण

बटन आकारैः सह मेलनं कुर्वन्तः ऊर्ध्वतरं लघुतरं वा रूपनियन्त्रणानि रचयन्तु ।

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

क्षैतिज रूप समूह आकार

शीघ्रं आकारं लेबल् तथा रूपं नियन्त्रणानि अन्तः .form-horizontalयोजयित्वा .form-group-lgअथवा .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

स्तम्भ आकारीकरणम्

इष्टविस्तारं सुलभतया प्रवर्तयितुं जालस्तम्भेषु, अथवा कस्मिन् अपि कस्टम् मूलतत्त्वे निवेशान् लपेटयन्तु ।

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

बटन टैग

<a>, <button>, अथवा <input>तत्वे बटनवर्गाणां उपयोगं कुर्वन्तु ।

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

सन्दर्भविशिष्टप्रयोगः

यद्यपि बटनवर्गाणां उपयोगः on <a>and <button>elements इत्यत्र कर्तुं शक्यते तथापि अस्माकं nav तथा navbar घटकानां अन्तः केवलं <button>elements समर्थिताः सन्ति ।

बटनरूपेण कार्यं कुर्वन्तः लिङ्काः

यदि <a>तत्त्वानि बटनरूपेण कार्यं कर्तुं उपयुज्यन्ते – पृष्ठस्य अन्तः कार्यक्षमतां प्रेरयन्, वर्तमानपृष्ठस्य अन्तः अन्यस्मिन् दस्तावेजे वा खण्डे वा नेविगेट् कर्तुं न अपितु – तेभ्यः अपि उपयुक्तं role="button".

क्रॉस-ब्राउजर प्रतिपादन

उत्तम-अभ्यासत्वेन वयं यदा सम्भवं तदा तत्त्वस्य उपयोगं बहु अनुशंसयामः<button> यत् मेलनं क्रॉस्-ब्राउजर-प्रतिपादनं सुनिश्चितं भवति ।

अन्येषु विषयेषु, Firefox <30 मध्ये एकः दोषः अस्तिline-height यः अस्मान् of -based बटन् सेट् कर्तुं निवारयति <input>, येन ते Firefox इत्यत्र अन्येषां बटन्-उच्चतायाः सम्यक् मेलनं न कुर्वन्ति

विकल्पाः

शीघ्रं शैलीकृतं बटनं निर्मातुं उपलब्धानां बटनवर्गाणां कस्यापि उपयोगं कुर्वन्तु ।

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

बटन् मध्ये अर्थं योजयितुं वर्णस्य उपयोगेन केवलं दृश्यसूचनं प्राप्यते, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर् इत्यादिभ्यः – न प्रसारितं भविष्यति वर्णेन सूचिता सूचना सामग्रीतः एव (बटनस्य दृश्यमानपाठः) स्पष्टा वा भवति, अथवा वैकल्पिकसाधनेन समाविष्टा भवति, यथा .sr-onlyवर्गेण सह निगूढः अतिरिक्तपाठः, इति सुनिश्चितं कुर्वन्तु

आकाराः

आडम्बरपूर्णानि बृहत्तराणि वा लघुतराणि वा बटनानि? अतिरिक्त आकाराणां कृते .btn-lg, .btn-sm, अथवा योजयन्तु ।.btn-xs

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

खण्डस्तरस्य बटन्स् रचयन्तु—ये मातापितृणां पूर्णविस्तारं व्याप्नुवन्ति— , योजयित्वा .btn-block।

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

सक्रिय अवस्था

सक्रियसमये बटन्स् निपीडिताः (कृष्णतरपृष्ठभूमिः, कृष्णतरसीमा, इन्सेट् छाया च) दृश्यन्ते । तत्त्वानां कृते <button>, एतत् मार्गेण क्रियते :active। <a>तत्त्वानां कृते , इत्यनेन सह कृतम् .active। तथापि, सक्रियस्थितिं प्रोग्रामेटिकरूपेण प्रतिकृतिं कर्तुं आवश्यकं चेत् , भवान् s .activeइत्यत्र उपयोक्तुं शक्नोति <button>(विशेषणं च समाविष्टं करोति ) ।aria-pressed="true"

बटन तत्व

:activeइदं छद्मवर्गः इति कारणेन योजयितुं आवश्यकता नास्ति , परन्तु यदि भवन्तः समानं रूपं बलात् कर्तुं प्रवृत्ताः सन्ति तर्हि अग्रे गत्वा योजयन्तु .active।

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

लंगर तत्व

बटन् मध्ये .activeवर्गं योजयन्तु ।<a>

प्राथमिक कड़ी सम्बन्ध

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

अक्षम अवस्था

बटन्स् इत्यनेन पुनः क्षीणं कृत्वा बटन्स् अक्लिक् कर्तुं शक्यन्ते इति कुरुत opacity।

बटन तत्व

बटन्स् मध्ये disabledविशेषतां योजयन्तु ।<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

क्रॉस-ब्राउजर संगतता

disabledयदि भवान् a -इत्यत्र विशेषतां योजयति तर्हि <button>Internet Explorer 9 अपि च अधः पाठं दुष्टेन text-shadow इत्यनेन सह धूसरवर्णं करिष्यति यत् वयं समाधातुं न शक्नुमः ।

लंगर तत्व

बटन् मध्ये .disabledवर्गं योजयन्तु ।<a>

प्राथमिक कड़ी सम्बन्ध

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

वयम् .disabledअत्र उपयोगितावर्गरूपेण उपयुञ्ज्महे, सामान्यवर्गस्य सदृशं .active, अतः उपसर्गस्य आवश्यकता नास्ति ।

लिंक कार्यक्षमता चेतावनी

अयं वर्गः s pointer-events: noneइत्यस्य लिङ्क् कार्यक्षमतां निष्क्रियं कर्तुं प्रयत्नार्थं उपयुज्यते <a>, परन्तु सः CSS गुणः अद्यापि मानकीकृतः नास्ति तथा च Opera 18 तथा अधः, अथवा Internet Explorer 11 मध्ये पूर्णतया समर्थितः नास्ति तदतिरिक्तं, ब्राउजर् मध्ये अपि ये समर्थनं कुर्वन्ति pointer-events: none, कीबोर्ड् नेविगेशनं अप्रभावितं तिष्ठति, अर्थात् दृष्टियुक्ताः कीबोर्ड-उपयोक्तारः सहायक-प्रौद्योगिकी-प्रयोक्तारः च अद्यापि एतानि लिङ्कानि सक्रियीकरणं कर्तुं समर्थाः भविष्यन्ति । अतः सुरक्षितं भवितुं, एतादृशान् लिङ्कान् निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् इत्यस्य उपयोगं कुर्वन्तु ।

प्रतिक्रियाशील छवियाँ

.img-responsiveBootstrap 3 इत्यस्मिन् चित्राणि वर्गस्य परिवर्तनद्वारा प्रतिक्रियाशील-अनुकूलानि कर्तुं शक्यन्ते । इदं प्रवर्तते max-width: 100%;, height: auto;तथा display: block;च प्रतिबिम्बे येन मातापितृतत्त्वे सुन्दरं स्केल भवति ।

.img-responsiveवर्गस्य उपयोगं कुर्वन्ति चित्राणि केन्द्रीक्रियन्ते , .center-blockस्थाने उपयुज्यताम् .text-center। उपयोगविषये अधिकविवरणार्थं helper classes इति विभागं.center-block पश्यन्तु ।

SVG चित्राणि तथा IE 8-10

Internet Explorer 8-10 इत्यस्मिन् SVG इमेज्स् with .img-responsiveअसमानुपातिकरूपेण आकारिताः सन्ति । एतत् समाधातुं width: 100% \9;यत्र आवश्यकं तत्र योजयन्तु । बूटस्ट्रैप् स्वयमेव एतत् न प्रयोजयति यतः अन्येषु चित्रस्वरूपेषु जटिलतां जनयति ।

<img src="..." class="img-responsive" alt="Responsive image">

बिम्ब आकृतियाँ

<img>कस्मिन् अपि परियोजनायां चित्राणि सुलभतया शैलीं कर्तुं कस्मिंश्चित् एलिमेण्ट् मध्ये क्लास्स् योजयन्तु ।

क्रॉस-ब्राउजर संगतता

मनसि धारयतु यत् Internet Explorer 8 इत्यस्मिन् गोलकोणानां समर्थनस्य अभावः अस्ति ।

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

सन्दर्भवर्णाः

मुष्टिभ्यां बलोपयोगितावर्गैः सह वर्णद्वारा अर्थं प्रसारयन्तु। एते लिङ्क् मध्ये अपि प्रयुक्ताः भवितुम् अर्हन्ति तथा च अस्माकं पूर्वनिर्धारितलिङ्कशैल्याः इव होवर इत्यत्र अन्धकारमयं भविष्यन्ति ।

Fusce dapibus, tellus ac cursus commodo, तोर्टोर मौरिस निभ।

Nullam id dolor id nibh ultrices vehicula उत id elit.

Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit बैठना amet गैर मैग्ना.

Etiam porta सेम malesuada मैग्ना मोलिस euismod.

Donec ullamcorper nulla गैर metus नीलामी fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

विशिष्टतायाः विषये व्यवहारः

कदाचित् अन्यस्य चयनकस्य विशिष्टतायाः कारणात् बोधवर्गाः प्रयोक्तुं न शक्यन्ते । अधिकांशतया, पर्याप्तं कार्यपरिहारं भवतः पाठं <span>वर्गेन सह a मध्ये वेष्टयितुं भवति ।

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

अर्थं योजयितुं वर्णस्य उपयोगः केवलं दृश्यसूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर्-इत्यादिभ्यः – न प्रसारितं भविष्यति । वर्णेन सूचिता सूचना सामग्रीतः एव स्पष्टा वा भवति (सन्दर्भवर्णाः केवलं पाठे/चिह्ने पूर्वमेव विद्यमानस्य अर्थस्य सुदृढीकरणाय उपयुज्यन्ते), अथवा वैकल्पिकसाधनेन समाविष्टा भवति, यथा .sr-onlyवर्गेण सह निगूढः अतिरिक्तपाठः, इति सुनिश्चितं कुर्वन्तु .

सन्दर्भ पृष्ठभूमि

सन्दर्भपाठवर्णवर्गाणां सदृशं, कस्यचित् तत्त्वस्य पृष्ठभूमिं कस्यापि सन्दर्भवर्गस्य कृते सहजतया सेट् कुर्वन्तु । Anchor घटकाः hover इत्यत्र अन्धकारं करिष्यन्ति, यथा text classes ।

Nullam id dolor id nibh ultrices vehicula उत id elit.

Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit बैठना amet गैर मैग्ना.

Etiam porta सेम malesuada मैग्ना मोलिस euismod.

Donec ullamcorper nulla गैर metus नीलामी fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

विशिष्टतायाः विषये व्यवहारः

कदाचित् अन्यस्य चयनकस्य विशिष्टतायाः कारणात् सन्दर्भपृष्ठभूमिवर्गाः प्रयोक्तुं न शक्यन्ते । केषुचित् सन्दर्भेषु, पर्याप्तं कार्यपरिहारं भवतः एलिमेण्ट् इत्यस्य सामग्रीं <div>वर्गेण सह a इत्यस्मिन् वेष्टयितुं भवति ।

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

As with contextual colors , सुनिश्चितं कुर्वन्तु यत् वर्णद्वारा प्रसारितः कोऽपि अर्थः अपि विशुद्धरूपेण प्रस्तुतिरूपेण न भवति इति प्रारूपे प्रसारितः भवति।

चिह्न को बंद करें

मोडाल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यनिरोधचिह्नस्य उपयोगं कुर्वन्तु ।

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets इति

ड्रॉपडाउन कार्यक्षमतां दिशां च सूचयितुं carets इत्यस्य उपयोगं कुर्वन्तु । ध्यानं कुर्वन्तु यत् पूर्वनिर्धारितं caret स्वयमेव ड्रॉपअप मेनूषु विपर्यस्तं भविष्यति |

<span class="caret"></span>

त्वरित प्लवते

वर्गेण सह वामभागे दक्षिणे वा तत्त्वं प्लवन्तु । !importantविशिष्टताविषयान् परिहरितुं समाविष्टम् अस्ति। वर्गाः मिक्सिन् रूपेण अपि उपयोक्तुं शक्यन्ते ।

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

केन्द्र सामग्री ब्लॉक

एकं तत्त्वं to display: blockand center via सेट् कुर्वन्तु margin। मिक्सिन एवं वर्ग के रूप में उपलब्ध।

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix इति

मूलतत्त्वेfloat योजयित्वा s सहजतया स्पष्टं कुर्वन्तु . निकोलस गैलाघर् इत्यनेन लोकप्रियं कृत्वा सूक्ष्मक्लियरफिक्स् इत्यस्य उपयोगं करोति । मिक्सिन् इत्यस्य रूपेण अपि उपयोक्तुं शक्यते ।.clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

सामग्रीं दर्शयन् गोपयन् च

and classes इत्यस्य उपयोगेन सह एकं तत्त्वं दर्शयितुं गोपनीयं वा ( screen readers कृते सहितम् ) बाध्यं कुर्वन्तु । एते वर्गाः विशिष्टताविग्रहान् परिहरितुं उपयुञ्जते, यथा द्रुतप्लवकाः . ते केवलं block level toggling कृते एव उपलभ्यन्ते । तेषां प्रयोगः मिक्सिनरूपेण अपि कर्तुं शक्यते ।.show.hidden!important

.hideउपलब्धम् अस्ति, परन्तु तत् सर्वदा स्क्रीन रीडर्स् न प्रभावितं करोति तथा च v3.0.1 तः अप्रचलितम् अस्ति । तस्य स्थाने .hiddenवा प्रयोगः ।.sr-only

अपि च, .invisibleकेवलं तत्त्वस्य दृश्यतां टोग्ल् कर्तुं उपयोक्तुं शक्यते, अर्थात् तस्य displayपरिवर्तनं न भवति तथा च तत्त्वं अद्यापि दस्तावेजस्य प्रवाहं प्रभावितुं शक्नोति ।

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

स्क्रीन रीडर एवं कीबोर्ड नेविगेशन सामग्री

इत्यनेन सह स्क्रीन रीडर् इत्येतत् व्यतिरिक्तं सर्वेभ्यः उपकरणेभ्यः एकं तत्त्वं गोपयन्तु .sr-only। यदा तत् केन्द्रितं भवति तदा पुनः दर्शयितुं .sr-onlyसह संयोजयन्तु (उदा. केवलं कीबोर्ड-उपयोक्त्रा) । सुलभता उत्तमप्रथानां.sr-only-focusable अनुसरणार्थं आवश्यकम् . मिक्सिन् इत्यस्य रूपेण अपि उपयोक्तुं शक्यते ।

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

छवि प्रतिस्थापन

तत्त्वस्य पाठसामग्री .text-hideप्रतिस्थापनार्थं पृष्ठभूमिप्रतिबिम्बेन सहायार्थं वर्गस्य अथवा mixin इत्यस्य उपयोगं कुर्वन्तु ।

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

द्रुततर-मोबाइल-अनुकूल-विकासाय, मीडिया-क्वेरी-माध्यमेन उपकरणेन सामग्रीं दर्शयितुं गोपनार्थं च एतान् उपयोगितावर्गान् उपयुज्यताम् । मुद्रणसमये सामग्रीं टॉग्ल् कर्तुं उपयोगितावर्गाः अपि समाविष्टाः सन्ति ।

एतेषां उपयोगं सीमितरूपेण कर्तुं प्रयतस्व तथा च एकस्यैव साइट् इत्यस्य सर्वथा भिन्नानि संस्करणं निर्मातुं परिहरन्तु । अपि तु प्रत्येकस्य यन्त्रस्य प्रस्तुतीकरणस्य पूरकत्वेन तान् उपयुज्यताम् ।

उपलब्ध कक्षाएँ

viewport breakpoints मध्ये सामग्रीं toggling कर्तुं उपलब्धवर्गाणां एकं वा संयोजनं वा उपयुज्यताम् ।

	अतिरिक्त लघु उपकरणफ़ोन (<768px) .	लघु यन्त्रगोलियाँ (≥768px) .	मध्यमयन्त्राणिडेस्कटॉप्स (≥992px) .	बृहत् यन्त्राणिडेस्कटॉप्स (≥1200px) .
`.visible-xs-*`	दृश्यम्	अदृष्ट	अदृष्ट	अदृष्ट
`.visible-sm-*`	अदृष्ट	दृश्यम्	अदृष्ट	अदृष्ट
`.visible-md-*`	अदृष्ट	अदृष्ट	दृश्यम्	अदृष्ट
`.visible-lg-*`	अदृष्ट	अदृष्ट	अदृष्ट	दृश्यम्
`.hidden-xs`	अदृष्ट	दृश्यम्	दृश्यम्	दृश्यम्
`.hidden-sm`	दृश्यम्	अदृष्ट	दृश्यम्	दृश्यम्
`.hidden-md`	दृश्यम्	दृश्यम्	अदृष्ट	दृश्यम्
`.hidden-lg`	दृश्यम्	दृश्यम्	दृश्यम्	अदृष्ट

v3.2.0 तः, प्रत्येकस्य ब्रेकपॉइण्ट् कृते वर्गाः त्रीणि भिन्नतासु आगच्छन्ति, अधः सूचीकृतस्य .visible-*-*प्रत्येकस्य CSS गुणमूल्यस्य कृते एकः ।display

वर्गों का समूह	CSS इति`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

अतः, अतिरिक्त-लघु ( xs) स्क्रीन् कृते उदाहरणार्थं, उपलब्धाः .visible-*-*वर्गाः सन्ति: .visible-xs-block, .visible-xs-inline, तथा च .visible-xs-inline-block।

वर्गाः .visible-xs, .visible-sm, .visible-md, .visible-lgअपि च सन्ति, परन्तु v3.2.0 तः अप्रचलिताः सन्ति । ते .visible-*-blockटोग्लिंग् <table>-सम्बद्धानां तत्त्वानां अतिरिक्तविशेषप्रकरणानाम् अतिरिक्तं व्यतिरिक्तं , इत्यस्य अनुमानतः समकक्षाः सन्ति ।

कक्षाः मुद्रयन्तु

नियमितप्रतिसादकवर्गाणां सदृशं, मुद्रणार्थं सामग्रीं टोग्ल् कर्तुं एतेषां उपयोगं कुर्वन्तु ।

कक्षाः	ब्राउज़र	मुद्रणम्
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	अदृष्ट	दृश्यम्
`.hidden-print`	दृश्यम्	अदृष्ट

वर्गः .visible-printअपि अस्ति किन्तु v3.2.0 तः अप्रचलितः अस्ति । इदं -सम्बद्धानां तत्त्वानां .visible-print-blockअतिरिक्तविशेषप्रकरणानाम् अतिरिक्तं व्यतिरिक्तं , इत्यस्य समतुल्यम् अस्ति ।<table>

परीक्षण प्रकरण

प्रतिक्रियाशील-उपयोगितावर्गाणां परीक्षणार्थं स्वस्य ब्राउजर्-आकारं परिवर्तयन्तु अथवा भिन्न-भिन्न-यन्त्रेषु लोड् कुर्वन्तु ।

पर दृश्यमान...

हरितवर्णीयं चेकमार्कं भवतः वर्तमानदृश्यक्षेत्रे तत्त्वं दृश्यते इति सूचयन्ति ।

अतिरिक्त लघु ✔ x-small पर दृश्यमान

लघु ✔ लघु पर दृश्यमान

मध्यम ✔ माध्यम पर दृश्यमान

बृहत्‌ ✔ बृहत् पर दृश्यमान

अतिरिक्त लघु एवं लघु ✔ x-लघु एवं लघु पर दृश्यमान

मध्यम एवं विशाल ✔ मध्यम एवं बड़े पर दिखाई देता है

अतिरिक्त लघु एवं मध्यम ✔ x-लघु एवं मध्यम पर दिखाई देता है

लघु एवं विशाल ✔ लघु एवं बड़े पर दिखाई देता है

अतिरिक्त लघु एवं विशाल ✔ x-लघु एवं बड़े पर दिखाई देती है

लघु एवं मध्यम ✔ लघु एवं मध्यम पर दिखाई देता है

पर छिपे हुए...

अत्र, हरितवर्णीयं चेकमार्क् अपि सूचयति यत् भवतः वर्तमानदृश्यपोर्ट् मध्ये एलिमेण्ट् निगूढम् अस्ति ।

अतिरिक्त लघु ✔ x-small पर छिपा हुआ

लघु ✔ Hidden on small

मध्यम ✔ Hidden on medium

Large ✔ बड़े पर छिपे हुए

अतिरिक्त लघु एवं लघु ✔ Hidden on x-small and small

Medium and large ✔ मध्यम एवं बड़े पर छिपे हुए

अतिरिक्त लघु एवं मध्यम ✔ Hidden on x-small and medium

Small and large ✔ लघु एवं बड़े पर छिपे हुए

Extra small and large ✔ x-लघु एवं बड़े पर छिपा हुआ

लघु एवं मध्यम ✔ Hidden on small and medium

Bootstrap इत्यस्य CSS Less इत्यत्र निर्मितम् अस्ति, यत् CSS संकलनार्थं चर, mixins, functions इत्यादीनि अतिरिक्तकार्यक्षमतायुक्तं प्रीप्रोसेसरम् अस्ति । ये अस्माकं संकलितानां CSS सञ्चिकानां स्थाने source Less सञ्चिकानां उपयोगं कर्तुम् इच्छन्ति ते वयं सम्पूर्णे फ्रेमवर्क् मध्ये उपयुज्यमानानाम् असंख्यातानां चरानाम्, मिश्रणानां च उपयोगं कर्तुं शक्नुवन्ति ।

ग्रिड् चर तथा मिक्सिन् ग्रिड सिस्टम् विभागस्य अन्तः आच्छादिताः सन्ति |

बूटस्ट्रैप संकलन करना

बूटस्ट्रैप् इत्यस्य उपयोगः न्यूनातिन्यूनं द्वयोः प्रकारयोः कर्तुं शक्यते : संकलितेन CSS इत्यनेन सह अथवा स्रोतः Less सञ्चिकाभिः सह । Less सञ्चिकाः संकलितुं, आवश्यकान् आदेशान् चालयितुं स्वस्य विकासपर्यावरणं कथं सेट् कर्तव्यम् इति ज्ञातुं Getting Started इति विभागं पश्यन्तु ।

तृतीयपक्षसंकलनसाधनं Bootstrap इत्यनेन सह कार्यं कर्तुं शक्नोति, परन्तु ते अस्माकं मूलदलेन समर्थिताः न सन्ति ।

चर

वर्णाः, अन्तरालः, अथवा font stacks इत्यादीनां सामान्यतया प्रयुक्तानां मूल्यानां केन्द्रीकरणस्य साझाकरणस्य च मार्गरूपेण सम्पूर्णे परियोजनायां चरानाम् उपयोगः भवति । सम्पूर्णविच्छेदार्थं कृपया Customizer पश्यन्तु ।

वर्णाः

सहजतया द्वयोः वर्णयोजनयोः उपयोगं कुर्वन्तु: ग्रेस्केल तथा शब्दार्थ। ग्रेस्केल वर्णाः कृष्णस्य सामान्यतया प्रयुक्तानां छायानां शीघ्रं प्रवेशं प्रदान्ति यदा तु शब्दार्थे सार्थकसन्दर्भमूल्यानां कृते नियुक्ताः विविधाः वर्णाः समाविष्टाः सन्ति

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

एतेषु कस्यापि वर्णचरस्य उपयोगं यथा वर्तते अथवा स्वस्य परियोजनायाः कृते अधिकसार्थकचरयोः पुनः नियुक्तं कुर्वन्तु ।

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

मचान

भवतः साइट्-कङ्कालस्य प्रमुखतत्त्वानां शीघ्रं अनुकूलनार्थं मुष्टिभ्यां चरानाम् ।

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

लिङ्कानि

केवलं एकेन मूल्येन सह समीचीनवर्णेन स्वस्य लिङ्कानि सहजतया शैलीं कुर्वन्तु।

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

ध्यानं कुर्वन्तु यत् the @link-hover-colorएकं function, Less इत्यस्मात् अन्यत् भयानकं साधनं, स्वयमेव सम्यक् hover color निर्मातुं उपयुज्यते । darkenभवन्तः , lighten, saturate, तथा च उपयोक्तुं शक्नुवन्ति desaturate।

टाइपोग्राफी

कतिपयैः द्रुतचरैः सह स्वस्य टाइपफेस्, पाठस्य आकारः, लीडिंग्, इत्यादीनि सहजतया सेट् कुर्वन्तु । बूटस्ट्रैप् एतेषां उपयोगं अपि करोति यत् सुलभं मुद्रणमिश्रणं प्रदातुं शक्नोति ।

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

चिह्नानि

भवतः चिह्नानां स्थानं सञ्चिकानाम च अनुकूलितुं द्रुतचरद्वयम् ।

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

घटकाः

सम्पूर्णे Bootstrap मध्ये घटकाः सामान्यमूल्यानां सेट् कर्तुं केषाञ्चन पूर्वनिर्धारितचरानाम् उपयोगं कुर्वन्ति । अत्र सर्वाधिकं प्रयुक्ताः सन्ति ।

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

विक्रेता मिक्सिन

विक्रेता मिश्रणं भवतः संकलित-CSS मध्ये सर्वान् प्रासंगिकान् विक्रेता-उपसर्गान् समाविष्ट्य बहु-ब्राउजर्-समर्थनार्थं सहायतां कर्तुं मिक्सिन् सन्ति ।

पेटी-आकारः

एकेन mixin इत्यनेन स्वस्य घटकानां बॉक्स मॉडल् पुनः सेट् कुर्वन्तु । सन्दर्भार्थं, Mozilla इत्यस्मात् एतत् सहायकं लेखं पश्यन्तु ।

मिक्सिन् v3.2.0 तः अप्रचलितः अस्ति , Autoprefixer इत्यस्य परिचयेन सह । पश्चात्-संगततां रक्षितुं, Bootstrap Bootstrap v4 यावत् mixin इत्यस्य आन्तरिकरूपेण उपयोगं निरन्तरं करिष्यति ।

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

गोल कोण

border-radiusअद्यत्वे सर्वे आधुनिकाः ब्राउजर्-इत्येतत् अ-उपसर्ग- गुणं समर्थयन्ति । तथा च, mixin नास्ति .border-radius(), परन्तु Bootstrap इत्यत्र वस्तुनः विशेषपक्षे द्वौ कोणौ शीघ्रं गोलीकरणाय शॉर्टकट् अवश्यं भवति ।

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

बॉक्स (Drop) छायाएँ

यदि भवतः लक्षितदर्शकाः नवीनतम-महान-ब्राउजर्-यन्त्राणि च उपयुञ्जते तर्हि केवलं box-shadowस्वयमेव गुणस्य उपयोगं अवश्यं कुर्वन्तु । यदि भवान् पुरातन-Android (pre-v4) तथा iOS उपकरणानां (iOS 5 पूर्व) समर्थनस्य आवश्यकता अस्ति, तर्हि आवश्यकं उपसर्गं ग्रहीतुं अप्रचलितस्य mixin इत्यस्य उपयोगं कुर्वन्तु ।-webkit

mixin v3.1.0 तः अप्रचलितम् अस्ति , यतः Bootstrap आधिकारिकतया पुरातनमञ्चान् समर्थयति ये मानकगुणं न समर्थयन्ति । पश्चात्-संगततां रक्षितुं, Bootstrap Bootstrap v4 यावत् mixin इत्यस्य आन्तरिकरूपेण उपयोगं निरन्तरं करिष्यति ।

स्वस्य पेटीछायासु वर्णानाम् उपयोगं अवश्यं कुर्वन्तु rgba()येन ते पृष्ठभूमिभिः सह यथासम्भवं निर्विघ्नतया मिश्रणं कुर्वन्ति ।

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

संक्रमणाः

लचीलतायै बहुविधाः मिक्सिन्। एकेन सह सर्वाणि संक्रमणसूचनाः सेट् कुर्वन्तु, अथवा आवश्यकतानुसारं पृथक् विलम्बं अवधिं च निर्दिशन्तु ।

मिक्सिन्स् v3.2.0 तः अप्रचलिताः सन्ति , Autoprefixer इत्यस्य परिचयेन सह । पश्चात्-संगततां रक्षितुं, Bootstrap Bootstrap v4 यावत् mixins इत्यस्य आन्तरिकरूपेण उपयोगं निरन्तरं करिष्यति ।

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

परिवर्तनानि

किसी भी वस्तु को घुमाएं, स्केल करें, अनुवाद करें (चलें), या तिरछा करें।

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

एनिमेशन

एकस्मिन् घोषणायां CSS3 इत्यस्य सर्वेषां एनिमेशनगुणानां उपयोगाय एकं मिक्सिन् तथा व्यक्तिगतगुणानां कृते अन्ये मिक्सिन् ।

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

अस्पष्टता

सर्वेषां ब्राउजर् कृते अस्पष्टतां सेट् कृत्वा filterIE8 कृते fallback प्रदातव्यम् ।

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

स्थानधारक पाठ

प्रत्येकं क्षेत्रस्य अन्तः रूपनियन्त्रणानां कृते सन्दर्भं प्रदातव्यम्।

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

स्तम्भाः

एकस्य तत्त्वस्य अन्तः CSS मार्गेण स्तम्भान् जनयन्तु ।

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ढालः

सहजतया कस्यापि द्वौ वर्णौ पृष्ठभूमि-ढाल-रूपेण परिणमयन्तु । अधिकं उन्नतं कृत्वा दिशां निर्धारयन्तु, त्रयः वर्णाः उपयुज्यताम्, अथवा त्रिज्याढालस्य उपयोगं कुर्वन्तु । एकेन mixin इत्यनेन भवन्तः सर्वाणि उपसर्गयुक्तानि syntaxes प्राप्नुवन्ति येषां आवश्यकता भविष्यति ।

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

मानकद्विवर्णीयस्य, रेखीयप्रवणतायाः कोणं अपि निर्दिष्टुं शक्नुवन्ति :

#gradient > .directional(#333; #000; 45deg);

यदि भवन्तः नाई-पट्टिका-शैल्याः ढालस्य आवश्यकतां अनुभवन्ति तर्हि तदपि सुलभम् । केवलं एकं वर्णं निर्दिशन्तु वयं अर्धपारदर्शकं श्वेतपट्टिकां आच्छादयिष्यामः ।

#gradient > .striped(#333; 45deg);

एण्टे अप कृत्वा तस्य स्थाने त्रीणि वर्णानि उपयुज्यताम्। प्रथमवर्णं, द्वितीयवर्णं, द्वितीयवर्णस्य वर्णविरामः (25% इव प्रतिशतमूल्यं), तृतीयवर्णं च एतैः मिश्रणैः सह सेट् कुर्वन्तु:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

शिरः उपरि ! filterयदि भवान् कदापि ढालस्य निष्कासनस्य आवश्यकता भवेत् तर्हि भवता योजितं किमपि IE-विशिष्टं अवश्यमेव निष्कासयतु । .reset-filter()तत् भवन्तः पार्श्वे mixin इत्यस्य उपयोगेन कर्तुं शक्नुवन्ति background-image: none;.

उपयोगिता मिक्सिन

उपयोगिता मिक्सिन् इति मिक्सिन् अस्ति ये अन्यथा असम्बद्धान् CSS गुणान् संयोजयित्वा विशिष्टं लक्ष्यं वा कार्यं वा प्राप्तुं शक्नुवन्ति ।

Clearfix इति

class="clearfix"कस्मिन् अपि तत्त्वे योजयितुं विस्मरन्तु तस्य स्थाने .clearfix()यत्र उचितं तत्र मिक्सिन् योजयन्तु । Nicolas Gallagher इत्यस्मात् micro clearfix इत्यस्य उपयोगं करोति .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

क्षैतिज केन्द्रीकरण

शीघ्रं यत्किमपि तत्त्वं तस्य मातापितृणां अन्तः केन्द्रीक्रियताम्। आवश्यकं widthवा max-widthसेट् कर्तव्यम्।

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

सहायकों को आकार देना

वस्तुनः आयामान् अधिकसुलभतया निर्दिशन्तु ।

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

आकार बदलने योग्य पाठक्षेत्र

कस्यचित् textarea, अथवा अन्यस्य कस्यचित् तत्त्वस्य कृते resize विकल्पान् सहजतया विन्यस्यताम् । सामान्य ब्राउज़र व्यवहार ( both) इत्यस्य पूर्वनिर्धारितं भवति ।

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

पाठस्य च्छेदनम्

एकेन mixin इत्यनेन दीर्घवृत्तेन सह पाठं सहजतया च्छिन्नं कुर्वन्तु । तत्वं भवितुं blockवा inline-blockस्तरं वा आवश्यकम्।

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

रेटिना छवियाँ

द्वौ चित्रमार्गौ तथा @1x प्रतिबिम्बपरिमाणौ निर्दिशतु, तथा च Bootstrap @2x मीडियाप्रश्नं प्रदास्यति । यदि भवतां समीपे सेवां कर्तुं बहवः चित्राणि सन्ति तर्हि एकस्मिन् मीडिया-प्रश्ने स्वस्य रेटिना-प्रतिबिम्बस्य CSS मैन्युअल् रूपेण लिखितुं विचारयन्तु ।

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap इत्येतत् Less इत्यत्र निर्मितम् अस्ति चेदपि अस्य आधिकारिकं Sass port अपि अस्ति । वयं पृथक् GitHub भण्डारे तत् परिपालयामः तथा च रूपान्तरणस्क्रिप्ट् इत्यनेन अद्यतनं सम्पादयामः ।

किं समाविष्टम् अस्ति

यतः Sass पोर्ट् पृथक् रेपो अस्ति तथा च किञ्चित् भिन्नं प्रेक्षकाणां सेवां करोति, परियोजनायाः सामग्री मुख्य Bootstrap परियोजनायाः अपेक्षया बहु भिन्ना अस्ति । एतेन Sass पोर्ट् यथासम्भवं Sass-आधारित-प्रणालीभिः सह संगतम् इति सुनिश्चितं भवति ।

पथं	वर्णनम्‌
`lib/`	Ruby gem code (Sass विन्यास, रेल एवं कम्पास एकीकरण)
`tasks/`	परिवर्तकलिपयः (अपस्ट्रीम Less to Sass परिवर्तयन्)
`test/`	संकलन परीक्षण
`templates/`	कम्पास संकुल प्रकट
`vendor/assets/`	Sass, JavaScript, तथा font सञ्चिकाः
`Rakefile`	आन्तरिक कार्य, यथा रेक एवं कन्वर्ट

एताः सञ्चिकाः क्रियारूपेण द्रष्टुं Sass पोर्ट् इत्यस्य GitHub भण्डारं पश्यन्तु ।

स्थापना

Sass कृते Bootstrap कथं संस्थापनं उपयोक्तव्यं च इति सूचनायै GitHub भण्डार readme परामर्शं कुर्वन्तु । इदं सर्वाधिकं अद्यतनं स्रोतः अस्ति तथा च Rails, Compass, तथा मानक Sass परियोजनाभिः सह उपयोगाय सूचनाः समाविष्टाः सन्ति ।

सास् कृते बूटस्ट्रैप्

CSS इति

अवलोकनम्

HTML5 doctype इति

मोबाईल प्रथम

टाइपोग्राफी एवं लिंक

सामान्यीकरण करें.css

पात्राणि

जाल प्रणाली

आमुख

मीडिया प्रश्नाः

जालविकल्पाः

उदाहरण : स्तम्भित-से-क्षैतिज

उदाहरण : द्रव पात्र

उदाहरणम् : मोबाईल तथा डेस्कटॉप

उदाहरणम् : मोबाईल, टैबलेट, डेस्कटॉप

उदाहरणम् : स्तम्भवेष्टनम्

प्रतिक्रियाशील स्तम्भ रीसेट करता है

नाली निकालें

स्तम्भों को ऑफसेट करना

नीडं स्तम्भाः

स्तम्भ आदेश

कम मिक्सिन एवं चर

चर

मिक्सिन्

उदाहरण प्रयोग

टाइपोग्राफी

शीर्षकाणि

ह1. बूटस्ट्रैप शीर्षक

ह२. बूटस्ट्रैप शीर्षक

ह३. बूटस्ट्रैप शीर्षक

ह४ । बूटस्ट्रैप शीर्षक

ह५ । बूटस्ट्रैप शीर्षक

ह६ । बूटस्ट्रैप शीर्षक

ह1. बूटस्ट्रैप शीर्षक गौण पाठ

ह२. बूटस्ट्रैप शीर्षक गौण पाठ

ह३. बूटस्ट्रैप शीर्षक गौण पाठ

ह४ । बूटस्ट्रैप शीर्षक गौण पाठ

ह५ । बूटस्ट्रैप शीर्षक गौण पाठ

ह६ । बूटस्ट्रैप शीर्षक गौण पाठ

शरीर प्रतिलिपि

सीसा शरीर प्रतिलिपि

कम के साथ निर्मित

इनलाइन पाठ तत्व

चिह्नित पाठ

विलोपितः पाठः

पाठ के माध्यम से प्रहार करें

सम्मिलितः पाठः

रेखांकित पाठ

लघु पाठः

विक्रान्तः

इटालिकाः

वैकल्पिक तत्व

संरेखण वर्ग

परिवर्तनवर्गाः

संक्षेपाः

मूलसंक्षेपः

आद्यत्वम्

सम्बोधयति

ब्लॉककोट्स्

पूर्वनिर्धारितं blockquote

ब्लॉककोट विकल्प

स्रोतस्य नामकरणम्

वैकल्पिक प्रदर्शनम्

सूचीति

अक्रमितम्

आदेशित

अशैली

इनलाइन

वर्णनम्‌

क्षैतिज वर्णन

स्वतः च्छेदनम्

संहिता

इनलाइन

उपयोगकर्ता इनपुट

मूलखण्डः

चर

नमूना आउटपुट

सारणीः

मूलभूत उदाहरणम्

धारीदाराः पङ्क्तयः

डेमो`:focus` राज्य

की लिंक कार्यक्षमता के बारे में चेतावनी`<a>`

गुप्तलेबलयुक्तानि `.sr-only`वैकल्पिकचिह्नानि