बूटस्ट्रैप सीएसएस हेल्पर क्लासेस संदर्भ
मूलपाठ
नीचे दी गई कक्षाओं के साथ टेक्स्ट-रंगों के माध्यम से अर्थ जोड़ें। होवर पर लिंक काले हो जाएंगे:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | |
| .text-primary | Text styled with class "text-primary" | |
| .text-success | Text styled with class "text-success" | |
| .text-info | Text styled with class "text-info" | |
| .text-warning | Text styled with class "text-warning" | |
| .text-danger | Text styled with class "text-danger" |
पृष्ठभूमि
नीचे दी गई कक्षाओं के साथ पृष्ठभूमि-रंगों के माध्यम से अर्थ जोड़ें। टेक्स्ट कक्षाओं की तरह ही होवर पर लिंक काले पड़ जाएंगे:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | |
| .bg-success | Table cell is styled with class "bg-success" | |
| .bg-info | Table cell is styled with class "bg-info" | |
| .bg-warning | Table cell is styled with class "bg-warning" | |
| .bg-danger | Table cell is styled with class "bg-danger" |
अन्य
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | |
| .pull-right | Floats an element to the right | |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
| .clearfix | Clears floats | |
| .show | Forces an element to be shown (display:block) | |
| .hidden | Forces an element to be hidden (display:none) | |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
| .sr-only | Hides an element to all devices except screen readers | |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
| .text-hide | Helps replace an element's text content with a background image | |
| .close | Indicates a close icon | |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
उत्तरदायी उपयोगिताएँ
इन कक्षाओं का उपयोग मीडिया प्रश्नों के माध्यम से डिवाइस द्वारा सामग्री को दिखाने और/या छिपाने के लिए किया जाता है।
व्यूपोर्ट ब्रेकप्वाइंट पर सामग्री को टॉगल करने के लिए एक या उपलब्ध कक्षाओं के संयोजन का उपयोग करें:
| कक्षाओं | अतिरिक्त छोटे उपकरण फ़ोन (<768px) | छोटे उपकरण टैबलेट (≥768px) | मध्यम उपकरण डेस्कटॉप (≥992px) | बड़े उपकरण डेस्कटॉप (≥1200px) |
|---|---|---|---|---|
| .दृश्यमान-xs-* | दृश्यमान | छुपे हुए | छुपे हुए | छुपे हुए |
| .दृश्यमान-एसएम-* | छुपे हुए | दृश्यमान | छुपे हुए | छुपे हुए |
| .दृश्यमान-एमडी-* | छुपे हुए | छुपे हुए | दृश्यमान | छुपे हुए |
| .दृश्यमान-एलजी-* | छुपे हुए | छुपे हुए | छुपे हुए | दृश्यमान |
| .छुपा-xs | छुपे हुए | दृश्यमान | दृश्यमान | दृश्यमान |
| .छिपा हुआ sm | दृश्यमान | छुपे हुए | दृश्यमान | दृश्यमान |
| .छुपा-एमडी | दृश्यमान | दृश्यमान | छुपे हुए | दृश्यमान |
| .छुपा-lg | दृश्यमान | दृश्यमान | दृश्यमान | छुपे हुए |
छुपे हुए
स्क्रीन आकार के आधार पर तत्वों को छिपाएं:
उदाहरण
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
परिणाम:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
v3.2.0 के अनुसार, के लिए .visible-*-*कक्षाएं तीन रूपों में आती हैं, प्रत्येक CSS display
गुण मान के लिए एक:
| कक्षाओं का समूह | सीएसएस प्रदर्शन |
|---|---|
| दृश्यमान-*-ब्लॉक | प्रदर्शन क्षेत्र; |
| .दृश्यमान-*-इनलाइन | प्रदर्शन: इनलाइन; |
| .दृश्यमान-*-इनलाइन-ब्लॉक | प्रदर्शन: इनलाइन-ब्लॉक; |
उदाहरण के लिए छोटी ( sm) स्क्रीन के लिए, उपलब्ध .visible-*-*कक्षाएं हैं: .visible-sm-block, .visible-sm-inline, और .visible-sm-inline-block।
वर्ग .visible-xs, .visible-sm, .visible-md, और v3.2.0 के रूप में पदावनत.visible-lg हैं ।
उदाहरण
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
परिणाम:
Example
Resize this page to see how the text below changes: