सीएसएस दा
वैश्विक सीएसएस सेटिंग्स, विस्तार योग्य वर्गें कन्नै शैली ते बधाए गेदे बुनियादी एचटीएमएल तत्व, ते इक उन्नत ग्रिड प्रणाली।
अवलोकन करना
बूटस्ट्रैप दे बुनियादी ढांचे दे मुक्ख टुकड़े पर लोडाउन हासल करो, जिंदे च बेहतर, तेज़, मजबूत वेब विकास आस्तै साढ़ा दृष्टिकोण बी शामल ऐ।
एचटीएमएल 5 डॉक्टटाइप ऐ
बूटस्ट्रैप किश HTML तत्वें ते CSS गुणें दा इस्तेमाल करदा ऐ जेह् ड़े HTML5 डॉकटाइप दा इस्तेमाल करने दी लोड़ होंदी ऐ. अपने सारे प्रोजेक्टें दे शुरू च इसगी शामल करो।
<!doctype html>
<html lang="en">
...
</html>मोबाइल पहले
बूटस्ट्रैप 2 कन्नै, असें ढांचे दे मुक्ख पैह्लुएं आस्तै वैकल्पिक मोबाइल अनुकूल शैलियां जोड़ीयां। बूटस्ट्रैप 3 कन्नै, अस प्रोजेक्ट गी शुरू थमां गै मोबाइल फ्रेंडली बनाने आस्तै दुबारा लिखेआ ऐ। वैकल्पिक मोबाइल शैलियां पर जोड़ने दे बजाय, ओह् कोर च ठीक बेक कीते गेदे न। दरअसल, बूटस्ट्रैप पैह्ले मोबाइल ऐ . मोबाइल पैह् ले शैलियें गी बक्ख-बक्ख फाइलें च नेईं होने दे बजाय पूरी लाइब्रेरी च पाया जाई सकदा ऐ।
उचित रेंडरिंग ते टच ज़ूमिंग गी सुनिश्चत करने आस्तै , अपने <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">user-scalable=noतुस व्यूपोर्ट मेटा टैग च जोड़ियै मोबाइल डिवाइस पर ज़ूमिंग क्षमताएं गी अक्षम करी सकदे ओ । एह् ज़ूमिंग गी अक्षम करदा ऐ , मतलब बरतूनी सिर्फ स्क्रॉल करने च समर्थ न , ते इसदे फलस्वरूप तुंदी साइट गी इक देशी एप्लिकेशन दी तर्ज पर थोड़ा मता महसूस होंदा ऐ । कुल मिलाइयै, अस हर साइट पर इसदी सिफारिश नेईं करदे, इसलेई सावधानी बरतो!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">टाइपोग्राफी ते लिंक
बूटस्ट्रैप बुनियादी वैश्विक प्रदर्शन, टाइपोग्राफी, ते लिंक शैलियां सेट करदा ऐ। खास तौर उप्पर अस:
background-color: #fff;पर सेट करोbody@font-family-base,@font-size-base, ते@line-height-baseविशेषताएं गी साढ़े मुद्रण आधार दे रूप च इस्तेमाल करो- ग्लोबल लिंक रंग दे माध्यम कन्नै सेट करो
@link-colorते लिंक अंडरलाइनें गी सिर्फ पर लागू करो:hover
एह् शैलियां अंदर गै पाई सकदियां न scaffolding.less.
सामान्य करो।css
बेहतर क्रॉस-ब्राउज़र रेंडरिंग आस्तै, अस Normalize.css दा इस्तेमाल करदे आं , जेह् ड़ा निकोलस गैलाघेर ते जोनाथन नील दा इक प्रोजेक्ट ऐ .
कंटेनर
बूटस्ट्रैप गी साइट सामग्री गी लपेटने ते साढ़े ग्रिड सिस्टम गी घर बनाने आस्तै इक समाहित तत्व दी लोड़ ऐ। तुस अपने प्रोजेक्टें च इस्तेमाल करने आस्तै दो कंटेनरें च इक चुनी सकदे ओ। ध्यान रक्खो जे, कारण paddingते मते, न ते कंटेनर नेस्टेबल ऐ.
.containerइक उत्तरदायी स्थिर चौड़ाई कंटेनर आस्तै इस्तेमाल करो ।
<div class="container">
...
</div>.container-fluidअपने व्यूपोर्ट दी पूरी चौड़ाई गी फैलाने आह् ले इक पूरी चौड़ाई आह् ले कंटेनर आस्तै इस्तेमाल करो .
<div class="container-fluid">
...
</div>ग्रिड प्रणाली
बूटस्ट्रैप च इक प्रतिक्रियाशील, मोबाइल पैह् ले तरल ग्रिड सिस्टम शामल ऐ जेह् ड़ा उचित रूप कन्नै 12 स्तंभें तगर स्केल करदा ऐ जि’यां-जि’यां डिवाइस जां व्यूपोर्ट दा आकार बधदा ऐ। इस च आसान लेआउट विकल्पें आस्तै पूर्व-निर्धारित वर्गें दे कन्नै-कन्नै होर शब्दार्थ लेआउट पैदा करने आस्तै शक्तिशाली मिक्सिन बी शामल न .
परिचे
ग्रिड सिस्टम दा इस्तेमाल पंक्तियां ते स्तंभें दी इक श्रृंखला दे माध्यम कन्नै पृष्ठ लेआउट बनाने लेई कीता जंदा ऐ जेह् ड़ी तुंदी सामग्री गी रक्खदी ऐ। बूटस्ट्रैप ग्रिड सिस्टम किस चाल्ली कम्म करदा ऐ: एह् दिक्खेआ गेआ ऐ:
.containerउचित संरेखण ते पैडिंग आस्तै पंक्तियें गी इक (नियत-चौड़ाई) जां.container-fluid(पूर्ण-चौड़ाई) दे अंदर रक्खेआ जाना लोड़चदा ऐ ।- स्तंभें दे क्षैतिज समूह बनाने लेई पंक्तियें दा इस्तेमाल करो।
- सामग्री गी स्तंभें दे अंदर रक्खेआ जाना चाहिदा, ते सिर्फ स्तंभ गै पंक्तियें दे फौरन बच्चे होई सकदे न।
- ग्रिड लेआउट गी जल्दी बनाने लेई पूर्व-निर्धारित ग्रिड वर्गें गी पसंद ऐ
.rowते.col-xs-4उपलब्ध ऐ। मता शब्दार्थ लेआउट आस्तै बी कम मिक्सिन दा इस्तेमाल कीता जाई सकदा ऐ । - स्तंभ गटर (स्तंभ सामग्री दे बीच अंतराल) दे माध्यम कन्नै बनांदे
paddingन . उस पैडिंग गी एस पर नकारात्मक मार्जिन दे राहें पैह् ले ते आखरी स्तंभ आस्तै पंक्तियें च ऑफसेट कीता जंदा ऐ.row। - नकारात्मक मार्जिन इस करी ऐ जे हेठ दित्ते गेदे उदाहरनें गी आउटडेंट कीता गेदा ऐ। एह् इसलेई ऐ जे ग्रिड स्तंभें दे अंदर सामग्री गी गैर-ग्रिड सामग्री कन्नै लाइन कीता जा।
- ग्रिड स्तंभें गी बारह उपलब्ध स्तंभें दी गिनतरी निर्दिश्ट करियै बनाया जंदा ऐ जेह् ड़ी तुस स्पैन करना चांह् दे ओ. मसलन, त्रै बराबर स्तंभ त्रै दा इस्तेमाल करग
.col-xs-4. - जेकर इक पंक्ति दे अंदर 12 शा मते स्तंभ रक्खे गेदे न तां अतिरिक्त स्तंभें दा हर इक समूह, इक इकाई दे रूप च, इक नमीं रेखा पर लपेटग।
- ग्रिड क्लास उनें डिवाइसें पर लागू होंदी ऐ जिंदे स्क्रीन चौड़ाई ब्रेकपॉइंट आकारें थमां मती जां बराबर होंदी ऐ , ते छोटे डिवाइसें गी लक्ष्य करियै ग्रिड क्लासें गी ओवरराइड करदे न । इसलेई, उदाहरन दे तौर
.col-md-*पर इक तत्व पर कुसै बी वर्ग गी लागू करने कन्नै न सिर्फ मध्यम उपकरणें पर उंदी स्टाइलिंग गी प्रभावित करग बल्के बड्डे उपकरणें पर बी जेकर कोई.col-lg-*वर्ग मौजूद नेईं ऐ।
अपने कोड च इनें सिद्धांतें गी लागू करने आस्तै उदाहरनें गी दिक्खो।
मीडिया पूछताछ
अस अपने ग्रिड सिस्टम च कुंजी ब्रेकपॉइंट बनाने लेई अपनी कम फाइलें च निम्नलिखित मीडिया क्वेरी दा उपयोग करदे आं।
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }अस कदें-कदें इनें मीडिया क्वेरीएं पर विस्तार करने आस्तै इक गी शामल करने max-widthआस्तै CSS गी डिवाइसें दे इक संकीर्ण सेट तगर सीमित करने आस्तै।
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }ग्रिड विकल्प
दिक्खो किस चाल्ली बूटस्ट्रैप ग्रिड सिस्टम दे पहलू इक सुलभ तालिका कन्नै मते सारे डिवाइसें च कम्म करदे न।
| अतिरिक्त छोटे उपकरण फोन (<768px) ऐ | छोटे उपकरण टैबलेट (≥768px) ऐ | मध्यम उपकरण डेस्कटॉप (≥992px) ऐ। | बड्डे उपकरण डेस्कटॉप (≥1200px) | |
|---|---|---|---|---|
| ग्रिड दा व्यवहार | हर वक्त क्षैतिज | शुरू करने लेई ढह गेआ, ब्रेकपॉइंटें दे उप्पर क्षैतिज | ||
| कंटेनर दी चौड़ाई | कोई (ऑटो) | 750पीएक्स ऐ | 970पीएक्स ऐ | 1170पीएक्स ऐ |
| वर्ग उपसर्ग | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # दा स्तंभ | 12 दा | |||
| स्तंभ चौड़ाई | ऑटो | ~ 62 पीएक्स ऐ | ~ 81 पीएक्स ऐ | ~ 97 पीएक्स ऐ |
| गटर चौड़ाई | 30px (इक स्तंभ दे हर इक पास्से 15px) | |||
| घोंसलेदार | हां | |||
| ऑफसेट करदा ऐ | हां | |||
| कॉलम दा आर्डर देना | हां | |||
उदाहरण : ढेर-टू-क्षैतिज
ग्रिड क्लासें दे इक सेट दा उपयोग करदे होई .col-md-*, तुस इक बुनियादी ग्रिड सिस्टम बनाई सकदे ओ जेह् ड़ा डेस्कटॉप (मध्यम) डिवाइसें पर क्षैतिज होने थमां पैह् ले मोबाइल डिवाइस ते टैबलेट डिवाइस (अतिरिक्त छोटी थमां छोटी रेंज) पर ढेर शुरू होई जंदा ऐ। किसी भी च ग्रिड स्तंभ रखो .row.
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-1 ऐ
.कोल-एमडी-8 ऐ
.कोल-एमडी-4 ऐ
.कोल-एमडी-4 ऐ
.कोल-एमडी-4 ऐ
.कोल-एमडी-4 ऐ
.कोल-एमडी-6 ऐ
.कोल-एमडी-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 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 .कोल-एमड��-4 ऐ
.कोल-एक्सएस-6 ऐ
.कोल-एक्सएस-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 ऐ
.कोल-एक्सएस-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-स्तंभ-चौड़ा दिव गी इक सटल इकाई दे रूप च इक नमीं रेखा पर लपेटेआ जंदा ऐ।
चूंकि 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 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>प्रतिक्रियाशील स्तंभ रीसेट करदा ऐ
उपलब्ध ग्रिड दे चार स्तरें कन्नै तुसें गी ऐसे मुद्दें च दौड़ना लाज़मी ऐ जित्थें, किश ब्रेकपॉइंटें पर, तुंदे स्तंभ बिल्कुल ठीक नेईं साफ होंदे न कीजे इक दुए कोला लंबा ऐ। उसगी ठीक करने आस्तै, इक .clearfixते साढ़ी प्रतिक्रियाशील उपयोगिता वर्गें दे संयोजन दा इस्तेमाल करो .
.col-xs-6 .col-sm-3
अपने व्यूपोर्ट दा आकार बदलो जां इक उदाहरण आस्तै अपने फोन पर इसदी जांच करो।
अपने व्यूपोर्ट दा आकार बदलो जां इक उदाहरण आस्तै अपने फोन पर इसदी जांच करो।
.कोल-एक्सएस-6 .कोल-एसएम-3 ऐ
.कोल-एक्सएस-6 .कोल-एसएम-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>गटर हटा दे
इक पंक्ति च गटरें गी हटाओ ते एह् .row-no-guttersक्लास कन्नै स्तंभ न।
.कोल-एक्सएस-12 .कोल-एमडी-8 ऐ
.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 .कोल-एमडी-4 ऐ
.कोल-एक्सएस-6 ऐ
.कोल-एक्सएस-6 ऐ
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>कॉलम ऑफसेट करना
.col-md-offset-*क्लासें दा इस्तेमाल करदे होई स्तंभें गी दाएं पास्से लेई जाओ । एह् वर्ग इक स्तंभ दे बाएं हाशिया गी *स्तंभें कन्नै बधांदे न । मसलन, चार स्तंभें उप्पर .col-md-offset-4चलदा ऐ ।.col-md-4
.कोल-एमडी-4 ऐ
.कोल-एमडी-4 .कोल-एमडी-ऑफसेट-4 ऐ
.कोल-एमडी-3 .कोल-एमडी-ऑफसेट-3 ऐ
.कोल-एमडी-3 .कोल-एमडी-ऑफसेट-3 ऐ
.कोल-एमडी-6 .कोल-एमडी-ऑफसेट-3 ऐ
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>.col-*-offset-0तुस क्लासें कन्नै निचले ग्रिड टियरें थमां ऑफसेटें गी बी ओवरराइड करी सकदे ओ ।
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>घोंसले बनाने वाले स्तंभ
डिफ़ॉल्ट ग्रिड कन्नै अपनी सामग्री गी नेस्ट करने आस्तै, इक मौजूदा स्तंभ दे अंदर इक नमां .rowते स्तंभें दा सेट जोड़ो . नेस्टेड पंक्तियें च स्तंभें दा इक सेट शामल होना चाहिदा जेह् ड़ा 12 जां उस थमां घट्ट जोड़दा ऐ (एह् जरूरी नेईं ऐ जे तुस सारे 12 उपलब्ध स्तंभें दा इस्तेमाल करो)।.col-sm-*.col-sm-*
स्तर 1: .कोल-एसएम-9 ऐ
स्तर 2: .कोल-एक्सएस-8 .कोल-एसएम-6 ऐ
स्तर 2: .कोल-एक्सएस-4 .कोल-एसएम-6 ऐ
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>कॉलम दा आर्डर देना
.col-md-push-*ते .col-md-pull-*संशोधक वर्गें कन्नै साढ़े बिल्ट-इन ग्रिड स्तंभें दा क्रम आसानी कन्नै बदलो ।
.कोल-एमडी-9 .कोल-एमडी-पुश-3 ऐ
.कोल-एमडी-3 .कोल-एमडी-पुल-9 ऐ
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>मिक्सिन ते चर कम
तेज़ लेआउट आस्तै पूर्व- निर्मित ग्रिड वर्गें दे अलावा , बूटस्ट्रैप च तुंदे अपने सरल, शब्दार्थ लेआउट गी जल्दी पैदा करने आस्तै कम चर ते मिक्सिन शामल न.
चर करने वाले
चर स्तंभें दी संख्या, गटर चौड़ाई, ते मीडिया क्वेरी बिंदु निर्धारत करदे न जित्थै तैह् त स्तंभ शुरू करना ऐ। अस इन्हें दा उपयोग उप्पर दस्तावेज कीते गेदे पूर्व-निर्धारित ग्रिड वर्गें गी पैदा करने आस्तै करदे आं , ते कन्नै गै हेठ दित्ते गेदे कस्टम मिक्सिन आस्तै बी ।
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;मिक्सिन
व्यक्तिगत ग्रिड स्तंभें लेई शब्दार्थ सीएसएस पैदा करने आस्तै मिक्सिन दा इस्तेमाल ग्रिड चरें कन्नै मिलियै कीता जंदा ऐ।
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}उदाहरण दे प्रयोग
तुस चर गी अपने कस्टम मूल्यें च संशोधित करी सकदे ओ , जां बस मिक्सिनें दा इस्तेमाल उंदे डिफाल्ट मूल्यें कन्नै करी सकदे ओ. एह्दे च इक गैप कन्नै दो-स्तंभ लेआउट बनाने आस्तै डिफाल्ट सेटिंग्स दा इस्तेमाल करने दा इक उदाहरण ऐ.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>टाइपोग्राफी दा
हेडिंग्स
सारे एचटीएमएल हेडिंग, <h1>दे राहें <h6>, उपलब्ध न। .h1क्लासें दे माध्यम कन्नै .h6बी उपलब्ध न, कीजे जिसलै तुस कुसै हेडिंग दी फॉन्ट स्टाइलिंग कन्नै मेल खाना चांह् दे ओ पर फ्ही बी चांह् दे ओ जे तुंदा पाठ इनलाइन प्रदर्शत कीता जा।
एच१ ऐ। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 36पीएक्स ऐ |
ज २। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 30px ऐ |
ज ३। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 24पीएक्स ऐ |
ह4 ऐ। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 18px ऐ |
ज ५। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 14पीएक्स ऐ |
एच6 ऐ। बूटस्ट्रैप हेडिंग |
अर्धबोल्ड 12पीएक्स ऐ |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><small>जेनेरिक टैग जां .smallक्लास कन्नै कुसै बी हेडिंग च हल्के, सेकेंडरी पाठ बनाओ .
एच१ ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
ज २। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
ज ३। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
ह4 ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
ज ५। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
एच6 ऐ। बूटस्ट्रैप हेडिंग माध्यमिक पाठ |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>शरीर दी नकल
बूटस्ट्रैप दा ग्लोबल डिफ़ॉल्ट 14pxfont-size ऐ , जिसदा इक 1.428 ऐ . एह् ते सारे पैराग्राफें पर लागू कीता जंदा ऐ। इसदे अलावा, (पैराग्राफ) गी उंदी गणना कीती गेदी रेखा-ऊँचाई (डिफ़ॉल्ट रूप कन्नै 10px) आधे दा निचला मार्जिन हासल होंदा ऐ।line-height<body><p>
नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ओरनारे वेल ईउ लियो। सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला।
सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला।
मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट।
<p>...</p>सीसा शरीर नकल
जोड़कर इक पैराग्राफ गी अलग बनाओ .lead.
विवामस सैजिटिस लैकस वेल औग लाओरीत रुट्रम फौसिबस डोलोर नीलामी। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस।
<p class="lead">...</p>कम के साथ बनाया गया
मुद्रण पैमाना चर च दो Less चर उप्पर आधारत ऐ ।less : @font-size-baseते @line-height-base. पैह् ला आधार फॉन्ट-आकार ऐ जेह् ड़ा पूरे च बरतेआ गेदा ऐ ते दूआ आधार रेखा-ऊँचाई ऐ । अस अपने सारे टाइप ते होर मते सारे मार्जिन, पैडिंग, ते लाइन-हाईट बनाने आस्तै उनें चर ते किश साधारण गणित दा इस्तेमाल करदे आं। इन्हें अनुकूलित करो ते बूटस्ट्रैप एडैप्ट करदा ऐ।
इनलाइन पाठ तत्व
चिह्नित पाठ
कुसै होर संदर्भ च उंदी प्रासंगिकता दे कारण पाठ दे इक रन गी हाइलाइट करने आस्तै, <mark>टैग दा इस्तेमाल करो.
तुस निशान टैग दा इस्तेमाल करी सकदे ओमुक्ख हिस्सापाठ.
You can use the mark tag to <mark>highlight</mark> text.पाठ हटाया गया
पाठ दे ब्लॉक गी दर्शाने आस्तै जेह् ड़े हटाए गेदे न, <del>टैग दा इस्तेमाल करो.
पाठ दी इस पंक्ति दा मतलब ऐ जे डिलीट कीते गेदे पाठ दे रूप च समझेआ जा।
<del>This line of text is meant to be treated as deleted text.</del>पाठ दे माध्यम कन्नै स्ट्राइक करो
पाठ दे ब्लॉक गी दर्शाने आस्तै जेह् ड़े हून प्रासंगिक नेईं न , <s>टैग दा इस्तेमाल करो.
पाठ दी इस पंक्ति दा मतलब ऐ जे इसगी हून सटीक नेईं मन्नेआ जा।
<s>This line of text is meant to be treated as no longer accurate.</s>पाठ डाला गया
दस्तावेज़ च जोड़ने गी दर्शाने आस्तै <ins>टैग दा इस्तेमाल करो.
पाठ दी इस पंक्ति दा मतलब ऐ जे दस्तावेज च इक जोड़ दे रूप च समझेआ जा।
<ins>This line of text is meant to be treated as an addition to the document.</ins>रेखांकित पाठ
पाठ गी रेखांकित करने लेई <u>टैग दा इस्तेमाल करो।
पाठ दी एह् पंक्ति रेखांकित कीते गेदे तरीके कन्नै रेंडर करग
<u>This line of text will render as underlined</u>हल्के शैलियें कन्नै HTML दे डिफ़ॉल्ट जोर टैग दा इस्तेमाल करो.
छोटा सा पाठ
पाठ दे इनलाइन जां ब्लॉक गी डी-एम्फैस करने आस्तै, <small>पाठ गी माता-पिता दे आकार दे 85% पर सेट करने आस्तै टैग दा इस्तेमाल करो. हेडिंग तत्व font-sizeनेस्टेड <small>तत्वें लेई अपने आप गी हासल करदे न।
तुस वैकल्पिक रूप कन्नै .smallकुसै बी <small>.
पाठ दी इस पंक्ति दा मतलब ऐ जे इसगी बारीक छापें दे रूप च समझेआ जा।
<small>This line of text is meant to be treated as fine print.</small>न-झक्क
भारी फॉन्ट-वजन कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै।
पाठ दा निम्नलिखित स्निपेट बोल्ड पाठ दे रूप च रेंडर कीता गेदा ऐ .
<strong>rendered as bold text</strong>इटैलिक
इटैलिक कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै।
पाठ दा निम्नलिखित स्निपेट इटैलिक पाठ दे रूप च रेंडर कीता गेदा ऐ .
<em>rendered as italicized text</em>वैकल्पिक तत्वें दा
एचटीएमएल 5 च <b>ते बेझिझक इस्तेमाल करो । दा मतलब ऐ शब्दें जां वाक्यांशें गी बिना कुसै अतिरिक्त महत्व दे उजागर करना जदके एह् मते सारें शा मता आवाज़ , तकनीकी शब्दें बगैरा आस्तै ऐ ।<i><b><i>
संरेखण कक्षाएं
पाठ संरेखण वर्गें कन्नै घटकें च पाठ गी आसानी कन्नै पुनर्संरेखित करो।
बाएं संरेखित पाठ।
केंद्र संरेखित पाठ।
दाहिने संरेखित पाठ।
जायज पाठ।
कोई लपेट पाठ।
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>परिवर्तन कक्षाएं
पाठ कैपिटलाइजेशन वर्गें कन्नै घटकें च पाठ गी बदलो।
लघु अक्षर दा पाठ।
बड़े अक्षर दा पाठ।
कैपिटल लिखे दा पाठ।
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>संक्षिप्त रूप
<abbr>होवर पर विस्तारित संस्करण गी दस्सने आस्तै संक्षिप्त ते संक्षिप्त नामें आस्तै HTML दे तत्व दा शैलीबद्ध कार्यान्वयन । इक विशेषता कन्नै संक्षिप्त titleरूप च हल्के बिंदीदार निचली सीमा ते होवर पर इक मदद कर्सर होंदा ऐ, जेह् ड़ा होवर पर ते सहायक तकनीकें दे बरतूनकर्ताएं गी अतिरिक्त संदर्भ प्रदान करदा ऐ।
मूल संक्षिप्त नाम
विशेषता शब्द दा इक संक्षिप्त रूप ऐ attr .
<abbr title="attribute">attr</abbr>आरंभवाद
.initialismथोह् ड़ी-मती फॉन्ट-आकार आस्तै इक संक्षिप्त रूप च जोड़ो ।
एचटीएमएल कटा हुआ रोटी दे बाद दी सबतूं अच्छी चीज ऐ।
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>संबोधन करदा ऐ
नजदीकी पूर्वज जां कम्मै दे पूरे निकाय आस्तै संपर्क जानकारी पेश करो। सारे लाइनें गी <br>.
ट्विटर, इंक
1355 मार्केट स्ट्रीट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890 पूरा नाम
[email protected]
1355 मार्केट स्ट्रीट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890 पूरा नाम
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>ब्लॉककोट्स
अपने दस्तावेज़ दे अंदर कुसै होर स्रोत थमां सामग्री दे ब्लॉक उद्धृत करने आस्तै।
डिफ़ॉल्ट ब्लॉककोट ऐ
उद्धरण दे रूप च कुसै बी एचटीएमएल<blockquote> दे चारों-पार लपेटो । सीधे उद्धरणें लेई, अस इक .<p>
लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एरात ए एंटी।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>ब्लॉककोट विकल्प
इक मानक पर सरल बदलाव आस्तै शैली ते सामग्री च बदलाव <blockquote>.
इक स्रोत दा नाम देना
<footer>स्रोत दी पन्छान करने आस्तै इक जोड़ो । स्रोत कम्मै दा नांऽ लपेटो <cite>.
लोरेम इप्सम डोलोर बैठो अमेट, कन्सेक्टेतुर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एरात ए एंटी।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>वैकल्पिक प्रदर्शन करदे न
.blockquote-reverseदाहिने-संरेखित सामग्री कन्नै इक ब्���ॉककोट आस्तै जोड़ो .
<blockquote class="blockquote-reverse">
...
</blockquote>लिस्टां करदा ऐ
अनऑर्डर
ऐसी चीजें दी सूची जिस च क्रम गी स्पश्ट रूप कन्नै कोई फर्क नेईं पौंदा।
- लोरेम इप्सम डोलोर बैठो अमेत
- कन्सेक्टेतुर एडिपिसिंग एलिट
- पूर्णांक मोलेस्टी लोरेम एट मासा
- प्रीटियम निस्ल एलिकेट च फैसिलिसिस
- नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेके
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- एसी ट्रिस्टिक लिबेरो वोलुतपत एट
- फौसिबस पोर्टा लैकस फ्रिंगिला वेल
- ऐन बैठा अमेत एरात नुंक
- एगेट पोर्टिटोर लोरेम
<ul>
<li>...</li>
</ul>आर्डर दे दी
आइटमें दी इक सूची जिस च क्रम स्पश्ट रूप कन्नै महत्व रखदा ऐ ।
- लोरेम इप्सम डोलोर बैठो अमेत
- कन्सेक्टेतुर एडिपिसिंग एलिट
- पूर्णांक मोलेस्टी लोरेम एट मासा
- प्रीटियम निस्ल एलिकेट च फैसिलिसिस
- नुल्ला वोलुतपत अलिक्वाम वेलित
- फौसिबस पोर्टा लैकस फ्रिंगिला वेल
- ऐन बैठा अमेत एरात नुंक
- एगेट पोर्टिटोर लोरेम
<ol>
<li>...</li>
</ol>अनस्टाइल
सूची आइटमें पर डिफाल्ट list-styleते बाएं मार्जिन गी हटाओ (केवल फौरी बच्चें गी)। एह् सिर्फ फौरी बच्चें दी सूची आइटमें पर लागू होंदा ऐ , मतलब तुसेंगी कुसै बी नेस्टेड सूची आस्तै बी क्लास जोड़ने दी लोड़ होग.
- लोरेम इप्सम डोलोर बैठो अमेत
- कन्सेक्टेतुर एडिपिसिंग एलिट
- पूर्णांक मोलेस्टी लोरेम एट मासा
- प्रीटियम निस्ल एलिकेट च फैसिलिसिस
- नुल्ला वोलुतपत अलिक्वाम वेलित
- फेसेलस इअकुलिस नेके
- पुरुष सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- एसी ट्रिस्टिक लिबेरो वोलुतपत एट
- फौसिबस पोर्टा लैकस फ्रिंगिला वेल
- ऐन बैठा अमेत एरात नुंक
- एगेट पोर्टिटोर लोरेम
<ul class="list-unstyled">
<li>...</li>
</ul>इनलाइन
सारे सूची आइटमें गी इक लाइन पर display: inline-block;ते किश हल्की पैडिंग कन्नै रक्खो।
- लोरेम इप्सम
- फेसेलस इअकुलिस दा
- नुल्ला वोलुतपत
<ul class="list-inline">
<li>...</li>
</ul>ब्यौरा
शब्दें दी सूची उंदे कन्नै सरबंधत विवरणें कन्नै।
- विवरण सूची दी
- शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
- यूइसमोद ने दी
- वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।
- डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
- मलेसुआदा पोर्टा
- एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>क्षैतिज वर्णन
<dl>लाइन अप साइड-बाय-साइड च शब्द ते वर्णन बनाओ । डिफ़ॉल्ट <dl>एस दी तरह ढेर बंद शुरू होंदा ऐ, पर जदूं नवबार विस्तार करदा ऐ, तां एह् करो।
- विवरण सूची दी
- शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
- यूइसमोद ने दी
- वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।
- डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
- मलेसुआदा पोर्टा
- एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।
- फेलिस यूइसमोड सेम्पर एगेट लैसिनिया
- फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कंडिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बैठो अमेट रिसुस।
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>स्वतः कटौती करना
क्षैतिज वर्णन सूची उनें शब्दें गी कटौती करग जेह् ड़े मते लम्मे न जेह् ड़े बाएं स्तंभ च फिट नेईं होंदे न text-overflow. संकीर्ण व्यूपोर्टें च, ओह् डिफाल्ट स्टैक कीते गेदे लेआउट च बदली जाङन.
कोड
इनलाइन
कोड दे इनलाइन स्निपेटें गी <code>.
मसलन,
<section>इनलाइन दे रूप च लपेटेआ जाना चाहिदा।
For example, <code><section></code> should be wrapped as inline.यूजर इनपुट ऐ
<kbd>इनपुट गी दर्शाने आस्तै दा इस्तेमाल करो जेह् ड़ा आमतौर पर कीबोर्ड दे राहें दर्ज कीता जंदा ऐ।
डायरेक्टरी बदलने लेई, टाइप करो
cdते उसदे बाद डायरेक्टरी दा नांऽ लिखो.
सेटिंग्स गी संपादत करने लेई, दबाओ ctrl + ,
सेटिंग्स गी संपादत करने लेई, दबाओ 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><p>Sample text here...</p></pre>तुस वैकल्पिक रूप कन्नै .pre-scrollableवर्ग गी जोड़ सकदे ओ , जेह् ड़ी 350px दी इक मैक्स-ऊँचाई सेट करग ते इक y-अक्ष स्क्रॉलबार प्रदान करग.
चर करने वाले
चर गी दर्शाने आस्तै <var>टैग दा इस्तेमाल करो।
वाई = एम एक्स + बी
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>नमूना आउटपुट
ब्लॉक गी संकेत करने आस्तै इक प्रोग्राम थमां नमूना आउटपुट <samp>टैग दा इस्तेमाल करो।
इस पाठ दा मतलब ऐ जे इक कंप्यूटर प्रोग्राम थमां नमूना आउटपुट दे रूप च समझेआ जा।
<samp>This text is meant to be treated as sample output from a computer program.</samp>तालिकाएं
बुनियादी मिसाल
.tableबुनियादी स्टाइलिंग लेई-हल्के पैडिंग ते सिर्फ क्षैतिज डिवाइडर- किसे बी च आधार वर्ग जोड़ो <table>. एह् सुपर फालतू लगदा ऐ, पर कैलेंडर ते तारीख चुनने आह् ले होर प्लगइन्स आस्तै तालिकाएं दे व्यापक इस्तेमाल गी दिक्खदे होई, असें अपनी कस्टम तालिका शैलियें गी अलग करने दा विकल्प चुनेआ ऐ।
| # ऐ | पैहला नां | अखीरी नां | यूजरनेम दा |
|---|---|---|---|
| १ | मार्क करो | ओटो ने दी | @ एमडीओ |
| २ | याकूब दा | थॉर्नटन ने दी | @मुट्टा |
| ३ | लैरी ने दी | चिड़िया दा | @ ट्विटर पर |
<table class="table">
...
</table>धारीदार पंक्तियां
.table-stripedदे अंदर कुसै बी तालिका पंक्ति च ज़ेबरा-स्ट्राइपिंग जोड़ने लेई इस्तेमाल करो <tbody>.
क्रॉस-ब्राउज़र संगतता
धारीदार तालिकाएं गी CSS चयनकर्ता दे राहें स्टाइल कीता जंदा ऐ :nth-child, जेह् ड़ा इंटरनेट एक्सप्लोरर 8 च उपलब्ध नेईं ऐ।
| # ऐ | पैहला नां | अखीरी नां | यूजरनेम दा |
|---|---|---|---|
| १ | मार्क करो | ओटो ने दी | @ एमडीओ |
| २ | याकूब दा | थॉर्नटन ने दी | @मुट्टा |
| ३ | लैरी ने दी | चिड़िया दा | @ ट्विटर पर |
<table class="table table-striped">
...
</table>सीमाबद्ध मेज
.table-borderedतालिका ते कोशिकाएं दे सारे पास्सै सीमाएं आस्तै जोड़ो ।
| # ऐ | पैहला नां | अखीरी नां | यूजरनेम दा |
|---|---|---|---|
| १ | मार्क करो | ओटो ने दी | @ एमडीओ |
| २ | याकूब दा | थॉर्नटन ने दी | @मुट्टा |
| ३ | लैरी ने दी | चिड़िया दा | @ ट्विटर पर |
<table class="table table-bordered">
...
</table>पंक्तियां होवर करो
.table-hoverइक दे अंदर तालिका पंक्तियें पर इक होवर स्थिति गी सक्षम करने आस्तै जोड़ो <tbody>.
| # ऐ | पैहला नां | अखीरी नां | यूजरनेम दा |
|---|---|---|---|
| १ | मार्क करो | ओटो ने दी | @ एमडीओ |
| २ | याकूब दा | थॉर्नटन ने दी | @मुट्टा |
| ३ | लैरी ने दी | चिड़िया दा | @ ट्विटर पर |
<table class="table table-hover">
...
</table>संघनित तालिका
.table-condensedसेल पैडिंग गी आधे च कट्टियै टेबल गी होर कॉम्पैक्ट बनाने लेई जोड़ो ।
| # ऐ | पैहला नां | अखीरी नां | यूजरनेम दा |
|---|---|---|---|
| १ | मार्क करो | ओटो ने दी | @ एमडीओ |
| २ | याकूब दा | थॉर्नटन ने दी | @मुट्टा |
| ३ | लैरी द बर्ड | @ ट्विटर पर | |
<table class="table table-condensed">
...
</table>संदर्भ कक्षाएं
तालिका पंक्तियें जां व्यक्तिगत कोशिकाएं गी रंगने आस्तै संदर्भ वर्गें दा उपयोग करो.
| जमात | ब्यौरा |
|---|---|
.active |
होवर रंग गी कुसै खास पंक्ति जां सेल पर लागू करदा ऐ |
.success |
सफल जां सकारात्मक कार्रवाई दा संकेत दिंदा ऐ |
.info |
तटस्थ सूचनात्मक बदलाव जां कार्रवाई गी दर्शांदा ऐ |
.warning |
इक चेतावनी गी दर्शांदा ऐ जिस पर ध्यान देने दी लोड़ हो सकदी ऐ |
.danger |
खतरनाक जां संभावित नकारात्मक कार्रवाई दा संकेत दिंदा ऐ |
| # ऐ | स्तंभ शीर्षक | स्तंभ शीर्षक | स्तंभ शीर्षक |
|---|---|---|---|
| १ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| २ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ३ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ४ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ५ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ६ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ७ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ८ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
| ९ | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना
तालिका पंक्ति जां व्यक्तिगत कोशिका च अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै चिऱन्नत जानकारी या तां सामग्री थमां गै स्पष्ट ऐ (सम्बंधत तालिका पंक्ति/कोशिका च दिक्खने आह् ला पाठ), जां वैकल्पिक साधनें राहें शामल कीता जा, जि’यां .sr-onlyवर्ग कन्नै छिपे दा अतिरिक्त पाठ.
रिस्पांसिव टेबल
.tableकुसै बी च लपेटियै प्रतिक्रियाशील तालिकाएं गी बनाओ .table-responsiveतां जे उनेंगी छोटे डिवाइसें पर (768px थमां हेठ) क्षैतिज रूप कन्नै स्क्रॉल कीता जाई सकै। 768px चौड़ाई थमां बड्डी कुसै बी चीज़ पर दिक्खदे बेल्लै तुसें गी इनें तालिकाएं च कोई फर्क नेईं लब्भग।
ऊर्ध्वाधर कतरन / कटौती करना
प्रतिक्रियाशील तालिकाएं दा इस्तेमाल कीता जंदा ऐ overflow-y: hidden, जेह् ड़ी कुसै बी सामग्री गी क्लिप करदी ऐ जेह् ड़ी तालिका दे निचले जां शीर्शक किनारे थमां परे ऐ । खास करियै, एह् ड्रॉपडाउन मेनू ते होर त्रीयें पार्टी विजेटें गी क्लिप करी सकदा ऐ।
फायरफॉक्स ते फील्डसेट
फायरफॉक्स च किश अजीब फील्डसेट स्टाइलिंग शामल widthऐ जेह् ड़ी प्रतिक्रियाशील तालिका च हस्तक्षेप करदी ऐ. इसगी फायरफॉक्स-विशिष्ट हैक दे बगैर ओवरराइड नेईं कीता जाई सकदा जेह् ड़ा अस बूटस्ट्रैप च नेईं दिंदे:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}होर मती जानकारी आस्तै, एह् स्टैक ओवरफ्लो जवाब पढ़ो .
| # ऐ | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
|---|---|---|---|---|---|---|
| १ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
| २ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
| ३ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
| # ऐ | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
|---|---|---|---|---|---|---|
| १ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
| २ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
| ३ | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका | तालिका कोशिका |
<div class="table-responsive">
<table class="table">
...
</table>
</div>रूप दे
बुनियादी मिसाल
व्यक्तिगत फार्म नियंत्रण अपने आप गै कुसै वैश्विक स्टाइलिंग गी हासल करदे न। कन्नै सारे पाठ <input>, <textarea>, ते <select>तत्व डिफ़ॉल्ट रूप कन्नै .form-controlसेट कीते गेदे न . इष्टतम अंतराल आस्तै width: 100%;लेबल ते नियंत्रणें गी अंदर लपेटो ।.form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>फार्म समूहें गी इनपुट समूहें कन्नै नेईं मिलाओ
फार्म समूहें गी सीधे इनपुट समूहें कन्नै नेईं मिलाओ . इसदे बजाय, इनपुट समूह गी फार्म समूह दे अंदर नेस्ट करो।
इनलाइन फार्म
बाएं-संरेखित ते इनलाइन-ब्लॉक नियंत्रणें आस्तै अपने फार्म च जोड़ो .form-inline(जिस च इक होना जरूरी नेईं ऐ ). एह् सिर्फ उनें व्यूपोर्टें दे अंदर दे फार्म उप्पर लागू होंदा ऐ जेह् ड़े घट्ट शा घट्ट 768px चौड़ा होंदे न.<form>
कस्टम चौड़ाई दी लोड़ हो सकदी ऐ
बूटस्ट्रैप च इनपुट ते चयन width: 100%;डिफ़ॉल्ट रूप कन्नै लागू कीते गेदे न. इनलाइन फार्म दे अंदर, अस उसगी रीसेट करदे न width: auto;तां जे मते सारे नियंत्रण इक गै लाइन पर रौंह् सकन। तुंदे लेआउट दे आधार उप्पर, अतिरिक्त कस्टम चौड़ाई दी लोड़ होई सकदी ऐ.
हमेशा लेबल जोड़ना
जेकर तुस हर इनपुट आस्तै इक लेबल नेईं शामल करदे ओ तां स्क्रीन रीडरें गी तुंदे फार्म कन्नै परेशानी होग। .sr-onlyइनें इनलाइन फार्में लेई, तुस क्लास दा इस्तेमाल करियै लेबल गी छुपाई सकदे ओ । सहायक तकनीकें लेई लेबल उपलब्ध करोआने दे होर वैकल्पिक तरीके न, जि’यां aria-label, aria-labelledbyजां titleएट्रिब्यूट। जेकर इनें चा कोई बी मौजूद नेईं ऐ तां स्क्रीन रीडर placeholder, जेकर मौजूद ऐ तां, एट्रिब्यूट दा इस्तेमाल करने दा सहारा लैई सकदे न, पर ध्यान रक्खो जे placeholderहोर लेबलिंग तरीकें दे बदले दे रूप च इसदा इस्तेमाल करने दी सलाह नेईं दित्ती जंदी ऐ।
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>क्षैतिज रूप
फार्म च जोड़ियै इक क्षैतिज लेआउट च फार्म नियंत्रणें दे लेबल ते समूहें गी संरेखित करने आस्तै बूटस्ट्रैप दी पूर्व-निर्धारित ग्रिड वर्गें दा उपयोग करो .form-horizontal(जिसी इक होना जरूरी नेईं ऐ <form>) । ऐसा करने कन्नै .form-groups गी ग्रिड पंक्तियें दे रूप च व्यवहार करने च बदलाव होंदा ऐ , इसलेई .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>समर्थित नियंत्रण
इक उदाहरण फार्म लेआउट च समर्थत मानक फार्म नियंत्रणें दे उदाहरण।
इनपुट करदा ऐ
सब्भै आम फार्म नियंत्रण, पाठ-आधारत इनपुट फील्ड। सारे HTML5 किस्में लेई समर्थन शामल ऐ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ते color.
टाइप घोषणा करना जरूरी ऐ
इनपुटें गी तदूं गै पूरी चाल्ली स्टाइल कीता जाग जेकर उंदा typeठीक ढंगै कन्नै घोशित कीता गेआ होए।
<input type="text" class="form-control" placeholder="Text input">इनपुट समूह
कुसै बी पाठ-आधारत थमां पैह् ले ते/जां बाद च इकीकृत पाठ जां बटन जोड़ने आस्तै <input>, इनपुट समूह घटक दी जांच करो .
पाठ क्षेत्र
फार्म नियंत्रण जेह् ड़ा पाठ दी मती पंक्तियें गी समर्थन करदा ऐ । rowsजरूरत मताबक विशेषता बदलो ।
<textarea class="form-control" rows="3"></textarea>चेकबॉक्स ते रेडियो
चेकबॉक्स इक सूची च इक जां केईं विकल्पें गी चुनने लेई होंदे न, जदके रेडियो मते सारे विकल्पें च इक विकल्प चुनने लेई होंदे न।
अक्षम चेकबॉक्स ते रेडियो समर्थत न, पर माता-पिता दे होवर पर इक "अनुमत नेईं" कर्सर उपलब्ध करोआने आस्तै <label>, तुसेंगी .disabledवर्ग गी माता-पिता च जोड़ना होग .radio, .radio-inline, .checkbox, जां .checkbox-inline.
डिफ़ॉल्ट (ढेर) ऐ
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>इनलाइन चेकबॉक्स ते रेडियो
इक गै लाइन पर दिक्खने आह् ले नियंत्रणें आस्तै चेकबॉक्स जां रेडियो दी श्रृंखला पर .checkbox-inlineजां क्लासें दा इस्तेमाल करो ..radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>लेबल पाठ दे बगैर चेकबॉक्स ते रेडियो
क्या तुंदे कोल , दे अंदर कोई पाठ नेईं होना चाहिदा ऐ <label>, इनपुट गी उस्सै चाल्ली तैनात कीता गेदा ऐ जिसी तुस उम्मीद करदे ओ. फिलहाल सिर्फ गैर-इनलाइन चेकबॉक्स ते रेडियो पर गै कम्म करदा ऐ। सहायक प्रौद्योगिकी (उदाहरण दे तौर पर, बरतून aria-label) आस्तै अजें बी कुसै बी चाल्लीं दे लेबल उपलब्ध करोआना याद रक्खो ।
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>चयन करदा ऐ
ध्यान रक्खो जे मते सारे देशी चयन मेनू- अर्थात सफारी ते क्रोम च- गोल कोने होंदे न जेह् ड़े border-radiusगुणें दे राहें संशोधित नेईं कीते जाई सकदे न।
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>विशेषता कन्नै नियंत्रणें आस्तै multiple, मते सारे विकल्प डिफाल्ट रूप कन्नै दस्से गेदे न.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>स्थिर नियंत्रण
जदूं तुसेंगी इक फार्म दे अंदर इक फार्म लेबल दे बगल च सादा पाठ रखने दी लोड़ होंदी ऐ तां .form-control-staticइक <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>फोकस स्टेट
अस किश फार्म नियंत्रणें पर डिफाल्ट outlineशैलियां हटांदे आं box-shadowते :focus.
डेमो:focus राज्य
:focusउपर्युक्त उदाहरन इनपुट इक पर स्थिति गी प्रदर्शत करने आस्तै साढ़े दस्तावेजें च कस्टम शैलियें दा उपयोग करदा ऐ .form-control.
अक्षम राज्य
disabledबरतूनी परस्पर क्रियाएं गी रोकने आस्तै इक इनपुट पर बूलियन विशेषता जोड़ो . अक्षम इनपुट हल्के दिक्खे जंदे न ते इक not-allowedकर्सर जोड़दे न।
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>अक्षम कीते गेदे फील्डसेट
इक बारी च अंदर सारे नियंत्रणें गी अक्षम करने disabledआस्तै एट्रिब्यूट गी a च जोड़ो .<fieldset><fieldset>
दी लिंक कार्यक्षमता दे बारे च चेतावनी<a>
डिफाल्ट रूप कन्नै, ब्राउज़र a दे अंदर सारे देशी फार्म नियंत्रणें ( <input>, <select>ते <button>तत्वें) <fieldset disabled>गी अक्षम दे रूप च समझग, उंदे पर कीबोर्ड ते माउस दोनें परस्पर क्रियाएं गी रोकग. पर, जेकर तुंदे फार्म च <a ... class="btn btn-*">तत्व बी शामल न तां इन्हें गी सिर्फ pointer-events: none. जि’यां बटनें आस्तै अक्षम स्थिति दे बारे च खंड च दिक्खेआ गेआ ऐ (ते खास करियै एंकर तत्वें आस्तै उप-खंड च), एह् CSS गुण अजें तगर मानक नेईं ऐ ते ओपेरा 18 ते हेठ, जां इंटरनेट एक्सप्लोरर 11 च पूरी चाल्ली समर्थत नेईं ऐ, ते जीती गेई ऐ 't कीबोर्ड बरतूनी गी इनें लिंकें गी ध्यान च रक्खने जां सक्रिय करने थमां रोकेआ जा। इसलेई सुरक्षत होने आस्तै, ऐसे लिंक गी अक्षम करने आस्तै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो.
क्रॉस-ब्राउज़र संगतता
जदके बूटस्ट्रैप इनें शैलियें गी सारे ब्राउज़रें च लागू करग, इंटरनेट एक्सप्लोरर 11 ते हेठ दित्ते गेदे disabledइक पर विशेषता गी पूरी चाल्ली समर्थन नेईं करदे न <fieldset>. इनें ब्राउज़रें च फील्डसेट गी अक्षम करने आस्तै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>सिर्फ पढ़ने दा राज्य
readonlyइनपुट दे मूल्य च संशोधन गी रोकने आस्तै इक इनपुट पर बूलियन विशेषता जोड़ो . केवल-पढ़ने आह् ले इनपुट हल्के दिक्खे जंदे न (जिऱयां अक्षम इनपुट), पर मानक कर्सर गी बरकरार रक्खो.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>मदद पाठ
फार्म नियंत्रणें लेई ब्लॉक स्तर मदद पाठ।
मदद पाठ गी फार्म नियंत्रणें कन्नै जोड़ना
मदद पाठ गी स्पश्ट रूप कन्नै उस फार्म नियंत्रण कन्नै जुड़े दा होना चाहिदा जेह् ड़ा एह् aria-describedbyविशेषता दा उपयोग करने कन्नै सरबंधत ऐ. एह् इस गल्लै गी सुनिश्चत करग जे सहायक प्रौद्योगिकी – जि’यां स्क्रीन रीडर – इस मदद पाठ दी घोशणा करग जिसलै बरतूनी नियंत्रण च ध्यान केंद्रत करदा ऐ जां दाखल करदा ऐ।
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>मान्यता दे राज्य
बूटस्ट्रैप च फार्म नियंत्रणें पर त्रुटि, चेतावनी, ते सफलता स्थिति आस्तै सत्यापन शैलियां शामल न. .has-warningइस्तेमाल करने आस्तै, , .has-error, जां .has-successमाता-पिता तत्व च जोड़ो । उस तत्व दे अंदर कोई बी .control-label, .form-control, ते .help-blockसत्यापन शैलियां हासल करग.
सहायक प्रौद्योगिकी ते रंग-अंधा उपयोगकर्ताएं गी सत्यापन स्थिति गी पजाना
इक फार्म नियंत्रण दी स्थिति गी दर्शाने आस्तै इनें सत्यापन शैलियें दा उपयोग सिर्फ इक दृश्य, रंग-आधारत संकेत प्रदान करदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी - जि’यां स्क्रीन रीडरें गी - जां रंग-अंधा बरतूनकर्ताएं गी नेईं पजाया जाग।
एह् सुनिश्चत करना जे राज्य दा इक वैकल्पिक संकेत बी दित्ता जा। मसाल आस्तै, तुस फार्म नियंत्रण दे <label>पाठ च गै स्थिति दे बारे च इक संकेत शामल करी सकदे ओ (जिऱयां निम्नलिखित कोड उदाहरन च ऐ), इक ग्लिफिकॉन शामल करी सकदे ओ (वर्ग दा इस्तेमाल करदे होई उचित वैकल्पिक पाठ कन्नै .sr-only- ग्लिफिकॉन उदाहरण दिक्खो ), जां इक अतिरिक्त मदद पाठ ब्लॉक करना। खास करियै सहायक प्रौद्योगिकियें आस्तै, अवैध फार्म नियंत्रणें गी बी इक aria-invalid="true"गुण सौंपेआ जाई सकदा ऐ।
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>वैकल्पिक आइकन दे कन्नै
तुस दे जोड़ने कन्नै .has-feedbackते सज्जे चिह् न कन्नै वैकल्पिक प्रतिक्रिया चिह् न बी जोड़ी सकदे ओ।
प्रतिक्रिया आइकन सिर्फ पाठ <input class="form-control">तत्वें कन्नै गै कम्म करदे न।
आइकन, लेबल, ते इनपुट समूह
बिना लेबल दे इनपुटें लेई ते सज्जे पास्सै ऐड-ऑन आह् ले इनपुट समूहें लेई फीडबैक आइकनें दी मैन्युअल स्थिति दी लोड़ ऐ। तुसें गी सख्ती कन्नै प्रोत्साहित कीता जंदा ऐ जे तुस सुलभता दे कारण सब्भै इनपुटें लेई लेबल उपलब्ध करोआओ। जेकर तुस लेबल गी प्रदर्शत होने थमां रोकना चांह् दे ओ तां उ'नेंगी .sr-onlyक्लास कन्नै छुपाओ. जेकर तुसें गी बिना लेबल दे करना होग तां topफीडबैक आइकन दा मूल्य समायोजित करो. इनपुट समूहें आस्तै, rightअपने ऐडॉन दी चौड़ाई दे आधार उप्पर मूल्य गी इक उचित पिक्सेल मूल्य पर समायोजित करो.
सहायक प्रौद्योगिकियें गी आइकन दे अर्थ गी संप्रेषित करना
एह् सुनिश्चत करने आस्तै जे सहायक तकनीकें – जि’यां स्क्रीन रीडर – इक आइकन दे अर्थ गी सही ढंगै कन्नै संप्रेषित करदे न , अतिरिक्त छिपे दे पाठ गी .sr-onlyकक्षा कन्नै शामल कीता जाना चाहिदा ते स्पश्ट रूप कन्नै उस फार्म नियंत्रण कन्नै जुड़े दा होना चाहिदा जेह् ड़ा इसदा इस्तेमाल करने कन्नै सरबंधत ऐ aria-describedby. वैकल्पिक रूप कन्नै, एह् सुनिश्चत करो जे अर्थ (उदाहरण दे तौर पर, एह् तथ्य जे इक खास पाठ प्रविश्टी फील्ड आस्तै इक चेतावनी ऐ) गी कुसै होर रूप च संप्रेषित कीता जा, जि’यां <label>रूप नियंत्रण कन्नै जुड़े दे असल पाठ गी बदलना।
हालांकि निम्नलिखित उदाहरनें च पैह् ले थमां गै <label>पाठ च अपने आपै च अपने-अपने रूप नियंत्रणें दी सत्यापन स्थिति दा जिक्र ऐ , पर उपर्युक्त तकनीक ( .sr-onlyपाठ ते aria-describedby) गी दर्शाने आस्तै शामल कीता गेआ ऐ ।
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>क्षैतिज ते इनलाइन रूपें च वैकल्पिक आइकन
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>छिपे दे .sr-onlyलेबल कन्नै वैकल्पिक आइकन
जेकर तुस .sr-onlyकुसै फार्म नियंत्रण गी छिपाने आस्तै वर्ग दा इस्तेमाल करदे ओ <label>(दूए लेबलिंग विकल्पें दा इस्तेमाल करने दे बजाय, जिऱयां aria-labelएट्रिब्यूट), तां बूटस्ट्रैप इक बारी जोड़े जाने पर आइकन दी स्थिति गी स्वतः समायोजित करग.
(कामयाबी)
@ ऐ
(कामयाबी)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>साइजिंग गी नियंत्रित करो
जियां क्लासें दा इस्तेमाल करदे होई ऊंचाई सेट करो .input-lg, ते जियां ग्रिड स्तंभ क्लासें दा इस्तेमाल करदे होई चौड़ाई सेट करो .col-lg-*.
ऊंचाई दा आकार देना
बटन आकारें कन्नै मेल खंदा ऐ लंबे जां घट्ट फार्म नियंत्रण बनाओ।
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>क्षैतिज रूप समूह आकार
जल्दी आकार लेबल ते फॉर्म नियंत्रण अंदर .form-horizontalजोड़ने कन्नै .form-group-lgजां .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>स्तंभ आकार देना
वांछित चौड़ाई गी आसानी कन्नै लागू करने आस्तै ग्रिड स्तंभें च इनपुटें गी लपेटो, जां कुसै बी कस्टम पैरेंट तत्व।
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>बटन दे
बटन टैग करदा ऐ
<a>इक , <button>, जां <input>तत्व पर बटन वर्गें दा इस्तेमाल करो .
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">संदर्भ-विशिष्ट प्रयोग
जदके बटन क्लासें दा इस्तेमाल <a>ते <button>तत्वें पर कीता जाई सकदा ऐ, तां साढ़े नव ते नवबार घटकें दे अंदर सिर्फ <button>तत्वें गी समर्थत कीता जंदा ऐ।
बटन दे रूप च कम्म करदे लिंक
जेकर <a>तत्वें दा इस्तेमाल बटन दे रूप च कम्म करने आस्तै कीता जंदा ऐ – वर्तमान पृष्ठ दे अंदर कुसै होर दस्तावेज जां खंड च नेविगेट करने दे बजाय पृष्ठ च कार्यक्षमता गी ट्रिगर करने आस्तै – उ’नेंगी इक उचित role="button".
क्रॉस-ब्राउजर रेंडरिंग करना
इक बेहतरीन अभ्यास दे तौर पर, अस बेह् तर सलाह दिंदे न जे <button>जिसलै बी होई सकै तत्व दा इस्तेमाल करना तां जे मिलान क्रॉस-ब्राउज़र रेंडरिंग गी सुनिश्चत कीता जाई सकै।
होर चीजें दे अलावा, फायरफॉक्स <30 च इक बग ऐline-height जेह् ड़ा असेंगी of -आधारत बटनें गी सेट करने थमां रोकदा ऐ <input>, जिसदे कारण ओह् फायरफॉक्स पर होर बटनें दी ऊंचाई कन्नै बिल्कुल मेल नेईं खंदा ऐ.
विकल्प ऐ
जल्दी शैली बटन बनाने लेई उपलब्ध बटन वर्गें च कुसै बी दा उपयोग करो.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना
बटन च अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै चिऱन्नत जानकारी या तां सामग्री थमां गै स्पष्ट ऐ (बटन दा दिक्खने आह् ला पाठ), जां वैकल्पिक साधनें राहें शामल कीता जा, जि’यां .sr-onlyकक्षा कन्नै छिपे दा अतिरिक्त पाठ।
साइज दे
फैंसी बड़े या छोटे बटन? अतिरिक्त आकारें लेई .btn-lg, .btn-sm, जां जोड़ो ।.btn-xs
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>ब्लॉक स्तर बटन बनाओ-ओह् जेह् ड़े इक माता-पिता दी पूरी चौड़ाई च फैले दे न- गी जोड़ियै .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>सक्रिय अवस्था
सक्रिय होने पर बटन दबाए दे दिक्खे जाङन (गहरे रंग दी पृष्ठभूमि, गहरे रंग दी सीमा, ते इनसेट छाया कन्नै)। तत्वें लेई <button>, एह् :active. तत्वें लेई <a>, एह् .active. हालांकि, जेकर तुसेंगी प्रोग्रामेटिक रूप कन्नै सक्रिय स्थिति दी नकल करने दी लोड़ होग तां तुस s .activeपर इस्तेमाल करी सकदे ओ <button>(ते विशेषता गी बी शामल करी सकदे ओ).aria-pressed="true"
बटन तत्व
जोड़ने दी लोड़ नेईं :activeकी जे एह् इक छद्म-वर्ग ऐ, पर जेकर तुसेंगी उस्सै रूप गी मजबूर करने दी लोड़ ऐ, तां अग्गें जाओ ते जोड़ो .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>लंगर तत्व
बटनें च .activeक्लास जोड़ो ।<a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>अक्षम राज्य
बटनें गी opacity.
बटन तत्व
बटनें च disabledविशेषता जोड़ो ।<button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>क्रॉस-ब्राउज़र संगतता
जेकर तुस disabledएट्रिब्यूट गी a च जोड़दे ओ तां <button>इंटरनेट एक्सप्लोरर 9 ते थल्लै पाठ गी इक गंदा पाठ-छाया कन्नै ग्रे रेंडर करग जेह् ड़ा अस ठीक नेईं करी सकदे.
लंगर तत्व
बटनें च .disabledक्लास जोड़ो ।<a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>अस .disabledइत्थें इक उपयोगिता वर्ग दे रूप च इस्तेमाल करदे आं , आम .activeवर्ग दे समान , इसलेई कोई उपसर्ग दी लोड़ नेईं ऐ ।
लिंक कार्यक्षमता चेतावनी
एह् वर्ग s pointer-events: noneदी लिंक फ़ंक्शनलटी गी अक्षम करने दी कोशश करने आस्तै बरतदा ऐ <a>, पर ओह CSS संपत्ति अजें तगर मानक नेईं ऐ ते ओपेरा 18 ते हेठ, जां इंटरनेट एक्सप्लोरर 11 च पूरी चाल्ली समर्थत नेईं ऐ इसदे अलावा, ब्राउज़रें च बी जेह् ड़े समर्थन करदे न pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रेह् दा ऐ, जिसदा मतलब ऐ जे दृष्टिगत कीबोर्ड बरतूनी ते सहायक तकनीकें दे बरतूनी अजें बी इनें लिंकें गी सक्रिय करी सकङन। इसलेई सुरक्षत होने आस्तै, ऐसे लिंक गी अक्षम करने आस्तै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो.
छवियां
प्रतिक्रियाशील छवियां
.img-responsiveबूटस्ट्रैप 3 च छवियां गी क्लास दे जोड़ने दे राहें प्रतिक्रियाशील-अनुकूल बनाया जाई सकदा ऐ । एह् लागू होंदा ऐ max-width: 100%;, height: auto;ते display: block;छवि पर तां जे एह् माता-पिता तत्व गी खरी चाल्ली स्केल करदा ऐ.
छवियें गी केंद्रत करने आस्तै जेह् ड़ियां .img-responsiveवर्ग दा उपयोग करदे न , .center-blockइसदे बजाय इस्तेमाल करो .text-center. उपयोग दे बारे च होर मती जानकारी आस्तै हेल्पर क्लासें दा खंड दिक्खो..center-block
एसवीजी छवियां ते आईई 8-10
इंटरनेट एक्सप्लोरर 8-10 च, एसवीजी छवियां कन्नै .img-responsiveगैर-आनुपातिक आकार दी ऐ। इसगी ठीक करने आस्तै width: 100% \9;जित्थें लोड़चदा ऐ उत्थें गै जोड़ो। बूटस्ट्रैप इसगी स्वतः लागू नेईं करदा की जे एह् होर छवि प्रारूपें च जटिलता पैदा करदा ऐ.
<img src="..." class="img-responsive" alt="Responsive image">छवि आकृतियां
<img>कुसै बी प्रोजेक्ट च छवियें गी आसानी कन्नै स्टाइल करने आस्तै इक तत्व च क्लासें गी जोड़ो ।
क्रॉस-ब्राउज़र संगतता
ध्यान रक्खो जे इंटरनेट एक्सप्लोरर 8 च गोल कोने आस्तै समर्थन दी कमी ऐ।
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">सहायक कक्षाएं
संदर्भ रंग
मुट्ठी भर जोर उपयोगिता वर्गें कन्नै रंग दे माध्यम कन्नै अर्थ संप्रेषित करना। एह् लिंक पर बी लागू कीते जाई सकदे न ते होवर पर बी काला होई जाङन जिऱयां साढ़ी डिफ़ॉल्ट लिंक शैलियां।
फुस्से दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ।
नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।
डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरात पोर्टिटोर लिगुला।
मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना।
एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।
डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला।
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>विशिष्टता कन्नै निबड़ना
कदें-कदें कुसै होर चयनकर्ता दी विशिष्टता दे कारण जोर देने आह् ली वर्गें गी लागू नेईं कीता जाई सकदा ऐ। ज्यादातर मामलें च, इक पर्याप्त समाधान ऐ अपने पाठ <span>गी कक्षा कन्नै इक च लपेटना ऐ।
सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना
अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै चिऱन्नत जानकारी या तां सामग्री थमां गै स्पष्ट ऐ (संदर्भ दे रंगें दा इस्तेमाल सिर्फ उस अर्थ गी मजबूत करने आस्तै कीता जंदा ऐ जेह् ड़ा पाठ/मार्कअप च पैह् ले थमां गै मौजूद ऐ ), जां वैकल्पिक साधनें राहें शामल कीता जा , जि’यां .sr-onlyवर्ग कन्नै छिपे दा अतिरिक्त पाठ ऐ .
संदर्भ पृष्ठभूमि
संदर्भ पाठ रंग वर्गें दे समान, इक तत्व दी पृष्ठभूमि गी कुसै बी संदर्भ वर्ग च आसानी कन्नै सेट करो। एंकर घटक होवर पर गहरा होंगन, ठीक पाठ वर्गें दी तर्ज पर।
नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।
डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरात पोर्टिटोर लिगुला।
मेसेनास सेड डायम एगेट रिसुस वैरिस ब्लैंडिट बैठना अमेट गैर मैग्ना।
एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड।
डोनेक उल्लमकोर्पर नुल्ला गैर मेटस नीलामी फ्रिंगिला।
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>विशिष्टता कन्नै निबड़ना
कदें-कदें कुसै होर चयनकर्ता दी विशिष्टता दे कारण संदर्भ पृष्ठभूमि वर्गें गी लागू नेईं कीता जाई सकदा ऐ। किश मामलें च, इक पर्याप्त समाधान ऐ अपने तत्व दी सामग्री <div>गी कक्षा कन्नै इक च लपेटना ऐ।
सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना
जि’यां संदर्भ रंगें कन्नै , एह् सुनिश्चत करो जे रंग दे माध्यम कन्नै संप्रेषित कुसै बी अर्थ गी बी उस प्रारूप च संप्रेषित कीता जा जेह् ड़ा विशुद्ध रूप कन्नै प्रस्तुतीकरण नेईं होऐ ।
बंद करो आइकन
मोडल ते अलर्ट जनेह् सामग्री गी खारिज करने आस्तै जेनेरिक बंद आइकन दा उपयोग करो.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>कैरेट्स
ड्रॉपडाउन कार्यक्षमता ते दिशा गी दर्शाने आस्तै कैरेट दा इस्तेमाल करो। ध्यान रक्खो जे डिफाल्ट कैरेट ड्रॉपअप मेनू च स्वतः रिवर्स होई जाग .
<span class="caret"></span>जल्दी तैरता है
इक तत्व गी इक वर्ग कन्नै बाएं जां दाएं पास्से तैह् त करो। !importantविशिष्टता दे मुद्दें थमां बचने लेई शामल कीता गेआ ऐ। क्लासें गी मिक्सिन दे रूप च बी इस्तेमाल कीता जाई सकदा ऐ।
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}केंद्र सामग्री ब्लॉक करदा ऐ
इक तत्व गी display: blockते केंद्र दे माध्यम कन्नै सेट करो margin. मिक्सिन ते क्लास दे रूप च उपलब्ध ऐ।
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}क्लियरफिक्स करो
मूल तत्व चfloat जोड़ियै एस गी आसानी कन्नै साफ करो . निकोलस गैलाघेर द्वारा लोकप्रिय कीते गेदे माइक्रो क्लियरफिक्स दा उपयोग करदा ऐ। मिक्सिन दे रूप च बी इस्तेमाल कीता जाई सकदा ऐ।.clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}सामग्री दस्सना ते छिपाना
ते वर्गें दे इस्तेमाल कन्नै इक तत्व गी दस्सने जां छिपाने आस्तै मजबूर करो ( स्क्रीन रीडरें आस्तै बी शामल ऐ ). एह् वर्ग विशिष्टता टकरावें थमां बचने आस्तै बरतदे न , ठीक उस्सै चाल्लीं त्वरित फ्लोट . एह् सिर्फ ब्लॉक लेवल टॉगलिंग लेई गै उपलब्ध न। इन्हें मिक्सिन दे रूप च बी इस्तेमाल कीता जाई सकदा ऐ।.show.hidden!important
.hideउपलब्ध ऐ, पर एह् हमेशा स्क्रीन रीडरें गी प्रभावित नेईं करदा ऐ ते v3.0.1 दे रूप च डिप्रीकेट ऐ. .hiddenइसदे बजाय या इस्तेमाल करो .sr-only।
इ’दे अलावा, .invisibleइक तत्व दी दृश्यता गी सिर्फ टॉगल करने लेई इस्तेमाल कीता जाई सकदा ऐ, मतलब इसदा displayसंशोधन नेईं कीता गेआ ऐ ते तत्व अजें बी दस्तावेज दे प्रवाह गी प्रभावित करी सकदा ऐ।
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}स्क्रीन रीडर ते कीबोर्ड नेविगेशन सामग्री
स्क्रीन रीडरें गी छोड़ियै बाकी सारे डिवाइसें गी इक तत्व गी .sr-only. .sr-onlyतत्व गी उस बेल्लै दुबारा दस्सने आस्तै कन्नै जोड़ो .sr-only-focusableजिसलै एह् केंद्रत ऐ (जियां कीबोर्ड-केवल बरतूनी आसेआ)। सुलभता सर्वोत्तम प्रथाएं दा पालन करने लेई जरूरी ऐ . मिक्सिन दे रूप च बी इस्तेमाल कीता जाई सकदा ऐ।
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}छवि बदलना
.text-hideइक तत्व दी पाठ सामग्री गी पृष्ठभूमि छवि कन्नै बदलने च मदद करने आस्तै वर्ग जां मिक्सिन दा उपयोग करो .
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}उत्तरदायी उपयोगिताएं
तेज़ मोबाइल-अनुकूल विकास आस्तै, मीडिया क्वेरी दे राहें डिवाइस आसेआ सामग्री गी दस्सने ते छिपाने आस्तै इनें उपयोगिता वर्गें दा इस्तेमाल करो। छपने पर सामग्री गी टॉगल करने लेई उपयोगिता वर्गें गी बी शामल कीता गेआ ऐ।
इनें गी सीमित आधार उप्पर इस्तेमाल करने दी कोशश करो ते इक गै साइट दे बिल्कुल बक्ख-बक्ख संस्करण बनाने थमां बचो। इसदे बजाय, हर इक डिवाइस दी प्रस्तुति दे पूरक आस्तै उंदा इस्तेमाल करो।
उपलब्ध कक्षाएं
Use a single or combination of the available classes for toggling content across viewport breakpoints.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
| Group of classes | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
| Classes | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.
Test cases
Resize your browser or load on different devices to test the responsive utility classes.
Visible on...
Green checkmarks indicate the element is visible in your current viewport.
Extra small
✔ एक्स-छोटे पर दिक्खने गी मिलदा ऐ
Small
✔ छोटे पर दिखाई दे
Medium
✔ माध्यम पर दिखाई दे
बड्डा
✔ Visible on large
✔ एक्स-छोटे ते छोटे पर दिक्खने गी मिलदा ऐ
✔ Visible on medium and large
✔ एक्स-छोटे ते मध्यम पर दिक्खने गी मिलदा ऐ
✔ Visible on small and large
✔ Visible on x-small and large
✔ छोटे ते मध्यम पर दिक्खने गी मिलदा ऐ
Hidden on...
Here, green checkmarks also indicate the element is hidden in your current viewport.
Using Less
Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.
Grid variables and mixins are covered within the Grid system section.
Compiling Bootstrap
Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.
Third party compilation tools may work with Bootstrap, but they are not supported by our core team.
Variables
Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.
Colors
Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
@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 any of these color variables as they are or reassign them to more meaningful variables for your project.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Scaffolding
A handful of variables for quickly customizing key elements of your site's skeleton.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Links
Easily style your links with the right color with only one value.
// 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;
}
}Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.
Typography
Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.
@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;Icons
Two quick variables for customizing the location and filename of your icons.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Components
Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.
@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;Vendor mixins
Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.
Box-sizing
Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.
The mixin is deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Rounded corners
Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.
.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 (Drop) shadows
If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.
The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Transitions
Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap 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;
}Transformations
Rotate, scale, translate (move), or skew any object.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animations
A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Opacity
Set the opacity for all browsers and provide a filter fallback for IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Placeholder text
Provide context for form controls within each field.
.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
}Columns
Generate columns via CSS within a single element.
.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;
}Gradients
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);You can also specify the angle of a standard two-color, linear gradient:
#gradient > .directional(#333; #000; 45deg);If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.
#gradient > .striped(#333; 45deg);Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Sizing helpers
Specify the dimensions of an object more easily.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina images
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
.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);
}Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What's included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
| Path | Description |
|---|---|
lib/ |
Ruby gem code (Sass configuration, Rails and Compass integrations) |
tasks/ |
Converter scripts (turning upstream Less to Sass) |
test/ |
Compilation tests |
templates/ |
कम्पास पैकेज प्रकट |
vendor/assets/ |
सस, जावास्क्रिप्ट, ते फॉन्ट फाइलें गी |
Rakefile |
आंतरिक कम्में, जि’यां रेक ते कन्वर्ट |
इनें फाइलें गी कार्रवाई च दिक्खने आस्तै Sass पोर्ट दी GitHub रिपोजिटरी पर जाओ .
इंस्टालेशन करना
Sass आस्तै बूटस्ट्रैप गी किस चाल्ली इंस्टाल करना ते बरतना ऐ इसदे बारे च जानकारी आस्तै, GitHub रिपोजिटरी readme कन्नै सलाह करो . एह् सबनें थमां अद्यतन स्रोत ऐ ते रेल, कम्पास, ते मानक सस प्रोजेक्टें कन्नै इस्तेमाल आस्तै जानकारी शामल ऐ।