सीएसएस
वैश्विक सीएसएस सेटिंग्स, मौलिक HTML तत्व एक्स्टेंसिबल कक्षाओं के साथ स्टाइल और उन्नत, और एक उन्नत ग्रिड सिस्टम।
वैश्विक सीएसएस सेटिंग्स, मौलिक HTML तत्व एक्स्टेंसिबल कक्षाओं के साथ स्टाइल और उन्नत, और एक उन्नत ग्रिड सिस्टम।
बेहतर, तेज, मजबूत वेब विकास के लिए हमारे दृष्टिकोण सहित, बूटस्ट्रैप के बुनियादी ढांचे के प्रमुख टुकड़ों पर नीचे जाएं।
बूटस्ट्रैप कुछ HTML तत्वों और CSS गुणों का उपयोग करता है जिन्हें HTML5 सिद्धांत के उपयोग की आवश्यकता होती है। इसे अपनी सभी परियोजनाओं की शुरुआत में शामिल करें।
<!DOCTYPE html>
<html lang="en">
...
</html>
बूटस्ट्रैप 2 के साथ, हमने ढांचे के प्रमुख पहलुओं के लिए वैकल्पिक मोबाइल अनुकूल शैलियों को जोड़ा। बूटस्ट्रैप 3 के साथ, हमने शुरू से ही मोबाइल के अनुकूल होने के लिए प्रोजेक्ट को फिर से लिखा है। वैकल्पिक मोबाइल शैलियों को जोड़ने के बजाय, उन्हें सीधे कोर में बेक किया जाता है। वास्तव में, बूटस्ट्रैप पहले मोबाइल है । मोबाइल प्रथम शैलियाँ अलग-अलग फ़ाइलों के बजाय संपूर्ण पुस्तकालय में पाई जा सकती हैं।
उचित रेंडरिंग सुनिश्चित करने और ज़ूमिंग स्पर्श करने के लिए, व्यूपोर्ट मेटा टैग को अपनी <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no
आप व्यूपोर्ट मेटा टैग में जोड़कर मोबाइल उपकरणों पर ज़ूमिंग क्षमताओं को अक्षम कर सकते हैं । यह ज़ूमिंग को अक्षम कर देता है, जिसका अर्थ है कि उपयोगकर्ता केवल स्क्रॉल करने में सक्षम हैं, और परिणामस्वरूप आपकी साइट एक मूल एप्लिकेशन की तरह कुछ अधिक महसूस करती है। कुल मिलाकर, हम हर साइट पर इसकी अनुशंसा नहीं करते हैं, इसलिए सावधानी बरतें!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
बूटस्ट्रैप बुनियादी वैश्विक प्रदर्शन, टाइपोग्राफी और लिंक शैलियों को सेट करता है। विशेष रूप से, हम:
background-color: #fff;
करेंbody
@font-family-base
, @font-size-base
, और विशेषताओं का उपयोग करें@line-height-base
@link-color
और केवल पर लिंक रेखांकन लागू करें:hover
इन शैलियों को भीतर पाया जा सकता है scaffolding.less
।
बेहतर क्रॉस-ब्राउज़र रेंडरिंग के लिए, हम निकोलस गैलाघर और जोनाथन नील की एक परियोजना, Normalize.css का उपयोग करते हैं ।
बूटस्ट्रैप को साइट सामग्री को लपेटने और हमारे ग्रिड सिस्टम को रखने के लिए एक युक्त तत्व की आवश्यकता होती है। आप अपनी परियोजनाओं में उपयोग करने के लिए दो कंटेनरों में से एक चुन सकते हैं। ध्यान दें कि, के कारण padding
और अधिक, न तो कंटेनर घोंसला योग्य है।
.container
प्रतिक्रियाशील निश्चित चौड़ाई वाले कंटेनर के लिए उपयोग करें ।
<div class="container">
...
</div>
.container-fluid
अपने व्यूपोर्ट की पूरी चौड़ाई में फैले एक पूर्ण चौड़ाई वाले कंटेनर के लिए उपयोग करें ।
<div class="container-fluid">
...
</div>
बूटस्ट्रैप में एक रिस्पॉन्सिव, मोबाइल फर्स्ट फ्लुइड ग्रिड सिस्टम शामिल है जो डिवाइस या व्यूपोर्ट आकार बढ़ने पर उचित रूप से 12 कॉलम तक बढ़ जाता है। इसमें आसान लेआउट विकल्पों के लिए पूर्वनिर्धारित कक्षाएं , साथ ही अधिक अर्थपूर्ण लेआउट उत्पन्न करने के लिए शक्तिशाली मिश्रण शामिल हैं ।
ग्रिड सिस्टम का उपयोग आपकी सामग्री को रखने वाली पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पृष्ठ लेआउट बनाने के लिए किया जाता है। यहां बताया गया है कि बूटस्ट्रैप ग्रिड सिस्टम कैसे काम करता है:
.container
(निश्चित-चौड़ाई) या (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए ।.container-fluid
.row
और .col-xs-4
जल्दी से ग्रिड लेआउट बनाने के लिए उपलब्ध हैं। अधिक सिमेंटिक लेआउट के लिए कम मिक्सिन का भी उपयोग किया जा सकता है।padding
। उस पैडिंग को पहले और आखिरी कॉलम के लिए नकारात्मक मार्जिन के माध्यम से पंक्तियों में ऑफसेट किया जाता है .row
।.col-xs-4
।.col-md-*
वर्ग को किसी तत्व पर लागू करने से न केवल मध्यम उपकरणों पर बल्कि बड़े उपकरणों पर भी इसकी शैली प्रभावित होगी यदि कोई .col-lg-*
वर्ग मौजूद नहीं है।इन सिद्धांतों को अपने कोड में लागू करने के लिए उदाहरण देखें।
हम अपने ग्रिड सिस्टम में प्रमुख ब्रेकप्वाइंट बनाने के लिए अपनी कम फाइलों में निम्नलिखित मीडिया प्रश्नों का उपयोग करते हैं।
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
हम कभी-कभी इन मीडिया प्रश्नों का विस्तार करते हैं max-width
ताकि सीएसएस को सीमित उपकरणों के समूह में शामिल किया जा सके।
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
देखें कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू एक आसान तालिका के साथ कई उपकरणों पर कैसे काम करते हैं।
अतिरिक्त छोटे उपकरण फ़ोन (<768px) | छोटे उपकरण टैबलेट (≥768px) | मध्यम उपकरण डेस्कटॉप (≥992px) | बड़े उपकरण डेस्कटॉप (≥1200px) | |
---|---|---|---|---|
ग्रिड व्यवहार | हर समय क्षैतिज | प्रारंभ करने के लिए संक्षिप्त, ब्रेकप्वाइंट के ऊपर क्षैतिज | ||
कंटेनर की चौड़ाई | कोई नहीं (ऑटो) | 750px | 970px | 1170पीएक्स |
कक्षा उपसर्ग | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# कॉलम | 12 | |||
स्तंभ की चौड़ाई | ऑटो | ~62px | ~81px | ~97px |
नाले की चौड़ाई | 30px (एक कॉलम के प्रत्येक तरफ 15px) | |||
नेस्टेबल | हाँ | |||
ऑफसेट | हाँ | |||
कॉलम ऑर्डरिंग | हाँ |
ग्रिड कक्षाओं के एकल सेट का उपयोग करके .col-md-*
, आप एक बुनियादी ग्रिड सिस्टम बना सकते हैं जो डेस्कटॉप (मध्यम) उपकरणों पर क्षैतिज होने से पहले मोबाइल उपकरणों और टैबलेट उपकरणों (अतिरिक्त छोटी से छोटी रेंज) पर स्टैक्ड हो जाता है। किसी भी में ग्रिड कॉलम रखें .row
।
<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-*
अपने कॉलम में जोड़कर अतिरिक्त छोटे और मध्यम डिवाइस ग्रिड क्लासेस का उपयोग करें । यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।
<!-- 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-*
टैबलेट कक्षाओं के साथ और भी अधिक गतिशील और शक्तिशाली लेआउट बनाकर पिछले उदाहरण पर निर्माण करें ।
<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 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।
<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>
ग्रिड के चार स्तरों के उपलब्ध होने से आप उन मुद्दों में भाग लेने के लिए बाध्य हैं, जहां कुछ निश्चित विराम बिंदुओं पर, आपके कॉलम बिल्कुल सही नहीं होते हैं क्योंकि एक दूसरे की तुलना में लंबा होता है। इसे ठीक करने के लिए, a .clearfix
और हमारे रेस्पॉन्सिव यूटिलिटी क्लासेस के संयोजन का उपयोग करें ।
<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
<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-*
<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-*
संशोधक वर्गों के साथ बदलें।
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
तेज़ लेआउट के लिए प्रीबिल्ट ग्रिड क्लासेस के अलावा , बूटस्ट्रैप में आपके अपने सरल, सिमेंटिक लेआउट को जल्दी से उत्पन्न करने के लिए कम चर और मिक्सिन शामिल हैं।
चर स्तंभों की संख्या, गटर की चौड़ाई और मीडिया क्वेरी बिंदु निर्धारित करते हैं जिस पर फ़्लोटिंग कॉलम शुरू करना है। हम इनका उपयोग ऊपर प्रलेखित पूर्वनिर्धारित ग्रिड कक्षाओं के साथ-साथ नीचे सूचीबद्ध कस्टम मिश्रणों के लिए भी करते हैं।
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
अलग-अलग ग्रिड कॉलम के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए मिक्सिन का उपयोग ग्रिड चर के साथ संयोजन में किया जाता है।
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
आप चरों को अपने स्वयं के कस्टम मानों में संशोधित कर सकते हैं, या केवल उनके डिफ़ॉल्ट मानों के साथ मिश्रित का उपयोग कर सकते हैं। यहां एक दो-स्तंभ लेआउट बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करने का एक उदाहरण दिया गया है, जिसके बीच का अंतर है।
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
<h1>
के माध्यम से सभी HTML शीर्षक <h6>
उपलब्ध हैं। .h1
थ्रू .h6
क्लासेस भी उपलब्ध हैं, जब आप किसी शीर्षक की फ़ॉन्ट शैली का मिलान करना चाहते हैं लेकिन फिर भी चाहते हैं कि आपका टेक्स्ट इनलाइन प्रदर्शित हो।
एच1. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 36px |
एच2. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 30px |
एच3. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 24px |
एच4. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 18पीएक्स |
एच5. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 14px |
एच6. बूटस्ट्रैप शीर्षक |
सेमीबोल्ड 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<small>
सामान्य टैग या .small
वर्ग के साथ किसी भी शीर्षक में हल्का, द्वितीयक पाठ बनाएं ।
एच1. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
एच2. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
एच3. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
एच4. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
एच5. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
एच6. बूटस्ट्रैप शीर्षक माध्यमिक पाठ |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
1.428 के साथ बूटस्ट्रैप का वैश्विक डिफ़ॉल्ट 14pxfont-size
है । यह और सभी अनुच्छेदों पर लागू होता है। इसके अलावा, (पैराग्राफ) उनकी गणना की गई लाइन-ऊंचाई (डिफ़ॉल्ट रूप से 10px) के आधे हिस्से का निचला मार्जिन प्राप्त करते हैं।line-height
<body>
<p>
नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula.
कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला। ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट। डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।
मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना। Donec id elit non mi porta gravida और eget metus. ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट।
<p>...</p>
जोड़कर एक पैराग्राफ को अलग बनाएं .lead
।
विवामस सैगिटिस लैकस वेल ऑग्यू लॉरीट रुट्रम फॉसीबस डोलर ऑक्टर। डुइस मोलिस, इस्ट नॉन कमोडो लक्टस।
<p class="lead">...</p>
टाइपोग्राफिक पैमाना चर में दो कम चरों पर आधारित है। कम : @font-size-base
और @line-height-base
। पहला आधार फ़ॉन्ट-आकार का उपयोग किया जाता है और दूसरा आधार रेखा-ऊंचाई है। हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर और कुछ सरल गणित का उपयोग करते हैं। उन्हें कस्टमाइज़ करें और बूटस्ट्रैप एडाप्ट करता है।
किसी अन्य संदर्भ में प्रासंगिकता के कारण किसी पाठ को हाइलाइट करने के लिए, <mark>
टैग का उपयोग करें।
आप के लिए मार्क टैग का उपयोग कर सकते हैंप्रमुखता से दिखानामूलपाठ।
You can use the mark tag to <mark>highlight</mark> text.
हटाए गए टेक्स्ट के ब्लॉक को इंगित करने के लिए <del>
टैग का उपयोग करें।
पाठ की इस पंक्ति को हटाए गए पाठ के रूप में माना जाना है।
<del>This line of text is meant to be treated as deleted text.</del>
टेक्स्ट के उन ब्लॉकों को इंगित करने के लिए जो अब प्रासंगिक नहीं हैं, <s>
टैग का उपयोग करें।
पाठ की यह पंक्ति अब सटीक नहीं मानी जानी चाहिए।
<s>This line of text is meant to be treated as no longer accurate.</s>
दस्तावेज़ में परिवर्धन इंगित करने के लिए <ins>
टैग का उपयोग करें।
पाठ की इस पंक्ति को दस्तावेज़ के अतिरिक्त के रूप में माना जाना है।
<ins>This line of text is meant to be treated as an addition to the document.</ins>
टेक्स्ट को रेखांकित करने के लिए <u>
टैग का उपयोग करें।
पाठ की यह पंक्ति रेखांकित के रूप में प्रस्तुत होगी
<u>This line of text will render as underlined</u>
हल्के स्टाइल के साथ HTML के डिफ़ॉल्ट जोर टैग का उपयोग करें।
इनलाइन या टेक्स्ट के ब्लॉक पर जोर देने के लिए, <small>
टेक्स्ट को पैरेंट के आकार के 85% पर सेट करने के लिए टैग का उपयोग करें। font-size
नेस्टेड तत्वों के लिए शीर्षक तत्व स्वयं प्राप्त <small>
होते हैं।
आप वैकल्पिक .small
रूप से किसी के स्थान पर इनलाइन तत्व का उपयोग कर सकते हैं <small>
।
पाठ की इस पंक्ति को ठीक प्रिंट के रूप में माना जाना है।
<small>This line of text is meant to be treated as fine print.</small>
भारी फॉन्ट-वेट वाले टेक्स्ट के एक स्निपेट पर जोर देने के लिए।
टेक्स्ट का निम्न स्निपेट बोल्ड टेक्स्ट के रूप में प्रस्तुत किया गया है ।
<strong>rendered as bold text</strong>
इटैलिक के साथ टेक्स्ट के एक स्निपेट पर जोर देने के लिए।
टेक्स्ट के निम्नलिखित स्निपेट को इटैलिकाइज़्ड टेक्स्ट के रूप में प्रस्तुत किया गया है ।
<em>rendered as italicized text</em>
बेझिझक उपयोग करें <b>
और <i>
HTML5 में। <b>
अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के <i>
लिए है, जबकि ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।
टेक्स्ट अलाइनमेंट क्लासेस वाले कंपोनेंट्स के लिए टेक्स्ट को आसानी से री-अलाइन करें।
बाएं संरेखित पाठ।
मध्य संरेखित पाठ।
सही संरेखित पाठ।
उचित पाठ।
कोई रैप टेक्स्ट नहीं।
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
टेक्स्ट कैपिटलाइज़ेशन क्लासेस वाले कंपोनेंट्स में टेक्स्ट ट्रांसफ़ॉर्म करें।
लोअरकेस टेक्स्ट।
अपरकेस टेक्स्ट।
पूंजीकृत पाठ।
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<abbr>
होवर पर विस्तारित संस्करण दिखाने के लिए संक्षिप्ताक्षरों और समरूपों के लिए HTML के तत्व का शैलीबद्ध कार्यान्वयन । विशेषता वाले संक्षिप्ताक्षरों में title
एक हल्की बिंदीदार निचली सीमा होती है और होवर पर एक हेल्प कर्सर होता है, जो होवर पर और सहायक तकनीकों के उपयोगकर्ताओं को अतिरिक्त संदर्भ प्रदान करता है।
विशेषता शब्द का संक्षिप्त रूप attr है ।
<abbr title="attribute">attr</abbr>
.initialism
थोड़े छोटे फ़ॉन्ट-आकार के लिए संक्षिप्त नाम में जोड़ें ।
कटा हुआ ब्रेड के बाद से HTML सबसे अच्छी चीज है।
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
निकटतम पूर्वज या कार्य के पूरे निकाय के लिए संपर्क जानकारी प्रस्तुत करें। के साथ सभी पंक्तियों को समाप्त करके स्वरूपण को संरक्षित करें <br>
।
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
अपने दस्तावेज़ के भीतर किसी अन्य स्रोत से सामग्री के ब्लॉक को उद्धृत करने के लिए।
उद्धरण के रूप में किसी भी HTML<blockquote>
के चारों ओर लपेटें । सीधे उद्धरणों के लिए, हम अनुशंसा करते हैं कि एक .<p>
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
किसी मानक पर साधारण विविधताओं के लिए शैली और सामग्री में परिवर्तन <blockquote>
.
<footer>
स्रोत की पहचान के लिए a जोड़ें । स्रोत कार्य का नाम इसमें लपेटें<cite>
.
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें।
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
.blockquote-reverse
सही-संरेखित सामग्री के साथ ब्लॉकक्वाट के लिए जोड़ें ।
<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>
साथ-साथ लाइन अप में नियम और विवरण बनाएं । डिफ़ॉल्ट s की तरह स्टैक्ड शुरू होता है <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>
आमतौर पर कीबोर्ड के माध्यम से दर्ज किया जाता है।
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>
. यह बहुत ही बेमानी लग सकता है, लेकिन कैलेंडर और डेट पिकर जैसे अन्य प्लगइन्स के लिए टेबल के व्यापक उपयोग को देखते हुए, हमने अपनी कस्टम टेबल शैलियों को अलग करने का विकल्प चुना है।
# | पहला नाम | उपनाम | उपयोगकर्ता नाम |
---|---|---|---|
1 | निशान | ओटो | @mdo |
2 | याकूब | थार्नटन | @मोटा |
3 | लैरी | पक्षी | @ट्विटर |
<table class="table">
...
</table>
.table-striped
के भीतर किसी भी तालिका पंक्ति में ज़ेबरा-स्ट्रिपिंग जोड़ने के लिए उपयोग करें <tbody>
।
स्ट्राइप्ड टेबल को :nth-child
CSS चयनकर्ता के माध्यम से स्टाइल किया जाता है, जो कि Internet Explorer 8 में उपलब्ध नहीं है।
# | पहला नाम | उपनाम | उपयोगकर्ता नाम |
---|---|---|---|
1 | निशान | ओटो | @mdo |
2 | याकूब | थार्नटन | @मोटा |
3 | लैरी | पक्षी | @ट्विटर |
<table class="table table-striped">
...
</table>
.table-bordered
टेबल और सेल के सभी किनारों पर बॉर्डर के लिए जोड़ें ।
# | पहला नाम | उपनाम | उपयोगकर्ता नाम |
---|---|---|---|
1 | निशान | ओटो | @mdo |
2 | याकूब | थार्नटन | @मोटा |
3 | लैरी | पक्षी | @ट्विटर |
<table class="table table-bordered">
...
</table>
.table-hover
तालिका पंक्तियों पर एक होवर स्थिति को सक्षम करने के लिए जोड़ें <tbody>
।
# | पहला नाम | उपनाम | उपयोगकर्ता नाम |
---|---|---|---|
1 | निशान | ओटो | @mdo |
2 | याकूब | थार्नटन | @मोटा |
3 | लैरी | पक्षी | @ट्विटर |
<table class="table table-hover">
...
</table>
.table-condensed
सेल पैडिंग को आधा में काटकर टेबल को और अधिक कॉम्पैक्ट बनाने के लिए जोड़ें ।
# | पहला नाम | उपनाम | उपयोगकर्ता नाम |
---|---|---|---|
1 | निशान | ओटो | @mdo |
2 | याकूब | थार्नटन | @मोटा |
3 | लैरी द बर्ड | @ट्विटर |
<table class="table table-condensed">
...
</table>
तालिका पंक्तियों या अलग-अलग कक्षों को रंगने के लिए प्रासंगिक कक्षाओं का उपयोग करें।
कक्षा | विवरण |
---|---|
.active |
होवर रंग को किसी विशेष पंक्ति या सेल पर लागू करता है |
.success |
एक सफल या सकारात्मक कार्रवाई का संकेत देता है |
.info |
एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई का संकेत देता है |
.warning |
एक चेतावनी इंगित करता है जिस पर ध्यान देने की आवश्यकता हो सकती है |
.danger |
खतरनाक या संभावित रूप से नकारात्मक कार्रवाई का संकेत देता है |
# | कॉलम शीर्षक | कॉलम शीर्षक | कॉलम शीर्षक |
---|---|---|---|
1 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
2 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
3 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
4 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
5 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
6 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
7 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
8 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
9 | स्तंभ सामग्री | स्तंभ सामग्री | स्तंभ सामग्री |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
तालिका पंक्ति या व्यक्तिगत सेल में अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से ही स्पष्ट है (प्रासंगिक तालिका पंक्ति/सेल में दृश्यमान पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .sr-only
कक्षा के साथ छिपा हुआ अतिरिक्त पाठ।
छोटे उपकरणों (768px से कम) पर क्षैतिज रूप से स्क्रॉल करने .table
के लिए किसी भी को लपेटकर प्रतिक्रियाशील तालिकाएं बनाएं । .table-responsive
768px से अधिक चौड़ी किसी भी चीज़ को देखने पर, आपको इन तालिकाओं में कोई अंतर नहीं दिखाई देगा.
उत्तरदायी तालिकाएँ इसका उपयोग करती हैं overflow-y: hidden
, जो तालिका के निचले या ऊपरी किनारों से आगे जाने वाली किसी भी सामग्री को क्लिप कर देती हैं। विशेष रूप से, यह ड्रॉपडाउन मेनू और अन्य तृतीय-पक्ष विजेट को बंद कर सकता है।
फ़ायरफ़ॉक्स में कुछ अजीब फ़ील्डसेट स्टाइल शामिल width
है जो उत्तरदायी तालिका में हस्तक्षेप करता है। इसे फ़ायरफ़ॉक्स-विशिष्ट हैक के बिना ओवरराइड नहीं किया जा सकता है जो हम बूटस्ट्रैप में प्रदान नहीं करते हैं:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
अधिक जानकारी के लिए, यह स्टैक ओवरफ़्लो उत्तर पढ़ें ।
# | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
---|---|---|---|---|---|---|
1 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
2 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
3 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
# | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
---|---|---|---|---|---|---|
1 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
2 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
3 | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
व्यक्तिगत प्रपत्र नियंत्रण स्वचालित रूप से कुछ वैश्विक स्टाइल प्राप्त करते हैं। सभी पाठ्य <input>
, <textarea>
, और <select>
वाले तत्व डिफ़ॉल्ट रूप .form-control
से सेट होते हैं । इष्टतम रिक्ति के लिए width: 100%;
लेबल और नियंत्रण लपेटें ।.form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
प्रपत्र समूहों को सीधे इनपुट समूहों के साथ न मिलाएं । इसके बजाय, प्रपत्र समूह के अंदर इनपुट समूह को नेस्ट करें।
बाएं-संरेखित और इनलाइन-ब्लॉक नियंत्रणों के लिए अपने फॉर्म में जोड़ें .form-inline
(जिसका होना जरूरी नहीं है )। यह केवल उन व्यूपोर्ट्स के फ़ॉर्म पर लागू होता है जो कम से कम 768px चौड़े होते हैं।<form>
width: 100%;
बूटस्ट्रैप में इनपुट और चयन डिफ़ॉल्ट रूप से लागू होते हैं। इनलाइन फ़ॉर्म में, हम रीसेट करते हैं कि width: auto;
एक ही लाइन पर इतने सारे नियंत्रण रह सकते हैं। आपके लेआउट के आधार पर, अतिरिक्त कस्टम चौड़ाई की आवश्यकता हो सकती है।
यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। .sr-only
इन इनलाइन प्रपत्रों के लिए, आप कक्षा का उपयोग करके लेबल छिपा सकते हैं । सहायक तकनीकों के लिए लेबल प्रदान करने के और भ��� वैकल्पिक तरीके हैं, जैसे aria-label
, aria-labelledby
या title
विशेषता। यदि इनमें से कोई भी मौजूद नहीं है, तो स्क्रीन रीडर मौजूद होने पर placeholder
विशेषता का उपयोग करने का सहारा ले सकते हैं, लेकिन ध्यान दें कि placeholder
अन्य लेबलिंग विधियों के प्रतिस्थापन के रूप में उपयोग की सलाह नहीं दी जाती है।
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
प्रपत्र में जोड़कर एक क्षैतिज लेआउट में लेबल और प्रपत्र नियंत्रण के समूहों को संरेखित करने के लिए बूटस्ट्रैप की पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग करें .form-horizontal
(जो कि एक होना आवश्यक नहीं है <form>
)। ऐसा .form-group
करने से ग्रिड पंक्तियों के रूप में व्यवहार करने के लिए परिवर्तन होता है, इसलिए .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
इसके स्थान पर a लागू करते हैं :focus
।
:focus
स्टेटउपरोक्त उदाहरण इनपुट हमारे दस्तावेज़ीकरण में कस्टम शैलियों का उपयोग करता है ताकि :focus
राज्य को एक पर प्रदर्शित किया जा सके .form-control
।
disabled
उपयोगकर्ता इंटरैक्शन को रोकने के लिए इनपुट पर बूलियन विशेषता जोड़ें । अक्षम इनपुट हल्के दिखाई देते हैं और एक not-allowed
कर्सर जोड़ते हैं।
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
एक बार में सभी नियंत्रणों को अक्षम करने के लिए disabled
विशेषता को a में जोड़ें ।<fieldset>
<fieldset>
<a>
डिफ़ॉल्ट रूप से, ब्राउज़र सभी मूल प्रपत्र नियंत्रणों ( <input>
, <select>
और <button>
तत्वों) <fieldset disabled>
को अक्षम के रूप में मानेंगे, जिससे उन पर कीबोर्ड और माउस दोनों की बातचीत को रोका जा सकेगा। हालांकि, अगर आपके फॉर्म में <a ... class="btn btn-*">
तत्व भी शामिल हैं, तो इन्हें केवल की शैली दी जाएगी pointer-events: none
। जैसा कि बटन के लिए अक्षम स्थिति के बारे में अनुभाग में उल्लेख किया गया है (और विशेष रूप से एंकर तत्वों के लिए उप-अनुभाग में), यह सीएसएस संपत्ति अभी तक मानकीकृत नहीं है और ओपेरा 18 और उससे नीचे, या इंटरनेट एक्सप्लोरर 11 में पूरी तरह से समर्थित नहीं है, और जीत गई 'कीबोर्ड उपयोगकर्ताओं को इन लिंक्स पर ध्यान केंद्रित करने या सक्रिय करने में सक्षम होने से न रोकें। इसलिए सुरक्षित रहने के लिए, ऐसे लिंक को अक्षम करने के लिए कस्टम जावास्क्रिप्ट का उपयोग करें।
disabled
जबकि बूटस्ट्रैप इन शैलियों को सभी ब्राउज़रों में लागू करेगा, इंटरनेट एक्सप्लोरर 11 और नीचे एक पर विशेषता का पूरी तरह से समर्थन नहीं करता है <fieldset>
। इन ब्राउज़रों में फ़ील्डसेट को अक्षम करने के लिए कस्टम जावास्क्रिप्ट का उपयोग करें।
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
readonly
इनपुट के मान में संशोधन को रोकने के लिए इनपुट पर बूलियन विशेषता जोड़ें । केवल-पढ़ने के लिए इनपुट हल्के दिखाई देते हैं (बिल्कुल अक्षम इनपुट की तरह), लेकिन मानक कर्सर बनाए रखें।
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
प्रपत्र नियंत्रणों के लिए ब्लॉक स्तर सहायता पाठ।
सहायता टेक्स्ट स्पष्ट रूप से उस प्रपत्र नियंत्रण से जुड़ा होना चाहिए जो aria-describedby
विशेषता का उपयोग करने से संबंधित हो। यह सुनिश्चित करेगा कि सहायक प्रौद्योगिकियां - जैसे स्क्रीन रीडर - इस सहायता पाठ की घोषणा तब करेंगी जब उपयोगकर्ता ध्यान केंद्रित करेगा या नियंत्रण में प्रवेश करेगा।
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
बूटस्ट्रैप में त्रुटि, चेतावनी और प्रपत्र नियंत्रण पर सफलता की स्थिति के लिए सत्यापन शैलियाँ शामिल हैं। उपयोग करने के लिए, जोड़ें .has-warning
, .has-error
, या .has-success
मूल तत्व में। कोई भी .control-label
, .form-control
, और .help-block
उस तत्व के भीतर सत्यापन शैलियाँ प्राप्त होंगी।
प्रपत्र नियंत्रण की स्थिति को दर्शाने के लिए इन सत्यापन शैलियों का उपयोग केवल एक दृश्य, रंग-आधारित संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर - या कलरब्लाइंड उपयोगकर्ताओं को।
सुनिश्चित करें कि राज्य का एक वैकल्पिक संकेत भी प्रदान किया गया है। उदाहरण के लिए, आप प्रपत्र नियंत्रण के <label>
पाठ में ही राज्य के बारे में एक संकेत शामिल कर सकते हैं (जैसा कि निम्नलिखित कोड उदाहरण में है), एक ग्लिफ़िकॉन.sr-only
शामिल करें ( वर्ग का उपयोग करके उपयुक्त वैकल्पिक पाठ के साथ - ग्लिफ़िकॉन उदाहरण देखें ), या एक प्रदान करके अतिरिक्त सहायता टेक्स्ट ब्लॉक। विशेष रूप से सहायक तकनीकों के लिए, अमान्य प्रपत्र नियंत्रणों को भी एक aria-invalid="true"
विशेषता असाइन की जा सकती है।
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
.has-feedback
आप जोड़ने और सही आइकन के साथ वैकल्पिक फ़ीडबैक आइकन भी जोड़ सकते हैं ।
फ़ीडबैक आइकन केवल टेक्स्ट वाले <input class="form-control">
तत्वों के साथ काम करते हैं।
बिना लेबल वाले इनपुट के लिए और दाईं ओर ऐड-ऑन वाले इनपुट समूहों के लिए फीडबैक आइकन की मैन्युअल स्थिति आवश्यक है । आपको सुलभता कारणों से सभी इनपुट के लिए लेबल प्रदान करने के लिए दृढ़ता से प्रोत्साहित किया जाता है। यदि आप लेबल को प्रदर्शित होने से रोकना चाहते हैं, तो उन्हें .sr-only
कक्षा के साथ छिपा दें। यदि आपको लेबल के बिना करना है, top
तो फ़ीडबैक आइकन का मान समायोजित करें। इनपुट समूहों के लिए, right
अपने ऐडऑन की चौड़ाई के आधार पर मान को उपयुक्त पिक्सेल मान में समायोजित करें।
यह सुनिश्चित करने के लिए कि सहायक प्रौद्योगिकियां - जैसे स्क्रीन रीडर - एक आइकन के अर्थ को सही ढंग से व्यक्त करती हैं, अतिरिक्त छिपे हुए पाठ को .sr-only
कक्षा के साथ शामिल किया जाना चाहिए और स्पष्ट रूप से उस फॉर्म नियंत्रण से जुड़ा होना चाहिए जो इसका उपयोग करने से संबंधित है aria-describedby
। वैकल्पिक रूप से, सुनिश्चित करें कि अर्थ (उदाहरण के लिए, तथ्य यह है कि किसी विशेष टेक्स्ट एंट्री फ़ील्ड के लिए चेतावनी है) किसी अन्य रूप में व्यक्त की जाती है, जैसे <label>
फॉर्म नियंत्रण से जुड़े वास्तविक के टेक्स्ट को बदलना।
यद्यपि निम्नलिखित उदाहरण पहले से ही पाठ में ही उनके संबंधित प्रपत्र नियंत्रणों की सत्यापन स्थिति का उल्लेख करते हैं <label>
, उपरोक्त तकनीक ( .sr-only
पाठ और का उपयोग करके aria-describedby
) को उदाहरणात्मक उद्देश्यों के लिए शामिल किया गया है।
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
छिपे हुए लेबल वाले वैकल्पिक चिह्नयदि आप .sr-only
प्रपत्र नियंत्रण को छिपाने के लिए वर्ग का उपयोग करते हैं <label>
(अन्य लेबलिंग विकल्पों का उपयोग करने के बजाय, जैसे कि aria-label
विशेषता), तो बूटस्ट्रैप स्वचालित रूप से आइकन की स्थिति को जोड़ने के बाद समायोजित करेगा।
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
जैसे वर्गों का उपयोग करके ऊंचाई निर्धारित करें .input-lg
, और ग्रिड कॉलम कक्षाओं जैसे .col-lg-*
.
बटन के आकार से मेल खाने वाले लम्बे या छोटे प्रपत्र नियंत्रण बनाएँ।
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
या .form-horizontal
जोड़कर त्वरित रूप से लेबल और फ़ॉर्म नियंत्रणों को आकार दें ।.form-group-lg
.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
वांछित चौड़ाई को आसानी से लागू करने के लिए ग्रिड कॉलम, या किसी कस्टम पैरेंट तत्व में इनपुट लपेटें।
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
<a>
एक , <button>
, या <input>
तत्व पर बटन कक्षाओं का प्रयोग करें ।
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
जबकि बटन वर्गों का उपयोग <a>
और तत्वों पर किया जा सकता है, हमारे एनएवी और नेवबार घटकों के भीतर <button>
केवल तत्वों का समर्थन किया जाता है।<button>
यदि <a>
तत्वों का उपयोग बटन के रूप में कार्य करने के लिए किया जाता है - वर्तमान पृष्ठ के भीतर किसी अन्य दस्तावेज़ या अनुभाग पर नेविगेट करने के बजाय, इन-पेज कार्यक्षमता को ट्रिगर करता है - तो उन्हें एक उपयुक्त role="button"
.
सर्वोत्तम अभ्यास के रूप में, हम क्रॉस-ब्राउज़र रेंडरिंग से मेल खाने को सुनिश्चित करने के लिए जब भी संभव हो तत्व का उपयोग करने की अत्यधिक अनुशंसा करते हैं ।<button>
अन्य बातों के अलावा, फ़ायरफ़ॉक्स <30 में एक बग हैline-height
जो हमें-आधारित बटन सेट करने से रोकता है <input>
, जिससे वे फ़ायरफ़ॉक्स पर अन्य बटनों की ऊंचाई से बिल्कुल मेल नहीं खाते हैं।
स्टाइल बटन को शीघ्रता से बनाने के लिए किसी भी उपलब्ध बटन वर्ग का उपयोग करें।
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
एक बटन में अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से ही स्पष्ट है (बटन का दृश्य पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .sr-only
कक्षा के साथ छिपा हुआ अतिरिक्त पाठ।
फैंसी बड़े या छोटे बटन? जोड़ें .btn-lg
, .btn-sm
, या .btn-xs
अतिरिक्त आकार के लिए।
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
ब्लॉक स्तर के बटन बनाएं—जो कि माता-पिता की पूरी चौड़ाई को बढ़ाते हैं—जोड़कर .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
सक्रिय होने पर बटन दबाए हुए दिखाई देंगे (गहरे रंग की पृष्ठभूमि, गहरे बॉर्डर और इनसेट छाया के साथ)। <button>
तत्वों के लिए , यह के माध्यम से किया जाता है :active
। <a>
तत्वों के लिए , यह के साथ किया जाता है .active
। हालाँकि, आप s .active
पर उपयोग कर सकते हैं <button>
(और aria-pressed="true"
विशेषता शामिल करें) यदि आपको सक्रिय स्थिति को प्रोग्रामेटिक रूप से दोहराने की आवश्यकता है।
जोड़ने की कोई आवश्यकता नहीं है :active
क्योंकि यह एक छद्म वर्ग है, लेकिन यदि आपको उसी रूप को लागू करने की आवश्यकता है, तो आगे बढ़ें और जोड़ें .active
।
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
.active
कक्षा को <a>
बटन में जोड़ें ।
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
बटनों को वापस फ़ेडिंग करके उन्हें क्लिक करने योग्य न बनाएं opacity
।
बटन में disabled
विशेषता जोड़ें ।<button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
यदि आप disabled
विशेषता को a में जोड़ते हैं <button>
, तो Internet Explorer 9 और नीचे पाठ ग्रे को एक खराब टेक्स्ट-छाया के साथ प्रस्तुत करेगा जिसे हम ठीक नहीं कर सकते।
.disabled
कक्षा को <a>
बटन में जोड़ें ।
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
हम .disabled
यहां सामान्य वर्ग के समान उपयोगिता वर्ग के रूप में उपयोग करते हैं .active
, इसलिए किसी उपसर्ग की आवश्यकता नहीं है।
यह वर्ग एस pointer-events: none
की लिंक कार्यक्षमता को अक्षम करने का प्रयास करने के लिए उपयोग करता है <a>
, लेकिन वह सीएसएस संपत्ति अभी तक मानकीकृत नहीं है और ओपेरा 18 और उससे नीचे, या इंटरनेट एक्सप्लोरर 11 में पूरी तरह से समर्थित नहीं है। इसके अलावा, यहां तक कि उन ब्राउज़रों में भी जो समर्थन करते हैं pointer-events: none
, कीबोर्ड नेविगेशन अप्रभावित रहता है, जिसका अर्थ है कि देखे गए कीबोर्ड उपयोगकर्ता और सहायक तकनीकों के उपयोगकर्ता अभी भी इन लिंक को सक्रिय करने में सक्षम होंगे। इसलिए सुरक्षित रहने के लिए, ऐसे लिंक को अक्षम करने के लिए कस्टम जावास्क्रिप्ट का उपयोग करें।
.img-responsive
बूटस्ट्रैप 3 में छवियों को कक्षा के अतिरिक्त के माध्यम से उत्तरदायी-अनुकूल बनाया जा सकता है । max-width: 100%;
यह , height: auto;
और छवि पर लागू होता display: block;
है ताकि यह मूल तत्व के लिए अच्छी तरह से स्केल हो जाए।
उन छवियों को केन्द्रित करने के लिए जो .img-responsive
कक्षा का उपयोग करती हैं, .center-block
के बजाय का उपयोग करें .text-center
। उपयोग के बारे में अधिक जानकारी के लिए सहायक वर्ग अनुभाग देखें ।.center-block
इंटरनेट एक्सप्लोरर 8-10 में, एसवीजी छवियों के साथ .img-responsive
अनुपातहीन आकार होता है। इसे ठीक करने के लिए, width: 100% \9;
जहां आवश्यक हो वहां जोड़ें। बूटस्ट्रैप इसे स्वचालित रूप से लागू नहीं करता है क्योंकि यह अन्य छवि प्रारूपों के लिए जटिलताओं का कारण बनता है।
<img src="..." class="img-responsive" alt="Responsive image">
<img>
किसी भी प्रोजेक्ट में छवियों को आसानी से स्टाइल करने के लिए तत्वों में कक्षाएं जोड़ें ।
ध्यान रखें कि Internet Explorer 8 में गोल कोनों के लिए समर्थन का अभाव है।
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
कुछ विशेष जोर उपयोगिता वर्गों के साथ रंग के माध्यम से अर्थ व्यक्त करें। ये लिंक पर भी लागू हो सकते हैं और हमारी डिफ़ॉल्ट लिंक शैलियों की तरह ही होवर पर काले पड़ जाएंगे।
फ्यूस डापीबस, टेलस एसी कर्सस कमोडो, टॉर्चर मौरिस निभ।
Nullam id dolor id nibh ultricies vehicula ut id elit.
डुइस मोलिस, इस्ट नॉन कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला।
मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना।
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।
डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
कभी-कभी किसी अन्य चयनकर्ता की विशिष्टता के कारण जोर वर्ग लागू नहीं किया जा सकता है। <span>
ज्यादातर मामलों में, अपने पाठ को कक्षा के साथ में लपेटना एक पर्याप्त समाधान है ।
अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा निरूपित जानकारी या तो सामग्री से ही स्पष्ट है (प्रासंगिक रंगों का उपयोग केवल उस अर्थ को सुदृढ़ करने के लिए किया जाता है जो पहले से ही पाठ/मार्कअप में मौजूद है), या वैकल्पिक माध्यमों के माध्यम से शामिल किया गया है, जैसे कि .sr-only
कक्षा के साथ छिपा हुआ अतिरिक्त पाठ .
प्रासंगिक पाठ रंग वर्गों के समान, किसी तत्व की पृष्ठभूमि को किसी भी प्रासंगिक वर्ग में आसानी से सेट करें। पाठ कक्षाओं की तरह, एंकर घटक हॉवर पर काले पड़ जाएंगे।
Nullam id dolor id nibh ultricies vehicula ut id elit.
डुइस मोलिस, इस्ट नॉन कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला।
मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना।
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।
डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
कभी-कभी किसी अन्य चयनकर्ता की विशिष्टता के कारण प्रासंगिक पृष्ठभूमि कक्षाएं लागू नहीं की जा सकतीं। कुछ मामलों में, अपने तत्व की सामग्री <div>
को कक्षा के साथ लपेटना पर्याप्त समाधान है।
प्रासंगिक रंगों के साथ , सुनिश्चित करें कि रंग के माध्यम से व्यक्त किया गया कोई भी अर्थ भी ऐसे प्रारूप में व्यक्त किया गया है जो पूरी तरह से प्रस्तुतिकरण नहीं है।
मोडल और अलर्ट जैसी सामग्री को खारिज करने के लिए जेनेरिक क्लोज़ आइकन का उपयोग करें।
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
ड्रॉपडाउन कार्यक्षमता और दिशा को इंगित करने के लिए कैरेट का उपयोग करें। ध्यान दें कि डिफ़ॉल्ट कैरेट ड्रॉपअप मेनू में स्वचालित रूप से उलट जाएगा ।
<span class="caret"></span>
एक वर्ग के साथ एक तत्व को बाएँ या दाएँ फ़्लोट करें। !important
विशिष्टता के मुद्दों से बचने के लिए शामिल है। कक्षाओं को मिश्रण के रूप में भी इस्तेमाल किया जा सकता है।
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
के माध्यम से एक तत्व को display: block
और केंद्र पर सेट करें margin
। मिक्सिन और क्लास के रूप में उपलब्ध है।
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
मूल तत्व मेंfloat
जोड़कर आसानी से साफ़ करें । निकोलस गैलाघर द्वारा लोकप्रिय के रूप में माइक्रो क्लियरफिक्स का उपयोग करता है। मिश्रण के रूप में भी इस्तेमाल किया जा सकता है।.clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
और कक्षाओं का उपयोग करके किसी तत्व को दिखाने या छिपाने के लिए (स्क्रीन रीडर सहित ) बाध्य करें। इन वर्गों का उपयोग विशिष्टता के टकराव से बचने के लिए किया जाता है, ठीक उसी तरह जैसे कि क्विक फ़्लोट्स । वे केवल ब्लॉक स्तरीय टॉगलिंग के लिए उपलब्ध हैं। इन्हें मिक्सी के रूप में भी इस्तेमाल किया जा सकता है।.show
.hidden
!important
.hide
उपलब्ध है, लेकिन यह हमेशा स्क्रीन पाठकों को प्रभावित नहीं करता है और इसे v3.0.1 के रूप में हटा दिया जाता है। उपयोग करें .hidden
या .sr-only
इसके बजाय।
इसके अलावा, .invisible
केवल एक तत्व की दृश्यता को टॉगल करने के लिए इस्तेमाल किया जा सकता है, जिसका अर्थ display
है कि यह संशोधित नहीं है और तत्व अभी भी दस्तावेज़ के प्रवाह को प्रभावित कर सकता है।
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
के साथ स्क्रीन रीडर्स को छोड़कर सभी उपकरणों पर एक तत्व छुपाएं .sr-only
। .sr-only
तत्व के फ़ोकस होने पर उसे फिर से दिखाने के लिए साथ संयोजित .sr-only-focusable
करें (उदा. केवल-कीबोर्ड उपयोगकर्ता द्वारा)। सुगम्यता सर्वोत्तम प्रथाओं का पालन करने के लिए आवश्यक है । मिश्रण के रूप में भी इस्तेमाल किया जा सकता है।
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
.text-hide
किसी तत्व की टेक्स्ट सामग्री को पृष्ठभूमि छवि से बदलने में सहायता के लिए कक्षा या मिश्रण का उपयोग करें ।
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
तेजी से मोबाइल के अनुकूल विकास के लिए, मीडिया क्वेरी के माध्यम से डिवाइस द्वारा सामग्री दिखाने और छिपाने के लिए इन उपयोगिता वर्गों का उपयोग करें। मुद्रित होने पर सामग्री को टॉगल करने के लिए उपयोगिता वर्ग भी शामिल हैं।
इनका सीमित आधार पर उपयोग करने का प्रयास करें और एक ही साइट के पूरी तरह से भिन्न संस्करण बनाने से बचें। इसके बजाय, प्रत्येक डिवाइस की प्रस्तुति को पूरक करने के लिए उनका उपयोग करें।
व्यूपोर्ट ब्रेकप्वाइंट पर सामग्री को टॉगल करने के लिए एकल या उपलब्ध कक्षाओं के संयोजन का उपयोग करें।
अतिरिक्त छोटे उपकरणफ़ोन (<768px) | छोटे उपकरणटैबलेट (≥768px) | मध्यम उपकरणडेस्कटॉप (≥992px) | बड़े उपकरणडेस्कटॉप (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
दृश्यमान | छुपे हुए | छुपे हुए | छुपे हुए |
.visible-sm-* |
छुपे हुए | दृश्यमान | छुपे हुए | छुपे हुए |
.visible-md-* |
छुपे हुए | छुपे हुए | दृश्यमान | छुपे हुए |
.visible-lg-* |
छुपे हुए | छुपे हुए | छुपे हुए | दृश्यमान |
.hidden-xs |
छुपे हुए | दृश्यमान | दृश्यमान | दृश्यमान |
.hidden-sm |
दृश्यमान | छुपे हुए | दृश्यमान | दृश्यमान |
.hidden-md |
दृश्यमान | दृश्यमान | छुपे हुए | दृश्यमान |
.hidden-lg |
दृश्यमान | दृश्यमान | दृश्यमान | छुपे हुए |
v3.2.0 के अनुसार, .visible-*-*
प्रत्येक ब्रेकप्वाइंट के लिए कक्षाएं तीन रूपों में आती हैं, एक display
नीचे सूचीबद्ध प्रत्येक सीएसएस संपत्ति मूल्य के लिए।
कक्षाओं का समूह | सीएसएसdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
इसलिए, उदाहरण के लिए अतिरिक्त छोटी ( xs
) स्क्रीन के लिए, उपलब्ध .visible-*-*
कक्षाएं हैं: .visible-xs-block
, .visible-xs-inline
, और .visible-xs-inline-block
।
कक्षाएं .visible-xs
, .visible-sm
, .visible-md
, और .visible-lg
भी मौजूद हैं, लेकिन v3.2.0 के रूप में पदावनत हैं । टॉगल- संबंधित तत्वों .visible-*-block
के लिए अतिरिक्त विशेष मामलों को छोड़कर, वे लगभग बराबर हैं।<table>
नियमित प्रतिक्रियाशील वर्गों के समान, प्रिंट के लिए सामग्री को टॉगल करने के लिए इनका उपयोग करें।
कक्षाओं | ब्राउज़र | छाप |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
छुपे हुए | दृश्यमान |
.hidden-print |
दृश्यमान | छुपे हुए |
वर्ग .visible-print
भी मौजूद है लेकिन v3.2.0 के रूप में बहिष्कृत है । -संबंधित तत्वों .visible-print-block
के लिए अतिरिक्त विशेष मामलों को छोड़कर, यह लगभग बराबर है ।<table>
उत्तरदायी उपयोगिता वर्गों का परीक्षण करने के लिए अपने ब्राउज़र का आकार बदलें या विभिन्न उपकरणों पर लोड करें।
हरे रंग के चेकमार्क इंगित करते हैं कि तत्व आपके वर्तमान व्यूपोर्ट में दिखाई दे रहा है।
यहां, हरे रंग के चेकमार्क यह भी इंगित करते हैं कि तत्व आपके वर्तमान व्यूपोर्ट में छिपा हुआ है।
बूटस्ट्रैप का CSS लेस पर बनाया गया है, एक प्रीप्रोसेसर जिसमें अतिरिक्त कार्यक्षमता जैसे चर, मिक्सिन और CSS को संकलित करने के लिए कार्य हैं। जो लोग हमारी संकलित सीएसएस फाइलों के बजाय स्रोत कम फाइलों का उपयोग करना चाहते हैं, वे हमारे द्वारा पूरे ढांचे में उपयोग किए जाने वाले कई चर और मिश्रणों का उपयोग कर सकते हैं।
ग्रिड वेरिएबल्स और मिक्सिन्स ग्रिड सिस्टम सेक्शन के अंतर्गत आते हैं ।
बूटस्ट्रैप का उपयोग कम से कम दो तरीकों से किया जा सकता है: संकलित सीएसएस के साथ या स्रोत कम फ़ाइलों के साथ। कम फ़ाइलों को संकलित करने के लिए , आवश्यक आदेशों को चलाने के लिए अपने विकास परिवेश को कैसे सेटअप करें , इसके लिए प्रारंभ करना अनुभाग देखें।
तीसरे पक्ष के संकलन उपकरण बूटस्ट्रैप के साथ काम कर सकते हैं, लेकिन वे हमारी कोर टीम द्वारा समर्थित नहीं हैं।
रंग, रिक्ति, या फ़ॉन्ट स्टैक जैसे सामान्य रूप से उपयोग किए जाने वाले मानों को केंद्रीकृत करने और साझा करने के तरीके के रूप में पूरे प्रोजेक्ट में चर का उपयोग किया जाता है। संपूर्ण विश्लेषण के लिए, कृपया कस्टमाइज़र देखें ।
आसानी से दो रंग योजनाओं का उपयोग करें: ग्रेस्केल और सिमेंटिक। ग्रेस्केल रंग आमतौर पर उपयोग किए जाने वाले काले रंगों तक त्वरित पहुंच प्रदान करते हैं जबकि अर्थपूर्ण में अर्थपूर्ण प्रासंगिक मूल्यों को निर्दिष्ट विभिन्न रंग शामिल होते हैं।
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
इनमें से किसी भी रंग चर का उपयोग करें जैसे वे हैं या उन्हें अपनी परियोजना के लिए अधिक सार्थक चर के लिए पुन: असाइन करें।
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
आपकी साइट के ढांचे के प्रमुख तत्वों को त्वरित रूप से अनुकूलित करने के लिए कुछ चर।
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
केवल एक मान के साथ अपने लिंक को सही रंग से आसानी से स्टाइल करें।
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
ध्यान दें कि @link-hover-color
स्वचालित रूप से सही होवर रंग बनाने के लिए, कम से एक और भयानक टूल फ़ंक्शन का उपयोग करता है। आप darken
, lighten
, saturate
, और का उपयोग कर सकते हैं desaturate
।
कुछ त्वरित चरों के साथ आसानी से अपना टाइपफेस, टेक्स्ट आकार, अग्रणी, और बहुत कुछ सेट करें। बूटस्ट्रैप इनका उपयोग आसान टाइपोग्राफिक मिश्रण प्रदान करने के लिए भी करता है।
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
आपके आइकन के स्थान और फ़ाइल नाम को अनुकूलित करने के लिए दो त्वरित चर।
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
बूटस्ट्रैप के घटक सामान्य मान सेट करने के लिए कुछ डिफ़ॉल्ट चर का उपयोग करते हैं। यहाँ सबसे अधिक इस्तेमाल किया जाता है।
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
आपके संकलित सीएसएस में सभी प्रासंगिक विक्रेता उपसर्गों को शामिल करके कई ब्राउज़रों का समर्थन करने में मदद करने के लिए विक्रेता मिश्रण मिश्रित होते हैं।
एकल मिक्सिन के साथ अपने घटकों के बॉक्स मॉडल को रीसेट करें। संदर्भ के लिए, मोज़िला का यह उपयोगी लेख देखें ।
ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रण को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
आज सभी आधुनिक ब्राउज़र गैर-उपसर्ग border-radius
गुण का समर्थन करते हैं। जैसे, कोई मिश्रण नहीं है .border-radius()
, लेकिन बूटस्ट्रैप में किसी वस्तु के किसी विशेष पक्ष पर दो कोनों को जल्दी से गोल करने के लिए शॉर्टकट शामिल हैं।
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
यदि आपके लक्षित दर्शक नवीनतम और महानतम ब्राउज़रों और उपकरणों का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आप केवल box-shadow
संपत्ति का ही उपयोग करें। यदि आपको पुराने Android (pre-v4) और iOS डिवाइस (pre-iOS 5) के लिए समर्थन की आवश्यकता है, तो आवश्यक उपसर्ग लेने के लिए बहिष्कृत मिक्सिन का उपयोग करें।-webkit
मिक्सिन को v3.1.0 के रूप में हटा दिया गया है, क्योंकि बूटस्ट्रैप आधिकारिक तौर पर पुराने प्लेटफॉर्म का समर्थन नहीं करता है जो मानक संपत्ति का समर्थन नहीं करते हैं। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.
अपने बॉक्स शैडो में रंगों का उपयोग करना सुनिश्चित करें rgba()
ताकि वे पृष्ठभूमि के साथ यथासंभव सहज रूप से मिश्रित हों।
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
लचीलेपन के लिए एकाधिक मिश्रण। सभी संक्रमण जानकारी को एक के साथ सेट करें, या आवश्यकतानुसार एक अलग विलंब और अवधि निर्दिष्ट करें।
ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रणों को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
घुमाएँ, स्केल करें, अनुवाद करें (स्थानांतरित करें), या किसी वस्तु को तिरछा करें।
ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रणों को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
एक घोषणा में सभी CSS3 के एनीमेशन गुणों का उपयोग करने के लिए एक एकल मिश्रण और व्यक्तिगत गुणों के लिए अन्य मिश्रण।
ऑटोप्रिफ़िक्सर की शुरुआत के साथ, मिश्रणों को v3.2.0 के रूप में बहिष्कृत कर दिया गया है। पश्च-संगतता को बनाए रखने के लिए, बूटस्ट्रैप आंतरिक रूप से बूटस्ट्रैप v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
सभी ब्राउज़रों के लिए अपारदर्शिता सेट करें और filter
IE8 के लिए फ़ॉलबैक प्रदान करें।
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
प्रत्येक फ़ील्ड में प्रपत्र नियंत्रणों के लिए संदर्भ प्रदान करें।
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
एक ही तत्व के भीतर सीएसएस के माध्यम से कॉलम उत्पन्न करें।
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
आसानी से किन्हीं दो रंगों को बैकग्राउंड ग्रेडिएंट में बदल दें। अधिक उन्नत हो जाएं और एक दिशा निर्धारित करें, तीन रंगों का उपयोग करें, या रेडियल ग्रेडिएंट का उपयोग करें। एक एकल मिश्रण के साथ आपको वे सभी प्रीफ़िक्स्ड सिंटैक्स मिलते हैं जिनकी आपको आवश्यकता होगी।
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
आप एक मानक दो-रंग, रैखिक ढाल का कोण भी निर्दिष्ट कर सकते हैं:
#gradient > .directional(#333; #000; 45deg);
यदि आपको नाई-पट्टी शैली ढाल की आवश्यकता है, तो यह भी आसान है। बस एक ही रंग निर्दिष्ट करें और हम एक पारभासी सफेद पट्टी को ओवरले करेंगे।
#gradient > .striped(#333; 45deg);
पूर्व में और इसके बजाय तीन रंगों का उपयोग करें। पहला रंग, दूसरा रंग, दूसरे रंग का रंग स्टॉप (25% जैसा प्रतिशत मान), और तीसरा रंग इन मिश्रणों के साथ सेट करें:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
सचेत! क्या आपको कभी भी किसी ग्रेडिएंट को हटाने की आवश्यकता है, किसी भी IE-विशिष्ट को निकालना सुनिश्चित करें जिसे filter
आपने जोड़ा हो। .reset-filter()
आप इसके साथ मिक्सिन का उपयोग करके ऐसा कर सकते हैं background-image: none;
।
यूटिलिटी मिक्सिन ऐसे मिक्सिन होते हैं जो किसी विशिष्ट लक्ष्य या कार्य को प्राप्त करने के लिए अन्यथा असंबंधित CSS गुणों को मिलाते हैं।
class="clearfix"
किसी भी तत्व को जोड़ना भूल जाएं और इसके बजाय .clearfix()
जहां उपयुक्त हो वहां मिश्रण डालें। निकोलस गैलाघर से माइक्रो क्लीयरफिक्स का उपयोग करता है ।
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
किसी भी तत्व को उसके पैरेंट में तुरंत केन्द्रित करें। आवश्यकता है width
या max-width
सेट किया जाना है।
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
किसी वस्तु के आयामों को अधिक आसानी से निर्दिष्ट करें।
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
किसी भी टेक्स्ट क्षेत्र, या किसी अन्य तत्व के लिए आकार बदलने के विकल्पों को आसानी से कॉन्फ़िगर करें। सामान्य ब्राउज़र व्यवहार के लिए डिफ़ॉल्ट ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
एकल मिक्सिन वाले इलिप्सिस के साथ टेक्स्ट को आसानी से छोटा करें। तत्व होने block
या inline-block
स्तर की आवश्यकता है।
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
दो छवि पथ और @1x छवि आयाम निर्दिष्ट करें, और बूटस्ट्रैप @2x मीडिया क्वेरी प्रदान करेगा। यदि आपके पास परोसने के लिए कई छवियां हैं, तो अपनी रेटिना छवि सीएसएस को एक ही मीडिया क्वेरी में मैन्युअल रूप से लिखने पर विचार करें।
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
जबकि बूटस्ट्रैप कम पर बनाया गया है, इसमें एक आधिकारिक सास पोर्ट भी है । हम इसे एक अलग GitHub रिपॉजिटरी में बनाए रखते हैं और एक रूपांतरण स्क्रिप्ट के साथ अपडेट को संभालते हैं।
चूंकि Sass पोर्ट का एक अलग रेपो है और थोड़ा अलग दर्शकों की सेवा करता है, इसलिए प्रोजेक्ट की सामग्री मुख्य बूटस्ट्रैप प्रोजेक्ट से बहुत भिन्न होती है। यह सुनिश्चित करता है कि Sass पोर्ट यथासंभव Sass-आधारित प्रणालियों के साथ संगत है।
रास्ता | विवरण |
---|---|
lib/ |
रूबी रत्न कोड (Sass विन्यास, रेल और कम्पास एकीकरण) |
tasks/ |
कन्वर्टर स्क्रिप्ट (अपस्ट्रीम लेस टू Sass) |
test/ |
संकलन परीक्षण |
templates/ |
कम्पास पैकेज मेनिफेस्ट |
vendor/assets/ |
Sass, JavaScript, और फ़ॉन्ट फ़ाइलें |
Rakefile |
आंतरिक कार्य, जैसे रेक और कन्वर्ट |
इन फ़ाइलों को क्रिया में देखने के लिए Sass पोर्ट के GitHub रिपॉजिटरी पर जाएँ ।
Sass के लिए बूटस्ट्रैप को स्थापित और उपयोग करने के तरीके के बारे में जानकारी के लिए, GitHub रिपॉजिटरी रीडमी से परामर्श करें । यह सबसे अद्यतित स्रोत है और इसमें रेल, कंपास, और मानक सास परियोजनाओं के उपयोग के लिए जानकारी शामिल है।