घटक
आयकॉनोग्राफी, ड्रॉपडाउन, इनपुट गट, नेव्हिगेशन, अलर्ट आणि बरेच काही प्रदान करण्यासाठी एक डझनहून अधिक पुन्हा वापरण्यायोग्य घटक तयार केले आहेत.
आयकॉनोग्राफी, ड्रॉपडाउन, इनपुट गट, नेव्हिगेशन, अलर्ट आणि बरेच काही प्रदान करण्यासाठी एक डझनहून अधिक पुन्हा वापरण्यायोग्य घटक तयार केले आहेत.
Glyphicon Halflings संच मधील फॉन्ट स्वरूपात 250 पेक्षा जास्त ग्लिफ समाविष्ट करते. Glyphicons Halflings सहसा विनामूल्य उपलब्ध नसतात, परंतु त्यांच्या निर्मात्याने त्यांना बूटस्ट्रॅपसाठी विनामूल्य उपलब्ध केले आहे. धन्यवाद म्हणून, आम्ही फक्त जेव्हा शक्य असेल तेव्हा Glyphicons वर परत लिंक समाविष्ट करण्यास सांगतो.
कामगिरीच्या कारणास्तव, सर्व चिन्हांना बेस क्लास आणि वैयक्तिक आयकॉन क्लास आवश्यक आहे. वापरण्यासाठी, खालील कोड कुठेही ठेवा. योग्य पॅडिंगसाठी चिन्ह आणि मजकूर दरम्यान जागा सोडण्याची खात्री करा.
चिन्ह वर्ग थेट इतर घटकांसह एकत्र केले जाऊ शकत नाहीत. ते समान घटकावरील इतर वर्गांसह वापरले जाऊ नयेत. त्याऐवजी, नेस्टेड जोडा <span>
आणि वर चिन्ह वर्ग लागू करा <span>
.
आयकॉन क्लासेसचा वापर फक्त अशा घटकांवर केला पाहिजे ज्यामध्ये मजकूर सामग्री नाही आणि मूल घटक नाहीत.
../fonts/
बूटस्ट्रॅप आयकॉन फॉन्ट फाइल्स संकलित CSS फाइल्सच्या सापेक्ष निर्देशिकेत स्थित असेल असे गृहीत धरते . त्या फॉन्ट फायली हलवणे किंवा पुनर्नामित करणे म्हणजे तीनपैकी एका मार्गाने CSS अपडेट करणे:
@icon-font-path
आणि/किंवा चल बदला .@icon-font-name
url()
संकलित 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
. परिणामी, बूटस्ट्रॅपवर तुमच्या सानुकूलितांच्या आधारावर, तुम्हाला बॉर्डर काढण्याची किंवा पुन्हा रंग देण्याची इच्छा असू शकते.
इंटरनेट एक्सप्लोरर 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-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
इनपुटच्या दोन्ही बाजूला एक अॅड-ऑन किंवा बटण ठेवा. तुम्ही इनपुटच्या दोन्ही बाजूला एक देखील ठेवू शकता.
आम्ही एकाच बाजूला एकाधिक अॅड-ऑन ( .input-group-addon
किंवा ) ला समर्थन देत नाही..input-group-btn
आम्ही एकाच इनपुट गटामध्ये एकाधिक फॉर्म-नियंत्रणांना समर्थन देत नाही.
<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
क्लासपासून सुरू होणारे मार्कअप शेअर केले आहेत, तसेच शेअर केलेल्या स्टेटस आहेत. प्रत्येक शैली दरम्यान स्विच करण्यासाठी सुधारक वर्ग स्वॅप करा.
लक्षात घ्या वर्गाला बेस क्लास .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>
तेच एचटीएमएल घ्या, परंतु .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
. लहान स्क्रीनवर, एनएव्ही लिंक स्टॅक केलेले आहेत.
न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
कोणत्याही एनएव्ही घटकासाठी (टॅब किंवा गोळ्या), राखाडी लिंक जोडा .disabled
आणि कोणतेही होव्हर प्रभाव नाही .
<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 हे रिस्पॉन्सिव्ह मेटा घटक आहेत जे तुमच्या ऍप्लिकेशन किंवा साइटसाठी नेव्हिगेशन हेडर म्हणून काम करतात. ते मोबाईल व्ह्यूजमध्ये कोलॅप्स होऊ लागतात (आणि टॉगल करण्यायोग्य असतात) आणि उपलब्ध व्ह्यूपोर्ट रुंदी जसजसे वाढते तसतसे क्षैतिज होतात.
न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.
<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>
नॅव्हबारमध्ये अनुलंब मध्यभागी ठेवण्यासाठी a मध्ये नसलेल्या घटकांमध्ये .navbar-btn
वर्ग जोडा .<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
सह घटकामध्ये मजकूराच्या स्ट्रिंग गुंडाळा .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-fixed-top
आणि समाविष्ट .container
करा ..container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
मध्यभागी आणि पॅड नवबार सामग्री जोडा .navbar-fixed-bottom
आणि समाविष्ट .container
करा ..container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
पूर्ण-रुंदीचा नॅव्हबार तयार करा जो पृष्ठासह स्क्रोल करतो आणि मध्यभागी आणि पॅड नॅव्हबार सामग्री जोडून आणि समाविष्ट .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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
.disabled
पेजर लिंक्स पेजनेशनमधून सामान्य उपयुक्तता वर्ग देखील वापरतात .
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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">
लिंक्स, बूटस्ट्रॅप एनएव्ही आणि बरेच काही जोडून नवीन किंवा न वाचलेले आयटम सहजपणे हायलाइट करा .
<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>
जंबोट्रॉन पूर्ण रुंदीचा आणि गोलाकार कोपऱ्यांशिवाय बनवण्यासाठी, ते सर्व .container
s च्या बाहेर ठेवा आणि त्याऐवजी .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 सामग्रीचा कोणताही प्रकार जोडणे शक्य आहे.
<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
आणि बंद करा बटण जोडून कोणत्याही सूचना तयार करा.
पूर्णपणे कार्य करण्यासाठी, डिसमिस करण्यायोग्य सूचना, तुम्ही अॅलर्ट JavaScript प्लगइन वापरणे आवश्यक आहे .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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 संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये Internet Explorer 9 आणि Firefox च्या त्याखालील किंवा जुन्या आवृत्त्यांमध्ये समर्थित नाहीत. Opera 12 अॅनिमेशनला सपोर्ट करत नाही.
जर तुमच्या वेबसाइटवर सामग्री सुरक्षा धोरण (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>
प्रोग्रेस बार सातत्यपूर्ण शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.
<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 आणि खाली उपलब्ध नाही.
<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-striped
IE9 आणि खाली उपलब्ध नाही.
<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
त्यांना स्टॅक करण्यासाठी अनेक बार एकाच ठिकाणी ठेवा.
<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>
विविध प्रकारचे घटक (जसे की ब्लॉग टिप्पण्या, ट्विट्स इ.) तयार करण्यासाठी अमूर्त ऑब्जेक्ट शैली ज्यात मजकूर सामग्रीसह डावीकडे किंवा उजवीकडे संरेखित प्रतिमा वैशिष्ट्यीकृत आहे.
डीफॉल्ट मीडिया सामग्री ब्लॉकच्या डावीकडे किंवा उजवीकडे मीडिया ऑब्जेक्ट (प्रतिमा, व्हिडिओ, ऑडिओ) प्रदर्शित करतो.
<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. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
<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 तयार करा.
<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>
कोणत्याही सूची गट आयटममध्ये बॅज घटक जोडा आणि ते स्वयंचलितपणे उजवीकडे स्थित केले जाईल.
<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
आहे.
<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 आत जोडा.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.
<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>