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

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

बूटस्ट्रैप कुछ एचटीएमएल तत्व आरू सीएसएस गुणक कें उपयोग करय छै जेकरा एचटीएमएल 5 डॉकटाइप कें उपयोग करय कें आवश्यकता होयत छै. अपन सब प्रोजेक्ट के शुरुआत में एकरा शामिल करू।

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

मोबाइल पहिने

बूटस्ट्रैप 2 के साथ, हम फ्रेमवर्क के प्रमुख पहलु के लेल वैकल्पिक मोबाइल फ्रेंडली स्टाइल जोड़लौं। बूटस्ट्रैप 3 के साथ हम प्रोजेक्ट के शुरू स मोबाइल फ्रेंडली बनेबाक लेल फेर स लिखने छी। वैकल्पिक मोबाइल स्टाइल पर जोड़य के बजाय, ई ठीक कोर में बेक क देल गेल अछि. असल में बूटस्ट्रैप पहिने मोबाइल अछि . मोबाइल फर्स्ट स्टाइल अलग-अलग फाइल मे नहि बल्कि पूरा लाइब्रेरी मे भेट सकैत अछि ।

उचित रेंडरिंग आओर टच ज़ूमिंग सुनिश्चित करबाक लेल , अपन <head>.

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

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

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

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

बूटस्ट्रैप बेसिक ग्लोबल डिस्प्ले, टाइपोग्राफी, आओर लिंक शैली सेट करैत अछि. विशेष रूप स हम : १.

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

ई शैली सब के भीतर भेटत scaffolding.less.

सामान्य करू.css

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

कंटेनर

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

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

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

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

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

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

परिचय

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

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

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

मीडिया के क्वेरीज

हम अपनऽ ग्रिड सिस्टम म॑ कुंजी ब्रेकपॉइंट बनाबै लेली अपनऽ Less फाइलऽ म॑ निम्नलिखित मीडिया क्वेरी के उपयोग करय छै ।

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

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

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

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

हम बीच-बीच मे इ मीडिया क्वेरी कें विस्तार करयत छै आ एकटा कें शामिल करयत max-widthछै सीएसएस कें डिवाइस कें संकीर्ण सेट कें लेल सीमित करय कें लेल.

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

ग्रिड विकल्प

देखू जे बूटस्ट्रैप ग्रिड सिस्टम कें पहलू एकटा सुलभ तालिका कें साथ कईटा डिवाइसक मे कोना काज करयत छै.

	अतिरिक्त छोट उपकरण फोन (<768px)	छोट उपकरण टैबलेट (≥768px)	मध्यम उपकरण डेस्कटॉप (≥992px)	पैघ उपकरण डेस्कटॉप (≥1200px)
ग्रिड व्यवहार	हर समय क्षैतिज	शुरू करबाक लेल ढह गेल, ब्रेकपॉइंट स ऊपर क्षैतिज
कंटेनर चौड़ाई	कोनो नै (ऑटो) २.	750px के	970px के अछि	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

.कोल-एक्सएस-6

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

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

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

जेना : मोबाइल, टैबलेट, डेस्कटॉप

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

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

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

.कोल-एक्सएस-6 .कोल-एसएम-4

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

जेना : स्तंभ लपेटब

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

.कोल-एक्सएस-9

.col-xs-4
चूँकि 9 + 4 = 13 > 12, ई 4-स्तंभ-व्यापी दिव एक सटल इकाई के रूप मे एकटा नव रेखा पर लपेटि जाइत अछि |

.col-xs-6
बादक कॉलम नव पंक्तिक संग जारी अछि.

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

प्रतिक्रियाशील कॉलम रीसेट

उपलब्ध ग्रिड केरऽ चारो स्तर के साथ आपने क॑ ऐन्हऽ मुद्दा म॑ दौड़ना तय छै, जेकरा म॑, कुछ खास ब्रेकपॉइंट प॑, आपकऽ कॉलम बिल्कुल सही साफ नै होय छै, कैन्हेंकि एक दोसरऽ स॑ लम्बा छै । ओकरा ठीक करबाक लेल, a .clearfixआओर हमर उत्तरदायी उपयोगिता वर्गक संयोजनक उपयोग करू .

.col-xs-6 .col-sm-3
अपन व्यूपोर्ट क आकार बदलू अथवा एकटा उदाहरण क लेल अपन फोन पर देखू.

.कोल-एक्सएस-6 .कोल-एसएम-3

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

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

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

प्रतिक्रियाशील ब्रेकपॉइंट पर कॉलम क्लियरिंग कें अलावा, अहां कें ऑफसेट, पुश, या पुल कें रीसेट करय कें आवश्यकता भ सकय छै . ग्रिड उदाहरण मे एकरा क्रिया मे देखू .

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

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

कॉलम ऑफसेट करब

.col-md-offset-*क्लास क उपयोग कए कॉलम कए दाहिना दिस ल जाउ । ई वर्ग कोनो कॉलम के बामा हाशिया के कॉलम द्वारा बढ़ाबैत अछि *| जेना, चारि कॉलम पर .col-md-offset-4चलैत अछि।.col-md-4

.कोल-एमडी-4

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

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

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

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

.col-*-offset-0अहां कक्षाक कें साथ निचला ग्रिड टीयर सं ऑफसेट कें सेहो ओवरराइड कयर सकय छी .

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

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

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

स्तर 1: .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
ज ४। बूटस्ट्रैप हेडिंग	अर्धबोल्ड 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। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज ४। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज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 अछि , जकर एकटा 1.428 अछि । ई आ सब पैराग्राफ पर लागू होइत अछि | एकरऽ अलावा, (पैराग्राफ) क॑ अपनऽ गणना करलऽ गेलऽ रेखा-ऊँचाई (डिफ़ॉल्ट रूप स॑ 10px) आधा के निचला मार्जिन प्राप्त होय छै ।line-height<body><p>

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

सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। Donec ullamcorper nulla गैर मेटस नीलामी fringilla। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरेट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। Donec ullamcorper nulla गैर मेटस नीलामी fringilla।

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

<p>...</p>

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

कोनो पैराग्राफ के जोड़ि क ' अलग बनाउ .lead.

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

<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>HTML5 मे बेझिझक महसूस करू । <b>शब्द या वाक्यांश के बिना अतिरिक्त महत्व के उजागर करय के मतलब छै जखन <i>कि बेसीतर आवाज, तकनीकी शब्द आदि के लेल छै.

संरेखण वर्ग

पाठ संरेखण वर्गों के साथ घटकों के लिए पाठ को आसानी से पुनः संरेखित करें |

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

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

सही संरेखित पाठ।

औचित्यपूर्ण पाठ।

कोनो लपेट पाठ नहि।

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

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

पाठ कैपिटलाइजेशन वर्गों के साथ घटकों में पाठ को परिवर्तित करें |

लघु पाठ।

बड़का अक्षर वाला पाठ।

कैपिटल लिखित पाठ।

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

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

<abbr>होवर पर विस्तारित संस्करण क॑ दिखाबै लेली संक्षिप्त आरू संक्षिप्त नाम लेली एचटीएमएल केरऽ तत्व केरऽ शैलीबद्ध कार्यान्वयन । विशेषता वाला संक्षिप्त नामक 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>.

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

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

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

एकटा मानक पर सरल भिन्नताक लेल शैली आ सामग्री परिवर्तन <blockquote>.

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

<footer>स्रोतक पहचान करबाक लेल एकटा जोड़ू । स्रोत कार्य के नाम में लपेटें <cite>|

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

स्रोत शीर्षक में कियो प्रसिद्ध

<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सही-संरेखित सामग्रीक संग ब्लॉककोट क लेल जोड़ू .

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

स्रोत शीर्षक में कियो प्रसिद्ध

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

सूची बनाइए

अक्रमित

एहन वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ कोनो मायने नहि रखैत अछि ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेक्वे
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat पर
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

आदेश देल गेल

वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ मायने रखैत अछि ।

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

अनस्टाइल

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

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेक्वे
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat पर
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

इनलाइन

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

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

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

वर्णन

शब्दक सूची ओकर संबद्ध वर्णनक संग।

विवरण सूची: शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
यूइसमोद: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |; डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा: एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।

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

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

लाइन मे शब्द आ वर्णन <dl>कात-कात बनाउ। डिफ़ॉल्ट <dl>s जकाँ ढेर भ' क' शुरू होइत अछि, मुदा जखन नवबार विस्तारित होइत अछि, तखन ई सभ करू.

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

<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 = एम एक्स + ख

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

वैकल्पिक तालिका कैप्शन।
# 2019।	पहिल नाम	उपनाम	उपयोगकर्ता नाम
१	मार्क	ओटो	@ mdo
२	याकूब	थॉर्नटन	@मोट
३	लैरी	चिड़ै के	@ ट्विटर पर

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

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

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

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

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

# 2019।	पहिल नाम	उपनाम	उपयोगकर्ता नाम
१	मार्क	ओटो	@ mdo
२	याकूब	थॉर्नटन	@मोट
३	लैरी	चिड़ै के	@ ट्विटर पर

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

सीमाबद्ध टेबल

.table-borderedतालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।

# 2019।	पहिल नाम	उपनाम	उपयोगकर्ता नाम
१	मार्क	ओटो	@ mdo
२	याकूब	थॉर्नटन	@मोट
३	लैरी	चिड़ै के	@ ट्विटर पर

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

पंक्तियां मंडराइत

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

# 2019।	पहिल नाम	उपनाम	उपयोगकर्ता नाम
१	मार्क	ओटो	@ mdo
२	याकूब	थॉर्नटन	@मोट
३	लैरी	चिड़ै के	@ ट्विटर पर

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

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

.table-condensedसेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनावा कें लेल जोड़ूं .

# 2019।	पहिल नाम	उपनाम	उपयोगकर्ता नाम
१	मार्क	ओटो	@ mdo
२	याकूब	थॉर्नटन	@मोट
३	लैरी द बर्ड		@ ट्विटर पर

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

सन्दर्भ कक्षाएँ

तालिका पंक्तियों या व्यक्तिगत कोशिकाओं को रंगने के लिये संदर्भ वर्गों का प्रयोग करें |

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

# 2019।	स्तंभ शीर्षक	स्तंभ शीर्षक	स्तंभ शीर्षक
१	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
२	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
३	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
४	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
५	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
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; }
}

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

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

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

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

मूल उदाहरण

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

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

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

फॉर्म ग्रुप के सीधा इनपुट ग्रुप के संग नहि मिलाउ . एकर बजाय, इनपुट समूह कें फॉर्म समूह कें अंदर नेस्ट करूं.

इनलाइन रूप

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

कस्टम चौड़ाई क आवश्यकता भ सकैत अछि

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

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

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

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

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

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

क्षैतिज रूप

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

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

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

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

इनपुट

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

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

इनपुट तखनहि पूर्ण रूप सँ स्टाइल कएल जाएत जखन ओकर typeसही ढंग सँ घोषित कएल जाएत.

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

इनपुट समूह

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

पाठ क्षेत्र

फॉर्म नियंत्रण जे पाठक अनेक पंक्तिक समर्थन करैत अछि | rowsआवश्यकतानुसार विशेषता बदलें ।

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

चेकबॉक्स आ रेडियो

चेकबॉक्स कोनों सूची मे एकटा या कईटा विकल्प कें चयन करय कें लेल छै, जखन कि रेडियो बहुत सं एकटा विकल्प कें चयन करय कें लेल छै.

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

पूर्वनिर्धारित (ढेर) 1।

<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>आरू तत्वऽ प॑ इस्तेमाल करलऽ जाब॑ सकै छै, हमरऽ nav आरू navbar घटकऽ के भीतर <button>केवल तत्वऽ क॑ समर्थित करलऽ जाय छै ।<button>

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

यदि <a>तत्वक कें उपयोग बटन कें रूप मे कार्य करय कें लेल करल जाय छै – वर्तमान पृष्ठ कें भीतर कोनों अन्य दस्तावेज या खंड पर नेविगेट करय कें बजाय, पृष्ठ मे कार्यक्षमता कें ट्रिगर करय कें लेल – त ओकरा एकटा उचित role="button".

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

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

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

विकल्प

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

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

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

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

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

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

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

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

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

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

आकार के

फैंसी पैघ या छोट बटन? अतिरिक्त आकारक लेल .btn-lg, .btn-sm, अथवा जोड़ू ।.btn-xs

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

ब्लॉक स्तर बटन बनाउ-ओ जे कोनो अभिभावक कें पूरा चौड़ाई मे फैलल छै- जोड़ क .btn-block.

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

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

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

बटन तत्व

जोड़य के जरूरत नहिं :activeकिएक त ई छद्म वर्ग अछि, मुदा जं अहां के ओही रूप के जबरदस्ती करय के जरूरत अछि तं आगू जाउ आओर जोड़ू .active.

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

लंगर तत्व

बटन मे .activeक्लास जोड़ू ।<a>

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

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

अक्षम अवस्था

बटन कें वापस फीका कयर ओकरा अनक्लिक करय योग्य बनाऊं opacity.

बटन तत्व

बटन मे disabledविशेषता जोड़ू ।<button>

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

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

यदि आहाँ disabledविशेषता क॑ a म॑ जोड़ै छियै <button>त॑ इंटरनेट एक्सप्लोरर 9 आरू नीचें पाठ क॑ एक गंदा टेक्स्ट-शैडो के साथ ग्रे रेंडर करतै जेकरा हम्मं॑ ठीक नै करी सकै छियै ।

लंगर तत्व

बटन मे .disabledक्लास जोड़ू ।<a>

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

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

हम .disabledएतय उपयोगिता वर्ग के रूप में उपयोग करैत छी, सामान्य वर्ग के समान .active, अतः कोनो उपसर्ग के आवश्यकता नै अछि |

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

ई वर्ग s pointer-events: noneकेरऽ लिंक कार्यक्षमता क॑ अक्षम करै के कोशिश करै लेली उपयोग करै छै <a>, लेकिन वू CSS गुण अभी तलक मानकीकृत नै छै आरू ओपेरा 18 आरू नीचें, या इंटरनेट एक्सप्लोरर 11 म॑ पूरा तरह स॑ समर्थित नै छै.एकरा अलावा, ब्राउज़र म॑ भी जे समर्थन करै छै pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहतै, मतलब कि दृष्टिवान कीबोर्ड उपयोगकर्ता आरू सहायक प्रौद्योगिकी के उपयोगकर्ता अखनी भी ई लिंक क सक्रिय करै म॑ सक्षम होतै । अतः सुरक्षित रहय लेल, एहन लिंक के अक्षम करय लेल कस्टम जावास्क्रिप्ट के प्रयोग करू.

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

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

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

एसवीजी छवि आ आईई 8-10

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

सन्दर्भ रंग

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

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

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

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

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

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

Donec ullamcorper nulla गैर मेटस नीलामी fringilla।

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

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

कखनो काल दोसर चयनकर्ताक विशिष्टताक कारणेँ जोर वर्ग लागू नहि कएल जा सकैत अछि । अधिकांश मामला मे, एकटा पर्याप्त समाधान अछि अपन पाठ <span>केँ कक्षाक संग a मे लपेटब.

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

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

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

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

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

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

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

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

Donec ullamcorper nulla गैर मेटस नीलामी fringilla।

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

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

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

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

जेना कि संदर्भ रंगक संग होइत छैक , ई सुनिश्चित करू जे रंगक माध्यमे कोनो अर्थक संप्रेषण सेहो एहन प्रारूप मे कयल जाय जे विशुद्ध रूप सँ प्रस्तुतिकरण नहि हो |

बंद आइकन

मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल जेनेरिक बंद आइकन कें उपयोग करूं.

<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) 1।	छोट-छोट उपकरणगोलियाँ (≥768px)।	मध्यम उपकरणडेस्कटॉप (≥992px) 1।	बड़े-बड़े उपकरणडेस्कटॉप (≥1200px) 1।
`.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>-संबंधित तत्व के लेलऽ अतिरिक्त विशेष मामला के साथ ।

परीक्षण केस

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

पर देखाइत अछि...

हरियर चेकमार्क संकेत करयत छै की तत्व अहां कें वर्तमान व्यूपोर्ट मे दिखाई द रहल छै.

अतिरिक्त छोट ✔ x-sma पर दिखाई दे रहा है

छोट ✔ छोट पर देखाइत अछि

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

नमहर ✔ बड़े पर दिखाई दे |

अतिरिक्त छोट आ छोट ✔ x-छोट आ छोट पर देखाइत अछि

मध्यम आ पैघ ✔ मध्यम आ पैघ पर देखबा मे अबैत अछि

अतिरिक्त छोट आ मध्यम ✔ x-छोटे एवं मध्यम पर दिखाई दे रहे |

छोट-पैघ ✔ छोट आ पैघ पर देखबा मे अबैत अछि

अतिरिक्त छोट आ पैघ ✔ x-छोट आ पैघ पर देखाइत अछि

छोट आ मध्यम ✔ छोट आ मध्यम पर देखबा मे अबैत अछि

पर छिपल अछि...

एतय, हरियर चेकमार्क इहो दर्शाबैत अछि जे तत्व अहाँक वर्तमान व्यूपोर्ट मे नुकायल अछि ।

अतिरिक्त छोट ✔ x-small पर छिपा

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

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

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

अतिरिक्त छोट आ छोट ✔ x-छोट आ छोट पर छिपल अछि

मध्यम आ पैघ ✔ मध्यम आ पैघ पर छिपल

अतिरिक्त छोट आ मध्यम ✔ x-छोट एवं मध्यम पर छिपा

छोट-पैघ ✔ छोट-बड़ पर छिपल

अतिरिक्त छोट आ पैघ ✔ x-छोट आ पैघ पर छिपल अछि

छोट आ मध्यम ✔ छोट आ मध्यम पर छिपल

बूटस्ट्रैप केरऽ सीएसएस लेस प॑ बनलऽ छै, जे एक प्रीप्रोसेसर छै जेकरऽ अतिरिक्त कार्यक्षमता छै जेना कि चर, मिक्सिन, आरू सीएसएस संकलित करै लेली फंक्शन. जे लोग हमरऽ संकलित CSS फाइलऽ के बजाय स्रोत Less फाइलऽ के उपयोग करना चाहै छै, वू लोगऽ न॑ हमनी पूरा फ्रेमवर्क म॑ उपयोग करलऽ जाय वाला अनेक चर आरू मिक्सिनऽ के उपयोग करी सकै छै ।

ग्रिड चर आ मिक्सिन कें ग्रिड सिस्टम खंड कें भीतर कवर कैल गेल छै .

बूटस्ट्रैप संकलित करब

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

थर्ड पार्टी संकलन उपकरण बूटस्ट्रैप के साथ काम क सकैत अछि, मुदा ओ हमर कोर टीम द्वारा समर्थित नहि अछि.

चर

चर क॑ पूरा प्रोजेक्ट म॑ रंग, स्पेसिंग, या फॉन्ट स्टैक जैसनऽ आम तौर प॑ इस्तेमाल करलऽ जाय वाला मान क॑ केंद्रीकृत आरू साझा करै के तरीका के रूप म॑ इस्तेमाल करलऽ जाय छै । एकटा पूर्ण टूटबाक लेल, कृपया देखू अनुकूलक .

रंग

आसानी स दूटा रंग योजना क उपयोग करू: ग्रेस्केल आ सिमेंटिक। ग्रेस्केल रंग कारी रंग कें आमतौर पर उपयोग कैल जाय वाला शेड्स कें त्वरित पहुंच प्रदान करय छै जखन कि शब्दार्थ मे सार्थक संदर्भ मूल्यक कें लेल सौंपल गेल विभिन्न रंग शामिल छै.

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

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

एहि मे सँ कोनो रंग चर केँ जेना अछि तेना प्रयोग करू अथवा ओकरा अपन प्रोजेक्ट लेल बेसी सार्थक चर मे पुनः असाइन करू |

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

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

मचान

अपनऽ साइट केरऽ कंकाल केरऽ प्रमुख तत्वऽ क॑ जल्दी स॑ अनुकूलित करै लेली मुट्ठी भर चर ।

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

लिंक

अपन लिंक के मात्र एकटा मान के संग सही रंग स आसानी स स्टाइल करू।

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

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

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

ध्यान रहे कि @link-hover-colorएक फंक्शन के उपयोग करै छै, जे कम स॑ एगो आरू भयानक टूल छै, जेकरा स॑ स्वचालित रूप स॑ सही होवर रंग बनाबै छै । अहाँ darken, lighten, saturate, आ desaturate.

टाइपोग्राफी

किछु त्वरित चर के संग अपन टाइपफेस, टेक्स्ट साइज, लीडिंग, आओर बहुत किछु आसानी सं सेट करू. बूटस्ट्रैप आसान टाइपोग्राफिक मिक्सिन प्रदान करय कें लेल इ सब कें उपयोग सेहो करय छै.

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

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

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

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

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

चिह्न

अपनऽ आइकन केरऽ स्थान आरू फाइलनाम क॑ अनुकूलित करै लेली दू त्वरित चर ।

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

घटक

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

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

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

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

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

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

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

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

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

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

विक्रेता मिक्सिन मिक्सिन छै जे अहां कें संकलित सीएसएस मे सबटा प्रासंगिक विक्रेता उपसर्ग कें शामिल करयत कईटा ब्राउज़र कें समर्थन करय मे मदद करतय.

बॉक्स-साइजिंग

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

मिक्सिन v3.2.0 कें रूप मे अप्रचलित छै, ऑटोप्रिफिक्सर कें परिचय कें साथ. बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.

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

गोल-गोल कोने

आइ सभ आधुनिक ब्राउज़र गैर-उपसर्ग border-radiusगुणकेँ समर्थन करैत अछि । ऐन्हऽ म॑ .border-radius()मिक्सिन नै छै, लेकिन बूटस्ट्रैप म॑ कोनो वस्तु केरऽ कोनो खास तरफ दू कोना क॑ जल्दी स॑ गोल करै लेली शॉर्टकट जरूर शामिल छै ।

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

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

अगर अहां के लक्षित दर्शक नवीनतम आओर महान ब्राउज़र आओर डिवाइस के इस्तेमाल करि रहल छथिन्ह तं बस एहि box-shadowसंपत्ति के अपन दम पर इस्तेमाल जरूर करिऔ. यदि आहाँ क॑ पुरानऽ एंड्रॉयड (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
}

स्तंभ

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

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

ढाल

कोनो दू रंग के आसानी स बैकग्राउंड ग्रेडिएंट में बदलू। अधिक उन्नत होउ आ एकटा दिशा निर्धारित करू, तीन रंगक प्रयोग करू, वा रेडियल ढालक प्रयोग करू । एकटा मिक्सिन के संग अहां के ओ सभ उपसर्ग वाला सिंटैक्स मिलत जे अहां के जरूरत होएत.

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

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

उपयोगिता मिक्सिन मिक्सिन छै जे अन्यथा असंबंधित सीएसएस गुणक कें संयोजन करयत कोनों विशिष्ट लक्ष्य या कार्य प्राप्त करयत छै.

क्लियरफिक्स

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

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

कोनों textarea, या कोनों अन्य तत्व कें लेल आकार बदलय विकल्प कें आसानी सं कॉन्फ़िगर करूं. सामान्य ब्राउज़र व्यवहार ( 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);
}

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

की शामिल अछि

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

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

एहि फाइल सभ केँ क्रिया मे देखबाक लेल Sass पोर्ट केर GitHub भंडार पर जाउ .

स्थापना

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

सास के लिये बूटस्ट्रैप

सीएसएस

अवलोकन

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

मोबाइल पहिने

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

सामान्य करू.css

कंटेनर

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

परिचय

मीडिया के क्वेरीज

ग्रिड विकल्प

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

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

जेना : मोबाइल आ डेस्कटॉप

जेना : मोबाइल, टैबलेट, डेस्कटॉप

जेना : स्तंभ लपेटब

प्रतिक्रियाशील कॉलम रीसेट

कॉलम ऑफसेट करब

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

स्तंभ क्रमबद्ध करब

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

चर

मिक्सिन

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

टाइपोग्राफी

शीर्षक

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

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

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

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

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

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

ज1। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज2। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज3। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज ४। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज5। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

ज6। बूटस्ट्रैप शीर्षक माध्यमिक पाठ

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

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

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

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

चिह्नित पाठ

मेटाएल गेल पाठ

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

पाठ सम्मिलित

रेखांकित पाठ

छोट पाठ

साहसी

इटैलिक

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

संरेखण वर्ग

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

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

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

आरंभवाद

पता

ब्लॉककोट्स

पूर्वनिर्धारित ब्लॉककोट

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

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

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

सूची बनाइए

अक्रमित

आदेश देल गेल

अनस्टाइल

इनलाइन

वर्णन

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

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

संहिता

इनलाइन

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

बेसिक ब्लॉक

चर

नमूना आउटपुट

तालिकाएँ

मूल उदाहरण

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

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

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

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

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