अवलोकन

बेहतर, तेज, मजबूत वेब विकास के लिए हमारे दृष्टिकोण सहित, बूटस्ट्रैप के बुनियादी ढांचे के प्रमुख टुकड़ों पर नीचे जाएं।

HTML5 सिद्धांत

बूटस्ट्रैप कुछ HTML तत्वों और CSS गुणों का उपयोग करता है जिन्हें HTML5 सिद्धांत के उपयोग की आवश्यकता होती है। इसे अपनी सभी परियोजनाओं की शुरुआत में शामिल करें।

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

मोबाइल पहले

बूटस्ट्रैप 2 के साथ, हमने ढांचे के प्रमुख पहलुओं के लिए वैकल्पिक मोबाइल अनुकूल शैलियों को जोड़ा। बूटस्ट्रैप 3 के साथ, हमने शुरू से ही मोबाइल के अनुकूल होने के लिए प्रोजेक्ट को फिर से लिखा है। वैकल्पिक मोबाइल शैलियों को जोड़ने के बजाय, उन्हें सीधे कोर में बेक किया जाता है। वास्तव में, बूटस्ट्रैप पहले मोबाइल है । मोबाइल प्रथम शैलियाँ अलग-अलग फ़ाइलों के बजाय संपूर्ण पुस्तकालय में पाई जा सकती हैं।

उचित रेंडरिंग सुनिश्चित करने और ज़ूमिंग स्पर्श करने के लिए, व्यूपोर्ट मेटा टैग को अपनी <head>.

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

user-scalable=noआप व्यूपोर्ट मेटा टैग में जोड़कर मोबाइल उपकरणों पर ज़ूमिंग क्षमताओं को अक्षम कर सकते हैं । यह ज़ूमिंग को अक्षम कर देता है, जिसका अर्थ है कि उपयोगकर्ता केवल स्क्रॉल करने में सक्षम हैं, और परिणामस्वरूप आपकी साइट एक मूल एप्लिकेशन की तरह कुछ अधिक महसूस करती है। कुल मिलाकर, हम हर साइट पर इसकी अनुशंसा नहीं करते हैं, इसलिए सावधानी बरतें!

<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।

नॉर्मलाइज.सीएसएस

बेहतर क्रॉस-ब्राउज़र रेंडरिंग के लिए, हम निकोलस गैलाघर और जोनाथन नील की एक परियोजना, Normalize.css का उपयोग करते हैं ।

कंटेनरों

बूटस्ट्रैप को साइट सामग्री को लपेटने और हमारे ग्रिड सिस्टम को रखने के लिए एक युक्त तत्व की आवश्यकता होती है। आप अपनी परियोजनाओं में उपयोग करने के लिए दो कंटेनरों में से एक चुन सकते हैं। ध्यान दें कि, के कारण paddingऔर अधिक, न तो कंटेनर घोंसला योग्य है।

.containerप्रतिक्रियाशील निश्चित चौड़ाई वाले कंटेनर के लिए उपयोग करें ।

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

.container-fluidअपने व्यूपोर्ट की पूरी चौड़ाई में फैले एक पूर्ण चौड़ाई वाले कंटेनर के लिए उपयोग करें ।

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

ग्रिड प्रणाली

बूटस्ट्रैप में एक रिस्पॉन्सिव, मोबाइल फर्स्ट फ्लुइड ग्रिड सिस्टम शामिल है जो डिवाइस या व्यूपोर्ट आकार बढ़ने पर उचित रूप से 12 कॉलम तक बढ़ जाता है। इसमें आसान लेआउट विकल्पों के लिए पूर्वनिर्धारित कक्षाएं , साथ ही अधिक अर्थपूर्ण लेआउट उत्पन्न करने के लिए शक्तिशाली मिश्रण शामिल हैं ।

परिचय

ग्रिड सिस्टम का उपयोग आपकी सामग्री को रखने वाली पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पृष्ठ लेआउट बनाने के लिए किया जाता है। यहां बताया गया है कि बूटस्ट्रैप ग्रिड सिस्टम कैसे काम करता है:

  • पंक्तियों को उचित संरेखण और पैडिंग के लिए एक .container(निश्चित-चौड़ाई) या (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए ।.container-fluid
  • स्तंभों के क्षैतिज समूह बनाने के लिए पंक्तियों का उपयोग करें।
  • सामग्री को कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।
  • पूर्वनिर्धारित ग्रिड कक्षाएं जैसे .rowऔर .col-xs-4जल्दी से ग्रिड लेआउट बनाने के लिए उपलब्ध हैं। अधिक सिमेंटिक लेआउट के लिए कम मिक्सिन का भी उपयोग किया जा सकता है।
  • कॉलम के माध्यम से गटर (स्तंभ सामग्री के बीच अंतराल) बनाते हैं padding। उस पैडिंग को पहले और आखिरी कॉलम के लिए नकारात्मक मार्जिन के माध्यम से पंक्तियों में ऑफसेट किया जाता है .row।
  • नकारात्मक मार्जिन यही कारण है कि नीचे दिए गए उदाहरण पुराने हैं। ऐसा इसलिए है कि ग्रिड कॉलम में सामग्री गैर-ग्रिड सामग्री के साथ पंक्तिबद्ध है।
  • ग्रिड कॉलम बारह उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं जिन्हें आप फैलाना चाहते हैं। उदाहरण के लिए, तीन बराबर कॉलम तीन का उपयोग करेंगे .col-xs-4।
  • यदि एक पंक्ति में 12 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।
  • ग्रिड कक्षाएं उन उपकरणों पर लागू होती हैं जिनकी स्क्रीन चौड़ाई ब्रेकपॉइंट आकार से अधिक या उसके बराबर होती है, और छोटे उपकरणों पर लक्षित ग्रिड कक्षाओं को ओवरराइड करती है। इसलिए, उदाहरण के लिए, किसी भी .col-md-*वर्ग को किसी तत्व पर लागू करने से न केवल मध्यम उपकरणों पर बल्कि बड़े उपकरणों पर भी इसकी शैली प्रभावित होगी यदि कोई .col-lg-*वर्ग मौजूद नहीं है।

इन सिद्धांतों को अपने कोड में लागू करने के लिए उदाहरण देखें।

मीडिया के प्रश्नों

हम अपने ग्रिड सिस्टम में प्रमुख ब्रेकप्वाइंट बनाने के लिए अपनी कम फाइलों में निम्नलिखित मीडिया प्रश्नों का उपयोग करते हैं।

/* 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-widthताकि सीएसएस को सीमित उपकरणों के समूह में शामिल किया जा सके।

@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) { ... }

ग्रिड विकल्प

देखें कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू एक आसान तालिका के साथ कई उपकरणों पर कैसे काम करते हैं।

अतिरिक्त छोटे उपकरण फ़ोन (<768px) छोटे उपकरण टैबलेट (≥768px) मध्यम उपकरण डेस्कटॉप (≥992px) बड़े उपकरण डेस्कटॉप (≥1200px)
ग्रिड व्यवहार हर समय क्षैतिज प्रारंभ करने के लिए संक्षिप्त, ब्रेकप्वाइंट के ऊपर क्षैतिज
कंटेनर की चौड़ाई कोई नहीं (ऑटो) 750px 970px 1170पीएक्स
कक्षा उपसर्ग .col-xs- .col-sm- .col-md- .col-lg-
# कॉलम 12
स्तंभ की चौड़ाई ऑटो ~62px ~81px ~97px
नाले की चौड़ाई 30px (एक कॉलम के प्रत्येक तरफ 15px)
नेस्टेबल हाँ
ऑफसेट हाँ
कॉलम ऑर्डरिंग हाँ

उदाहरण: स्टैक्ड-टू-हॉरिज़ॉन्टल

ग्रिड कक्षाओं के एकल सेट का उपयोग करके .col-md-*, आप एक बुनियादी ग्रिड सिस्टम बना सकते हैं जो डेस्कटॉप (मध्यम) उपकरणों पर क्षैतिज होने से पहले मोबाइल उपकरणों और टैबलेट उपकरणों (अतिरिक्त छोटी से छोटी रेंज) पर स्टैक्ड हो जाता है। किसी भी में ग्रिड कॉलम रखें .row।

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<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-*अपने कॉलम में जोड़कर अतिरिक्त छोटे और मध्यम डिवाइस ग्रिड क्लासेस का उपयोग करें । यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- 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-*टैबलेट कक्षाओं के साथ और भी अधिक गतिशील और शक्तिशाली लेआउट बनाकर पिछले उदाहरण पर निर्माण करें ।

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<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>

उदाहरण: कॉलम रैपिंग

यदि एक पंक्ति में 12 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।

.col-xs-9
.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
अपने व्यूपोर्ट का आकार बदलें या उदाहरण के लिए इसे अपने फोन पर देखें।
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<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>

ऑफसेटिंग कॉलम

.col-md-offset-*कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । ये वर्ग स्तंभ के बाएँ हाशिये को *स्तंभों द्वारा बढ़ाते हैं। उदाहरण के लिए, चार स्तंभों पर .col-md-offset-4चलता है।.col-md-4

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<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आप कक्षाओं के साथ निचले ग्रिड स्तरों से ऑफ़सेट को ओवरराइड भी कर सकते हैं ।

<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और कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में कॉलम का एक सेट शामिल होना चाहिए जो 12 या उससे कम तक जोड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।.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-*संशोधक वर्गों के साथ बदलें।

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<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>

कम मिश्रण और चर

तेज़ लेआउट के लिए प्रीबिल्ट ग्रिड क्लासेस के अलावा , बूटस्ट्रैप में आपके अपने सरल, सिमेंटिक लेआउट को जल्दी से उत्पन्न करने के लिए कम चर और मिक्सिन शामिल हैं।

चर

चर स्तंभों की संख्या, गटर की चौड़ाई और मीडिया क्वेरी बिंदु निर्धारित करते हैं जिस पर फ़्लोटिंग कॉलम शुरू करना है। हम इनका उपयोग ऊपर प्रलेखित पूर्वनिर्धारित ग्रिड कक्षाओं के साथ-साथ नीचे सूचीबद्ध कस्टम मिश्रणों के लिए भी करते हैं।

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

मिक्सिन्स

अलग-अलग ग्रिड कॉलम के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए मिक्सिन का उपयोग ग्रिड चर के साथ संयोजन में किया जाता है।

// 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));
  }
}

उदाहरण उपयोग

आप चरों को अपने स्वयं के कस्टम मानों में संशोधित कर सकते हैं, या केवल उनके डिफ़ॉल्ट मानों के साथ मिश्रित का उपयोग कर सकते हैं। यहां एक दो-स्तंभ लेआउट बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करने का एक उदाहरण दिया गया है, जिसके बीच का अंतर है।

.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>

टाइपोग्राफी

शीर्षकों

<h1>के माध्यम से सभी HTML शीर्षक <h6>उपलब्ध हैं। .h1थ्रू .h6क्लासेस भी उपलब्ध हैं, जब आप किसी शीर्षक की फ़ॉन्ट शैली का मिलान करना चाहते हैं लेकिन फिर भी चाहते हैं कि आपका टेक्स्ट इनलाइन प्रदर्शित हो।

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

 सेमीबोल्ड 36px

एच2. बूटस्ट्रैप शीर्षक

 सेमीबोल्ड 30px

एच3. बूटस्ट्रैप शीर्षक

 सेमीबोल्ड 24px

एच4. बूटस्ट्रैप शीर्षक

 सेमीबोल्ड 18पीएक्स
एच5. बूटस्ट्रैप शीर्षक
 सेमीबोल्ड 14px
एच6. बूटस्ट्रैप शीर्षक
 सेमीबोल्ड 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. बूटस्ट्रैप शीर्षक माध्यमिक पाठ

एच2. बूटस्ट्रैप शीर्षक माध्यमिक पाठ

एच3. बूटस्ट्रैप शीर्षक माध्यमिक पाठ

एच4. बूटस्ट्रैप शीर्षक माध्यमिक पाठ
एच5. बूटस्ट्रैप शीर्षक माध्यमिक पाठ
एच6. बूटस्ट्रैप शीर्षक माध्यमिक पाठ
 
<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>

शरीर की नकल

1.428 के साथ बूटस्ट्रैप का वैश्विक डिफ़ॉल्ट 14pxfont-size है । यह और सभी अनुच्छेदों पर लागू होता है। इसके अलावा, (पैराग्राफ) उनकी गणना की गई लाइन-ऊंचाई (डिफ़ॉल्ट रूप से 10px) के आधे हिस्से का निचला मार्जिन प्राप्त करते हैं।line-height<body><p>

नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula.

कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला। ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट। डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।

मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना। Donec id elit non mi porta gravida और eget metus. ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट।

<p>...</p>

लीड बॉडी कॉपी

जोड़कर एक पैराग्राफ को अलग बनाएं .lead।

विवामस सैगिटिस लैकस वेल ऑग्यू लॉरीट रुट्रम फॉसीबस डोलर ऑक्टर। डुइस मोलिस, इस्ट नॉन कमोडो लक्टस।

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

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

टाइपोग्राफिक पैमाना चर में दो कम चरों पर आधारित है। कम : @font-size-baseऔर @line-height-base। पहला आधार फ़ॉन्ट-आकार का उपयोग किया जाता है और दूसरा आधार रेखा-ऊंचाई है। हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर और कुछ सरल गणित का उपयोग करते हैं। उन्हें कस्टमाइज़ करें और बूटस्ट्रैप एडाप्ट करता है।

इनलाइन टेक्स्ट एलिमेंट

चिह्नित पाठ

किसी अन्य संदर्भ में प्रासंगिकता के कारण किसी पाठ को हाइलाइट करने के लिए, <mark>टैग का उपयोग करें।

आप के लिए मार्क टैग का उपयोग कर सकते हैंप्रमुखता से दिखानामूलपाठ।

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>टेक्स्ट को पैरेंट के आकार के 85% पर सेट करने के लिए टैग का उपयोग करें। font-sizeनेस्टेड तत्वों के लिए शीर्षक तत्व स्वयं प्राप्त <small>होते हैं।

आप वैकल्पिक .smallरूप से किसी के स्थान पर इनलाइन तत्व का उपयोग कर सकते हैं <small>।

पाठ की इस पंक्ति को ठीक प्रिंट के रूप में माना जाना है।

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

साहसिक

भारी फॉन्ट-वेट वाले टेक्स्ट के एक स्निपेट पर जोर देने के लिए।

टेक्स्ट का निम्न स्निपेट बोल्ड टेक्स्ट के रूप में प्रस्तुत किया गया है ।

<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थोड़े छोटे फ़ॉन्ट-आकार के लिए संक्षिप्त नाम में जोड़ें ।

कटा हुआ ब्रेड के बाद से 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>

ब्लॉक उद्धरण

अपने दस्तावेज़ के भीतर किसी अन्य स्रोत से सामग्री के ब्लॉक को उद्धृत करने के लिए।

डिफ़ॉल्ट ब्लॉककोट

उद्धरण के रूप में किसी भी HTML<blockquote> के चारों ओर लपेटें । सीधे उद्धरणों के लिए, हम अनुशंसा करते हैं कि एक .<p>

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।

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

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

किसी मानक पर साधारण विविधताओं के लिए शैली और सामग्री में परिवर्तन <blockquote>.

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

<footer>स्रोत की पहचान के लिए a जोड़ें । स्रोत कार्य का नाम इसमें लपेटें<cite> .

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।

स्रोत शीर्षक में प्रसिद्ध कोई व्यक्ति 
<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सही-संरेखित सामग्री के साथ ब्लॉकक्वाट के लिए जोड़ें ।

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।

स्रोत शीर्षक में प्रसिद्ध कोई व्यक्ति 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

सूचियों

अक्रमित

वस्तुओं की एक सूची जिसमें आदेश स्पष्ट रूप से मायने नहीं रखता।

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम
<ul>
  <li>...</li>
</ul>

आदेश दिया

वस्तुओं की एक सूची जिसमें आदेश स्पष्ट रूप से मायने रखता है ।

  1. लोरेन इपसाम डलार सिट आमेट
  2. Consectetur adipiscing अभिजात वर्ग
  3. मासा में पूर्णांक मोलेस्टी लोरेम
  4. प्रीटियम निस्ल एलिकेट में सुविधा
  5. नुल्ला वोलुटपाट अलिकम वेलिटा
  6. फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  7. ऐनियन सिट आमेट इरेट नन
  8. एगेट पोर्टिटर लोरेम
<ol>
  <li>...</li>
</ol>

अनस्टाइल्ड

सूची आइटम पर डिफ़ॉल्ट list-styleऔर बायां हाशिया निकालें (केवल तत्काल बच्चे)। यह केवल तत्काल बच्चों की सूची आइटम पर लागू होता है , जिसका अर्थ है कि आपको किसी भी नेस्टेड सूची के लिए भी कक्षा को जोड़ना होगा।

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम
<ul class="list-unstyled">
  <li>...</li>
</ul>

इन - लाइन

सभी सूची वस्तुओं को एक पंक्ति में display: inline-block;और कुछ हल्के पैडिंग के साथ रखें।

  • लोरेम इप्सम
  • फेसेलस आईकुलिस
  • नुल्ला वोलुटपाट
<ul class="list-inline">
  <li>...</li>
</ul>

विवरण

उनके संबंधित विवरण के साथ शब्दों की एक सूची।

विवरण सूचियाँ
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।
Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

<dl>साथ-साथ लाइन अप में नियम और विवरण बनाएं । डिफ़ॉल्ट s की तरह स्टैक्ड शुरू होता है <dl>, लेकिन जब नेवबार फैलता है, तो ऐसा करें।

विवरण सूचियाँ
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।
Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।
फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया
फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो, टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्टो सिट एमेट रिसस। 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ऑटो-ट्रंकटिंग

क्षैतिज विवरण सूचियां उन शब्दों को काट देंगी जो बाएं कॉलम में फ़िट होने के लिए बहुत लंबे हैं text-overflow। संकीर्ण व्यूपोर्ट में, वे डिफ़ॉल्ट स्टैक्ड लेआउट में बदल जाएंगे।

कोड

इन - लाइन

कोड के इनलाइन स्निपेट को <code>.

उदाहरण के लिए, <section>इनलाइन के रूप में लपेटा जाना चाहिए। 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

उपयोगकर्ता का निवेश

इनपुट को इंगित करने के लिए उपयोग करें जो <kbd>आमतौर पर कीबोर्ड के माध्यम से दर्ज किया जाता है।

निर्देशिकाओं को स्विच करने के लिए, निर्देशिका 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 की अधिकतम-ऊंचाई सेट करेगा और एक y-अक्ष स्क्रॉलबार प्रदान करेगा।

चर

वेरिएबल को इंगित करने के लिए <var>टैग का उपयोग करें।

वाई = एम एक्स + बी

<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>. यह बहुत ही बेमानी लग सकता है, लेकिन कैलेंडर और डेट पिकर जैसे अन्य प्लगइन्स के लिए टेबल के व्यापक उपयोग को देखते हुए, हमने अपनी कस्टम टेबल शैलियों को अलग करने का विकल्प चुना है।

वैकल्पिक तालिका कैप्शन।
# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table">
  ...
</table>

धारीदार पंक्तियाँ

.table-stripedके भीतर किसी भी तालिका पंक्ति में ज़ेबरा-स्ट्रिपिंग जोड़ने के लिए उपयोग करें <tbody>।

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

स्ट्राइप्ड टेबल को :nth-childCSS चयनकर्ता के माध्यम से स्टाइल किया जाता है, जो कि Internet Explorer 8 में उपलब्ध नहीं है।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-striped">
  ...
</table>

बॉर्डर वाली टेबल

.table-borderedटेबल और सेल के सभी किनारों पर बॉर्डर के लिए जोड़ें ।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-bordered">
  ...
</table>

होवर पंक्तियां

.table-hoverतालिका पंक्तियों पर एक होवर स्थिति को सक्षम करने के लिए जोड़ें <tbody>।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-hover">
  ...
</table>

संघनित तालिका

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

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-condensed">
  ...
</table>

प्रासंगिक कक्षाएं

तालिका पंक्तियों या अलग-अलग कक्षों को रंगने के लिए प्रासंगिक कक्षाओं का उपयोग करें।

कक्षा विवरण
.active होवर रंग को किसी विशेष पंक्ति या सेल पर लागू करता है
.success एक सफल या सकारात्मक कार्रवाई का संकेत देता है
.info एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई का संकेत देता है
.warning एक चेतावनी इंगित करता है जिस पर ध्यान देने की आवश्यकता हो सकती है
.danger खतरनाक या संभावित रूप से नकारात्मक कार्रवाई का संकेत देता है
# कॉलम शीर्षक कॉलम शीर्षक कॉलम शीर्षक
1 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
2 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
3 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
4 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
5 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
6 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
7 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
8 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री
9 स्तंभ सामग्री स्तंभ सामग्री स्तंभ सामग्री 
<!-- 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 से कम) पर क्षैतिज रूप से स्क्रॉल करने .tableके लिए किसी भी को लपेटकर प्रतिक्रियाशील तालिकाएं बनाएं । .table-responsive768px से अधिक चौड़ी किसी भी चीज़ को देखने पर, आपको इन तालिकाओं में कोई अंतर नहीं दिखाई देगा.

लंबवत कतरन/छंटनी

उत्तरदायी तालिकाएँ इसका उपयोग करती हैं overflow-y: hidden, जो तालिका के निचले या ऊपरी किनारों से आगे जाने वाली किसी भी सामग्री को क्लिप कर देती हैं। विशेष रूप से, यह ड्रॉपडाउन मेनू और अन्य तृतीय-पक्ष विजेट को बंद कर सकता है।

फ़ायरफ़ॉक्स और फ़ील्डसेट

फ़ायरफ़ॉक्स में कुछ अजीब फ़ील्डसेट स्टाइल शामिल widthहै जो उत्तरदायी तालिका में हस्तक्षेप करता है। इसे फ़ायरफ़ॉक्स-विशिष्ट हैक के बिना ओवरराइड नहीं किया जा सकता है जो हम बूटस्ट्रैप में प्रदान नहीं करते हैं:

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

अधिक जानकारी के लिए, यह स्टैक ओवरफ़्लो उत्तर पढ़ें ।

# तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक
1 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल
2 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल
3 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल
# तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक तालिका शीर्षक
1 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल
2 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल
3 टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल टेबल सेल 
<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-inline(जिसका होना जरूरी नहीं है )। यह केवल उन व्यूपोर्ट्स के फ़ॉर्म पर लागू होता है जो कम से कम 768px चौड़े होते हैं।<form>

कस्टम चौड़ाई की आवश्यकता हो सकती है

width: 100%;बूटस्ट्रैप में इनपुट और चयन डिफ़ॉल्ट रूप से लागू होते हैं। इनलाइन फ़ॉर्म में, हम रीसेट करते हैं कि width: auto;एक ही लाइन पर इतने सारे नियंत्रण रह सकते हैं। आपके लेआउट के आधार पर, अतिरिक्त कस्टम चौड़ाई की आवश्यकता हो सकती है।

हमेशा लेबल जोड़ें

यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। .sr-onlyइन इनलाइन प्रपत्रों के लिए, आप कक्षा का उपयोग करके लेबल छिपा सकते हैं । सहायक तकनीकों के लिए लेबल प्रदान करने के और भ��� वैकल्पिक तरीके हैं, जैसे aria-label, aria-labelledbyया titleविशेषता। यदि इनमें से कोई भी मौजूद नहीं है, तो स्क्रीन रीडर मौजूद होने पर placeholderविशेषता का उपयोग करने का सहारा ले सकते हैं, लेकिन ध्यान दें कि placeholderअन्य लेबलिंग विधियों के प्रतिस्थापन के रूप में उपयोग की सलाह नहीं दी जाती है।

<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>
$
.00 
<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>

क्षैतिज रूप

प्रपत्र में जोड़कर एक क्षैतिज लेआउट में लेबल और प्रपत्र नियंत्रण के समूहों को संरेखित करने के लिए बूटस्ट्रैप की पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग करें .form-horizontal(जो कि एक होना आवश्यक नहीं है <form>)। ऐसा .form-groupकरने से ग्रिड पंक्तियों के रूप में व्यवहार करने के लिए परिवर्तन होता है, इसलिए .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-inlineया कक्षाओं का उपयोग करें ।.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>

चयन

ध्यान दें कि कई स्थानीय चयन मेनू—अर्थात् सफारी और क्रोम में—के कोने गोल होते हैं जिन्हें 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>

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

जब आपको किसी प्रपत्र के भीतर किसी प्रपत्र लेबल के आगे सादा पाठ रखने की आवश्यकता हो, तो .form-control-staticएक पर कक्षा का उपयोग करें <p>।

ईमेल@example.com

<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>

ईमेल@example.com

<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स्टेट

उपरोक्त उदाहरण इनपुट हमारे दस्तावेज़ीकरण में कस्टम शैलियों का उपयोग करता है ताकि :focusराज्य को एक पर प्रदर्शित किया जा सके .form-control।

अक्षम अवस्था

disabledउपयोगकर्ता इंटरैक्शन को रोकने के लिए इनपुट पर बूलियन विशेषता जोड़ें । अक्षम इनपुट हल्के दिखाई देते हैं और एक not-allowedकर्सर जोड़ते हैं।

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

अक्षम फ़ील्डसेट

एक बार में सभी नियंत्रणों को अक्षम करने के लिए disabledविशेषता को a में जोड़ें ।<fieldset><fieldset>

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

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

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

disabledजबकि बूटस्ट्रैप इन शैलियों को सभी ब्राउज़रों में लागू करेगा, इंटरनेट एक्सप्लोरर 11 और नीचे एक पर विशेषता का पूरी तरह से समर्थन नहीं करता है <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इनपुट के मान में संशोधन को रोकने के लिए इनपुट पर बूलियन विशेषता जोड़ें । केवल-पढ़ने के लिए इनपुट हल्के दिखाई देते हैं (बिल्कुल अक्षम इनपुट की तरह), लेकिन मानक कर्सर बनाए रखें।

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

मदद पाठ

प्रपत्र नियंत्रणों के लिए ब्लॉक स्तर सहायता पाठ।

सहायता पाठ को प्रपत्र नियंत्रणों के साथ संबद्ध करना

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

सहायता टेक्स्ट का एक ब्लॉक जो एक नई लाइन पर टूट जाता है और एक लाइन से आगे बढ़ सकता है। 
<label class="sr-only" 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>पाठ में ही राज्य के बारे में एक संकेत शामिल कर सकते हैं (जैसा कि निम्नलिखित कोड उदाहरण में है), एक ग्लिफ़िकॉन.sr-only शामिल करें ( वर्ग का उपयोग करके उपयुक्त वैकल्पिक पाठ के साथ - ग्लिफ़िकॉन उदाहरण देखें ), या एक प्रदान करके अतिरिक्त सहायता टेक्स्ट ब्लॉक। विशेष रूप से सहायक तकनीकों के लिए, अमान्य प्रपत्र नियंत्रणों को भी एक 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विशेषता), तो बूटस्ट्रैप स्वचालित रूप से आइकन की स्थिति को जोड़ने के बाद समायोजित करेगा।

(सफलता)
@
(सफलता) 
<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">

प्रसंग-विशिष्ट उपयोग

जबकि बटन वर्गों का उपयोग <a>और तत्वों पर किया जा सकता है, हमारे एनएवी और नेवबार घटकों के भीतर <button>केवल तत्वों का समर्थन किया जाता है।<button>

बटन के रूप में कार्य करने वाले लिंक

यदि <a>तत्वों का उपयोग बटन के रूप में कार्य करने के लिए किया जाता है - वर्तमान पृष्ठ के भीतर किसी अन्य दस्तावेज़ या अनुभाग पर नेविगेट करने के बजाय, इन-पेज कार्यक्षमता को ट्रिगर करता है - तो उन्हें एक उपयुक्त role="button".

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

सर्वोत्तम अभ्यास के रूप में, हम क्रॉस-ब्राउज़र रेंडरिंग से मेल खाने को सुनिश्चित करने के लिए जब भी संभव हो तत्व का उपयोग करने की अत्यधिक अनुशंसा करते हैं ।<button>

अन्य बातों के अलावा, फ़ायरफ़ॉक्स <30 में एक बग हैline-height जो हमें-आधारित बटन सेट करने से रोकता है <input>, जिससे वे फ़ायरफ़ॉक्स पर अन्य बटनों की ऊंचाई से बिल्कुल मेल नहीं खाते हैं।

विकल्प

स्टाइल बटन को शीघ्रता से बनाने के लिए किसी भी उपलब्ध बटन वर्ग का उपयोग करें।

<!-- 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 और नीचे पाठ ग्रे को एक खराब टेक्स्ट-छाया के साथ प्रस्तुत करेगा जिसे हम ठीक नहीं कर सकते।

लंगर तत्व

.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, इसलिए किसी उपसर्ग की आवश्यकता नहीं है।

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

यह वर्ग एस pointer-events: noneकी लिंक कार्यक्षमता को अक्षम करने का प्रयास करने के लिए उपयोग करता है <a>, लेकिन वह सीएसएस संपत्ति अभी तक मानकीकृत नहीं है और ओपेरा 18 और उससे नीचे, या इंटरनेट एक्सप्लोरर 11 में पूरी तरह से समर्थित नहीं है। इसके अलावा, यहां तक ​​​​कि उन ब्राउज़रों में भी जो समर्थन करते हैं pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहता है, जिसका अर्थ है कि देखे गए कीबोर्ड उपयोगकर्ता और सहायक तकनीकों के उपयोगकर्ता अभी भी इन लिंक को सक्रिय करने में सक्षम होंगे। इसलिए सुरक्षित रहने के लिए, ऐसे लिंक को अक्षम करने के लिए कस्टम जावास्क्रिप्ट का उपयोग करें।

इमेजिस

उत्तरदायी छवियां

.img-responsiveबूटस्ट्रैप 3 में छवियों को कक्षा के अतिरिक्त के माध्यम से उत्तरदायी-अनुकूल बनाया जा सकता है । max-width: 100%;यह , height: auto;और छवि पर लागू होता display: block;है ताकि यह मूल तत्व के लिए अच्छी तरह से स्केल हो जाए।

उन छवियों को केन्द्रित करने के लिए जो .img-responsiveकक्षा का उपयोग करती हैं, .center-blockके बजाय का उपयोग करें .text-center। उपयोग के बारे में अधिक जानकारी के लिए सहायक वर्ग अनुभाग देखें ।.center-block

एसवीजी छवियां और आईई 8-10

इंटरनेट एक्सप्लोरर 8-10 में, एसवीजी छवियों के साथ .img-responsiveअनुपातहीन आकार होता है। इसे ठीक करने के लिए, width: 100% \9;जहां आवश्यक हो वहां जोड़ें। बूटस्ट्रैप इसे स्वचालित रूप से लागू नहीं करता है क्योंकि यह अन्य छवि प्रारूपों के लिए जटिलताओं का कारण बनता है।

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

छवि आकार

<img>किसी भी प्रोजेक्ट में छवियों को आसानी से स्टाइल करने के लिए तत्वों में कक्षाएं जोड़ें ।

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

ध्यान रखें कि Internet Explorer 8 में गोल कोनों के लिए समर्थन का अभाव है।

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

सहायक वर्ग

प्रासंगिक रंग

कुछ विशेष जोर उपयोगिता वर्गों के साथ रंग के माध्यम से अर्थ व्यक्त करें। ये लिंक पर भी लागू हो सकते हैं और हमारी डिफ़ॉल्ट लिंक शैलियों की तरह ही होवर पर काले पड़ जाएंगे।

फ्यूस डापीबस, टेलस एसी कर्सस कमोडो, टॉर्चर मौरिस निभ।

Nullam id dolor id nibh ultricies vehicula ut id elit.

डुइस मोलिस, इस्ट नॉन कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला।

मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना।

इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।

<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>ज्यादातर मामलों में, अपने पाठ को कक्षा के साथ में लपेटना एक पर्याप्त समाधान है ।

सहायक तकनीकों को अर्थ देना

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

प्रासंगिक पृष्ठभूमि

प्रासंगिक पाठ रंग वर्गों के समान, किसी तत्व की पृष्ठभूमि को किसी भी प्रासंगिक वर्ग में आसानी से सेट करें। पाठ कक्षाओं की तरह, एंकर घटक हॉवर पर काले पड़ जाएंगे।

Nullam id dolor id nibh ultricies vehicula ut id elit.

डुइस मोलिस, इस्ट नॉन कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला।

मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना।

इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।

<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>को कक्षा के साथ लपेटना पर्याप्त समाधान है।

सहायक तकनीकों को अर्थ देना

प्रासंगिक रंगों के साथ , सुनिश्चित करें कि रंग के माध्यम से व्यक्त किया गया कोई भी अर्थ भी ऐसे प्रारूप में व्यक्त किया गया है जो पूरी तरह से प्रस्तुतिकरण नहीं है।

आइकन बंद करें

मोडल और अलर्ट जैसी सामग्री को खारिज करने के लिए जेनेरिक क्लोज़ आइकन का उपयोग करें।

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

कैरेट

ड्रॉपडाउन कार्यक्षमता और दिशा को इंगित करने के लिए कैरेट का उपयोग करें। ध्यान दें कि डिफ़ॉल्ट कैरेट ड्रॉपअप मेनू में स्वचालित रूप से उलट जाएगा ।

<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();
}

नेवबार में उपयोग के लिए नहीं

उपयोगिता वर्गों के साथ नेवबार में घटकों को संरेखित करने के लिए, .navbar-leftया .navbar-rightइसके बजाय उपयोग करें। विवरण के लिए नेवबार डॉक्स देखें।

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

के माध्यम से एक तत्व को display: blockऔर केंद्र पर सेट करें margin। मिक्सिन और क्लास के रूप में उपलब्ध है।

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

क्लियरफिक्स

मूल तत्व मेंfloat जोड़कर आसानी से साफ़ करें । निकोलस गैलाघर द्वारा लोकप्रिय के रूप में माइक्रो क्लियरफिक्स का उपयोग करता है। मिश्रण के रूप में भी इस्तेमाल किया जा सकता है।.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();
}

सामग्री दिखाना और छिपाना

और कक्षाओं का उपयोग करके किसी तत्व को दिखाने या छिपाने के लिए (स्क्रीन रीडर सहित ) बाध्य करें। इन वर्गों का उपयोग विशिष्टता के टकराव से बचने के लिए किया जाता है, ठीक उसी तरह जैसे कि क्विक फ़्लोट्स । वे केवल ब्लॉक स्तरीय टॉगलिंग के लिए उपलब्ध हैं। इन्हें मिक्सी के रूप में भी इस्तेमाल किया जा सकता है।.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किसी तत्व की टेक्स्ट सामग्री को पृष्ठभूमि छवि से बदलने में सहायता के लिए कक्षा या मिश्रण का उपयोग करें ।

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

उत्तरदायी उपयोगिताओं

तेजी से मोबाइल के अनुकूल विकास के लिए, मीडिया क्वेरी के माध्यम से डिवाइस द्वारा सामग्री दिखाने और छिपाने के लिए इन उपयोगिता वर्गों का उपयोग करें। मुद्रित होने पर सामग्री को टॉगल करने के लिए उपयोगिता वर्ग भी शामिल हैं।

इनका सीमित आधार पर उपयोग करने का प्रयास करें और एक ही साइट के पूरी तरह से भिन्न संस्करण बनाने से बचें। इसके बजाय, प्रत्येक डिवाइस की प्रस्तुति को पूरक करने के लिए उनका उपयोग करें।

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

व्यूपोर्ट ब्रेकप्वाइंट पर सामग्री को टॉगल करने के लिए एकल या उपलब्ध कक्षाओं के संयोजन का उपयोग करें।

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

v3.2.0 के अनुसार, .visible-*-*प्रत्येक ब्रेकप्वाइंट के लिए कक्षाएं तीन रूपों में आती हैं, एक displayनीचे सूचीबद्ध प्रत्येक सीएसएस संपत्ति मूल्य के लिए।

कक्षाओं का समूह सीएसएस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-छोटे और मध्यम पर दृश्यमान
✔ छोटे और बड़े पर दृश्यमान
✔ x-छोटे और बड़े पर दृश्यमान
✔ छोटे और मध्यम पर दृश्यमान

पर छिपा...

यहां, हरे रंग के चेकमार्क यह भी इंगित करते हैं कि तत्व आपके वर्तमान व्यूपोर्ट में छिपा हुआ है।

✔ x-छोटे पर छिपा हुआ
✔ छोटे पर छिपा हुआ
मध्यम ✔ माध्यम पर छिपा हुआ
✔ बड़े पैमाने पर छिपा हुआ
✔ x-छोटे और छोटे पर छिपा हुआ
✔ मध्यम और बड़े पर छिपा हुआ
✔ x-छोटे और मध्यम पर छिपा हुआ
✔ छोटे और बड़े पर छिपा हुआ
✔ x-छोटे और बड़े पर छिपा हुआ
✔ छोटे और मध्यम पर छिपा हुआ

कम का उपयोग करना

बूटस्ट्रैप का CSS लेस पर बनाया गया है, एक प्रीप्रोसेसर जिसमें अतिरिक्त कार्यक्षमता जैसे चर, मिक्सिन और CSS को संकलित करने के लिए कार्य हैं। जो लोग हमारी संकलित सीएसएस फाइलों के बजाय स्रोत कम फाइलों का उपयोग करना चाहते हैं, वे हमारे द्वारा पूरे ढांचे में उपयोग किए जाने वाले कई चर और मिश्रणों का उपयोग कर सकते हैं।

ग्रिड वेरिएबल्स और मिक्सिन्स ग्रिड सिस्टम सेक्शन के अंतर्गत आते हैं ।

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

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

तीसरे पक्ष के संकलन उपकरण बूटस्ट्रैप के साथ काम कर सकते हैं, लेकिन वे हमारी कोर टीम द्वारा समर्थित नहीं हैं।

चर

रंग, रिक्ति, या फ़ॉन्ट स्टैक जैसे सामान्य रूप से उपयोग किए जाने वाले मानों को केंद्रीकृत करने और साझा करने के तरीके के रूप में पूरे प्रोजेक्ट में चर का उपयोग किया जाता है। संपूर्ण विश्लेषण के लिए, कृपया कस्टमाइज़र देखें ।

रंग की

आसानी से दो रंग योजनाओं का उपयोग करें: ग्रेस्केल और सिमेंटिक। ग्रेस्केल रंग आमतौर पर उपयोग किए जाने वाले काले रंगों तक त्वरित पहुंच प्रदान करते हैं जबकि अर्थपूर्ण में अर्थपूर्ण प्रासंगिक मूल्यों को निर्दिष्ट विभिन्न रंग शामिल होते हैं।

@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;
  }
}

ध्यान दें कि @link-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";

अवयव

बूटस्ट्रैप के घटक सामान्य मान सेट करने के लिए कुछ डिफ़ॉल्ट चर का उपयोग करते हैं। यहाँ सबसे अधिक इस्तेमाल किया जाता है।

@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;

विक्रेता मिश्रण

आपके संकलित सीएसएस में सभी प्रासंगिक विक्रेता उपसर्गों को शामिल करके कई ब्राउज़रों का समर्थन करने में मदद करने के लिए विक्रेता मिश्रण मिश्रित होते हैं।

बॉक्स आकार

एकल मिक्सिन के साथ अपने घटकों के बॉक्स मॉडल को रीसेट करें। संदर्भ के लिए, मोज़िला का यह उपयोगी लेख देखें ।

ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रण को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.

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

कोने पर गोलाकार आकृति

आज सभी आधुनिक ब्राउज़र गैर-उपसर्ग border-radiusगुण का समर्थन करते हैं। जैसे, कोई मिश्रण नहीं है .border-radius(), लेकिन बूटस्ट्रैप में किसी वस्तु के किसी विशेष पक्ष पर दो कोनों को जल्दी से गोल करने के लिए शॉर्टकट शामिल हैं।

.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;
}

बॉक्स (ड्रॉप) छाया

यदि आपके लक्षित दर्शक नवीनतम और महानतम ब्राउज़रों और उपकरणों का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आप केवल box-shadowसंपत्ति का ही उपयोग करें। यदि आपको पुराने Android (pre-v4) और iOS डिवाइस (pre-iOS 5) के लिए समर्थन की आवश्यकता है, तो आवश्यक उपसर्ग लेने के लिए बहिष्कृत मिक्सिन का उपयोग करें।-webkit

मिक्सिन को v3.1.0 के रूप में हटा दिया गया है, क्योंकि बूटस्ट्रैप आधिकारिक तौर पर पुराने प्लेटफॉर्म का समर्थन नहीं करता है जो मानक संपत्ति का समर्थन नहीं करते हैं। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.

अपने बॉक्स शैडो में रंगों का उपयोग करना सुनिश्चित करें 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 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.

.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;
}

परिवर्तनों

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

ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रणों को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.

.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 के एनीमेशन गुणों का उपयोग करने के लिए एक एकल मिश्रण और व्यक्तिगत गुणों के लिए अन्य मिश्रण।

ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रणों को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.

.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 के लिए फ़ॉलबैक प्रदान करें।

.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
}

कॉलम

एक ही तत्व के भीतर सीएसएस के माध्यम से कॉलम उत्पन्न करें।

.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;
}

ढ़ाल

आसानी से किन्हीं दो रंगों को बैकग्राउंड ग्रेडिएंट में बदल दें। अधिक उन्नत हो जाएं और एक दिशा निर्धारित करें, तीन रंगों का उपयोग करें, या रेडियल ग्रेडिएंट का उपयोग करें। एक एकल मिश्रण के साथ आपको वे सभी प्रीफ़िक्स्ड सिंटैक्स मिलते हैं जिनकी आपको आवश्यकता होगी।

#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);

सचेत! क्या आपको कभी भी किसी ग्रेडिएंट को हटाने की आवश्यकता है, किसी भी IE-विशिष्ट को निकालना सुनिश्चित करें जिसे filterआपने जोड़ा हो। .reset-filter()आप इसके साथ मिक्सिन का उपयोग करके ऐसा कर सकते हैं background-image: none;।

उपयोगिता मिश्रण

यूटिलिटी मिक्सिन ऐसे मिक्सिन होते हैं जो किसी विशिष्ट लक्ष्य या कार्य को प्राप्त करने के लिए अन्यथा असंबंधित CSS गुणों को मिलाते हैं।

क्लियरफिक्स

class="clearfix"किसी भी तत्व को जोड़ना भूल जाएं और इसके बजाय .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); }

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

किसी भी टेक्स्ट क्षेत्र, या किसी अन्य तत्व के लिए आकार बदलने के विकल्पों को आसानी से कॉन्फ़िगर करें। सामान्य ब्राउज़र व्यवहार के लिए डिफ़ॉल्ट ( both).

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

पाठ को छोटा करना

एकल मिक्सिन वाले इलिप्सिस के साथ टेक्स्ट को आसानी से छोटा करें। तत्व होने 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 छवि आयाम निर्दिष्ट करें, और बूटस्ट्रैप @2x मीडिया क्वेरी प्रदान करेगा। यदि आपके पास परोसने के लिए कई छवियां हैं, तो अपनी रेटिना छवि सीएसएस को एक ही मीडिया क्वेरी में मैन्युअल रूप से लिखने पर विचार करें।

.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);
}

Sass . का उपयोग करना

जबकि बूटस्ट्रैप कम पर बनाया गया है, इसमें एक आधिकारिक सास पोर्ट भी है । हम इसे एक अलग GitHub रिपॉजिटरी में बनाए रखते हैं और एक रूपांतरण स्क्रिप्ट के साथ अपडेट को संभालते हैं।

क्या शामिल है

चूंकि Sass पोर्ट का एक अलग रेपो है और थोड़ा अलग दर्शकों की सेवा करता है, इसलिए प्रोजेक्ट की सामग्री मुख्य बूटस्ट्रैप प्रोजेक्ट से बहुत भिन्न होती है। यह सुनिश्चित करता है कि Sass पोर्ट यथासंभव Sass-आधारित प्रणालियों के साथ संगत है।

रास्ता विवरण
lib/ रूबी रत्न कोड (Sass विन्यास, रेल और कम्पास एकीकरण)
tasks/ कन्वर्टर स्क्रिप्ट (अपस्ट्रीम लेस टू Sass)
test/ संकलन परीक्षण
templates/ कम्पास पैकेज मेनिफेस्ट
vendor/assets/ Sass, JavaScript, और फ़ॉन्ट फ़ाइलें
Rakefile आंतरिक कार्य, जैसे रेक और कन्वर्ट

इन फ़ाइलों को क्रिया में देखने के लिए Sass पोर्ट के GitHub रिपॉजिटरी पर जाएँ ।

इंस्टालेशन

Sass के लिए बूटस्ट्रैप को स्थापित और उपयोग करने के तरीके के बारे में जानकारी के लिए, GitHub रिपॉजिटरी रीडमी से परामर्श करें । यह सबसे अद्यतित स्रोत है और इसमें रेल, कंपास, और मानक सास परियोजनाओं के उपयोग के लिए जानकारी शामिल है।

Sass . के लिए बूटस्ट्रैप