घटकाः
एकदर्जनाधिकाः पुनःप्रयोज्यघटकाः प्रतिमाचित्रणं, ड्रॉपडाउन्स्, इनपुट् समूहाः, नेविगेशनं, अलर्ट्, इत्यादीनि बहुधा प्रदातुं निर्मिताः सन्ति ।
एकदर्जनाधिकाः पुनःप्रयोज्यघटकाः प्रतिमाचित्रणं, ड्रॉपडाउन्स्, इनपुट् समूहाः, नेविगेशनं, अलर्ट्, इत्यादीनि बहुधा प्रदातुं निर्मिताः सन्ति ।
Glyphicon Halflings सेट् तः font प्रारूपे 250 तः अधिकानि ग्लिफ्-पत्राणि समाविष्टानि सन्ति । Glyphicons Halflings सामान्यतया निःशुल्कं न प्राप्यते, परन्तु तेषां निर्माता Bootstrap कृते निःशुल्कं उपलब्धं कृतवान् अस्ति । धन्यवादरूपेण वयं केवलं याचयामः यत् यदा सम्भवं तदा Glyphicons इत्यस्य पुनः लिङ्कं समावेशयतु।
कार्यप्रदर्शनकारणात् सर्वेषु चिह्नेषु आधारवर्गस्य व्यक्तिगतचिह्नवर्गस्य च आवश्यकता भवति । उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु । सम्यक् पैडिंग् कृते चिह्नस्य पाठस्य च मध्ये एकं स्थानं अवश्यं त्यजन्तु ।
चिह्नवर्गाः अन्यैः घटकैः सह प्रत्यक्षतया संयोजितुं न शक्यन्ते । समानतत्त्वे अन्यैः वर्गैः सह न प्रयोक्तव्याः । तस्य स्थाने, एकं nested योजयन्तु <span>
तथा च चिह्नवर्गान् प्रयोजयन्तु <span>
।
चिह्नवर्गाः केवलं तेषु तत्त्वेषु उपयोक्तव्याः येषु पाठसामग्री नास्ति तथा च बालतत्त्वानि नास्ति ।
बूटस्ट्रैप् कल्पयति यत् चिह्न-फॉन्ट-सञ्चिकाः निर्देशिकायां स्थिताः भविष्यन्ति ../fonts/
, संकलित-CSS-सञ्चिकानां सापेक्षम् । तानि font सञ्चिकाः स्थानान्तरयितुं वा पुनर्नामकरणं वा कृत्वा CSS इत्यस्य अद्यतनीकरणं त्रयाणां मार्गानाम् एकेन प्रकारेण भवति ।
@icon-font-path
तथा/वा चरम् परिवर्तयन्तु ।@icon-font-name
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>
बटनसमूहेन सह एकस्मिन् पङ्क्तौ बटन्-श्रृङ्खलां एकत्र समूहयन्तु । अस्माकं बटन्स् प्लगिन् इत्यनेन वैकल्पिकं जावास्क्रिप्ट् रेडियो तथा चेकबॉक्स शैली व्यवहारं योजयन्तु |
a इत्यस्य अन्तः तत्त्वेषु टूल्टिप्स अथवा पोपोवर्स् इत्यस्य उपयोगं कुर्वन् .btn-group
, भवद्भिः अवांछितदुष्प्रभावान् container: 'body'
परिहरितुं विकल्पं निर्दिष्टव्यं भविष्यति (यथा तत्त्वस्य विस्तृतं वर्धनं तथा/वा टूल्टिप् अथवा पोपोवर इत्यस्य प्रवर्तने सति तस्य गोलकोणानि नष्टं भवति)
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 कृते भवतः अनुकूलनस्य आधारेण, भवान् सीमां निष्कासयितुं वा पुनः वर्णयितुं वा इच्छति ।
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>
तत्त्वैः सह<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
विशेषणं केषुचित् सन्दर्भेषु न सम्माननीयं भविष्यति ।
an इत्यस्य अन्तः तत्त्वेषु टूल्टिप्स अथवा पोपोवर्स् इत्यस्य उपयोगं कुर्वन् .input-group
, भवद्भिः अवांछितदुष्प्रभावान् container: 'body'
परिहरितुं विकल्पं निर्दिष्टव्यं भविष्यति (यथा तत्त्वस्य विस्तृतं वर्धनं तथा/वा टूल्टिप् अथवा पोपोवर इत्यस्य प्रवर्तने सति तस्य गोलकोणानि नष्टं भवति)
रूपसमूहान् अथवा जालस्तम्भवर्गान् प्रत्यक्षतया निवेशसमूहैः सह न मिश्रयन्तु । तस्य स्थाने, रूपसमूहस्य अथवा जालसम्बद्धस्य तत्त्वस्य अन्तः निवेशसमूहं नेस्ट् कुर्वन्तु ।
यदि भवान् प्रत्येकं निवेशस्य कृते लेबलं न समावेशयति तर्हि स्क्रीन रीडर्-भ्यः भवतः प्रपत्रेषु समस्या भविष्यति। एतेषां निवेशसमूहानां कृते, सुनिश्चितं कुर्वन्तु यत् किमपि अतिरिक्तं लेबलं वा कार्यक्षमतां वा सहायकप्रौद्योगिकीभ्यः प्रसारितं भवति।
प्रयोक्तव्या सटीकप्रविधिः ( <label>
दृश्यतत्त्वानि, वर्गस्य <label>
उपयोगेन निगूढाः तत्त्वानि , अथवा , , , अथवा विशेषतायाः उपयोगः) तथा च किं अतिरिक्तसूचनाः प्रसारणीयाः भविष्यन्ति, तत् भवता कार्यान्वितं सटीकप्रकारस्य अन्तरफलकविजेट् इत्यस्य आधारेण भिन्नं भविष्यति अस्मिन् खण्डे उदाहरणानि कतिपयानि सुझातानि, प्रकरणविशिष्टानि उपायानि प्रददति ।.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
एकं निवेशस्य उभयतः एकं 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
तथैव साझास्थितयः अपि सन्ति । प्रत्येकशैल्याः मध्ये स्विच् कर्तुं परिवर्तकवर्गान् स्वैप् कुर्वन्तु ।
ध्यानं कुर्वन्तु वर्गस्य आधारवर्गस्य .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 लिङ्कानि सम्प्रति समर्थितानि न सन्ति।
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
कस्यचित् nav घटकस्य (टैब्स् वा गोल्यः) कृते, ग्रे लिङ्कानां.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>
नवबार्स् प्रतिक्रियाशीलमेटाघटकाः सन्ति ये भवतः अनुप्रयोगस्य अथवा साइट् कृते नेविगेशन हेडररूपेण कार्यं कुर्वन्ति । ते चलदृश्येषु संकुचिताः (तथा च टॉगल-योग्याः) आरभन्ते तथा च यथा यथा उपलब्धं दृश्य-पोर्ट्-विस्तारं वर्धते तथा तथा क्षैतिजं भवन्ति ।
न्याय्यं navbar nav लिङ्कानि सम्प्रति समर्थितानि न सन्ति।
<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>
पाठस्य ताराः , इत्यनेन सह तत्त्वे वेष्टयन्तु .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 घटकानां सुलभतया नियन्त्रणार्थं मीडियाप्रश्नानां कृते व्याप्ताः सन्ति ।
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>
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>
एकं पूर्ण-विस्तारं नवबारं रचयन्तु यत् पृष्ठेन सह दूरं स्क्रॉलं कृत्वा .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>
पृष्ठकरणघटकं एकस्मिन् <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 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
।
गोली नेविगेशनेषु सक्रियराज्येषु बिल्लानि स्थापयितुं अन्तः निर्मितशैल्याः समाविष्टाः सन्ति ।
<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 सामग्रीं योजयितुं शक्यते ।
<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>
data attribute <button>
इत्यनेन सह element इत्यस्य उपयोगं अवश्यं कुर्वन्तु ।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 इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति । ओपेरा १२ एनिमेशनं समर्थयति नास्ति ।
यदि भवतः वेबसाइट् मध्ये सामग्रीसुरक्षानीतिः (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
चित्राणि अन्ये वा माध्यमानि उपरि, मध्यं, अधः वा संरेखितुं शक्यन्ते । पूर्वनिर्धारितं शीर्षसंरेखितम् अस्ति ।
क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.
डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus.
क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.
डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus.
क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.
डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद 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>
किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, भवान् सूचीयाः अन्तः मीडिया (टिप्पणीसूत्राणां वा लेखसूचीनां वा कृते उपयोगी) उपयोक्तुं शक्नोति ।
क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस 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>
कस्मिन् अपि list group item मध्ये badges घटकं योजयन्तु ततः स्वयमेव दक्षिणभागे स्थितं भविष्यति ।
<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
<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 नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Maecenas sed diam eget रिसुस वैरियस ब्लैंडिट।
Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Maecenas sed diam eget रिसुस वैरियस ब्लैंडिट।
Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Maecenas sed diam eget रिसुस वैरियस ब्लैंडिट।
<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.
<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>