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

एचटीएमएल 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.

नॉर्मलाइज करीं.सीएसएस के बा

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

कंटेनर के बा

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

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

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

पूरा चौड़ाई वाला कंटेनर खातिर इस्तेमाल करीं .container-fluid, जवन आपके व्यूपोर्ट के पूरा चौड़ाई में फइलल होखे।

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

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

परिचय

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

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

.col-xs-6 के बा

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

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

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

जइसे : मोबाइल, टैबलेट, डेस्कटॉप के बारे में बतावल गइल बा

.col-sm-*टैबलेट क्लास के साथ अउरी गतिशील आ शक्तिशाली लेआउट बना के पिछला उदाहरण पर निर्माण करीं ।

.कोल-एक्सएस-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 से ढेर कॉलम सभ के रखल जाय तब अतिरिक्त कॉलम सभ के हर समूह, एक इकाई के रूप में, एगो नया लाइन पर लपेट जाई।

.col-xs-9 के बा

.col-xs-4
9 + 4 = 13 > 12 के कारण, ई 4-स्तंभ-चौड़ाई दिव एक सटल इकाई के रूप में एगो नया लाइन पर लपेटल जाला।

.col-xs-6
बाद के कॉलम नया लाइन के साथ जारी बा।

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

रिस्पांसिव कॉलम रीसेट हो जाला

उपलब्ध ग्रिड के चार स्तर के साथ रउआ अइसन मुद्दा में भागे के बाध्य बानी जहाँ, कुछ खास ब्रेकपॉइंट पर, राउर कॉलम बिल्कुल सही साफ ना होखे काहे कि एगो दूसरा से लंबा बा। .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 के बा

.col-md-4 .col-md-ऑफसेट-4 के बा

.col-md-3 .col-md-ऑफसेट-3 के बा

.col-md-6 .col-md-ऑफसेट-3 के बा

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

रउआँ .col-*-offset-0कक्षा सभ के साथ निचला ग्रिड टीयर सभ से ऑफसेट सभ के भी ओवरराइड क सकत बानी।

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

घोंसला बनावे के कॉलम बा

डिफ़ॉल्ट ग्रिड के साथ आपन सामग्री के नेस्ट करे खातिर, कौनों मौजूदा कॉलम के भीतर एगो नया .rowआ कॉलम सभ के सेट जोड़ीं । नेस्टेड पंक्ति सभ में कॉलम सभ के सेट होखे के चाहीं जे 12 या एकरे से कम जोड़ के होखे (जरुरी नइखे कि आप सभ 12 गो उपलब्ध कॉलम सभ के इस्तेमाल करीं)।.col-sm-*.col-sm-*

स्तर 1: .col-sm-9 के बा

स्तर 2: .col-xs-8 .col-sm-6 के बा

स्तर 2: .col-xs-4 .col-sm-6 के बा

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

कॉलम के ऑर्डर दिहल जा रहल बा

.col-md-push-*आ .col-md-pull-*संशोधक वर्ग के साथ हमनी के बिल्ट-इन ग्रिड कॉलम के क्रम आसानी से बदलीं ।

.कोल-एमडी-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>, उपलब्ध बा। .h1through .h6classes भी उपलब्ध बा, जब आप कवनो हेडिंग के फॉन्ट स्टाइलिंग से मेल खाए के चाहत बानी लेकिन फिर भी चाहत बानी कि आपके टेक्स्ट इनलाइन देखावल जाव।

ज1 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 36px के बा
ज2 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 30px के बा
ज3 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 24px के बा
ज4 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 18px के बा
ज5 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 14px के बा
ज6 के बा। बूटस्ट्रैप हेडिंग के बा	सेमीबोल्ड 12px के बा

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

<small>जेनेरिक टैग भा .smallक्लास के साथ कौनों भी हेडिंग में हल्का, सेकेंडरी टेक्स्ट बनाईं ।

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

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

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

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

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

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

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

बॉडी कॉपी के बा

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

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

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

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

<p>...</p>

सीसा के शरीर के प्रतिलिपि बा

जोड़ के कवनो पैराग्राफ के अलगा बना दीं .lead.

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

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

कम से बनल बा

टाइपोग्राफिक पैमाना चर में दू गो कम चर पर आधारित बा. 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>

हल्का शैली के साथ एचटीएमएल के डिफ़ॉल्ट जोर टैग के इस्तेमाल करीं।

छोट-छोट पाठ बा

इनलाइन भा टेक्स्ट के ब्लॉक सभ पर जोर हटावे खातिर, <small>टैग के इस्तेमाल टेक्स्ट के पैरेंट के साइज के 85% पर सेट करे खातिर करीं। font-sizeहेडिंग तत्व सभ के नेस्टेड तत्व सभ खातिर आपन तरीका मिले <small>ला।

रउआँ वैकल्पिक रूप .smallसे कवनो भी के जगह के साथ इनलाइन तत्व के इस्तेमाल कर सकत बानी <small>.

पाठ के एह लाइन के मतलब बा कि एकरा के फाइन प्रिंट के रूप में मानल जाव.

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

हिम्मती

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

निम्नलिखित पाठ के स्निपेट के बोल्ड पाठ के रूप में रेंडर कइल गइल बा .

<strong>rendered as bold text</strong>

इटैलिक के लिखल बा

इटैलिक के साथ पाठ के एगो स्निपेट पर जोर देवे खातिर।

निम्नलिखित पाठ के स्निपेट के इटैलिक पाठ के रूप में प्रस्तुत कइल गइल बा .

<em>rendered as italicized text</em>

वैकल्पिक तत्वन के प्रयोग कइल जाला

बेझिझक इस्तेमाल करीं <b>आ <i>एचटीएमएल5 में. <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>होवर पर बिस्तारित संस्करण देखावे खातिर संक्षिप्त आ संक्षिप्त नाँव खातिर एचटीएमएल के तत्व के शैलीबद्ध कार्यान्वयन । एट्रिब्यूट वाला संक्षिप्त नाँव 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>s नियर ढेर हो के शुरू होला, बाकी जब नवबार बिस्तार करे ला, त ई सभ करीं।

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

<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>टैग के इस्तेमाल करीं।

y = m x + ख के बा

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

नमूना आउटपुट के बा

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

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

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

बेसिक उदाहरण बा

.tableबेसिक स्टाइलिंग खातिर-लाइट पैडिंग आ खाली क्षैतिज डिवाइडर- कोई भी में बेस क्लास जोड़ीं <table>। ई सुपर रिडंडेंट लाग सके ला, बाकी कैलेंडर आ डेट पिकर नियर अउरी प्लगइन सभ खातिर टेबल सभ के व्यापक इस्तेमाल के देखत, हमनी के आपन कस्टम टेबल स्टाइल सभ के अलग करे के विकल्प चुनले बानी जा।

वैकल्पिक तालिका कैप्शन बा।
# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

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

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

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

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

धारीदार टेबल सभ के स्टाइल :nth-childCSS चयनकर्ता के माध्यम से कइल जाला, जवन इंटरनेट एक्सप्लोरर 8 में उपलब्ध नइखे।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

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

सीमा पर बनल टेबल बा

.table-borderedटेबल आ सेल के चारो ओर के सीमा खातिर जोड़ल जाला।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

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

पंक्तियन के होवर करीं

.table-hoverएगो के भीतर टेबल पंक्तियन पर एगो होवर स्टेट के सक्षम करे खातिर जोड़ीं <tbody>.

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी के नाम से जानल जाला	चिरई के नाम से जानल जाला	@ट्विटर पर दिहल गइल बा

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

संघनित टेबल के बा

.table-condensedसेल पैडिंग के आधा में काट के टेबल के अउरी कॉम्पैक्ट बनावे खातिर जोड़ दीं ।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	प्रयोगकर्ता के नाम बा
1 के बा	मार्क कइल जाव	ओटो के नाम से जानल जाला	@mdo के बा
2 के बा	याकूब के नाम से जानल जाला	थॉर्नटन के नाम से जानल जाला	@मोट
3 के बा	लैरी द बर्ड के नाम से जानल जाला		@ट्विटर पर दिहल गइल बा

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

संदर्भ के कक्षा के बारे में बतावल गइल बा

तालिका पंक्ति भा अलग-अलग कोशिका सभ के रंग देवे खातिर संदर्भ वर्ग सभ के इस्तेमाल करीं।

कक्षा	बिबरन
`.active`	होवर रंग के कौनों खास पंक्ति भा सेल पर लागू करे ला
`.success`	सफल भा सकारात्मक कार्रवाई के संकेत देला
`.info`	तटस्थ जानकारीपूर्ण बदलाव भा कार्रवाई के संकेत देला
`.warning`	एगो चेतावनी के संकेत देला जवना पर ध्यान देबे के जरूरत पड़ सकेला
`.danger`	खतरनाक भा संभावित नकारात्मक कार्रवाई के संकेत देला

# भोजपुरी में पढ़ें:	कॉलम के हेडिंग बा	कॉलम के हेडिंग बा	कॉलम के हेडिंग बा
1 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
2 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
3 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
4 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
5 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
6 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
7 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
8 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा
9 के बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा	कॉलम के सामग्री के बारे में बतावल गइल बा

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

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

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

टेबल पंक्ति भा अलग-अलग सेल में अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिले ला, जे सहायक तकनीक सभ के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (संबंधित टेबल पंक्ति/कोशिका में लउके वाला पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .sr-onlyक्लास के साथ छिपल अतिरिक्त पाठ।

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

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

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

रिस्पांसिव टेबल सभ में , के इस्तेमाल होला overflow-y: hidden, जवन कौनों भी सामग्री के क्लिप क देला जे टेबल के नीचे भा ऊपर के किनारे से आगे बढ़ जाला। खासतौर पर ई ड्रॉपडाउन मेनू आ अउरी थर्ड पार्टी विजेट सभ के क्लिप ऑफ क सके ला।

फायरफॉक्स आ फील्डसेट के बारे में बतावल गइल बा

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

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

अधिक जानकारी खातिर, ई स्टैक ओवरफ्लो जवाब पढ़ीं .

# भोजपुरी में पढ़ें:	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा
1 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
2 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
3 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा

# भोजपुरी में पढ़ें:	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा
1 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
2 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
3 के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा

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

बेसिक उदाहरण बा

अलग-अलग फॉर्म कंट्रोल के स्वचालित रूप से कुछ ग्लोबल स्टाइलिंग मिलेला। के साथ सभ पाठ्य <input>, <textarea>, आ <select>तत्व डिफ़ॉल्ट रूप से .form-controlसेट कइल गइल बा। इष्टतम अंतराल खातिर width: 100%;लेबल आ नियंत्रण के अंदर लपेटीं ।.form-group

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

फॉर्म ग्रुप के इनपुट ग्रुप के साथे ना मिलाईं

फॉर्म ग्रुप के सीधे इनपुट ग्रुप के साथे ना मिलाईं . एकरा बजाय, इनपुट समूह के फॉर्म समूह के भीतर नेस्ट करीं।

इनलाइन फार्म के बा

बाईं ओर के संरेखित आ इनलाइन-ब्लॉक नियंत्रण खातिर अपना फॉर्म में जोड़ीं .form-inline(जवन जरूरी नइखे कि ई एगो होखे )। ई खाली ओह व्यूपोर्ट के भीतर के फॉर्म पर लागू होला जे कम से कम 768px चौड़ाई वाला होखे।<form>

कस्टम चौड़ाई के जरूरत हो सकेला

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

हमेशा लेबल लगावे के चाहीं

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

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

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

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

क्षैतिज रूप के बा

बूटस्ट्रैप के पहिले से परिभाषित ग्रिड क्लास सभ के इस्तेमाल फॉर्म में जोड़ के लेबल आ फॉर्म नियंत्रण सभ के समूह सभ के क्षैतिज लेआउट में संरेखित करे .form-horizontalखातिर करीं (जवन जरूरी नइखे कि ई एगो होखे <form>)। .form-groupअइसन कइला से s के ग्रिड पंक्ति के रूप में व्यवहार करे में बदलाव होला, एह से .row.

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

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

एगो उदाहरण फॉर्म लेआउट में समर्थित मानक फॉर्म नियंत्रण सभ के उदाहरण।

इनपुट के बा

सबसे आम रूप नियंत्रण, पाठ आधारित इनपुट फील्ड। सभ HTML5 प्रकार खातिर समर्थन शामिल बा: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, आ color.

टाइप घोषणा के जरूरत बा

इनपुट तबे पूरा तरह से स्टाइल कइल जाई जब ओकर typeसही तरीका से घोषित कइल जाव.

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

इनपुट समूह के बा

कवनो भी पाठ आधारित से पहिले आ/या बाद में एकीकृत पाठ या बटन जोड़े खातिर <input>, इनपुट समूह घटक के जांच करीं ।

टेक्स्टएरिया के बा

फॉर्म कंट्रोल जवन पाठ के कई लाइन के सपोर्ट करेला। rowsजरूरत के हिसाब से विशेषता बदलीं ।

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

चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा

चेकबॉक्स कौनों लिस्ट में एक या कई गो विकल्प चुने खातिर होला जबकि रेडियो कई में से एक विकल्प चुने खातिर होला।

अक्षम चेकबॉक्स आ रेडियो सभ के समर्थन कइल जाला, बाकी पैरेंट के होवर पर "अनुमत ना" कर्सर उपलब्ध करावे खातिर <label>, रउआँ के पैरेंट में .disabledक्लास जोड़े के पड़ी .radio, .radio-inline, .checkbox, या .checkbox-inline.

डिफ़ॉल्ट (ढेर हो गइल) .

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

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

इनलाइन चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा

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

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

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

प्रतिक्रियाशील छवियन के बा

बूटस्ट्रैप 3 में छवि के .img-responsiveक्लास के जोड़ला के माध्यम से रिस्पांसिव-फ्रेंडली बनावल जा सकता। ई लागू होला max-width: 100%;, height: auto;आ display: block;छवि पर ताकि ई मूल तत्व पर बढ़िया से स्केल होखे।

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

एसवीजी इमेज आ आईई 8-10 के बा

इंटरनेट एक्सप्लोरर 8-10 में, SVG इमेज के साथ .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">

संदर्भ के रंग के बा

मुट्ठी भर जोर उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित करीं। ई लिंक सभ पर भी लागू हो सके लें आ होवर पर गहिराह हो जाई ठीक हमनी के डिफ़ॉल्ट लिंक स्टाइल सभ नियर।

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

नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।

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

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

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

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

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

विशिष्टता से निपटे के बा

कई बेर दोसरा चयनकर्ता के विशिष्टता के कारण जोर देवे वाला वर्ग लागू ना कइल जा सके ला। ज्यादातर मामिला में, एगो पर्याप्त वर्कअराउंड ई होला कि अपना टेक्स्ट <span>के क्लास के साथ a में लपेट लीं।

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

अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (संदर्भ के रंग सभ के इस्तेमाल खाली अइसन अर्थ के मजबूत करे खातिर कइल जाला जे पाठ/मार्कअप में पहिले से मौजूद होखे), या फिर वैकल्पिक तरीका से शामिल कइल जाला, जइसे कि .sr-onlyक्लास के साथ छिपल अतिरिक्त पाठ .

संदर्भ के पृष्ठभूमि के बारे में बतावल गइल बा

संदर्भ पाठ रंग वर्ग सभ के समान, आसानी से कौनों तत्व के पृष्ठभूमि के कौनों भी संदर्भ वर्ग पर सेट करीं। एंकर घटक होवर पर गहिराह हो जाई, ठीक ओइसहीं जइसे टेक्स्ट क्लास.

नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।

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

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

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

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

विशिष्टता से निपटे के बा

कई बेर कौनों दूसर चयनकर्ता के बिसेसता के कारण संदर्भ पृष्ठभूमि वर्ग सभ के लागू ना कइल जा सके ला। <div>कुछ मामिला में, एगो पर्याप्त वर्कअराउंड ई होला कि अपना तत्व के सामग्री के क्लास के साथ a में लपेटल जाय ।

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

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

आइकन के बंद करीं

मोडल आ अलर्ट नियर सामग्री के खारिज करे खातिर जेनेरिक बंद आइकन के इस्तेमाल करीं।

<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 जोड़ के आसानी से s साफ करीं . निकोलस गैलाघेर द्वारा लोकप्रिय कइल गइल माइक्रो क्लियरफिक्स के उपयोग करेला । मिक्सिन के रूप में भी इस्तेमाल कईल जा सकता।.clearfix

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

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

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

सामग्री देखावल आ छिपावल

आ क्लास सभ के इस्तेमाल से कौनों तत्व के देखावे भा छिपावे खातिर मजबूर करीं ( स्क्रीन रीडर सभ खातिर भी सामिल बा )। ई वर्ग विशिष्टता संघर्ष से बचे खातिर इस्तेमाल करे लें, ठीक ओइसहीं जइसे कि त्वरित फ्लोट . इ खाली ब्लॉक लेवल टॉगलिंग खातिर उपलब्ध बा। इनहन के मिक्सिन के रूप में भी इस्तेमाल कइल जा सके ला।.show.hidden!important

.hideउपलब्ध बा, बाकी ई हमेशा स्क्रीन रीडर सभ के प्रभावित ना करे ला आ v3.0.1 के रूप में ई डिप्रिकेट बा। .hiddenएकरा जगह पर भा के इस्तेमाल करीं .sr-only.

एकरे अलावा, .invisibleएकर इस्तेमाल खाली कौनों तत्व के दृश्यता के टॉगल करे खातिर कइल जा सके ला, मने कि एकर displayसंशोधन ना कइल गइल बा आ तत्व अबहियों दस्तावेज के प्रवाह के प्रभावित क सके ला।

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

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

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

स्क्रीन रीडर आ कीबोर्ड नेविगेशन सामग्री के बारे में बतावल गइल बा

के साथ स्क्रीन रीडर के छोड़ के सभ डिवाइस के कवनो तत्व के छिपाईं .sr-only। तत्व के फोकस कइला पर फिर से देखावे खातिर के .sr-onlyसाथ संयोजन करीं (जइसे कि खाली कीबोर्ड वाला प्रयोगकर्ता द्वारा)। सुलभता सर्वोत्तम प्रथा.sr-only-focusable के पालन करे खातिर जरूरी बा . मिक्सिन के रूप में भी इस्तेमाल कइल जा सकेला।

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

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

छवि के बदल दिहल गइल

.text-hideकवनो तत्व के टेक्स्ट सामग्री के बैकग्राउंड इमेज से बदले में मदद करे खातिर क्लास भा मिक्सिन के इस्तेमाल करीं ।

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

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

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

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

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

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

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

v3.2.0 के रूप में, .visible-*-*हर ब्रेकपॉइंट खातिर क्लास तीन गो भिन्नता में आवे लीं, displayनीचे दिहल गइल हर CSS प्रॉपर्टी मान खातिर एगो।

कक्षा के समूह के बा	सीएसएस के बा`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

त, xsउदाहरण खातिर अतिरिक्त छोट ( ) स्क्रीन खातिर, उपलब्ध .visible-*-*क्लास सभ बाड़ी सऽ: .visible-xs-block, .visible-xs-inline, आ .visible-xs-inline-block.

क्लास .visible-xs, .visible-sm, .visible-md, आ .visible-lgभी मौजूद बाड़ें, बाकी v3.2.0 के रूप में पदावनत बाड़ें । ई लगभग , के बराबर होलें .visible-*-block, सिवाय टॉगलिंग <table>से संबंधित तत्व सभ खातिर अतिरिक्त बिसेस मामिला सभ के।

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

नियमित रिस्पांसिव क्लास सभ के समान, प्रिंट खातिर सामग्री टॉगल करे खातिर इनहन के इस्तेमाल करीं।

कक्षा में पढ़ाई कइल जाला	ब्राउजर के बा	छापल जाला
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	छिपल	लउकत बा
`.hidden-print`	लउकत बा	छिपल

क्लास .visible-printभी मौजूद बा बाकी v3.2.0 के रूप में डिप्रीकेट बा । ई लगभग , के बराबर होला .visible-print-block, सिवाय <table>-संबंधित तत्व सभ खातिर अतिरिक्त बिसेस मामिला सभ के।

टेस्ट केस के बारे में बतावल गईल बा

रिस्पांसिव यूटिलिटी क्लास सभ के परीक्षण करे खातिर अपना ब्राउजर के साइज बदलीं या अलग-अलग डिवाइस सभ पर लोड करीं।

पर लउकत बा...

हरे रंग के चेकमार्क बतावेला कि तत्व आपके वर्तमान व्यूपोर्ट में लउकत बा।

अतिरिक्त छोट बा ✔ एक्स-स्मॉल पर लउकत बा

छोट ✔ छोट पर लउकेला

माध्यम ✔ माध्यम पर लउकत बा

बड़हन ✔ बड़े पर लउकत बा

अतिरिक्त छोट-छोट बा ✔ एक्स-छोट आ छोट पर लउकत बा

मध्य�� आ बड़हन होला ✔ मध्यम आ बड़ पर लउकेला

अतिरिक्त छोट आ मध्यम होला ✔ एक्स-छोट आ मध्यम पर लउकत बा

छोट-बड़ के होला ✔ छोट-बड़ पर लउकेला

अतिरिक्त छोट आ बड़हन होला ✔ एक्स-छोट आ बड़ पर लउकत बा

छोट आ मध्यम के होला ✔ छोट आ मध्यम पर लउकेला

पर छिपल बा...

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

अतिरिक्त छोट बा ✔ एक्स-छोट पर छिपल बा

छोट ✔ छोट पर छिपल बा

माध्यम ✔ माध्यम पर छिपल बा

बड़हन ✔ बड़े पर छिपल बा

अतिरिक्त छोट-छोट बा ✔ एक्स-छोट आ छोट पर छिपल बा

मध्यम आ बड़हन होला ✔ मध्यम आ बड़ पर छिपल बा

अतिरिक्त छोट आ मध्यम होला ✔ एक्स-छोट आ मध्यम पर छिपल बा

छोट-बड़ के होला ✔ छोट-बड़ पर छिपल बा

अतिरिक्त छोट आ बड़हन होला ✔ एक्स-छोट आ बड़ पर छिपल बा

छोट आ मध्यम के होला ✔ छोट आ मध्यम पर छिपल बा

बूटस्ट्रैप के सीएसएस लेस पर बनल बा, ई एगो प्रीप्रोसेसर हवे जेह में सीएसएस के संकलन खातिर चर, मिक्सिन, आ फंक्शन नियर अतिरिक्त कामकाज होला। जे लोग हमनी के संकलित 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संपत्ति के अपना दम पर इस्तेमाल जरूर करीं. अगर आपके पुरान एंड्रॉयड (pre-v4) अवुरी आईओएस डिवाइस (pre-iOS 5) खाती सपोर्ट के जरूरत बा, त जरूरी चीज़ के उठावे खाती डिप्रीकेट मिक्सिन के इस्तेमाल करीं-webkit त जरूरी उपसर्ग

मिक्सिन v3.1.0 के रूप में डिप्रिकेट बा, काहें से कि बूटस्ट्रैप आधिकारिक तौर पर पुरान प्लेटफार्म सभ के सपोर्ट ना करे ला जे मानक गुण के सपोर्ट ना करे लें। बैकवर्ड-कम्पेटिबिलिटी के बचावे खातिर, बूटस्ट्रैप बूटस्ट्रैप v4 तक ले मिक्सिन के आंतरिक रूप से इस्तेमाल करत रही।

अपना बॉक्स शैडो में रंग के इस्तेमाल जरूर करीं rgba()जेहसे कि ऊ बैकग्राउंड के साथे बेसी से बेसी सहजता से मिल जाव.

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

संक्रमण के बात होला

लचीलापन खातिर कई गो मिक्सिन। सभ संक्रमण जानकारी के एक के साथ सेट करीं, या जरूरत के हिसाब से अलग से देरी आ अवधि निर्दिष्ट करीं।

मिक्सिन सभ के v3.2.0 के रूप में डिप्रिकेट कइल गइल बा, ऑटोप्रिफिक्सर के शुरूआत के साथ। बैकवर्ड-कम्पेटिबिलिटी के बचावे खातिर, बूटस्ट्रैप बूटस्ट्रैप v4 तक ले मिक्सिन सभ के आंतरिक रूप से इस्तेमाल करत रही।

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

परिवर्तन के बात होला

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

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

पाठ के काट दिहल जा रहल बा

एकल मिक्सिन से दीर्घवृत्त से पाठ के आसानी से काट दीं। तत्व के होखे blockभा inline-blockस्तर होखे के जरूरत बा.

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

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

रेटिना के छवि के बारे में बतावल गइल बा

दू गो इमेज पथ आ @1x इमेज डायमेंशन निर्दिष्ट करीं, आ बूटस्ट्रैप एगो @2x मीडिया क्वेरी उपलब्ध करावे ला। अगर रउरा लगे परोसे खातिर बहुते छवि बा त अपना रेटिना छवि के सीएसएस के मैन्युअल रूप से एके गो मीडिया क्वेरी में लिखे पर विचार करीं.

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

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

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

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

का शामिल बा

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

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

एह फाइल सभ के एक्शन में देखे खातिर Sass पोर्ट के GitHub रिपोजिटरी पर जाईं ।

स्थापना के काम हो रहल बा

Sass खातिर बूटस्ट्रैप के इंस्टॉल आ इस्तेमाल करे के तरीका के बारे में जानकारी खातिर, GitHub रिपोजिटरी readme से सलाह लीं । ई सभसे अप टू डेट स्रोत हवे आ एह में रेल, कम्पास, आ मानक सास प्रोजेक्ट सभ के साथ इस्तेमाल खातिर जानकारी शामिल बा।

सास खातिर बूटस्ट्रैप बा

सीएसएस के बा

अवलोकन कइल जाव

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

पहिले मोबाइल बा

टाइपोग्राफी आ लिंक दिहल गइल बा

नॉर्मलाइज करीं.सीएसएस के बा

कंटेनर के बा

ग्रिड सिस्टम के बारे में बतावल गइल बा

परिचय

मीडिया से पूछताछ कइल जाला

ग्रिड के विकल्प बा

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

उदाहरण खातिर : तरल पदार्थ के बर्तन

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

जइसे : मोबाइल, टैबलेट, डेस्कटॉप के बारे में बतावल गइल बा

उदाहरण खातिर : कॉलम के लपेटल

रिस्पांसिव कॉलम रीसेट हो जाला

कॉलम के ऑफसेट कइल जा रहल बा

घोंसला बनावे के कॉलम बा

कॉलम के ऑर्डर दिहल जा रहल बा

मिक्सिन आ चर कम होखे के चाहीं

चर के बारे में बतावल गइल बा

मिक्सिन के नाम से जानल जाला

उदाहरण के प्रयोग के बारे में बतावल गइल बा

टाइपोग्राफी के बारे में बतावल गइल बा

हेडिंग के बारे में बतावल गइल बा

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

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

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

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

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

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

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

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

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

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

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

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

बॉडी कॉपी के बा

सीसा के शरीर के प्रतिलिपि बा

कम से बनल बा

इनलाइन पाठ तत्व के बारे में बतावल गइल बा

चिन्हित पाठ बा

पाठ हटा दिहल गइल बा

पाठ के माध्यम से स्ट्राइक कइल जाला

पाठ डालल गइल बा

रेखांकित कइल गइल पाठ

छोट-छोट पाठ बा

हिम्मती

इटैलिक के लिखल बा

वैकल्पिक तत्वन के प्रयोग कइल जाला

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

परिवर्तन के कक्षा के बारे में बतावल गइल बा

संक्षिप्त रूप दिहल गइल बा

मूल संक्षिप्त नाम के रूप में दिहल गइल बा

आरंभवाद के बारे में बतावल गइल बा

संबोधन दिहल गइल बा

ब्लॉककोट कइल गइल बा

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

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

कवनो स्रोत के नामकरण कइल जाला

वैकल्पिक रूप से प्रदर्शन कइल जाला

सूची दिहल गइल बा

बिना क्रम के बा

आदेश दिहल गइल बा

अनस्टाइल कइल गइल बा

इनलाइन के बा

बिबरन

क्षैतिज वर्णन कइल गइल बा

ऑटो-ट्रंक हो रहल बा

कोड के बा

इनलाइन के बा

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

बेसिक ब्लॉक के बा

चर के बारे में बतावल गइल बा

नमूना आउटपुट के बा

टेबल के बारे में बतावल गइल बा

बेसिक उदाहरण बा

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

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

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

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

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