ग्लिफिकॉन्स

उपलब्ध ग्लिफ्स

Glyphicon Halflings संच मधील फॉन्ट स्वरूपात 250 पेक्षा जास्त ग्लिफ समाविष्ट करते. Glyphicons Halflings सामान्यत: विनामूल्य उपलब्ध नसतात, परंतु त्यांच्या निर्मात्याने त्यांना बूटस्ट्रॅपसाठी विनामूल्य उपलब्ध केले आहे. धन्यवाद म्हणून, आम्ही फक्त जेव्हा शक्य असेल तेव्हा Glyphicons वर परत लिंक समाविष्ट करण्यास सांगतो.

  • glyphicon glyphicon-Asterisk
  • glyphicon glyphicon-plus
  • ग्लिफिकॉन ग्लिफिकॉन-युरो
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-Cloud
  • glyphicon glyphicon-लिफाफा
  • glyphicon glyphicon-पेन्सिल
  • glyphicon glyphicon-काच
  • glyphicon glyphicon-संगीत
  • glyphicon glyphicon-शोध
  • glyphicon glyphicon-हृदय
  • glyphicon glyphicon-तारा
  • glyphicon glyphicon-तारा-रिक्त
  • glyphicon glyphicon-वापरकर्ता
  • glyphicon glyphicon-चित्रपट
  • glyphicon glyphicon-th-laर्ज
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ठीक आहे
  • glyphicon glyphicon-काढणे
  • glyphicon glyphicon-झूम-इन
  • glyphicon glyphicon-झूम-आउट
  • glyphicon glyphicon-बंद
  • glyphicon glyphicon-सिग्नल
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-कचरा
  • glyphicon glyphicon-घर
  • glyphicon glyphicon-फाइल
  • glyphicon glyphicon-वेळ
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-डाउनलोड
  • glyphicon glyphicon-अपलोड
  • glyphicon glyphicon-इनबॉक्स
  • glyphicon glyphicon-play-sircle
  • glyphicon glyphicon-पुनरावृत्ती
  • glyphicon glyphicon-रिफ्रेश
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-ध्वज
  • glyphicon glyphicon-हेडफोन
  • glyphicon glyphicon-खंड-बंद
  • glyphicon glyphicon-volum-down
  • ग्लिफिकॉन ग्लिफिकॉन-व्हॉल्यूम-अप
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-बारकोड
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-पुस्तक
  • glyphicon glyphicon-बुकमार्क
  • glyphicon glyphicon-मुद्रण
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-ठळक
  • glyphicon glyphicon-तिरकस
  • glyphicon glyphicon-टेक्स्ट-उंची
  • glyphicon glyphicon-मजकूर-रुंदी
  • glyphicon glyphicon-संरेखित-डावीकडे
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-संरेखित-उजवीकडे
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-सूची
  • glyphicon glyphicon-इंडेंट-डावीकडे
  • glyphicon glyphicon-इंडेंट-उजवे
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-चित्र
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-समायोजित
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-संपादन
  • glyphicon glyphicon-share
  • glyphicon glyphicon-चेक
  • glyphicon glyphicon-हलवा
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-जलद-मागे
  • glyphicon glyphicon-मागे
  • glyphicon glyphicon-play
  • glyphicon glyphicon-विराम
  • glyphicon glyphicon-स्टॉप
  • glyphicon glyphicon-पुढे
  • glyphicon glyphicon-फास्ट-फॉरवर्ड
  • glyphicon glyphicon-स्टेप-फॉरवर्ड
  • glyphicon glyphicon-Eject
  • glyphicon glyphicon-शेवरॉन-डावीकडे
  • glyphicon glyphicon-शेवरॉन-उजवे
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-काढून टाकण्याचे चिन्ह
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-प्रश्न-चिन्ह
  • glyphicon glyphicon-माहिती-चिन्ह
  • glyphicon glyphicon-स्क्रीनशॉट
  • glyphicon glyphicon-remove-sircle
  • glyphicon glyphicon-ok-वर्तुळ
  • glyphicon glyphicon-ban-sircle
  • glyphicon glyphicon-बाण-डावीकडे
  • glyphicon glyphicon-बाण-उजवे
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-उद्गारवाचक-चिन्ह
  • glyphicon glyphicon-भेट
  • glyphicon glyphicon-पान
  • ग्लिफिकॉन ग्लिफिकॉन-फायर
  • glyphicon glyphicon-डोळा उघडा
  • glyphicon glyphicon-डोळा-बंद
  • glyphicon glyphicon-चेतावणी-चिन्ह
  • glyphicon glyphicon-प्लेन
  • glyphicon glyphicon-कॅलेंडर
  • glyphicon glyphicon-यादृच्छिक
  • glyphicon glyphicon-टिप्पणी
  • glyphicon glyphicon-चुंबक
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डाउन
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-प्रमाणपत्र
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-हात-उजवीकडे
  • glyphicon glyphicon-हात-डावीकडे
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-वर्तुळ-बाण-उजवे
  • glyphicon glyphicon-वर्तुळ-बाण-डावा
  • glyphicon glyphicon-वर्तुळ-बाण-अप
  • glyphicon glyphicon-वर्तुळ-बाण-खाली
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-पाना
  • glyphicon glyphicon-कार्ये
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-ब्रीफकेस
  • glyphicon glyphicon-फुलस्क्रीन
  • glyphicon glyphicon-डॅशबोर्ड
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-हृदय-रिक्त
  • glyphicon glyphicon-link
  • glyphicon glyphicon-फोन
  • glyphicon glyphicon-पुशपिन
  • glyphicon glyphicon-USD
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon- क्रमवारी
  • glyphicon glyphicon-वर्गीकरणानुसार वर्णमाला
  • glyphicon glyphicon-वर्गीकरणानुसार-अक्षर-alt
  • glyphicon glyphicon-क्रमवारीनुसार
  • glyphicon glyphicon-क्रमवारीनुसार-alt
  • glyphicon glyphicon-श्रेणीनुसार-विशेषता
  • glyphicon glyphicon-श्रेणीनुसार-विशेषता-alt
  • glyphicon glyphicon-अनचेक
  • glyphicon glyphicon-विस्तार
  • glyphicon glyphicon-कोलॅप्स-डाउन
  • glyphicon glyphicon-संकुचित-अप
  • glyphicon glyphicon-लॉग-इन
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-नवीन-विंडो
  • glyphicon glyphicon-रेकॉर्ड
  • glyphicon glyphicon-सेव्ह
  • glyphicon glyphicon-ओपन
  • glyphicon glyphicon-जतन
  • glyphicon glyphicon-आयात
  • glyphicon glyphicon-निर्यात
  • glyphicon glyphicon-पाठवा
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-फ्लॉपी-सेव्ह
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-फ्लॉपी-ओपन
  • glyphicon glyphicon-क्रेडिट-कार्ड
  • glyphicon glyphicon-हस्तांतरण
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-संकुचित
  • glyphicon glyphicon-इयरफोन
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-टॉवर
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-उपशीर्षके
  • glyphicon glyphicon-ध्वनी-स्टिरीओ
  • glyphicon glyphicon-ध्वनी-डॉल्बी
  • glyphicon glyphicon-ध्वनी-5-1
  • glyphicon glyphicon-ध्वनी-6-1
  • glyphicon glyphicon-ध्वनी-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-नोंदणी-चिन्ह
  • glyphicon glyphicon-Cloud-download
  • glyphicon glyphicon-Cloud-upload
  • glyphicon glyphicon-ट्री-कॉनिफर
  • glyphicon glyphicon-वृक्ष-पर्णपाती
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-ओपन-फाइल
  • glyphicon glyphicon-स्तर-अप
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-पेस्ट
  • glyphicon glyphicon-सूचना
  • glyphicon glyphicon-इक्वेलायझर
  • glyphicon glyphicon-king
  • glyphicon glyphicon-राणी
  • glyphicon glyphicon-प्यादा
  • glyphicon glyphicon-बिशप
  • glyphicon glyphicon-नाइट
  • glyphicon glyphicon-बेबी-फॉर्म्युला
  • glyphicon glyphicon-तंबू
  • glyphicon glyphicon-ब्लॅकबोर्ड
  • glyphicon glyphicon-बेड
  • glyphicon glyphicon-सफरचंद
  • glyphicon glyphicon-मिटवणे
  • glyphicon glyphicon-घंटागाडी
  • glyphicon glyphicon-दिवा
  • glyphicon glyphicon-डुप्लिकेट
  • glyphicon glyphicon-पिगी-बँक
  • glyphicon glyphicon-कात्री
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-येन
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-स्केल
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-चविष्ट
  • glyphicon glyphicon-शिक्षण
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-तेल
  • glyphicon glyphicon-धान्य
  • glyphicon glyphicon-सनग्लासेस
  • glyphicon glyphicon-मजकूर-आकार
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-टेक्स्ट-पार्श्वभूमी
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-ऑब्जेक्ट-संरेखित-तळाशी
  • glyphicon glyphicon-ऑब्जेक्ट-संरेखित-क्षैतिज
  • glyphicon glyphicon-ऑब्जेक्ट-संरेखित-डावीकडे
  • glyphicon glyphicon-ऑब्जेक्ट-संरेखित-लंबवत
  • glyphicon glyphicon-ऑब्जेक्ट-संरेखित-उजवीकडे
  • glyphicon glyphicon-त्रिकोण-उजवे
  • glyphicon glyphicon-त्रिकोण-डावीकडे
  • glyphicon glyphicon-त्रिकोण-तळाशी
  • glyphicon glyphicon-त्रिकोण-शीर्ष
  • glyphicon glyphicon-console
  • glyphicon glyphicon-सुपरस्क्रिप्ट
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-मेनू-डावीकडे
  • glyphicon glyphicon-मेनू-उजवे
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

कसे वापरावे

कामगिरीच्या कारणास्तव, सर्व चिन्हांना बेस क्लास आणि वैयक्तिक आयकॉन क्लास आवश्यक आहे. वापरण्यासाठी, खालील कोड कुठेही ठेवा. योग्य पॅडिंगसाठी चिन्ह आणि मजकूर दरम्यान जागा सोडण्याची खात्री करा.

इतर घटकांसह मिसळू नका

चिन्ह वर्ग थेट इतर घटकांसह एकत्र केले जाऊ शकत नाहीत. ते समान घटकावरील इतर वर्गांसह वापरले जाऊ नयेत. त्याऐवजी, नेस्टेड जोडा <span>आणि वर चिन्ह वर्ग लागू करा <span>.

फक्त रिकाम्या घटकांवर वापरण्यासाठी

आयकॉन क्लासेसचा वापर फक्त अशा घटकांवर केला पाहिजे ज्यामध्ये मजकूर सामग्री नाही आणि मूल घटक नाहीत.

चिन्ह फॉन्ट स्थान बदलत आहे

../fonts/बूटस्ट्रॅप आयकॉन फॉन्ट फाइल्स संकलित CSS फाइल्सच्या सापेक्ष निर्देशिकेत स्थित असेल असे गृहीत धरते . त्या फॉन्ट फायली हलवणे किंवा पुनर्नामित करणे म्हणजे तीनपैकी एका मार्गाने CSS अपडेट करणे:

तुमच्या विशिष्ट डेव्हलपमेंट सेटअपला अनुकूल असलेला कोणताही पर्याय वापरा.

प्रवेशयोग्य चिन्हे

सहाय्यक तंत्रज्ञानाच्या आधुनिक आवृत्त्या CSS व्युत्पन्न सामग्री तसेच विशिष्ट युनिकोड वर्णांची घोषणा करतील. स्क्रीन रीडर्समध्ये अनपेक्षित आणि गोंधळात टाकणारे आउटपुट टाळण्यासाठी (विशेषत: जेव्हा आयकॉन पूर्णपणे सजावटीसाठी वापरले जातात), आम्ही त्यांना aria-hidden="true"विशेषतासह लपवतो.

तुम्ही अर्थ व्यक्त करण्यासाठी (केवळ सजावटीच्या घटकाऐवजी) चिन्ह वापरत असल्यास, हा अर्थ सहाय्यक तंत्रज्ञानापर्यंत देखील पोहोचला आहे याची खात्री करा – उदाहरणार्थ, .sr-onlyवर्गात दृश्यमानपणे लपलेली अतिरिक्त सामग्री समाविष्ट करा.

तुम्ही इतर कोणत्याही मजकुराशिवाय नियंत्रणे तयार करत असल्यास (जसे की <button>ज्यामध्ये फक्त एक आयकॉन आहे), तुम्ही नेहमी नियंत्रणाचा उद्देश ओळखण्यासाठी पर्यायी सामग्री प्रदान केली पाहिजे, जेणेकरून ते सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना समजेल. या प्रकरणात, आपण aria-labelनियंत्रणावरच एक विशेषता जोडू शकता.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

उदाहरणे

टूलबार, नेव्हिगेशन किंवा प्रीपेंडेड फॉर्म इनपुटसाठी बटणे, बटण गटांमध्ये त्यांचा वापर करा.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना हा इशारा देण्यासाठी अतिरिक्त मजकूरासह, हा एक त्रुटी संदेश आहे हे सांगण्यासाठी अॅलर्टमध्ये वापरलेला एक चिन्ह ..sr-only

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ड्रॉपडाउन

लिंक्सच्या सूची प्रदर्शित करण्यासाठी टॉगल करण्यायोग्य, संदर्भ मेनू. ड्रॉपडाउन JavaScript प्लगइनसह परस्परसंवादी केले .

ड्रॉपडाउनचा ट्रिगर आणि ड्रॉपडाउन मेनू आत गुंडाळा .dropdown, किंवा घोषित करणारा दुसरा घटक position: relative;. नंतर मेनूचा HTML जोडा.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupड्रॉपडाउन मेनू पालकांना जोडून वरच्या दिशेने (खाली ऐवजी) विस्तृत करण्यासाठी बदलले जाऊ शकतात .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

डीफॉल्टनुसार, ड्रॉपडाउन मेनू स्वयंचलितपणे 100% शीर्षस्थानी आणि त्याच्या पालकाच्या डाव्या बाजूला स्थित असतो. ड्रॉपडाउन मेनू उजवीकडे संरेखित .dropdown-menu-rightकरण्यासाठी a मध्ये जोडा ..dropdown-menu

अतिरिक्त स्थितीची आवश्यकता असू शकते

दस्तऐवजाच्या सामान्य प्रवाहामध्ये CSS द्वारे ड्रॉपडाउन स्वयंचलितपणे स्थित केले जातात. याचा अर्थ पालकांद्वारे काही overflowगुणधर्मांसह ड्रॉपडाउन क्रॉप केले जाऊ शकतात किंवा व्ह्यूपोर्टच्या मर्यादेबाहेर दिसू शकतात. या समस्या उद्भवतात तेव्हा ते स्वतःच सोडवा.

बहिष्कृत .pull-rightसंरेखन

v3.1.0 नुसार, आम्ही .pull-rightड्रॉपडाउन मेनूवर नापसंत केले आहे. मेनू उजवीकडे संरेखित करण्यासाठी, वापरा .dropdown-menu-right. navbar मधील उजवे संरेखित nav घटक मेनू आपोआप संरेखित करण्यासाठी या वर्गाची मिक्सिन आवृत्ती वापरतात. ते अधिलिखित करण्यासाठी, वापरा .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

कोणत्याही ड्रॉपडाउन मेनूमधील क्रियांच्या विभागांना लेबल करण्यासाठी शीर्षलेख जोडा.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ड्रॉपडाउन मेनूमधील लिंक्सच्या विभक्त मालिकेमध्ये विभाजक जोडा.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

लिंक अक्षम करण्यासाठी ड्रॉपडाऊनमध्ये .disabledजोडा .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

बटण गट

बटण गटासह एकाच ओळीवर बटणांची मालिका एकत्र करा. आमच्या बटण प्लगइनसह पर्यायी JavaScript रेडिओ आणि चेकबॉक्स शैली वर्तन जोडा .

बटण गटांमध्ये टूलटिप आणि पॉपओव्हरसाठी विशेष सेटिंग आवश्यक आहे

मधील घटकांवर टूलटिप किंवा पॉपओव्हर वापरताना .btn-group, तुम्हाला container: 'body'अवांछित साइड इफेक्ट्स टाळण्यासाठी पर्याय निर्दिष्ट करावा लागेल (जसे की, टूलटिप किंवा पॉपओव्हर ट्रिगर झाल्यावर घटक विस्तीर्ण होणे आणि/किंवा त्याचे गोलाकार कोपरे गमावणे).

बरोबर असल्याची खात्री करा roleआणि लेबल प्रदान करा

सहाय्यक तंत्रज्ञानासाठी - जसे की स्क्रीन रीडर - बटणांची मालिका गटबद्ध केली आहे हे सांगण्यासाठी, एक योग्य roleविशेषता प्रदान करणे आवश्यक आहे. बटण गटांसाठी, हे असेल role="group", तर टूलबारमध्ये role="toolbar".

एक अपवाद असे गट आहेत ज्यात फक्त एकच नियंत्रण असते (उदाहरणार्थ घटकांसह न्याय्य बटण गट<button> ) किंवा ड्रॉपडाउन.

या व्यतिरिक्त, गट आणि टूलबारना स्पष्ट लेबल दिले पाहिजे, कारण बहुतेक सहाय्यक तंत्रज्ञान अन्यथा योग्य roleगुणधर्म असूनही त्यांची घोषणा करणार नाहीत. येथे प्रदान केलेल्या उदाहरणांमध्ये, आम्ही वापरतो aria-label, परंतु पर्याय aria-labelledbyदेखील वापरले जाऊ शकतात.

मूळ उदाहरण

.btnमध्ये बटणांची मालिका गुंडाळा .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

बटण टूलबार

अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

आकारमान

गटातील प्रत्येक बटणावर बटण आकाराचे वर्ग लागू करण्याऐवजी, एकाधिक गटांना नेस्ट करताना समाविष्ट .btn-group-*करून प्रत्येकामध्ये जोडा..btn-group




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

घरटी

जेव्हा तुम्हाला बटणांच्या मालिकेसह ड्रॉपडाउन मेनू मिसळायचा असेल तेव्हा दुसर्‍यामध्ये .btn-groupठेवा ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

अनुलंब भिन्नता

बटणांचा संच क्षैतिज ऐवजी अनुलंब स्टॅक केलेला दिसावा. स्प्लिट बटण ड्रॉपडाउन येथे समर्थित नाहीत.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

न्याय्य बटण गट

त्याच्या पॅरेंटची संपूर्ण रुंदी पसरवण्यासाठी बटणांचा समूह समान आकारात पसरवा. बटण गटातील बटण ड्रॉपडाउनसह देखील कार्य करते.

सीमा हाताळणे

बटणांचे समर्थन करण्यासाठी वापरल्या जाणार्‍या विशिष्ट HTML आणि CSS मुळे (म्हणजे display: table-cell) त्यांच्यामधील सीमा दुप्पट केल्या जातात. नियमित बटण गटांमध्ये, margin-left: -1pxते काढून टाकण्याऐवजी सीमा स्टॅक करण्यासाठी वापरले जाते. तथापि, marginसह कार्य करत नाही display: table-cell. परिणामी, बूटस्ट्रॅपवर तुमच्या सानुकूलितांच्या आधारावर, तुम्हाला बॉर्डर काढण्याची किंवा पुन्हा रंग देण्याची इच्छा असू शकते.

IE8 आणि सीमा

इंटरनेट एक्सप्लोरर 8 एका न्याय्य बटण गटातील बटणांवर सीमा रेंडर करत नाही, मग ते चालू <a>असो किंवा <button>घटक. त्याभोवती जाण्यासाठी, प्रत्येक बटण दुसर्‍यामध्ये गुंडाळा .btn-group.

अधिक माहितीसाठी #12476 पहा .

<a>घटकांसह _

.btnफक्त s ची मालिका गुंडाळा .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

बटणे म्हणून काम करणारे दुवे

जर <a>घटकांचा वापर बटणे म्हणून कार्य करण्यासाठी केला जात असेल - वर्तमान पृष्ठातील दुसर्‍या दस्तऐवजावर किंवा विभागात नेव्हिगेट करण्याऐवजी - पृष्ठातील कार्यक्षमता ट्रिगर करत असेल तर - त्यांना देखील योग्य दिले पाहिजे role="button".

<button>घटकांसह _

<button>घटकांसह न्याय्य बटण गट वापरण्यासाठी , तुम्ही प्रत्येक बटण एका बटण गटामध्ये गुंडाळले पाहिजे . बरेच ब्राउझर घटकांच्या समर्थनासाठी आमचे CSS योग्यरित्या लागू करत नाहीत <button>, परंतु आम्ही बटण ड्रॉपडाउनला समर्थन देत असल्याने, आम्ही त्यावर कार्य करू शकतो.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

बटण ड्रॉपडाउन

ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.

प्लगइन अवलंबित्व

बटण ड्रॉपडाउनसाठी ड्रॉपडाउन प्लगइन आपल्या बूटस्ट्रॅपच्या आवृत्तीमध्ये समाविष्ट करणे आवश्यक आहे.

सिंगल बटण ड्रॉपडाउन

काही मूलभूत मार्कअप बदलांसह एक बटण ड्रॉपडाउन टॉगलमध्ये बदला.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

स्प्लिट बटण ड्रॉपडाउन

त्याचप्रमाणे, समान मार्कअप बदलांसह स्प्लिट बटण ड्रॉपडाउन तयार करा, फक्त वेगळ्या बटणासह.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

आकारमान

बटण ड्रॉपडाउन सर्व आकारांच्या बटणांसह कार्य करतात.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ड्रॉपअप भिन्नता

.dropupपालकांना जोडून घटकांच्या वरील ड्रॉपडाउन मेनू ट्रिगर करा.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

इनपुट गट

कोणत्याही मजकूर-आधारितच्या आधी, नंतर किंवा दोन्ही बाजूंनी मजकूर किंवा बटणे जोडून फॉर्म नियंत्रणे वाढवा <input>. .input-groupएकसह वापरा .input-group-addonकिंवा .input-group-btnघटकांना आधी जोडण्यासाठी किंवा जोडण्यासाठी वापरा .form-control.

केवळ मजकूर <input>एस

येथे घटक वापरणे टाळा <select>कारण ते वेबकिट ब्राउझरमध्ये पूर्णपणे शैलीबद्ध केले जाऊ शकत नाहीत.

<textarea>येथे घटक वापरणे टाळा कारण rowsकाही प्रकरणांमध्ये त्यांच्या गुणधर्माचा आदर केला जाणार नाही.

इनपुट गटांमधील टूलटिप आणि पॉपओव्हरसाठी विशेष सेटिंग आवश्यक आहे

मधील घटकांवर टूलटिप किंवा पॉपओव्हर वापरताना .input-group, तुम्हाला container: 'body'अवांछित साइड इफेक्ट्स टाळण्यासाठी पर्याय निर्दिष्ट करावा लागेल (जसे की घटक विस्तृत होणे आणि/किंवा टूलटिप किंवा पॉपओव्हर ट्रिगर झाल्यावर त्याचे गोलाकार कोपरे गमावणे).

इतर घटकांसह मिसळू नका

फॉर्म गट किंवा ग्रिड कॉलम वर्ग थेट इनपुट गटांसह मिक्स करू नका. त्याऐवजी, फॉर्म ग्रुप किंवा ग्रिड-संबंधित घटकाच्या आत इनपुट गट नेस्ट करा.

नेहमी लेबल जोडा

तुम्ही प्रत्येक इनपुटसाठी लेबल समाविष्ट न केल्यास स्क्रीन वाचकांना तुमच्या फॉर्ममध्ये अडचण येईल. या इनपुट गटांसाठी, कोणतेही अतिरिक्त लेबल किंवा कार्यक्षमता सहाय्यक तंत्रज्ञानापर्यंत पोहोचवली आहे याची खात्री करा.

वापरायचे अचूक तंत्र (दृश्यमान <label>घटक, वर्ग <label>वापरून लपवलेले घटक, किंवा , , , किंवा विशेषता वापरणे) आणि कोणती अतिरिक्त माहिती सांगावी लागेल हे तुम्ही अंमलात आणत असलेल्या इंटरफेस विजेटच्या अचूक प्रकारानुसार बदलू शकते. या विभागातील उदाहरणे काही सुचविलेले, केस-विशिष्ट दृष्टिकोन प्रदान करतात..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

मूळ उदाहरण

इनपुटच्या दोन्ही बाजूला एक अॅड-ऑन किंवा बटण ठेवा. तुम्ही इनपुटच्या दोन्ही बाजूला एक देखील ठेवू शकता.

आम्ही एकाच बाजूला एकाधिक अॅड-ऑन ( .input-group-addonकिंवा ) ला समर्थन देत नाही..input-group-btn

आम्ही एकाच इनपुट गटामध्ये एकाधिक फॉर्म-नियंत्रणांना समर्थन देत नाही.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

आकारमान

संबंधित फॉर्म आकार वर्ग स्वतःमध्ये जोडा .input-groupआणि त्यातील सामग्री आपोआप आकार बदलेल-प्रत्येक घटकावरील फॉर्म नियंत्रण आकार वर्गांची पुनरावृत्ती करण्याची आवश्यकता नाही.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

चेकबॉक्स आणि रेडिओ अॅडऑन

मजकुराऐवजी इनपुट ग्रुपच्या अॅडऑनमध्ये कोणताही चेकबॉक्स किंवा रेडिओ पर्याय ठेवा.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

बटण अॅडऑन

इनपुट गटांमधील बटणे थोडी वेगळी असतात आणि त्यांना एक अतिरिक्त स्तराची घरटी आवश्यक असते. ऐवजी .input-group-addon, तुम्हाला .input-group-btnबटणे गुंडाळण्यासाठी वापरण्याची आवश्यकता असेल. हे डीफॉल्ट ब्राउझर शैलींमुळे आवश्यक आहे जे अधिलिखित केले जाऊ शकत नाही.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ड्रॉपडाउनसह बटणे

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

विभागलेली बटणे

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

एकाधिक बटणे

तुमच्याकडे प्रत्येक बाजूला फक्त एक अॅड-ऑन असू शकतो, तुमच्याकडे एकाच मध्ये अनेक बटणे असू शकतात .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

नवस

बूटस्ट्रॅपमध्ये उपलब्ध असलेल्या Navs ने बेस .navक्लासपासून सुरू होणारे मार्कअप शेअर केले आहेत, तसेच शेअर केलेल्या स्टेटस आहेत. प्रत्येक शैली दरम्यान स्विच करण्यासाठी सुधारक वर्ग स्वॅप करा.

टॅब पॅनेलसाठी navs वापरण्यासाठी JavaScript टॅब प्लगइन आवश्यक आहे

टॅब करण्यायोग्य क्षेत्रांसह टॅबसाठी, तुम्ही टॅब JavaScript प्लगइन वापरणे आवश्यक आहे . मार्कअपसाठी अतिरिक्त roleआणि ARIA विशेषता देखील आवश्यक असतील – अधिक तपशीलांसाठी प्लगइनचे उदाहरण मार्कअप पहा.

नेव्हिगेशन प्रवेशयोग्य म्हणून वापरल्या जाणार्‍या navs बनवा

जर तुम्ही नेव्हिगेशन बार प्रदान करण्यासाठी navs वापरत असाल तर, role="navigation"च्या सर्वात तार्किक मूळ कंटेनरमध्ये एक जोडण्याचे सुनिश्चित करा किंवा संपूर्ण नेव्हिगेशनभोवती <ul>एक घटक गुंडाळा. <nav>भूमिका स्वतःमध्ये जोडू नका <ul>, कारण हे सहाय्यक तंत्रज्ञानाद्वारे वास्तविक सूची म्हणून घोषित होण्यापासून प्रतिबंधित करेल.

लक्षात घ्या वर्गाला बेस क्लास .nav-tabsआवश्यक आहे ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

तेच HTML घ्या, परंतु .nav-pillsत्याऐवजी वापरा:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

गोळ्या देखील अनुलंब स्टॅक करण्यायोग्य आहेत. फक्त जोडा .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

सह 768px पेक्षा रुंद स्क्रीनवर त्यांच्या पालकांच्या समान रुंदीचे टॅब किंवा गोळ्या सहज बनवा .nav-justified. लहान स्क्रीनवर, एनएव्ही लिंक स्टॅक केलेले आहेत.

न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.

सफारी आणि प्रतिसादात्मक न्याय्य एनएव्ही

v9.1.2 नुसार, सफारी एक बग प्रदर्शित करते ज्यामध्ये तुमच्या ब्राउझरचा आडवा आकार बदलल्याने रीफ्रेश केल्यावर साफ केलेल्या न्याय्य एनएव्हीमध्ये रेंडरिंग त्रुटी निर्माण होतात. हा बग न्याय्य एनएव्ही उदाहरणामध्ये देखील दर्शविला आहे .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

कोणत्याही एनएव्ही घटकासाठी (टॅब किंवा गोळ्या), राखाडी लिंक जोडा .disabledआणि कोणतेही होव्हर प्रभाव नाही .

लिंक कार्यक्षमता प्रभावित नाही

<a>हा वर्ग केवळ त्याचे स्वरूप बदलेल , त्याची कार्यक्षमता नाही. येथे दुवे अक्षम करण्यासाठी सानुकूल JavaScript वापरा.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

थोडे अतिरिक्त HTML आणि ड्रॉपडाउन JavaScript प्लगइनसह ड्रॉपडाउन मेनू जोडा .

ड्रॉपडाउनसह टॅब

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ड्रॉपडाउनसह गोळ्या

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

नवबार

Navbars हे रिस्पॉन्सिव्ह मेटा घटक आहेत जे तुमच्या ऍप्लिकेशन किंवा साइटसाठी नेव्हिगेशन हेडर म्हणून काम करतात. ते मोबाईल व्ह्यूजमध्ये कोलॅप्स होऊ लागतात (आणि टॉगल करण्यायोग्य असतात) आणि उपलब्ध व्ह्यूपोर्ट रुंदी जसजसे वाढते तसतसे क्षैतिज होतात.

न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.

ओव्हरफ्लो सामग्री

तुमच्या navbar मधील सामग्रीला किती जागा आवश्यक आहे हे बूटस्ट्रॅपला माहीत नसल्यामुळे, तुम्हाला दुसऱ्या रांगेत सामग्री गुंडाळताना समस्या येऊ शकतात. याचे निराकरण करण्यासाठी, आपण हे करू शकता:

  1. navbar आयटमची रक्कम किंवा रुंदी कमी करा.
  2. रिस्पॉन्सिव्ह युटिलिटी क्लासेसचा वापर करून ठराविक स्क्रीन आकारात काही नॅव्हबार आयटम लपवा .
  3. तुमचा नॅव्हबार कोलॅप्स केलेला आणि क्षैतिज मोड दरम्यान स्विच करतो तो बिंदू बदला. व्हेरिएबल सानुकूल करा @grid-float-breakpointकिंवा तुमची स्वतःची मीडिया क्वेरी जोडा.

JavaScript प्लगइन आवश्यक आहे

JavaScript अक्षम केले असल्यास आणि व्ह्यूपोर्ट नॅव्हबार कोलॅप्स करण्याइतका अरुंद असल्यास, नॅव्हबारचा विस्तार करणे आणि मधील सामग्री पाहणे अशक्य होईल .navbar-collapse.

रिस्पॉन्सिव्ह नॅव्हबारला तुमच्या बूटस्ट्रॅपच्या आवृत्तीमध्ये कोलॅप्स प्लगइन समाविष्ट करणे आवश्यक आहे.

कोलॅप्स झालेला मोबाईल नवबार ब्रेकपॉइंट बदलत आहे

जेव्हा व्ह्यूपोर्ट पेक्षा अरुंद असतो तेव्हा नॅव्हबार त्याच्या उभ्या मोबाइल व्ह्यूमध्ये कोसळतो आणि @grid-float-breakpointव्ह्यूपोर्ट किमान @grid-float-breakpointरुंदीमध्ये असताना त्याच्या क्षैतिज नॉन-मोबाइल व्ह्यूमध्ये विस्तृत होतो. नॅव्हबार कोलॅप्स/विस्तार केव्हा नियंत्रित करण्यासाठी हे व्हेरिएबल कमी स्त्रोतामध्ये समायोजित करा. डीफॉल्ट मूल्य आहे 768px(सर्वात लहान "लहान" किंवा "टॅबलेट" स्क्रीन).

नवबार प्रवेशयोग्य बनवा

एखादे घटक वापरण्याची खात्री करा <nav>किंवा, अधिक सामान्य घटक वापरत असल्यास , सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांसाठी एक महत्त्वाचा प्रदेश म्हणून स्पष्टपणे ओळखण्यासाठी प्रत्येक नॅव्हबारमध्ये <div>एक जोडा .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

मजकूर स्वॅप करून नवबार ब्रँड तुमच्या स्वतःच्या प्रतिमेसह बदला <img>. .navbar-brandची स्वतःची पॅडिंग आणि उंची असल्याने , तुम्हाला तुमच्या इमेजवर अवलंबून काही CSS ओव्हरराइड करण्याची आवश्यकता असू शकते.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formयोग्य उभ्या संरेखनासाठी आणि संकुचित व्ह्यूपोर्टमध्ये फॉर्म सामग्री ठेवा. तो navbar सामग्रीमध्ये कुठे राहतो हे ठरवण्यासाठी संरेखन पर्याय वापरा.

हेड अप म्हणून, त्याचा बराचसा कोड मिक्सिनद्वारे .navbar-formशेअर करतो . काही फॉर्म नियंत्रणे, जसे की इनपुट गटांना, नॅव्हबारमध्ये योग्यरित्या दर्शविण्यासाठी निश्चित रुंदीची आवश्यकता असू शकते..form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

मोबाइल डिव्हाइस चेतावणी

मोबाइल डिव्हाइसेसवर निश्चित घटकांमध्ये फॉर्म नियंत्रणे वापरण्याबाबत काही चेतावणी आहेत. तपशीलांसाठी आमचे ब्राउझर समर्थन दस्तऐवज पहा.

नेहमी लेबल जोडा

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

नॅव्हबारमध्ये अनुलंब मध्यभागी ठेवण्यासाठी a मध्ये नसलेल्या घटकांमध्ये .navbar-btnवर्ग जोडा .<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

संदर्भ-विशिष्ट वापर

मानक बटण वर्गांप्रमाणे , ऑन आणि घटक .navbar-btnवापरले जाऊ शकतात . तथापि, मधील घटकांवर किंवा मानक बटण वर्ग दोन्ही वापरले जाऊ नयेत .<a><input>.navbar-btn<a>.navbar-nav

सह घटकामध्ये मजकूराच्या स्ट्रिंग गुंडाळा .navbar-text, सामान्यतः <p>योग्य अग्रगण्य आणि रंगासाठी टॅगवर.

<p class="navbar-text">Signed in as Mark Otto</p>

नियमित नॅव्हबार नेव्हिगेशन घटकामध्ये नसलेल्या मानक लिंक्स वापरणाऱ्या .navbar-linkलोकांसाठी, डीफॉल्ट आणि इनव्हर्स नॅव्हबार पर्यायांसाठी योग्य रंग जोडण्यासाठी वर्ग वापरा.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftकिंवा .navbar-rightयुटिलिटी क्लासेसचा वापर करून एनएव्ही लिंक्स, फॉर्म, बटणे किंवा मजकूर संरेखित करा . दोन्ही वर्ग निर्दिष्ट दिशेने CSS फ्लोट जोडतील. उदाहरणार्थ, एनएव्ही लिंक्स संरेखित करण्यासाठी, <ul>लागू केलेल्या संबंधित युटिलिटी क्लाससह त्यांना वेगळ्यामध्ये ठेवा.

हे वर्ग आणि च्या मिक्सिन-एड आवृत्त्या आहेत .pull-left, .pull-rightपरंतु डिव्हाइसच्या आकारांवरील navbar घटकांच्या सुलभ हाताळणीसाठी ते मीडिया क्वेरीसाठी व्यापलेले आहेत.

एकाधिक घटक उजवीकडे संरेखित करणे

नवबारांना सध्या अनेक .navbar-rightवर्गांसह मर्यादा आहेत. योग्यरित्या जागा सामग्री करण्यासाठी, आम्ही शेवटच्या .navbar-rightघटकावर नकारात्मक मार्जिन वापरतो. जेव्हा त्या वर्गाचा वापर करणारे अनेक घटक असतात, तेव्हा हे समास हेतूप्रमाणे कार्य करत नाहीत.

जेव्हा आम्ही तो घटक v4 मध्ये पुन्हा लिहू शकतो तेव्हा आम्ही यावर पुन्हा भेट देऊ.

मध्यभागी आणि पॅड नवबार सामग्री जोडा .navbar-fixed-topआणि समाविष्ट .containerकरा ..container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

शरीर पॅडिंग आवश्यक

निश्चित नॅव्हबार तुमची इतर सामग्री आच्छादित करेल, जोपर्यंत तुम्ही paddingशीर्षस्थानी जोडत नाही <body>. तुमची स्वतःची मूल्ये वापरून पहा किंवा खाली आमचे स्निपेट वापरा. टीप: डीफॉल्टनुसार, navbar 50px उच्च आहे.

body { padding-top: 70px; }

कोर बूटस्ट्रॅप CSS नंतर हे समाविष्ट केल्याचे सुनिश्चित करा .

मध्यभागी आणि पॅड नवबार सामग्री जोडा .navbar-fixed-bottomआणि समाविष्ट .containerकरा ..container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

शरीर पॅडिंग आवश्यक

निश्चित नॅव्हबार तुमची इतर सामग्री आच्छादित करेल, जोपर्यंत तुम्ही paddingतळाशी जोडत नाही <body>. तुमची स्वतःची मूल्ये वापरून पहा किंवा खाली आमचे स्निपेट वापरा. टीप: डीफॉल्टनुसार, navbar 50px उच्च आहे.

body { padding-bottom: 70px; }

कोर बूटस्ट्रॅप CSS नंतर हे समाविष्ट केल्याचे सुनिश्चित करा .

पूर्ण-रुंदीचा नॅव्हबार तयार करा जो पृष्ठासह स्क्रोल करतो आणि मध्यभागी आणि पॅड नॅव्हबार सामग्री जोडून आणि समाविष्ट .navbar-static-topकरतो ..container.container-fluid

वर्गांच्या विपरीत .navbar-fixed-*, तुम्हाला वरील कोणतेही पॅडिंग बदलण्याची आवश्यकता नाही body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

जोडून नवबारचे स्वरूप सुधारित करा .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ब्रेडक्रंब

नेव्हिगेशनल पदानुक्रमात वर्तमान पृष्ठाचे स्थान सूचित करा.

विभाजक आपोआप CSS मध्ये :beforeआणि द्वारे जोडले जातात content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

पृष्ठांकन

तुमच्या साइट किंवा अॅपसाठी एकाधिक-पृष्ठ पृष्ठांकन घटकासह किंवा सोप्या पेजर पर्यायासह पृष्ठांकन लिंक प्रदान करा .

डीफॉल्ट पृष्ठांकन

Rdio द्वारे प्रेरित साधे पृष्ठांकन, अॅप्स आणि शोध परिणामांसाठी उत्तम. मोठा ब्लॉक चुकणे कठीण आहे, सहज स्केलेबल आहे आणि मोठ्या क्लिक क्षेत्रे प्रदान करते.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

पृष्ठांकन घटक लेबलिंग

<nav>पृष्ठांकन घटक स्क्रीन रीडर आणि इतर सहाय्यक तंत्रज्ञानासाठी नेव्हिगेशन विभाग म्हणून ओळखण्यासाठी घटकामध्ये गुंडाळलेला असावा . या व्यतिरिक्त, एखाद्या पृष्ठावर असे एकापेक्षा जास्त नेव्हिगेशन विभाग आधीपासूनच असण्याची शक्यता आहे (जसे की हेडरमधील प्राथमिक नेव्हिगेशन, किंवा साइडबार नेव्हिगेशन), त्याचा उद्देश प्रतिबिंबित करणारे वर्णनात्मक aria-labelप्रदान करणे उचित आहे. <nav>उदाहरणार्थ, पृष्ठांकन घटक शोध परिणामांच्या संचामध्ये नेव्हिगेट करण्यासाठी वापरला असल्यास, एक योग्य लेबल असू शकते aria-label="Search results pages".

अक्षम आणि सक्रिय राज्ये

दुवे वेगवेगळ्या परिस्थितींसाठी सानुकूल करण्यायोग्य आहेत. .disabledक्लिक न करता येणार्‍या दुव्यांसाठी आणि .activeवर्तमान पृष्ठ सूचित करण्यासाठी वापरा .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

आम्‍ही शिफारस करतो की तुम्‍ही च्‍यासाठी सक्रिय किंवा अक्षम अँकर स्‍वॅप करा <span>, किंवा मागील/पुढील बाणांच्या बाबतीत अँकर वगळा, इच्‍छित शैली कायम ठेवताना क्लिक कार्यक्षमता काढून टाका.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

आकारमान

फॅन्सी मोठे किंवा लहान पृष्ठांकन? जोडा .pagination-lgकिंवा .pagination-smअतिरिक्त आकारांसाठी.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

पेजर

हलके मार्कअप आणि शैलींसह साध्या पृष्ठांकन अंमलबजावणीसाठी द्रुत मागील आणि पुढील दुवे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.

डीफॉल्ट उदाहरण

डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

संरेखित दुवे

वैकल्पिकरित्या, तुम्ही प्रत्येक दुव्याला बाजूंना संरेखित करू शकता:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

पर्यायी अक्षम स्थिती

.disabledपेजर लिंक्स पेजनेशनमधून सामान्य उपयुक्तता वर्ग देखील वापरतात .

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

लेबल्स

उदाहरण

नवीन शीर्षकाचे उदाहरण

नवीन शीर्षकाचे उदाहरण

नवीन शीर्षकाचे उदाहरण

नवीन शीर्षकाचे उदाहरण

नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
<h3>Example heading <span class="label label-default">New</span></h3>

उपलब्ध भिन्नता

लेबलचे स्वरूप बदलण्यासाठी खालीलपैकी कोणताही सुधारक वर्ग जोडा.

डीफॉल्ट प्राथमिक यश माहिती धोक्याची चेतावणी
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

टन लेबले आहेत?

जेव्हा तुमच्याकडे एका अरुंद कंटेनरमध्ये डझनभर इनलाइन लेबले असतात, त्या प्रत्येकामध्ये स्वतःचा inline-blockघटक असतो (जसे की आयकॉन). या सभोवतालचा मार्ग सेटिंग आहे display: inline-block;. संदर्भ आणि उदाहरणासाठी, #13219 पहा .

बॅज

<span class="badge">लिंक्स, बूटस्ट्रॅप एनएव्ही आणि बरेच काही जोडून नवीन किंवा न वाचलेले आयटम सहजपणे हायलाइट करा .

इनबॉक्स 42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

स्वत: कोसळणे

जेव्हा कोणतेही नवीन किंवा न वाचलेले आयटम नसतील, तेव्हा बॅज फक्त कोलमडले जातील (CSS च्या :emptyसिलेक्टरद्वारे) जर त्यात कोणतीही सामग्री अस्तित्वात नसेल.

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

इंटरनेट एक्सप्लोरर 8 मध्ये बॅज स्वतः कोसळणार नाहीत कारण त्यात :emptyनिवडकर्त्यासाठी समर्थन नाही.

सक्रिय एनएव्ही स्थितींशी जुळवून घेते

पिल नेव्हिगेशनमध्ये सक्रिय स्थितीत बॅज ठेवण्यासाठी अंगभूत शैली समाविष्ट केल्या आहेत.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

जंबोट्रॉन

एक हलका, लवचिक घटक जो वैकल्पिकरित्या तुमच्या साइटवरील मुख्य सामग्री प्रदर्शित करण्यासाठी संपूर्ण व्ह्यूपोर्टचा विस्तार करू शकतो.

नमस्कार, जग!

हे एक साधे हिरो युनिट आहे, वैशिष्ट्यीकृत सामग्री किंवा माहितीकडे अतिरिक्त लक्ष वेधण्यासाठी एक साधा जंबोट्रॉन-शैलीचा घटक आहे.

अधिक जाणून घ्या

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

जंबोट्रॉन पूर्ण रुंदीचा आणि गोलाकार कोपऱ्यांशिवाय बनवण्यासाठी, ते सर्व .containers च्या बाहेर ठेवा आणि त्याऐवजी .containerआत जोडा.

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

पृष्ठ शीर्षलेख

h1पृष्ठावरील सामग्रीचे विभाग योग्यरित्या काढण्यासाठी आणि विभाग करण्यासाठी एक साधा शेल . h1हे डीफॉल्ट smallघटक, तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

लघुप्रतिमा

प्रतिमा, व्हिडिओ, मजकूर आणि अधिकचे ग्रिड सहजपणे प्रदर्शित करण्यासाठी लघुप्रतिमा घटकासह बूटस्ट्रॅपची ग्रिड प्रणाली वाढवा.

तुम्ही वेगवेगळ्या उंची आणि/किंवा रुंदीच्या लघुप्रतिमांचे Pinterest-सारखे सादरीकरण शोधत असल्यास, तुम्हाला Masonry , Isotope , किंवा Salvattore सारखे तृतीय - पक्ष प्लगइन वापरावे लागेल .

डीफॉल्ट उदाहरण

डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

सानुकूल सामग्री

थोड्या अतिरिक्त मार्कअपसह, लघुप्रतिमांमध्ये शीर्षके, परिच्छेद किंवा बटणे यासारखी HTML सामग्रीचा कोणताही प्रकार जोडणे शक्य आहे.

सामान्य प्लेसहोल्डर लघुप्रतिमा

लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.

बटण बटण

सामान्य प्लेसहोल्डर लघुप्रतिमा

लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.

बटण बटण

सामान्य प्लेसहोल्डर लघुप्रतिमा

लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.

बटण बटण

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

इशारे

मुठभर उपलब्ध आणि लवचिक इशारा संदेशांसह विशिष्ट वापरकर्त्याच्या क्रियांसाठी संदर्भित अभिप्राय संदेश प्रदान करा.

उदाहरणे

मूलभूत सूचना संदेशांसाठी कोणताही मजकूर आणि पर्यायी डिसमिस बटण .alertआणि चार संदर्भ वर्गांपैकी एक (उदा. ) गुंडाळा..alert-success

कोणताही डीफॉल्ट वर्ग नाही

अलर्टमध्ये डीफॉल्ट वर्ग नसतात, फक्त बेस आणि सुधारक वर्ग असतात. डीफॉल्ट ग्रे अलर्टला जास्त अर्थ नाही, म्हणून तुम्हाला संदर्भ वर्गाद्वारे एक प्रकार निर्दिष्ट करणे आवश्यक आहे. यश, माहिती, चेतावणी किंवा धोक्यातून निवडा.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

डिसमिस करण्यायोग्य सूचना

पर्यायी .alert-dismissibleआणि बंद करा बटण जोडून कोणत्याही सूचना तयार करा.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

सर्व उपकरणांवर योग्य वर्तन सुनिश्चित करा

डेटा विशेषतासह <button>घटक वापरण्याची खात्री करा .data-dismiss="alert"

.alert-linkकोणत्याही अलर्टमध्ये त्वरीत जुळणारे रंगीत दुवे प्रदान करण्यासाठी उपयुक्तता वर्ग वापरा .

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

प्रगती बार

साध्या परंतु लवचिक प्रगती पट्ट्यांसह कार्यप्रवाह किंवा कृतीच्या प्रगतीवर अद्ययावत अभिप्राय प्रदान करा.

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

प्रोग्रेस बार त्यांचे काही प्रभाव साध्य करण्यासाठी CSS3 संक्रमण आणि अॅनिमेशन वापरतात. Firefox च्या Internet Explorer 9 आणि त्याखालील किंवा जुन्या आवृत्त्यांमध्ये ही वैशिष्ट्ये समर्थित नाहीत. Opera 12 अॅनिमेशनला सपोर्ट करत नाही.

सामग्री सुरक्षा धोरण (CSP) सुसंगतता

जर तुमच्या वेबसाइटवर सामग्री सुरक्षा धोरण (CSP) असेल जे परवानगी देत ​​​​नाही , तर तुम्ही आमच्या खाली दिलेल्या उदाहरणांमध्ये दाखवल्याप्रमाणे प्रगती बार रुंदी सेट style-src 'unsafe-inline'करण्यासाठी इनलाइन विशेषता वापरण्यास सक्षम असणार नाही . styleकठोर CSP सह सुसंगत रूंदी सेट करण्याच्या पर्यायी पद्धतींमध्ये थोडे कस्टम JavaScript (जे सेट करते element.style.width) किंवा कस्टम CSS वर्ग वापरणे समाविष्ट आहे.

मूळ उदाहरण

डीफॉल्ट प्रगती बार.

६०% पूर्ण
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

लेबलसह

दृश्यमान टक्केवारी दर्शविण्यासाठी प्रगती बारमधून वर्गासह <span>काढा ..sr-only

६०%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

लेबल मजकूर कमी टक्केवारीसाठी सुवाच्य राहील याची खात्री करण्यासाठी min-width, प्रगती पट्टीमध्ये एक जोडण्याचा विचार करा.

०%
२%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

संदर्भित पर्याय

प्रोग्रेस बार सातत्यपूर्ण शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.

40% पूर्ण (यश)
20% पूर्ण
60% पूर्ण (चेतावणी)
80% पूर्ण (धोका)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते. IE9 आणि खाली उपलब्ध नाही.

40% पूर्ण (यश)
20% पूर्ण
60% पूर्ण (चेतावणी)
80% पूर्ण (धोका)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

अॅनिमेटेड

उजवीकडून डावीकडे पट्टे अॅनिमेट करण्यासाठी .activeजोडा . .progress-bar-stripedIE9 आणि खाली उपलब्ध नाही.

४५% पूर्ण
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

स्टॅक केलेले

.progressत्यांना स्टॅक करण्यासाठी एकाच मध्ये अनेक बार ठेवा.

35% पूर्ण (यश)
20% पूर्ण (चेतावणी)
10% पूर्ण (धोका)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

मीडिया ऑब्जेक्ट

विविध प्रकारचे घटक (जसे की ब्लॉग टिप्पण्या, ट्विट्स इ.) तयार करण्यासाठी अमूर्त ऑब्जेक्ट शैली ज्यात मजकूर सामग्रीसह डावीकडे किंवा उजवीकडे संरेखित प्रतिमा वैशिष्ट्यीकृत आहे.

डीफॉल्ट मीडिया

डीफॉल्ट मीडिया सामग्री ब्लॉकच्या डावीकडे किंवा उजवीकडे मीडिया ऑब्जेक्ट (प्रतिमा, व्हिडिओ, ऑडिओ) प्रदर्शित करतो.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

नेस्टेड मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

वर्ग .pull-leftआणि .pull-rightसुद्धा अस्तित्वात आहेत आणि पूर्वी मीडिया घटकाचा भाग म्हणून वापरण्यात आले होते, परंतु v3.3.0 नुसार त्या वापरासाठी नापसंत केले आहे. ते अंदाजे समतुल्य आहेत .media-leftआणि .media-right, शिवाय ते html मध्ये .media-rightनंतर ठेवले पाहिजेत ..media-body

मीडिया संरेखन

प्रतिमा किंवा इतर माध्यम शीर्ष, मध्य किंवा तळाशी संरेखित केले जाऊ शकतात. डीफॉल्ट शीर्ष संरेखित आहे.

शीर्ष संरेखित मीडिया

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.

मध्य संरेखित माध्यम

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.

तळाशी संरेखित मीडिया

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.

Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

मीडिया यादी

थोड्या अतिरिक्त मार्कअपसह, तुम्ही सूचीमध्ये मीडिया वापरू शकता (टिप्पणी थ्रेड किंवा लेख सूचीसाठी उपयुक्त).

  • मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

यादी गट

सूची गट हे केवळ घटकांच्या साध्या सूचीच नव्हे तर सानुकूल सामग्रीसह जटिल देखील प्रदर्शित करण्यासाठी एक लवचिक आणि शक्तिशाली घटक आहेत.

मूळ उदाहरण

सर्वात मूलभूत सूची गट म्हणजे सूची आयटम आणि योग्य वर्गांसह एक अक्रमित सूची आहे. त्यावर अनुसरण करणार्‍या पर्यायांसह किंवा आवश्यकतेनुसार तुमचे स्वतःचे CSS तयार करा.

  • Cras justo odio
  • Dapibus ac facilisis in
  • मोरबी लिओ रिसस
  • Porta ac consectetur ac
  • इरोस येथे वेस्टिबुलम
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

बॅज

कोणत्याही सूची गट आयटममध्ये बॅज घटक जोडा आणि ते स्वयंचलितपणे उजवीकडे स्थित केले जाईल.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 मोरबी लिओ रिसस
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

लिंक केलेले आयटम

सूची आयटम ऐवजी अँकर टॅग वापरून सूची गट आयटम लिंक करा (याचा अर्थ <div>ऐवजी पालक देखील आहे <ul>). प्रत्येक घटकाभोवती वैयक्तिक पालकांची आवश्यकता नाही.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

बटण आयटम

सूची गट आयटम सूची आयटम ऐवजी बटणे असू शकतात (याचा अर्थ <div>ऐवजी पालक देखील आहे <ul>). प्रत्येक घटकाभोवती वैयक्तिक पालकांची आवश्यकता नाही. येथे मानक वर्ग वापरू नका ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

अक्षम वस्तू

अक्षम दिसण्यासाठी ते राखाडी .disabledकरण्यासाठी a मध्ये जोडा ..list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

संदर्भित वर्ग

डीफॉल्ट किंवा लिंक केलेले आयटम स्टाईल करण्यासाठी संदर्भित वर्ग वापरा. राज्याचाही समावेश .activeआहे.

  • Dapibus ac facilisis in
  • Cras बसा amet nibh libero
  • Porta ac consectetur ac
  • इरोस येथे वेस्टिबुलम
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

सानुकूल सामग्री

खाली दिलेल्या सारख्या लिंक केलेल्या सूची गटांसाठी देखील जवळपास कोणतेही HTML आत जोडा.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

पटल

नेहमी आवश्यक नसताना, काहीवेळा तुम्हाला तुमचा DOM बॉक्समध्ये ठेवावा लागतो. त्या परिस्थितींसाठी, पॅनेल घटक वापरून पहा.

मूळ उदाहरण

डीफॉल्टनुसार, .panelकाही सामग्री समाविष्ट करण्यासाठी सर्व काही मूलभूत सीमा आणि पॅडिंग लागू करणे आहे.

मूलभूत पॅनेलचे उदाहरण
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

शीर्षकासह पॅनेल

सह आपल्या पॅनेलमध्ये सहजपणे एक शीर्षलेख कंटेनर जोडा .panel-heading. तुम्ही प्री-स्टाइल केलेले हेडिंग जोडण्यासाठी वर्गासह - <h1>कोणताही समावेश करू शकता . तथापि, - चे फॉन्ट आकार द्वारे अधिलिखित केले जातात .<h6>.panel-title<h1><h6>.panel-heading

योग्य लिंक कलरिंगसाठी, मथळ्यांमध्ये दुवे ठेवण्याचे सुनिश्चित करा .panel-title.

शीर्षकाशिवाय पॅनेलचे शीर्षक
पॅनेल सामग्री

पॅनेल शीर्षक

पॅनेल सामग्री
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

मध्ये बटणे किंवा दुय्यम मजकूर गुंडाळा .panel-footer. लक्षात ठेवा की पॅनेल फूटरला संदर्भातील फरक वापरताना रंग आणि सीमा मिळत नाहीत कारण ते अग्रभागी नसतात.

पॅनेल सामग्री
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

संदर्भित पर्याय

इतर घटकांप्रमाणेच, कोणत्याही संदर्भीय स्थितीचे वर्ग जोडून पॅनेलला विशिष्ट संदर्भासाठी अधिक अर्थपूर्ण बनवा.

पॅनेल शीर्षक

पॅनेल सामग्री

पॅनेल शीर्षक

पॅनेल सामग्री

पॅनेल शीर्षक

पॅनेल सामग्री

पॅनेल शीर्षक

पॅनेल सामग्री

पॅनेल शीर्षक

पॅनेल सामग्री
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

टेबलांसह

.tableसीमलेस डिझाइनसाठी पॅनेलमध्ये कोणतेही सीमा नसलेले जोडा . जर असेल तर .panel-body, आम्ही वेगळे करण्यासाठी टेबलच्या शीर्षस्थानी अतिरिक्त सीमा जोडतो.

पॅनेल शीर्षक

येथे काही डीफॉल्ट पॅनेल सामग्री. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.

# पहिले नाव आडनाव वापरकर्तानाव
खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी पक्षी @ट्विटर
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

पॅनल बॉडी नसल्यास, घटक कोणत्याही व्यत्ययाशिवाय पॅनेल हेडरमधून टेबलवर हलतो.

पॅनेल शीर्षक
# पहिले नाव आडनाव वापरकर्तानाव
खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी पक्षी @ट्विटर
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

सूची गटांसह

कोणत्याही पॅनेलमध्ये पूर्ण-रुंदीच्या सूची गटांचा सहज समावेश करा.

पॅनेल शीर्षक

येथे काही डीफॉल्ट पॅनेल सामग्री. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.

  • Cras justo odio
  • Dapibus ac facilisis in
  • मोरबी लिओ रिसस
  • Porta ac consectetur ac
  • इरोस येथे वेस्टिबुलम
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

प्रतिसाद एम्बेड

ब्राउझरला त्यांच्या समाविष्ट असलेल्या ब्लॉकच्या रुंदीवर आधारित व्हिडिओ किंवा स्लाइडशो परिमाणे निर्धारित करण्याची अनुमती द्या एक आंतरिक गुणोत्तर तयार करून जे कोणत्याही डिव्हाइसवर योग्यरित्या मोजले जाईल.

नियम थेट <iframe>, <embed>, <video>, आणि <object>घटकांवर लागू होतात; .embed-responsive-itemजेव्हा तुम्ही इतर विशेषतांसाठी शैलीशी जुळवू इच्छित असाल तेव्हा वैकल्पिकरित्या स्पष्ट वंशज वर्ग वापरा .

प्रो-टिप! आम्ही ते तुमच्यासाठी ओव्हरराइड करत असल्यामुळे तुम्हाला frameborder="0"तुमच्या मध्ये समाविष्ट करण्याची गरज नाही .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

विहिरी

डीफॉल्ट चांगले

एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.

बघ, मी विहिरीत आहे!
<div class="well">...</div>

पर्यायी वर्ग

दोन पर्यायी सुधारक वर्गांसह पॅडिंग आणि गोलाकार कोपरे नियंत्रित करा.

बघ, मी एका मोठ्या विहिरीत आहे!
<div class="well well-lg">...</div>
बघ, मी एका छोट्या विहिरीत आहे!
<div class="well well-sm">...</div>