उपलब्ध ग्लिफ
Glyphicon Halflings सेट् तः font प्रारूपे 250 तः अधिकानि ग्लिफ्-पत्राणि समाविष्टानि सन्ति । Glyphicons Halflings सामान्यतया निःशुल्कं न प्राप्यते, परन्तु तेषां निर्माता Bootstrap कृते निःशुल्कं उपलब्धं कृतवान् अस्ति । धन्यवादरूपेण वयं केवलं याचयामः यत् यदा सम्भवं तदा Glyphicons इत्यस्य पुनः लिङ्कं समावेशयतु।
कथं प्रयोगः
कार्यप्रदर्शनकारणात् सर्वेषु चिह्नेषु आधारवर्गस्य व्यक्तिगतचिह्नवर्गस्य च आवश्यकता भवति । उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु । सम्यक् पैडिंग् कृते चिह्नस्य पाठस्य च मध्ये एकं स्थानं अवश्यं त्यजन्तु ।
अन्यैः घटकैः सह मिश्रणं न कुर्वन्तु
चिह्नवर्गाः अन्यैः घटकैः सह प्रत्यक्षतया संयोजितुं न शक्यन्ते । समानतत्त्वे अन्यैः वर्गैः सह न प्रयोक्तव्याः । तस्य स्थाने, एकं nested योजयन्तु <span>
तथा च चिह्नवर्गान् प्रयोजयन्तु <span>
।
केवलं रिक्ततत्त्वेषु उपयोगाय
चिह्नवर्गाः केवलं तेषु तत्त्वेषु उपयोक्तव्याः येषु पाठसामग्री नास्ति तथा च बालतत्त्वानि नास्ति ।
चिह्न font स्थानं परिवर्तयति
बूटस्ट्रैप् कल्पयति यत् चिह्न-फॉन्ट-सञ्चिकाः निर्देशिकायां स्थिताः भविष्यन्ति ../fonts/
, संकलित-CSS-सञ्चिकानां सापेक्षम् । तानि font सञ्चिकाः स्थानान्तरयितुं वा पुनर्नामकरणं वा कृत्वा CSS इत्यस्य अद्यतनीकरणं त्रयाणां मार्गानाम् एकेन प्रकारेण भवति ।
स्रोत Less सञ्चिकासु @icon-font-path
तथा/वा चरम् परिवर्तयन्तु ।@icon-font-name
Less संकलकेन प्रदत्तस्य relative URLs विकल्पस्य उपयोगं कुर्वन्तु ।
url()
संकलिते CSS मध्ये मार्गाः परिवर्तयन्तु ।
यत्किमपि विकल्पं भवतः विशिष्टविकासव्यवस्थापनं सर्वोत्तमरूपेण अनुकूलं भवति तस्य उपयोगं कुर्वन्तु।
सुलभ चिह्न
सहायकप्रौद्योगिकीनां आधुनिकसंस्करणं CSS उत्पन्नसामग्रीणां, तथैव विशिष्टानां यूनिकोडवर्णानां च घोषणां करिष्यति । स्क्रीन रीडर् मध्ये अनभिप्रेतं भ्रान्तं च आउटपुट् परिहरितुं (विशेषतः यदा चिह्नानि केवलं अलङ्कारार्थं उपयुज्यन्ते), वयं तान् aria-hidden="true"
विशेषतायाः सह गोपयामः ।
यदि भवान् अर्थं प्रसारयितुं चिह्नस्य उपयोगं करोति (केवलं अलङ्कारिकतत्त्वरूपेण न अपितु) तर्हि सुनिश्चितं कुरुत यत् एषः अर्थः सहायकप्रौद्योगिकीभ्यः अपि प्रसारितः भवति – उदाहरणार्थं, अतिरिक्तसामग्री समावेशयन्तु, .sr-only
वर्गेण सह दृग्गतरूपेण निगूढम्
यदि भवान् अन्येन पाठेन सह नियन्त्रणानि निर्माति (यथा a <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>
लिङ्कानां सूचीं प्रदर्शयितुं टॉगल-योग्यं, सन्दर्भ-मेनू । ड्रॉपडाउन जावास्क्रिप्ट प्लगइन इत्यनेन सह अन्तरक्रियाशीलं कृतम् .
उदाहरण
ड्रॉपडाउनस्य ट्रिगरं ड्रॉपडाउन मेनू च अन्तः वेष्टयन्तु .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 घटकाः स्वयमेव मेनू संरेखयितुं अस्य वर्गस्य mixin संस्करणस्य उपयोगं कुर्वन्ति । तत् अधिलिखितुं, उपयुज्यताम् .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
a मध्ये योजयन्तु ।<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>
बटनसमूहेन सह एकस्मिन् पङ्क्तौ बटन्-श्रृङ्खलां एकत्र समूहयन्तु । अस्माकं बटन्स् प्लगिन् इत्यनेन वैकल्पिकं जावास्क्रिप्ट् रेडियो तथा चेकबॉक्स शैली व्यवहारं योजयन्तु |
सही सुनिश्चित करें role
एवं लेबल प्रदान करें
सहायकप्रौद्योगिकीनां कृते – यथा स्क्रीनरीडर् – बटन्-श्रृङ्खला समूहीकृता इति बोधयितुं समुचितं role
विशेषतां प्रदातव्यम् बटनसमूहानां कृते, एतत् स्यात् role="group"
, यदा तु उपकरणपट्टिकासु एकः भवितव्यः role="toolbar"
।
एकः अपवादः ते समूहाः सन्ति येषु केवलं एकं नियन्त्रणं (उदाहरणार्थं तत्त्वैः सह न्याय्यबटनसमूहाः <button>
) अथवा एकं पतनं भवति ।
तदतिरिक्तं समूहेभ्यः उपकरणपट्टिकाभ्यः च स्पष्टं लेबलं दातव्यं, यतः अधिकांशसहायकप्रौद्योगिकयः अन्यथा तान् न घोषयिष्यन्ति, सम्यक् role
विशेषतायाः उपस्थितेः अभावेऽपि अत्र प्रदत्तेषु उदाहरणेषु वयं , इति उपयुञ्ज्महे aria-label
, परन्तु इत्यादयः विकल्पाः aria-labelledby
अपि उपयोक्तुं शक्यन्ते ।
मूलभूत उदाहरणम्
.btn
in इत्यनेन बटन्-श्रृङ्खलां वेष्टयन्तु .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">
एकं मध्ये सेट्स् संयोजयन्तु ।<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
। फलतः, Bootstrap कृते भवतः अनुकूलनस्य आधारेण, भवान् सीमां निष्कासयितुं वा पुनः वर्णयितुं वा इच्छति ।
IE8 तथा सीमाएँ
Internet Explorer 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>
तत्वैः सह न्याय्यबटनसमूहानां उपयोगाय , भवद्भिः प्रत्येकं बटनं बटनसमूहे वेष्टितव्यम् । अधिकांशः ब्राउजर् तत्त्वानां न्याय्यतायै अस्माकं 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
सम्यक् मेनू मार्कअपं प्रदातुं ड्रॉप् डाउन मेनू ट्रिगर कर्तुं कस्यापि बटनस्य उपयोगं कुर्वन्तु ।
प्लगइन निर्भरता
बटन् ड्रॉप् डाउन्स् कृते ड्रॉप् डाउन प्लगिन् भवतः Bootstrap इत्यस्य संस्करणे समाविष्टं कर्तुं आवश्यकम् अस्ति ।
एकल बटन ड्रॉपडाउन
केनचित् मूलभूतमार्कअपपरिवर्तनेन सह एकं बटनं ड्रॉपडाउन टॉग्ले परिवर्तयन्तु ।
मूलभूतम्
प्राथमिक
सफलता
इन्फो
चेतवानी
संकट
<!-- 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 बटन ड्रॉप् डाउन रचयन्तु, केवलं पृथक् बटनेन सह ।
मूलभूतम्
ड्रॉपडाउन टॉगल करें
प्राथमिक
ड्रॉपडाउन टॉगल करें
सफलता
ड्रॉपडाउन टॉगल करें
इन्फो
ड्रॉपडाउन टॉगल करें
चेतवानी
ड्रॉपडाउन टॉगल करें
संकट
ड्रॉपडाउन टॉगल करें
<!-- 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>
यतः ते WebKit ब्राउजर् मध्ये पूर्णतया शैलीं कर्तुं न शक्नुवन्ति ।
<textarea>
अत्र तत्त्वानां प्रयोगं परिहरन्तु यतः तेषां rows
विशेषणं केषुचित् सन्दर्भेषु न सम्माननीयं भविष्यति ।
इनपुट् समूहेषु Tooltips & popovers इत्यस्य विशेषसेटिंग् आवश्यकम् अस्ति
an इत्यस्य अन्तः तत्त्वेषु टूल्टिप्स अथवा पोपोवर्स् इत्यस्य उपयोगं कुर्वन् .input-group
, भवद्भिः अवांछितदुष्प्रभावान् container: 'body'
परिहरितुं विकल्पं निर्दिष्टव्यं भविष्यति (यथा तत्त्वस्य विस्तृतं वर्धनं तथा/वा टूल्टिप् अथवा पोपोवर इत्यस्य प्रवर्तने सति तस्य गोलकोणानि नष्टं भवति)
एकं निवेशस्य उभयतः एकं add-on अथवा बटनं स्थापयन्तु । भवन्तः अपि निवेशस्य उभयतः एकं स्थापयितुं शक्नुवन्ति ।
वयं एकस्मिन् पक्षे बहुविध-अड-ऑन्स् ( .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>
यद्यपि भवन्तः प्रतिपक्षं केवलं एकं add-on भवितुं शक्नुवन्ति, तथापि भवन्तः एकस्य अन्तः बहुविधं बटन् भवितुं शक्नुवन्ति .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>
Bootstrap इत्यस्मिन् उपलभ्यमानाः Navs इत्यत्र आधारवर्गात् आरभ्य साझाः मार्कअपः अस्ति, .nav
तथैव साझास्थितयः अपि सन्ति । प्रत्येकशैल्याः मध्ये स्विच् कर्तुं परिवर्तकवर्गान् स्वैप् कुर्वन्तु ।
tab panels कृते navs इत्यस्य उपयोगाय JavaScript tabs plugin इत्यस्य आवश्यकता वर्तते
टैब-योग्यक्षेत्रैः सह ट्याब्स् कृते, भवद्भिः ट्याब्स् JavaScript प्लगिन् इत्यस्य उपयोगः अवश्यं करणीयः । मार्कअप कृते अतिरिक्तानि ARIA विशेषतानि अपि आवश्यकानि भविष्यन्ति – अधिकविवरणार्थं role
प्लगिन् इत्यस्य उदाहरणमार्कअपं पश्यन्तु ।
नेविगेशनरूपेण उपयुज्यमानाः navs सुलभाः कुर्वन्तु
यदि भवान् नेविगेशन-पट्टिकां प्रदातुं navs इत्यस्य उपयोगं करोति तर्हि , role="navigation"
इत्यस्य सर्वाधिक-तार्किक-मूल-पात्रे a अवश्यं योजयन्तु <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 इत्यस्मात् विस्तृतेषु स्क्रीनषु स्वस्य मातापितृस्य समानविस्तारं कुर्वन्तु with .nav-justified
. लघुपट्टिकासु nav लिङ्क्स् स्तम्भिताः भवन्ति ।
न्याय्यं navbar nav लिङ्कानि सम्प्रति समर्थितानि न सन्ति।
सफारी एवं प्रतिक्रियाशील जायज नवस
v9.1.2 तः, Safari एकं दोषं प्रदर्शयति यस्मिन् भवतः ब्राउजर् क्षैतिजरूपेण परिवर्तयितुं न्याय्य nav मध्ये प्रतिपादनदोषाः भवन्ति ये ताजगीं कृत्वा स्वच्छाः भवन्ति इदं दोषं justified nav उदाहरणे अपि दर्शितम् अस्ति |
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
अक्षमलिङ्कानि
कस्यचित् nav घटकस्य (टैब्स् वा गोल्यः) कृते, ग्रे लिङ्कानां .disabled
कृते योजयन्तु तथा च कोऽपि होवर प्रभावः नास्ति .
लिङ्क कार्यक्षमता प्रभाविता न
अयं वर्गः केवलं <a>
's स्वरूपं परिवर्तयिष्यति, न तु तस्य कार्यक्षमतां । अत्र लिङ्कानि निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् उपयुज्यताम् ।
<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>
पूर्वनिर्धारितं नवबारम्
नवबार्स् प्रतिक्रियाशीलमेटाघटकाः सन्ति ये भवतः अनुप्रयोगस्य अथवा साइट् कृते नेविगेशन हेडररूपेण कार्यं कुर्वन्ति । ते चलदृश्येषु संकुचिताः (तथा च टॉगल-योग्याः) आरभन्ते तथा च यथा यथा उपलब्धं दृश्य-पोर्ट्-विस्तारं वर्धते तथा तथा क्षैतिजं भवन्ति ।
न्याय्यं navbar nav लिङ्कानि सम्प्रति समर्थितानि न सन्ति।
अतिप्रवाहित सामग्री
यतः Bootstrap न जानाति यत् भवतः navbar मध्ये सामग्रीं कियत् स्थानस्य आवश्यकता अस्ति, भवन्तः द्वितीयपङ्क्तौ सामग्रीवेष्टनस्य समस्यां प्राप्नुवन्ति । एतस्य समाधानार्थं भवान् कर्तुं शक्नोति : १.
नवबार-वस्तूनाम् मात्रां वा विस्तारं वा न्यूनीकरोतु ।
प्रतिक्रियाशील-उपयोगितावर्गाणां उपयोगेन कतिपयेषु स्क्रीन-आकारेषु कतिपयानि नवबार-वस्तूनि गोपयन्तु |
यस्मिन् बिन्दौ भवतः navbar collapsed तथा horizontal mode मध्ये स्विच करोति तत् परिवर्तयन्तु । चर अनुकूलितं कुर्वन्तु @grid-float-breakpoint
अथवा स्वकीयं मीडिया प्रश्नं योजयन्तु।
जावास्क्रिप्ट् प्लगइन् आवश्यकम्
यदि जावास्क्रिप्ट् अक्षमम् अस्ति तथा च दृश्यपोर्ट् पर्याप्तं संकीर्णं भवति यत् नवबारः संकुचितः भवति तर्हि नवपट्टिकां विस्तारयितुं तथा च अन्तः सामग्रीं द्रष्टुं असम्भवं भविष्यति .navbar-collapse
।
प्रतिक्रियाशील navbar कृते collapse प्लगिन् भवतः Bootstrap संस्करणे समाविष्टं कर्तुं आवश्यकम् अस्ति ।
संकुचितं चलनवबारविरामबिन्दुं परिवर्तयति
नवबारः यदा दृश्यपोर्ट् - इत्यस्मात् संकीर्णः भवति तदा स्वस्य ऊर्ध्वाधर-चल-दृश्ये संकुचति @grid-float-breakpoint
, तथा च यदा दृश्य-पोर्ट् न्यूनातिन्यूनं विस्तारे भवति तदा तस्य क्षैतिज-अचल-दृश्ये @grid-float-breakpoint
विस्तारं करोति navbar कदा संकुचितः/विस्तारितः भवति इति नियन्त्रयितुं Less source मध्ये एतत् चरं समायोजयन्तु । पूर्वनिर्धारितं मूल्यं 768px
(लघुतमं "लघु" अथवा "गोली" पटलम्) अस्ति ।
नवबार को सुलभ बनाये
एकं तत्त्वस्य उपयोगं अवश्यं कुर्वन्तु <nav>
अथवा, यदि a इत्यादिकं अधिकं सामान्यं तत्त्वं उपयुज्यते तर्हि प्रत्येकं नवबारं प्रति <div>
a योजयन्तु यत् 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>
ब्राण्ड छवि
navbar ब्राण्ड् इत्यस्य स्थाने स्वस्य प्रतिबिम्बेन पाठं स्वैप् कृत्वा <img>
. यतः the .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 सामग्रीयाः अन्तः कुत्र निवसति इति निर्णयार्थं संरेखणविकल्पानां उपयोगं कुर्वन्तु ।
एकः हेड्स् अप इव, via mixin इत्यनेन .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>
सन्दर्भविशिष्टप्रयोगः
यथा standard button classes , on and elements .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
or .navbar-right
उपयोगितावर्गाणां उपयोगेन, nav लिङ्कानि, प्रपत्राणि, बटनानि, पाठं वा संरेखयन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति । यथा, nav लिङ्क्स् संरेखयितुं, तान् पृथक् मध्ये स्थापयन्तु <ul>
यत्र तत्तत् उपयोगितावर्गः प्रयुक्तः अस्ति ।
एते वर्गाः and , इत्यस्य mixin-ed संस्करणाः सन्ति .pull-left
, .pull-right
परन्तु ते उपकरणस्य आकारेषु navbar घटकानां सुलभतया नियन्त्रणार्थं मीडियाप्रश्नानां कृते व्याप्ताः सन्ति ।
अनेक घटकों को सही संरेखित करना
नवबारेषु सम्प्रति बहुवर्गैः सह सीमा अस्ति .navbar-right
। सामग्रीं सम्यक् स्पेस कर्तुं वयं अन्तिमे .navbar-right
एलिमेण्ट् उपरि negative margin इत्यस्य उपयोगं कुर्मः । यदा तस्य वर्गस्य उपयोगेन बहुविधाः तत्त्वानि सन्ति तदा एते मार्जिन्स् यथा अभिप्रेतम् कार्यं न कुर्वन्ति ।
यदा वयं v4 मध्ये तत् घटकं पुनः लिखितुं शक्नुमः तदा वयं एतत् पुनः आगमिष्यामः ।
शीर्ष पर स्थिर
a or to center तथा pad navbar सामग्री को जोड़ें .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 ; }
कोर Bootstrap CSS इत्यस्य अनन्तरं एतत् अवश्यं समाविष्टं कुर्वन्तु ।
अधः स्थिरम्
a or to center तथा pad navbar सामग्री को जोड़ें .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 ; }
कोर Bootstrap CSS इत्यस्य अनन्तरं एतत् अवश्यं समाविष्टं कुर्वन्तु ।
स्थिर शीर्ष
एकं पूर्ण-विस्तारं नवबारं रचयन्तु यत् पृष्ठेन सह दूरं स्क्रॉलं कृत्वा .navbar-static-top
एकं .container
or .container-fluid
to center तथा च navbar सामग्रीं पैड कृत्वा समाविष्टं करोति ।
वर्गाणां विपरीतम् .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>
अक्षम एवं सक्रिय अवस्थाएँ
लिङ्कानि भिन्नपरिस्थितिषु अनुकूलनीयानि सन्ति। अक्लिक् कर्तुं .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>
उदाहरण
उदाहरण शीर्षक New
उदाहरण शीर्षक New
उदाहरण शीर्षक New
उदाहरण शीर्षक New
उदाहरण शीर्षक New
उदाहरण शीर्षक New
<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 to links, Bootstrap navs, इत्यादीनि च योजयित्वा नूतनानि अथवा अपठितानि वस्तूनि सहजतया प्रकाशयन्तु ।
<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
चयनकर्ताद्वारा) यद्यपि अन्तः कोऽपि सामग्री नास्ति ।
क्रॉस-ब्राउजर संगतता
Internet Explorer 8 इत्यस्मिन् बिल्लाः स्वयमेव न पतिष्यन्ति यतोहि चयनकस्य समर्थनस्य अभावः अस्ति :empty
।
सक्रिय nav अवस्थाओं के अनुकूल होता है
गोली नेविगेशनेषु सक्रियराज्येषु बिल्लानि स्थापयितुं अन्तः निर्मितशैल्याः समाविष्टाः सन्ति ।
<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>
एकः लघुः, लचीलः घटकः यः वैकल्पिकरूपेण सम्पूर्णं viewport विस्तारयितुं शक्नोति यत् भवतः साइट् मध्ये मुख्यसामग्री प्रदर्शयितुं शक्नोति।
नमस्कार, जगत् !
इदं सरलं नायक-एककं, विशेष-सामग्री-सूचनायां वा अतिरिक्तं ध्यानं आकर्षयितुं सरलं जम्बोट्रॉन्-शैली-घटकम् अस्ति ।
अधिकं ज्ञातुं शक्नुवन्ति
<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>
जम्बोट्रोन् पूर्णविस्तारं कर्तुं, तथा च गोलकोणानि विना, सर्वेषां s बहिः स्थापयन्तु तस्य स्थाने अन्तः .container
एकं योजयन्तु ।.container
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
h1
पृष्ठे सामग्रीखण्डान् समुचितरूपेण स्पेस आउट् कर्तुं खण्डयितुं च सरलं शेल् । h1
इदं 's पूर्वनिर्धारिततत्त्वस्य small
, तथैव अन्येषां अधिकांशघटकानाम् (अतिरिक्तशैल्याः सह) उपयोगं कर्तुं शक्नोति ।
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
चित्राणि, विडियो, पाठः, इत्यादीनां जालपुटानि सुलभतया प्रदर्शयितुं लघुचित्रघटकेन सह Bootstrap इत्यस्य जालप्रणालीं विस्तारयन्तु ।
यदि भवान् भिन्न-भिन्न-उच्चतायाः/विस्तारस्य च लघुचित्रस्य Pinterest-सदृशं प्रस्तुतिम् इच्छति तर्हि भवान् तृतीय-पक्षस्य प्लगइन-इत्यस्य उपयोगं कर्तुं प्रवृत्तः भविष्यति यथा Masonry , Isotope , अथवा Salvattore
पूर्वनिर्धारितं उदाहरणम्
पूर्वनिर्धारितरूपेण, Bootstrap इत्यस्य लघुचित्रं न्यूनतमेन आवश्यकेन मार्कअपेन सह लिङ्क् कृतानि चित्राणि प्रदर्शयितुं डिजाइनं कृतम् अस्ति ।
<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 में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.
कड्मल कड्मल
लघुचित्र लेबल
Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.
कड्मल कड्मल
लघुचित्र लेबल
Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.
कड्मल कड्मल
<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>
अलर्ट्स् मध्ये लिङ्कानि
.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 इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति । ओपेरा १२ एनिमेशनं समर्थयति नास्ति ।
सामग्री सुरक्षा नीति (CSP) संगतता
यदि भवतः वेबसाइट् मध्ये सामग्रीसुरक्षानीतिः (CSP) अस्ति या अनुमन्यते न style-src 'unsafe-inline'
, तर्हि भवन्तः style
प्रगतिपट्टिकाविस्तारं सेट् कर्तुं अन्तःरेखाविशेषतानां उपयोगं कर्तुं न शक्नुवन्ति यथा अधः अस्माकं उदाहरणेषु दर्शितम्। कठोर CSPs इत्यनेन सह संगतानि विस्ताराणि सेट् कर्तुं वैकल्पिकविधयः किञ्चित् कस्टम् JavaScript (that sets 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>
with वर्गं निष्कासयन्तु ।.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
प्रगतिपट्टिकायां a योजयितुं विचारयन्तु ।
<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>
सजीवः
पट्टिकाः दक्षिणतः वामतः सजीवं कर्तुं Add .active
to । .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 इत्यत्र the इत्यत्र .media-right
स्थापनीयम् ।.media-body
चित्राणि अन्ये वा माध्यमानि उपरि, मध्यं, अधः वा संरेखितुं शक्यन्ते । पूर्वनिर्धारितं शीर्षसंरेखितम् अस्ति ।
<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>
किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, भवान् सूचीयाः अन्तः मीडिया (टिप्पणीसूत्राणां वा लेखसूचीनां वा कृते उपयोगी) उपयोक्तुं शक्नोति ।
<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 ।
क्रास जस्टो ओडियो
Dapibus ac सुविधा in
Morbi leo risus इति
पोर्टा 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>
बैज
कस्मिन् अपि list group item मध्ये badges घटकं योजयन्तु ततः स्वयमेव दक्षिणभागे स्थितं भविष्यति ।
१४ क्रास जस्टो ओडियो
२ Dapibus ac सुविधा in
१ Morbi leo risus इति
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
लिङ्क् कृतानि वस्तूनि
सूचीवस्तूनाम् स्थाने anchor tags इत्यस्य उपयोगेन सूचीसमूहवस्तूनाम् लिङ्क् कुर्वन्तु (तस्य अर्थः अपि अस्ति एकस्य <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
क्रास जस्टो ओडियो
Dapibus ac सुविधा in
Morbi leo risus इति
पोर्टा ac consectetur ac
वेस्टिबुलम एट इरोस
<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 सुविधा in
क्रास बैठामेत निभ लिबेरो
पोर्टा 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>
- इत्यस्य font ��काराः <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
निर्बाधडिजाइनार्थं पटलस्य अन्तः किमपि असीमायुक्तं योजयन्तु । यदि a अस्ति तर्हि .panel-body
पृथक्करणार्थं वयं सारणीयाः उपरि अतिरिक्तं सीमां योजयामः ।
फलक शीर्षक
अत्र काश्चन पूर्वनिर्धारितपटलसामग्री। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Aenean lacinia bibendum nulla सेड consectetur. एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम. Nullam id dolor id nibh ultrices vehicula उत id elit.
# .
प्रथम नाम्ना
अंतिम नाम्ना
उपयोक्तृनाम
१
मार्क
ओटो
@मडो
२
याकूबः
थॉर्न्टन इति
@स्थूलः
३
ल्यारी
the Bird इति
@ twitter इति
<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>
यदि panel body नास्ति तर्हि घटकः panel header तः table मध्ये विना व्यत्ययं गच्छति ।
फलक शीर्षक
# .
प्रथम नाम्ना
अंतिम नाम्ना
उपयोक्तृनाम
१
मार्क
ओटो
@मडो
२
याकूबः
थॉर्न्टन इति
@स्थूलः
३
ल्यारी
the Bird इति
@ twitter इति
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
सूचीसमूहैः सह
कस्यापि फलकस्य अन्तः पूर्णविस्तारसूचीसमूहान् सहजतया समावेशयन्तु ।
फलक शीर्षक
अत्र काश्चन पूर्वनिर्धारितपटलसामग्री। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Aenean lacinia bibendum nulla सेड consectetur. एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम. Nullam id dolor id nibh ultrices vehicula उत id elit.
क्रास जस्टो ओडियो
Dapibus ac सुविधा in
Morbi leo risus इति
पोर्टा 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"
भवता भवतः s मध्ये समावेशस्य आवश्यकता नास्ति <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>