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

एचटीएमएल 5 डॉक्टटाइप ऐ

बूटस्ट्रैप किश 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.

सामान्य करो।css

बेहतर क्रॉस-ब्राउज़र रेंडरिंग आस्तै, अस 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आस्तै CSS गी डिवाइसें दे इक संकीर्ण सेट तगर सीमित करने आस्तै।

@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)
ग्रिड दा व्यवहार	हर वक्त क्षैतिज	शुरू करने लेई ढह गेआ, ब्रेकपॉइंटें दे उप्पर क्षैतिज
कंटेनर दी चौड़ाई	कोई (ऑटो)	750पीएक्स ऐ	970पीएक्स ऐ	1170पीएक्स ऐ
वर्ग उपसर्ग	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# दा स्तंभ	12 दा
स्तंभ चौड़ाई	ऑटो	~ 62 पीएक्स ऐ	~ 81 पीएक्स ऐ	~ 97 पीएक्स ऐ
गटर चौड़ाई	30px (इक स्तंभ दे हर इक पास्से 15px)
घोंसलेदार	हां
ऑफसेट करदा ऐ	हां
कॉलम दा आर्डर देना	हां

उदाहरण : ढेर-टू-क्षैतिज

ग्रिड क्लासें दे इक सेट दा उपयोग करदे होई .col-md-*, तुस इक बुनियादी ग्रिड सिस्टम बनाई सकदे ओ जेह् ड़ा डेस्कटॉप (मध्यम) डिवाइसें पर क्षैतिज होने थमां पैह् ले मोबाइल डिवाइस ते टैबलेट डिवाइस (अतिरिक्त छोटी थमां छोटी रेंज) पर ढेर शुरू होई जंदा ऐ। किसी भी च ग्रिड स्तंभ रखो .row.

.कोल-एमडी-1 ऐ

.कोल-एमडी-8 ऐ

.कोल-एमडी-4 ऐ

.कोल-एमडी-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-*अपने स्तंभें च जोड़ियै अतिरिक्त छोटे ते मझौले डिवाइस ग्रिड वर्गें दा इस्तेमाल करो . एह् सब किश किस चाल्ली कम्म करदा ऐ इसदे बेहतर विचार आस्तै हेठ दित्ते गेदे उदाहरन गी दिक्खो।

.कोल-एक्सएस-12 .कोल-एमडी-8 ऐ

.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ

.कोल-एक्सएस-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-*टैबलेट क्लासें कन्नै होर बी गतिशील ते शक्तिशाली लेआउट बनाइयै पिछले उदाहरन पर निर्माण करो ।

.कोल-एक्सएस-12 .कोल-एसएम-6 .कोल-एमडी-8 ऐ

.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ

.कोल-एक्सएस-6 .कोल-एसएम-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 शा मते स्तंभ रक्खे गेदे न तां अतिरिक्त स्तंभें दा हर इक समूह, इक इकाई दे रूप च, इक नमीं रेखा पर लपेटग।

.कोल-एक्सएस-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>

प्रतिक्रियाशील स्तंभ रीसेट करदा ऐ

उपलब्ध ग्रिड दे चार स्तरें कन्नै तुसें गी ऐसे मुद्दें च दौड़ना लाज़मी ऐ जित्थें, किश ब्रेकपॉइंटें पर, तुंदे स्तंभ बिल्कुल ठीक नेईं साफ होंदे न कीजे इक दुए कोला लंबा ऐ। उसगी ठीक करने आस्तै, इक .clearfixते साढ़ी प्रतिक्रियाशील उपयोगिता वर्गें दे संयोजन दा इस्तेमाल करो .

.col-xs-6 .col-sm-3
अपने व्यूपोर्ट दा आकार बदलो जां इक उदाहरण आस्तै अपने फोन पर इसदी जांच करो।

.कोल-एक्सएस-6 .कोल-एसएम-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

.कोल-एमडी-4 ऐ

.कोल-एमडी-4 .कोल-एमडी-ऑफसेट-4 ऐ

.कोल-एमडी-3 .कोल-एमडी-ऑफसेट-3 ऐ

.कोल-एमडी-6 .कोल-एमडी-ऑफसेट-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: .कोल-एसएम-9 ऐ

स्तर 2: .कोल-एक्सएस-8 .कोल-एसएम-6 ऐ

स्तर 2: .कोल-एक्सएस-4 .कोल-एसएम-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-*संशोधक वर्गें कन्नै साढ़े बिल्ट-इन ग्रिड स्तंभें दा क्रम आसानी कन्नै बदलो ।

.कोल-एमडी-9 .कोल-एमडी-पुश-3 ऐ

.कोल-एमडी-3 .कोल-एमडी-पुल-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>दे राहें <h6>, उपलब्ध न। .h1क्लासें दे माध्यम कन्नै .h6बी उपलब्ध न, कीजे जिसलै तुस कुसै हेडिंग दी फॉन्ट स्टाइलिंग कन्नै मेल खाना चांह् दे ओ पर फ्ही बी चांह् दे ओ जे तुंदा पाठ इनलाइन प्रदर्शत कीता जा।

एच१ ऐ। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 36पीएक्स ऐ
ज २। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 30px ऐ
ज ३। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 24पीएक्स ऐ
ह4 ऐ। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 18px ऐ
ज ५। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 14पीएक्स ऐ
एच6 ऐ। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 12पीएक्स ऐ

<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क्लास कन्नै कुसै बी हेडिंग च हल्के, सेकेंडरी पाठ बनाओ .

एच१ ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज २। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज ३। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ह4 ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज ५। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

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

शरीर दी नकल

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

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ओरनारे वेल ईउ लियो। सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला।

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

मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट।

<p>...</p>

सीसा शरीर नकल

जोड़कर इक पैराग्राफ गी अलग बनाओ .lead.

विवामस सैजिटिस लैकस वेल औग लाओरीत रुट्रम फौसिबस डोलोर नीलामी। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस।

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

कम के साथ बनाया गया

मुद्रण पैमाना चर च दो Less चर उप्पर आधारत ऐ ।less : @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>

वैकल्पिक तत्वें दा

एचटीएमएल 5 च <b>ते बेझिझक इस्तेमाल करो । दा मतलब ऐ शब्दें जां वाक्यांशें गी बिना कुसै अतिरिक्त महत्व दे उजागर करना जदके एह् मते सारें शा मता आवाज़ , तकनीकी शब्दें बगैरा आस्तै ऐ ।<i><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थोह् ड़ी-मती फॉन्ट-आकार आस्तै इक संक्षिप्त रूप च जोड़ो ।

एचटीएमएल कटा हुआ रोटी दे बाद दी सबतूं अच्छी चीज ऐ।

<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> दे चारों-पार लपेटो । सीधे उद्धरणें लेई, अस इक .<p>

लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एरात ए एंटी।

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

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

इक मानक पर सरल बदलाव आस्तै शैली ते सामग्री च बदलाव <blockquote>.

इक स्रोत दा नाम देना

<footer>स्रोत दी पन्छान करने आस्तै इक जोड़ो । स्रोत कम्मै दा नांऽ लपेटो <cite>.

लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एरात ए एंटी।

सोर्स टाइटल च कोई मशहूर

<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 class="blockquote-reverse">
  ...
</blockquote>

लिस्टां करदा ऐ

अनऑर्डर

ऐसी चीजें दी सूची जिस च क्रम गी स्पश्ट रूप कन्नै कोई फर्क नेईं पौंदा।

लोरेम इप्सम डोलोर बैठो अमेत
कन्सेक्टेतुर एडिपिसिंग एलिट
पूर्णांक मोलेस्टी लोरेम एट मासा
प्रीटियम निस्ल एलिकेट च फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेके
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- एसी ट्रिस्टिक लिबेरो वोलुतपत एट
फौसिबस पोर्टा लैकस फ्रिंगिला वेल
ऐन बैठा अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

आर्डर दे दी

आइटमें दी इक सूची जिस च क्रम स्पश्ट रूप कन्नै महत्व रखदा ऐ ।

लोरेम इप्सम डोलोर बैठो अमेत
कन्सेक्टेतुर एडिपिसिंग एलिट
पूर्णांक मोलेस्टी लोरेम एट मासा
प्रीटियम निस्ल एलिकेट च फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
फौसिबस पोर्टा लैकस फ्रिंगिला वेल
ऐन बैठा अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

अनस्टाइल

सूची आइटमें पर डिफाल्ट list-styleते बाएं मार्जिन गी हटाओ (केवल फौरी बच्चें गी)। एह् सिर्फ फौरी बच्चें दी सूची आइटमें पर लागू होंदा ऐ , मतलब तुसेंगी कुसै बी नेस्टेड सूची आस्तै बी क्लास जोड़ने दी लोड़ होग.

लोरेम इप्सम डोलोर बैठो अमेत
कन्सेक्टेतुर एडिपिसिंग एलिट
पूर्णांक मोलेस्टी लोरेम एट मासा
प्रीटियम निस्ल एलिकेट च फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेके
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- एसी ट्रिस्टिक लिबेरो वोलुतपत एट
फौसिबस पोर्टा लैकस फ्रिंगिला वेल
ऐन बैठा अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

इनलाइन

सारे सूची आइटमें गी इक लाइन पर display: inline-block;ते किश हल्की पैडिंग कन्नै रक्खो।

लोरेम इप्सम
फेसेलस इअकुलिस दा
नुल्ला वोलुतपत

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

ब्यौरा

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

विवरण सूची दी: शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
यूइसमोद ने दी: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।; डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा: एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।

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

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

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

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

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

वैकल्पिक तालिका कैप्शन।
# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

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

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

.table-stripedदे अंदर कुसै बी तालिका पंक्ति च ज़ेबरा-स्ट्राइपिंग जोड़ने लेई इस्तेमाल करो <tbody>.

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

धारीदार तालिकाएं गी CSS चयनकर्ता दे राहें स्टाइल कीता जंदा ऐ :nth-child, जेह् ड़ा इंटरनेट एक्सप्लोरर 8 च उपलब्ध नेईं ऐ।

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

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

सीमाबद्ध मेज

.table-borderedतालिका ते कोशिकाएं दे सारे पास्सै सीमाएं आस्तै जोड़ो ।

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

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

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

.table-hoverइक दे अंदर तालिका पंक्तियें पर इक होवर स्थिति गी सक्षम करने आस्तै जोड़ो <tbody>.

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

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

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

.table-condensedसेल पैडिंग गी आधे च कट्टियै टेबल गी होर कॉम्पैक्ट बनाने लेई जोड़ो ।

# ऐ	पैहला नां	अखीरी नां	यूजरनेम दा
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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वर्ग कन्नै छिपे दा अतिरिक्त पाठ.

रिस्पांसिव टेबल

.tableकुसै बी च लपेटियै प्रतिक्रियाशील तालिकाएं गी बनाओ .table-responsiveतां जे उनेंगी छोटे डिवाइसें पर (768px थमां हेठ) क्षैतिज रूप कन्नै स्क्रॉल कीता जाई सकै। 768px चौड़ाई थमां बड्डी कुसै बी चीज़ पर दिक्खदे बेल्लै तुसें गी इनें तालिकाएं च कोई फर्क नेईं लब्भग।

ऊर्ध्वाधर कतरन / कटौती करना

प्रतिक्रियाशील तालिकाएं दा इस्तेमाल कीता जंदा ऐ overflow-y: hidden, जेह् ड़ी कुसै बी सामग्री गी क्लिप करदी ऐ जेह् ड़ी तालिका दे निचले जां शीर्शक किनारे थमां परे ऐ । खास करियै, एह् ड्रॉपडाउन मेनू ते होर त्रीयें पार्टी विजेटें गी क्लिप करी सकदा ऐ।

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

फायरफॉक्स च किश अजीब फील्डसेट स्टाइलिंग शामल widthऐ जेह् ड़ी प्रतिक्रियाशील तालिका च हस्तक्षेप करदी ऐ. इसगी फायरफॉक्स-विशिष्ट हैक दे बगैर ओवरराइड नेईं कीता जाई सकदा जेह् ड़ा अस बूटस्ट्रैप च नेईं दिंदे:

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

होर मती जानकारी आस्तै, एह् स्टैक ओवरफ्लो जवाब पढ़ो .

# ऐ	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
१	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
२	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
३	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका

# ऐ	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
१	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
२	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
३	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका

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

<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-groups गी ग्रिड पंक्तियें दे रूप च व्यवहार करने च बदलाव होंदा ऐ , इसलेई .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>.

<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ते :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>`

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

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

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

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

एह् वर्ग s pointer-events: noneदी लिंक फ़ंक्शनलटी गी अक्षम करने दी कोशश करने आस्तै बरतदा ऐ <a>, पर ओह CSS संपत्ति अजें तगर मानक नेईं ऐ ते ओपेरा 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>कुसै बी प्रोजेक्ट च छवियें गी आसानी कन्नै स्टाइल करने आस्तै इक तत्व च क्लासें गी जोड़ो ।

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

ध्यान रक्खो जे इंटरनेट एक्सप्लोरर 8 च गोल कोने आस्तै समर्थन दी कमी ऐ।

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

संदर्भ रंग

मुट्ठी भर जोर उपयोगिता वर्गें कन्नै रंग दे माध्यम कन्नै अर्थ संप्रेषित करना। एह् लिंक पर बी लागू कीते जाई सकदे न ते होवर पर बी काला होई जाङन जिऱयां साढ़ी डिफ़ॉल्ट लिंक शैलियां।

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

नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरात पोर्टिटोर लिगुला।

मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना।

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

डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला।

<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वर्ग कन्नै छिपे दा अतिरिक्त पाठ ऐ .

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

संदर्भ पाठ रंग वर्गें दे समान, इक तत्व दी पृष्ठभूमि गी कुसै बी संदर्भ वर्ग च आसानी कन्नै सेट करो। एंकर घटक होवर पर गहरा होंगन, ठीक पाठ वर्गें दी तर्ज पर।

नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरात पोर्टिटोर लिगुला।

मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना।

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

डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला।

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

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

इक तत्व गी 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-*-*हर ब्रेकपॉइंट आस्तै वर्ग त्रै बदलावें च औंदे न, हर इक CSS 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>

परीक्षण केस

प्रतिक्रियाशील उपयोगिता वर्गें दी जांच करने आस्तै अपने ब्राउज़र दा आकार बदलो जां बक्ख-बक्ख डिवाइसें पर लोड करो.

पर दिक्खने गी मिलदा ऐ...

हरे रंग दे चेकमार्क दस्सदे न जे तत्व तुंदे मौजूदा व्यूपोर्ट च दिक्खेआ जा करदा ऐ .

अतिरिक्त छोटा ✔ एक्स-छोटे पर दिक्खने गी मिलदा ऐ

लौहका ✔ छोटे पर दिखाई दे

दरम्याना ✔ माध्यम पर दिखाई दे

बड्डा ✔ बड्डे पर दिक्खने गी मिलदा ऐ

अतिरिक्त छोटा ते छोटा ✔ एक्स-छोटे ते छोटे पर दिक्खने गी मिलदा ऐ

मध्यम ते बड्डे ✔ मध्यम ते बड्डे पर दिक्खने गी मिलदा ऐ

अतिरिक्त छोटा ते मध्यम ✔ एक्स-छोटे ते मध्यम पर दिक्खने गी मिलदा ऐ

छोटे-बड़े ✔ छोटे-बड़े पर दिक्खने गी मिलदा ऐ

अतिरिक्त छोटे ते बड़े ✔ एक्स-छोटे ते बड्डे पर दिक्खने गी मिलदा ऐ

छोटे ते मध्यम ✔ छोटे ते मध्यम पर दिक्खने गी मिलदा ऐ

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

इत्थै, हरे रंग दे चेकमार्क बी दर्शांदे न जे तत्व तुंदे मौजूदा व्यूपोर्ट च छिपे दा ऐ .

अतिरिक्त छोटा ✔ एक्स-छोटे पर छिपे दा

लौहका ✔ छोटे पर छिपा

दरम्याना ✔ माध्यम पर छिपे दा

बड्डा ✔ बड़े पर छिपा

अतिरिक्त छोटा ते छोटा ✔ एक्स-छोटे ते छोटे पर छिपे दा

मध्यम ते बड्डे ✔ मध्यम ते बड्डे पर छिपे दा

अतिरिक्त छोटा ते मध्यम ✔ एक्स-छोटे ते मध्यम पर छिपे दा

छोटे-बड़े ✔ छोटे-बड़े पर छिपे दा

अतिरिक्त छोटे ते बड़े ✔ एक्स-छोटे ते बड्डे पर छिपे दा

छोटे ते मध्यम ✔ छोटे ते मध्यम पर छिपे दा

बूटस्ट्रैप दा सीएसएस लेस पर बनाया गेदा ऐ, जेह् ड़ा इक प्रीप्रोसेसर ऐ जिस च सीएसएस संकलित करने आस्तै चर, मिक्सिन, ते फंक्शनें जनेह् अतिरिक्त कार्यक्षमता ऐ। जेह् ड़े लोक साढ़ी संकलित 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;

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

विक्रेता मिक्सिन तुंदे संकलित CSS च सारे प्रासंगिक विक्रेता उपसर्गें गी शामल करियै मते सारे ब्राउज़रें गी समर्थन करने च मदद करने आस्तै मिक्सिन न।

बॉक्स-साइज करना

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

मिक्सिन गी 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अपने आपै च संपत्ति दा इस्तेमाल करना सुनिश्चत करो। जेकर तुसेंगी पुराने एंड्रॉइड (प्री-v4) ते आईओएस डिवाइस (प्री-आईओएस 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;
}

परिवर्तन करदे

किसे बी वस्तु गी घुमाना, स्केल करना, अनुवाद करना (चलना), जां तिरछा करना।

.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 आस्तै इक फॉलबैक प्रदान करो.

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

सिर ऊपर ! जेकर तुसेंगी कदें बी कुसै ढाल गी हटाने दी लोड़ पौंदी ऐ तां कुसै बी आईई-विशिष्ट 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;
}

पाठ काटना

इक गै मिक्सिन कन्नै इक दीर्घवृत्त कन्नै पाठ गी आसानी कन्नै कटौती करो। तत्व गी स्तर होने दी लोड़ ऐ ।blockinline-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 मीडिया क्वेरी उपलब्ध करोआग. जेकर तुंदे कोल सेवा करने आस्तै मती सारी छवियां न तां इक मीडिया क्वेरी च अपनी रेटिना छवि 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);
}

जदके बूटस्ट्रैप लेस पर बनाया गेदा ऐ, इसदे कोल इक आधिकारिक सैस पोर्ट बी ऐ . अस इसगी इक बक्ख GitHub रिपोजिटरी च बनाए रखने आं ते इक रूपांतरण स्क्रिप्ट कन्नै अपडेट गी संभालने आं.

क्या शामिल ऐ

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

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

इनें फाइलें गी कार्रवाई च दिक्खने आस्तै Sass पोर्ट दी GitHub रिपोजिटरी पर जाओ .

इंस्टालेशन करना

Sass आस्तै बूटस्ट्रैप गी किस चाल्ली इंस्टाल करना ते बरतना ऐ इसदे बारे च जानकारी आस्तै, GitHub रिपोजिटरी readme कन्नै सलाह करो . एह् सबनें थमां अद्यतन स्रोत ऐ ते रेल, कम्पास, ते मानक सस प्रोजेक्टें कन्नै इस्तेमाल आस्तै जानकारी शामल ऐ।

सस्स लेई बूटस्ट्रैप

सीएसएस दा

अवलोकन करना

एचटीएमएल 5 डॉक्टटाइप ऐ

मोबाइल पहले

टाइपोग्राफी ते लिंक

सामान्य करो।css

कंटेनर

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

परिचे

मीडिया पूछताछ

ग्रिड विकल्प

उदाहरण : ढेर-टू-क्षैतिज

उदाहरण : तरल पदार्थ दा पात्र

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

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

उदाहरण : स्तंभ लपेटना

प्रतिक्रियाशील स्तंभ रीसेट करदा ऐ

कॉलम ऑफसेट करना

घोंसले बनाने वाले स्तंभ

कॉलम दा आर्डर देना

मिक्सिन ते चर कम

चर करने वाले

मिक्सिन

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

टाइपोग्राफी दा

हेडिंग्स

एच१ ऐ। बूटस्ट्रैप हेडिंग

ज २। बूटस्ट्रैप हेडिंग

ज ३। बूटस्ट्रैप हेडिंग

ह4 ऐ। बूटस्ट्रैप हेडिंग

ज ५। बूटस्ट्रैप हेडिंग

एच6 ऐ। बूटस्ट्रैप हेडिंग

एच१ ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज २। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज ३। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ह4 ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

ज ५। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

एच6 ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ

शरीर दी नकल

सीसा शरीर नकल

कम के साथ बनाया गया

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

चिह्नित पाठ

पाठ हटाया गया

पाठ दे माध्यम कन्नै स्ट्राइक करो

पाठ डाला गया

रेखांकित पाठ

छोटा सा पाठ

न-झक्क

इटैलिक

वैकल्पिक तत्वें दा

संरेखण कक्षाएं

परिवर्तन कक्षाएं

संक्षिप्त रूप

मूल संक्षिप्त नाम

आरंभवाद

संबोधन करदा ऐ

ब्लॉककोट्स

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

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

इक स्रोत दा नाम देना

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

लिस्टां करदा ऐ

अनऑर्डर

आर्डर दे दी

अनस्टाइल

इनलाइन

ब्यौरा

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

स्वतः कटौती करना

कोड

इनलाइन

यूजर इनपुट ऐ

बेसिक ब्लॉक

चर करने वाले

नमूना आउटपुट

तालिकाएं

बुनियादी मिसाल

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

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

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

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

छिपे दे `.sr-only`लेबल कन्नै वैकल्पिक आइकन