अवयवहरू
आइकोनोग्राफी, ड्रपडाउनहरू, इनपुट समूहहरू, नेभिगेसन, अलर्टहरू, र अधिक प्रदान गर्नका लागि बनाइएको एक दर्जन भन्दा बढी पुन: प्रयोज्य कम्पोनेन्टहरू।
आइकोनोग्राफी, ड्रपडाउनहरू, इनपुट समूहहरू, नेभिगेसन, अलर्टहरू, र अधिक प्रदान गर्नका लागि बनाइएको एक दर्जन भन्दा बढी पुन: प्रयोज्य कम्पोनेन्टहरू।
Glyphicon Halflings सेटबाट फन्ट ढाँचामा 250 भन्दा बढी ग्लिफहरू समावेश गर्दछ। Glyphicons Halflings सामान्यतया नि: शुल्क उपलब्ध छैन, तर तिनीहरूको निर्माताले तिनीहरूलाई बुटस्ट्र्यापको लागि निःशुल्क उपलब्ध गराएको छ। धन्यवादको रूपमा, हामी केवल तपाईंले सम्भव भएसम्म Glyphicons मा लिंक समावेश गर्न अनुरोध गर्दछौं ।
कार्यसम्पादन कारणहरूका लागि, सबै आइकनहरूलाई आधार वर्ग र व्यक्तिगत प्रतिमा वर्ग चाहिन्छ। प्रयोग गर्नको लागि, तलको कोड लगभग कहीं पनि राख्नुहोस्। उचित प्याडिङका लागि प्रतिमा र पाठ बीचमा खाली ठाउँ छोड्न निश्चित हुनुहोस्।
प्रतिमा वर्गहरू अन्य कम्पोनेन्टहरूसँग प्रत्यक्ष रूपमा संयोजन गर्न सकिँदैन। तिनीहरू समान तत्वमा अन्य वर्गहरूसँग प्रयोग गर्नु हुँदैन। यसको सट्टा, एउटा नेस्टेड थप्नुहोस् <span>
र आइकन वर्गहरूमा लागू गर्नुहोस् <span>
।
आइकन वर्गहरू केवल पाठ सामग्री नभएको र बाल तत्वहरू नभएका तत्वहरूमा मात्र प्रयोग गरिनु पर्छ।
../fonts/
बुटस्ट्र्यापले आइकन फन्ट फाइलहरू डाइरेक्टरीमा कम्पाइल गरिएका CSS फाइलहरूको सापेक्षमा अवस्थित हुनेछ भनी मान्दछ । ती फन्ट फाइलहरू सार्नु वा पुन: नामाकरण गर्नु भनेको तीन मध्ये एउटा तरिकामा CSS अद्यावधिक गर्नु हो:
@icon-font-path
र/वा चरहरू परिवर्तन गर्नुहोस्।@icon-font-name
url()
कम्पाइल गरिएको CSS मा पथहरू परिवर्तन गर्नुहोस् ।तपाईको विशिष्ट विकास सेटअपलाई उपयुक्त हुने कुनै पनि विकल्प प्रयोग गर्नुहोस्।
सहायक प्रविधिहरूको आधुनिक संस्करणहरूले CSS उत्पन्न सामग्री, साथै विशिष्ट युनिकोड वर्णहरू घोषणा गर्नेछ। स्क्रिन रिडरहरूमा अनावश्यक र भ्रामक आउटपुटबाट बच्नको लागि (विशेष गरी जब आइकनहरू पूर्ण रूपमा सजावटको लागि प्रयोग गरिन्छ), हामी तिनीहरूलाई विशेषताको साथ aria-hidden="true"
लुकाउँछौं।
यदि तपाईंले अर्थ (सजावटको तत्वको रूपमा मात्र नभई) अभिव्यक्त गर्न आइकन प्रयोग गरिरहनुभएको छ भने, यो अर्थ सहायक प्रविधिहरूमा पनि बुझाइएको छ भन्ने कुरा सुनिश्चित गर्नुहोस् - उदाहरणका लागि, .sr-only
कक्षासँग भिजुअल रूपमा लुकेको अतिरिक्त सामग्री समावेश गर्नुहोस्।
यदि तपाइँ कुनै अन्य पाठ बिना नियन्त्रणहरू सिर्जना गर्दै हुनुहुन्छ (जस्तै <button>
कि केवल एक आइकन समावेश गर्दछ), तपाइँ सधैँ नियन्त्रणको उद्देश्य पहिचान गर्न वैकल्पिक सामग्री प्रदान गर्नुपर्छ, ताकि यसले सहायक प्रविधिहरूको प्रयोगकर्ताहरूलाई अर्थ दिन्छ। aria-label
यस अवस्थामा, तपाइँ नियन्त्रणमा नै विशेषता थप्न सक्नुहुन्छ ।
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
तिनीहरूलाई बटनहरूमा प्रयोग गर्नुहोस्, उपकरणपट्टी, नेभिगेसन, वा प्रीपेन्डेड फारम इनपुटहरूको लागि बटन समूहहरू।
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
यो त्रुटि सन्देश हो भनी बताउनको लागि अलर्टमा प्रयोग गरिएको आइकन , .sr-only
सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई यो सङ्केत प्रदान गर्न थप पाठ सहित।
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
लिङ्कहरूको सूचीहरू प्रदर्शन गर्नको लागि टगल गर्न मिल्ने, प्रासंगिक मेनु। ड्रपडाउन JavaScript प्लगइनसँग अन्तरक्रियात्मक बनाइयो ।
ड्रपडाउनको ट्रिगर र ड्रपडाउन मेनु भित्र र्याप गर्नुहोस् .dropdown
, वा घोषणा गर्ने अर्को तत्व position: relative;
। त्यसपछि मेनुको HTML थप्नुहोस्।
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ड्रपडाउन मेनुहरूलाई अभिभावकमा थपेर माथि (तलको सट्टा) विस्तार गर्न परिवर्तन गर्न सकिन्छ .dropup
।
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
पूर्वनिर्धारित रूपमा, ड्रपडाउन मेनु स्वचालित रूपमा 100% शीर्षबाट र यसको अभिभावकको बायाँ छेउमा राखिएको छ। ड्रपडाउन मेनुलाई दायाँ पङ्क्तिबद्ध .dropdown-menu-right
गर्न a मा थप्नुहोस् ।.dropdown-menu
ड्रपडाउनहरू स्वचालित रूपमा CSS मार्फत कागजातको सामान्य प्रवाह भित्र स्थित हुन्छन्। यसको मतलब ड्रपडाउनहरू अभिभावकहरूद्वारा निश्चित overflow
गुणहरू भएका वा भ्यूपोर्टको सीमा बाहिर देखिन सक्छन्। यी समस्याहरू उठ्ने बित्तिकै आफैंलाई सम्बोधन गर्नुहोस्।
.pull-right
पङ्क्तिबद्धताv3.1.0 को रूपमा, हामीले .pull-right
ड्रपडाउन मेनुहरूमा बहिष्कार गरेका छौं। मेनुलाई दायाँ पङ्क्तिबद्ध गर्न, प्रयोग गर्नुहोस् .dropdown-menu-right
। नेभबारमा दायाँ-पङ्क्तिबद्ध एनएभ कम्पोनेन्टहरूले मेनुलाई स्वचालित रूपमा पङ्क्तिबद्ध गर्न यस वर्गको मिक्सिन संस्करण प्रयोग गर्दछ। यसलाई ओभरराइड गर्न, प्रयोग गर्नुहोस् .dropdown-menu-left
।
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
कुनै पनि ड्रपडाउन मेनुमा कार्यहरूको खण्डहरू लेबल गर्न हेडर थप्नुहोस्।
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ड्रपडाउन मेनुमा लिङ्कहरूको अलग श्रृंखलामा एक विभाजक थप्नुहोस्।
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
लिङ्क असक्षम गर्न ड्रपडाउनमा .disabled
थप्नुहोस् ।<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
बटन समूहको साथ एउटै लाइनमा सँगै बटनहरूको श्रृंखला समूहबद्ध गर्नुहोस्। हाम्रो बटन प्लगइनको साथ वैकल्पिक JavaScript रेडियो र चेकबक्स शैली व्यवहार थप्नुहोस् ।
टुलटिपहरू वा पपओभरहरू भित्र तत्वहरूमा प्रयोग गर्दा .btn-group
, तपाईंले container: 'body'
अनावश्यक साइड इफेक्टहरू (जस्तै टुलटिप वा पपओभर ट्रिगर हुँदा तत्व फराकिलो हुने र/वा यसको गोलाकार कुनाहरू गुमाउनु)बाट बच्न विकल्प निर्दिष्ट गर्नुपर्नेछ।
role
र लेबल प्रदान गर्नुहोस्सहायक प्रविधिहरूका लागि - जस्तै स्क्रिन रिडरहरू - बटनहरूको शृङ्खलालाई समूहबद्ध गरिएको छ भनी बताउन, उपयुक्त role
विशेषता प्रदान गर्न आवश्यक छ। बटन समूहहरूको लागि, यो हुनेछ role="group"
, जबकि उपकरणपट्टीमा एक हुनुपर्छ role="toolbar"
।
एउटा अपवाद समूहहरू हुन् जसमा केवल एकल नियन्त्रण हुन्छ (उदाहरणका लागि तत्वहरू सहितको उचित बटन समूहहरू<button>
) वा ड्रपडाउन।
थप रूपमा, समूहहरू र उपकरणपट्टीहरूलाई स्पष्ट लेबल दिइनुपर्छ, किनकि धेरै सहायक प्रविधिहरूले सही role
विशेषताको उपस्थिति भएता पनि तिनीहरूलाई घोषणा गर्दैनन्। यहाँ प्रदान गरिएका उदाहरणहरूमा, हामी प्रयोग गर्छौं aria-label
, तर विकल्पहरू aria-labelledby
पनि प्रयोग गर्न सकिन्छ।
.btn
भित्र बटनहरूको श्रृंखला लपेट्नुहोस् .btn-group
।
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
थप जटिल कम्पोनेन्टहरूको लागि <div class="btn-group">
a मा सेटहरू मिलाउनुहोस् ।<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
समूहमा प्रत्येक बटनमा बटन साइजिङ वर्गहरू लागू गर्नुको सट्टा, धेरै समूहहरू नेस्ट गर्दा सहित .btn-group-*
प्रत्येकमा थप्नुहोस्।.btn-group
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
जब तपाईं ड्रपडाउन मेनुहरू बटनहरूको श्रृंखलासँग मिसाउन चाहनुहुन्छ भने .btn-group
अर्को भित्र राख्नुहोस् ।.btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
तेर्सो भन्दा ठाडो रूपमा स्ट्याक गरिएको बटनहरूको सेट बनाउनुहोस्। स्प्लिट बटन ड्रपडाउनहरू यहाँ समर्थित छैनन्।
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
बटनहरूको समूहलाई यसको अभिभावकको सम्पूर्ण चौडाइमा फैलाउन बराबर आकारमा तन्काउनुहोस्। बटन समूह भित्र बटन ड्रपडाउनहरूसँग पनि काम गर्दछ।
विशेष HTML र CSS को कारणले बटनहरूलाई उचित ठहराउन प्रयोग गरिन्छ (अर्थात display: table-cell
), तिनीहरू बीचको सीमानाहरू दोब्बर हुन्छन्। नियमित बटन समूहहरूमा, margin-left: -1px
तिनीहरूलाई हटाउनुको सट्टा किनाराहरू स्ट्याक गर्न प्रयोग गरिन्छ। यद्यपि, margin
संग काम गर्दैन display: table-cell
। नतिजाको रूपमा, बुटस्ट्र्यापमा तपाइँको अनुकूलनको आधारमा, तपाइँ सीमानाहरू हटाउन वा पुन: रङ गर्न चाहनुहुन्छ।
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
र उचित मेनु मार्कअप प्रदान गरेर ट्रिगर गर्न कुनै पनि बटन प्रयोग गर्नुहोस्।
बटन ड्रपडाउनहरूलाई तपाईंको बुटस्ट्र्यापको संस्करणमा ड्रपडाउन प्लगइन समावेश गर्न आवश्यक छ।
केही आधारभूत मार्कअप परिवर्तनहरूसँग ड्रपडाउन टगलमा बटन बदल्नुहोस्।
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
त्यसै गरी, एउटै मार्कअप परिवर्तनहरूसँग विभाजित बटन ड्रपडाउनहरू सिर्जना गर्नुहोस्, केवल एक अलग बटनको साथ।
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
बटन ड्रपडाउनहरू सबै आकारका बटनहरूसँग काम गर्छन्।
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
अभिभावकमा थपेर तत्वहरू माथिको ड्रपडाउन मेनु ट्रिगर गर्नुहोस् .dropup
।
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
कुनै पनि पाठ-आधारित पाठको अगाडि, पछि, वा दुवै छेउमा पाठ वा बटनहरू थपेर फारम नियन्त्रणहरू विस्तार गर्नुहोस् <input>
। .input-group
एक संग प्रयोग गर्नुहोस् .input-group-addon
वा .input-group-btn
एकलमा तत्वहरू जोड्न वा जोड्न .form-control
।
<input>
एस मात्रयहाँ तत्वहरू प्रयोग नगर्नुहोस् <select>
किनभने तिनीहरू WebKit ब्राउजरहरूमा पूर्ण रूपमा स्टाइल गर्न सकिँदैन।
<textarea>
यहाँ तत्वहरू प्रयोग नगर्नुहोस् किनकि तिनीहरूको rows
विशेषतालाई केही अवस्थामा सम्मान गरिने छैन।
एक भित्र तत्वहरूमा टूलटिपहरू वा पपओभरहरू प्रयोग गर्दा .input-group
, तपाईंले container: 'body'
अनावश्यक साइड इफेक्टहरू (जस्तै टुलटिप वा पपओभर ट्रिगर हुँदा तत्व फराकिलो हुने र/वा यसको गोलाकार कुनाहरू गुमाउनु)बाट बच्न विकल्प निर्दिष्ट गर्नुपर्नेछ।
फारम समूहहरू वा ग्रिड स्तम्भ वर्गहरू सिधै इनपुट समूहहरूसँग नमिलाउनुहोस्। यसको सट्टा, फारम समूह वा ग्रिड-सम्बन्धित तत्व भित्र इनपुट समूहलाई नेस्ट गर्नुहोस्।
यदि तपाईंले प्रत्येक इनपुटको लागि लेबल समावेश गर्नुभएन भने स्क्रिन रिडरहरूलाई तपाईंको फारमहरूमा समस्या हुनेछ। यी इनपुट समूहहरूको लागि, सुनिश्चित गर्नुहोस् कि कुनै पनि अतिरिक्त लेबल वा कार्यक्षमता सहायक टेक्नोलोजीहरूमा पठाइएको छ।
प्रयोग गरिनु पर्ने सटीक प्रविधि (दृश्य <label>
तत्वहरू, वर्ग <label>
प्रयोग गरेर लुकेका तत्वहरू , वा , , वा विशेषताको प्रयोग ) र कुन थप जानकारीहरू अवगत गर्न आवश्यक छ तपाईंले कार्यान्वयन गरिरहनुभएको इन्टरफेस विजेटको सही प्रकारको आधारमा फरक पर्नेछ। यस खण्डका उदाहरणहरूले केही सुझाव गरिएका, केस-विशिष्ट दृष्टिकोणहरू प्रदान गर्छन्।.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
इनपुटको दुबै छेउमा एउटा एड-अन वा बटन राख्नुहोस्। तपाईंले इनपुटको दुबै छेउमा एउटा पनि राख्न सक्नुहुन्छ।
हामी एकल पक्षमा धेरै एड-अन ( .input-group-addon
वा ) समर्थन गर्दैनौं ।.input-group-btn
हामी एउटै इनपुट समूहमा धेरै फारम-नियन्त्रणहरूलाई समर्थन गर्दैनौं।
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
सापेक्ष फारम साइजिङ वर्गहरू थप्नुहोस्.input-group
आफैमा थप्नुहोस् र भित्रका सामग्रीहरू स्वचालित रूपमा रिसाइज हुनेछ - प्रत्येक तत्वमा फारम नियन्त्रण आकार वर्गहरू दोहोर्याउन आवश्यक पर्दैन।
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
पाठको सट्टा इनपुट समूहको एडअन भित्र कुनै पनि चेकबक्स वा रेडियो विकल्प राख्नुहोस्।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
इनपुट समूहहरूमा बटनहरू अलि फरक छन् र नेस्टिङको एक अतिरिक्त स्तर चाहिन्छ। यसको सट्टा .input-group-addon
, तपाईंले .input-group-btn
बटनहरू लपेट्न प्रयोग गर्न आवश्यक छ। यो पूर्वनिर्धारित ब्राउजर शैलीहरूको कारण आवश्यक छ जुन ओभरराइड गर्न सकिँदैन।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
जब तपाईंसँग प्रति छेउमा एउटा मात्र एड-अन हुन सक्छ, तपाईं एकल भित्र धेरै बटनहरू हुन सक्नुहुन्छ .input-group-btn
।
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
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 भन्दा फराकिलो स्क्रिनहरूमा सजिलैसँग ट्याबहरू वा गोलीहरू तिनीहरूको अभिभावकको बराबर चौडाइहरू बनाउनुहोस् .nav-justified
। साना स्क्रिनहरूमा, एनएभि लिङ्कहरू स्ट्याक गरिएका छन्।
उचित navbar एनएभि लिङ्कहरू हाल समर्थित छैनन्।
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
कुनै पनि एनएभ कम्पोनेन्ट (ट्याब वा चक्कीहरू) को .disabled
लागि , खैरो लिङ्कहरू थप्नुहोस् र कुनै होभर प्रभावहरू छैनन् ।
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
थोरै अतिरिक्त HTML र ड्रपडाउनहरू JavaScript प्लगइनको साथ ड्रपडाउन मेनुहरू थप्नुहोस् ।
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
नेभबारहरू उत्तरदायी मेटा कम्पोनेन्टहरू हुन् जसले तपाईंको एप्लिकेसन वा साइटका लागि नेभिगेसन हेडरको रूपमा सेवा गर्दछ। तिनीहरू मोबाइल दृश्यहरूमा पतन हुन थाल्छन् (र टगल गर्न योग्य छन्) र उपलब्ध भ्यूपोर्ट चौडाइ बढ्दै जाँदा तेर्सो हुन्छन्।
उचित navbar एनएभि लिङ्कहरू हाल समर्थित छैनन्।
<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>
। किनकि .navbar-brand
यसको आफ्नै प्याडिङ र उचाइ छ, तपाईंले आफ्नो छविको आधारमा केही CSS ओभरराइड गर्न आवश्यक पर्दछ।
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
.navbar-form
उपयुक्त ठाडो पङ्क्तिबद्धता र साँघुरो दृश्यपोर्टहरूमा संक्षिप्त व्यवहारको लागि भित्र फारम सामग्री राख्नुहोस् । यो navbar सामग्री भित्र कहाँ रहन्छ निर्णय गर्न पङ्क्तिबद्ध विकल्पहरू प्रयोग गर्नुहोस्।
हेड अपको रूपमा, मिक्सिन मार्फत .navbar-form
यसको धेरै कोड साझा गर्दछ । केही फारम नियन्त्रणहरू, जस्तै इनपुट समूहहरू, निश्चित चौडाइहरू नेभबार भित्र ठीकसँग देखाउन आवश्यक हुन सक्छ।.form-inline
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
नभबारमा ठाडो रूपमा केन्द्रमा राख्नका लागि a मा नबस्ने तत्वहरूमा .navbar-btn
वर्ग थप्नुहोस् ।<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
उचित अग्रगामी र रङको लागि .navbar-text
सामान्यतया ट्यागमा एउटा तत्वमा पाठको स्ट्रिङहरू र्याप गर्नुहोस् ।<p>
<p class="navbar-text">Signed in as Mark Otto</p>
नियमित navbar नेभिगेसन कम्पोनेन्ट भित्र नभएका मानक लिङ्कहरू प्रयोग गर्ने मान्छेहरूका .navbar-link
लागि, पूर्वनिर्धारित र inverse navbar विकल्पहरूको लागि उपयुक्त रङहरू थप्नको लागि वर्ग प्रयोग गर्नुहोस्।
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
वा .navbar-right
उपयोगिता वर्गहरू प्रयोग गरेर एनएभि लिङ्कहरू, फारमहरू, बटनहरू, वा पाठ पङ्क्तिबद्ध गर्नुहोस् । दुबै वर्गहरूले निर्दिष्ट दिशामा CSS फ्लोट थप्नेछन्। उदाहरणका लागि, एनएभि लिङ्कहरू पङ्क्तिबद्ध गर्न, तिनीहरूलाई <ul>
सम्बन्धित उपयोगिता वर्गसँग अलग राख्नुहोस्।
यी वर्गहरू .pull-left
र को मिक्सिन-एड संस्करणहरू हुन् .pull-right
, तर तिनीहरू यन्त्र आकारहरूमा नेभबार कम्पोनेन्टहरूको सजिलो ह्यान्डलिङको लागि मिडिया क्वेरीहरूमा स्कोप गरिएका छन्।
केन्द्र र प्याड नवबार सामग्री थप्नुहोस् .navbar-fixed-top
र समावेश .container
गर्नुहोस् ।.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
केन्द्र र प्याड नवबार सामग्री थप्नुहोस् .navbar-fixed-bottom
र समावेश .container
गर्नुहोस् ।.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
एक वा केन्द्र र प्याड नेभबार सामग्री थपेर .navbar-static-top
र समावेश गरेर पृष्ठको साथ स्क्रोल गर्ने पूर्ण-चौडाइको नेभबार सिर्जना गर्नुहोस्।.container
.container-fluid
कक्षाहरूको विपरीत .navbar-fixed-*
, तपाईंले मा कुनै पनि प्याडिङ परिवर्तन गर्न आवश्यक छैन body
।
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
थपेर नवबारको रूप परिमार्जन गर्नुहोस् .navbar-inverse
।
<nav class="navbar navbar-inverse">
...
</nav>
नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस्।
सेपरेटरहरू स्वचालित रूपमा CSS मा :before
र मार्फत थपिन्छन् content
।
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
बहु-पृष्ठ पृष्ठांकन कम्पोनेन्ट, वा सरल पेजर विकल्पको साथ तपाईंको साइट वा एपको लागि पृष्ठांकन लिङ्कहरू प्रदान गर्नुहोस् ।
Rdio द्वारा प्रेरित सरल पृष्ठांकन, अनुप्रयोगहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
पृष्ठांकन कम्पोनेन्टलाई स्क्रिन रिडरहरू र अन्य सहायक प्रविधिहरूमा नेभिगेसन खण्डको रूपमा पहिचान गर्न तत्वमा बेरिएको हुनुपर्छ । थप रूपमा, पृष्ठमा पहिले नै एक भन्दा बढी त्यस्ता नेभिगेसन खण्डहरू (जस्तै हेडरमा प्राथमिक नेभिगेसन, वा साइडबार नेभिगेसन) हुन सक्ने सम्भावना भएकोले, यसको उद्देश्य प्रतिबिम्बित गर्ने वर्णनात्मक aria-label
प्रदान गर्न सल्लाह दिइन्छ। <nav>
उदाहरण को लागी, यदि पृष्ठांकन घटक खोज परिणाम को एक सेट को बीच नेभिगेट गर्न को लागी प्रयोग गरिन्छ, एक उपयुक्त लेबल हुन सक्छ aria-label="Search results pages"
।
लिङ्कहरू विभिन्न परिस्थितिहरूको लागि अनुकूलन योग्य छन्। .disabled
क्लिक गर्न नसकिने लिङ्कहरूको लागि र .active
हालको पृष्ठ संकेत गर्न प्रयोग गर्नुहोस्।
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
हामी सुझाव दिन्छौं कि तपाईले सक्रिय वा असक्षम एङ्करहरू स्वैप गर्नुहोस् <span>
, वा अघिल्लो/अर्को तीरहरूको मामलामा एङ्कर छोड्नुहोस्, इच्छित शैलीहरू कायम राख्दा क्लिक कार्यक्षमता हटाउन।
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
फेन्सी ठूलो वा सानो पृष्ठांकन? थप्नुहोस् .pagination-lg
वा .pagination-sm
थप आकारहरूको लागि।
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
हल्का मार्कअप र शैलीहरूको साथ सरल पृष्ठांकन कार्यान्वयनका लागि द्रुत अघिल्लो र अर्को लिङ्कहरू। यो ब्लग वा पत्रिका जस्ता साधारण साइटहरूको लागि उत्कृष्ट छ।
पूर्वनिर्धारित रूपमा, पेजर केन्द्रहरू लिङ्कहरू।
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
वैकल्पिक रूपमा, तपाइँ प्रत्येक लिङ्कलाई छेउमा पङ्क्तिबद्ध गर्न सक्नुहुन्छ:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
पेजर लिङ्कहरूले .disabled
पृष्ठांकनबाट सामान्य उपयोगिता वर्ग पनि प्रयोग गर्दछ।
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
लेबलको रूप परिवर्तन गर्न तल उल्लेखित परिमार्जनक वर्गहरू मध्ये कुनै पनि थप्नुहोस्।
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
रेन्डरिङ समस्याहरू उत्पन्न हुन सक्छ जब तपाईंसँग साँघुरो कन्टेनर भित्र दर्जनौं इनलाइन लेबलहरू हुन्छन्, प्रत्येकमा यसको आफ्नै inline-block
तत्व (जस्तै आइकन) समावेश हुन्छ। यो वरिपरि बाटो सेटिङ छ display: inline-block;
। सन्दर्भ र उदाहरणको लागि, #13219 हेर्नुहोस् ।
<span class="badge">
लिङ्कहरू, 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>
एक हल्का, लचिलो कम्पोनेन्ट जसले वैकल्पिक रूपमा तपाईंको साइटमा मुख्य सामग्री प्रदर्शन गर्न सम्पूर्ण भ्यूपोर्ट विस्तार गर्न सक्छ।
यो एक साधारण नायक एकाई हो, एक साधारण जम्बोट्रोन-शैली कम्पोनेन्ट विशेष सामग्री वा जानकारीमा थप ध्यान दिनको लागि।
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
जम्बोट्रोन पूर्ण चौडाइ बनाउन र गोलाकार कुनाहरू बिना, यसलाई सबै .container
s बाहिर राख्नुहोस् र यसको सट्टा .container
भित्र थप्नुहोस्।
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा स्पेस आउट गर्न र खण्डहरू विभाजन गर्नको लागि एउटा साधारण शेल । यसले h1
'को पूर्वनिर्धारित small
तत्व, साथै अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
बुटस्ट्र्यापको ग्रिड प्रणालीलाई थम्बनेल कम्पोनेन्टको साथ विस्तार गर्नुहोस् सजिलैसँग छविहरू, भिडियोहरू, पाठ, र थपको ग्रिडहरू प्रदर्शन गर्न।
यदि तपाईं फरक उचाइ र/वा चौडाइहरूको थम्बनेलहरूको Pinterest-जस्तो प्रस्तुति खोज्दै हुनुहुन्छ भने, तपाईंले मेसनरी, आइसोटोप, वा साल्वाटोर जस्ता तेस्रो-पक्ष प्लगइन प्रयोग गर्न आवश्यक छ ।
पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
मुठ्ठीभर उपलब्ध र लचिलो अलर्ट सन्देशहरूको साथ सामान्य प्रयोगकर्ता कार्यहरूको लागि प्रासंगिक प्रतिक्रिया सन्देशहरू प्रदान गर्नुहोस्।
आधारभूत अलर्ट सन्देशहरूका लागि कुनै पनि पाठ र वैकल्पिक खारेज बटन .alert
र चार सान्दर्भिक कक्षाहरू (जस्तै, ) मध्ये एउटा बेर्नुहोस् ।.alert-success
अलर्टहरूमा पूर्वनिर्धारित कक्षाहरू छैनन्, केवल आधार र परिमार्जक वर्गहरू। पूर्वनिर्धारित ग्रे अलर्टले धेरै अर्थ राख्दैन, त्यसैले तपाइँलाई प्रासंगिक वर्ग मार्फत एक प्रकार निर्दिष्ट गर्न आवश्यक छ। सफलता, जानकारी, चेतावनी, वा खतराबाट छनौट गर्नुहोस्।
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
.alert-dismissible
वैकल्पिक र बन्द बटन थपेर कुनै पनि अलर्टमा निर्माण गर्नुहोस् ।
पूर्ण रूपमा कार्य गर्नका लागि, खारेज गर्न मिल्ने अलर्टहरू, तपाईंले अलर्टहरू JavaScript प्लगइन प्रयोग गर्नुपर्छ ।
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
डेटा विशेषताको <button>
साथ तत्व प्रयोग गर्न निश्चित हुनुहोस् ।data-dismiss="alert"
.alert-link
कुनै पनि अलर्ट भित्र मिल्दो रंगीन लिङ्कहरू द्रुत रूपमा प्रदान गर्न उपयोगिता वर्ग प्रयोग गर्नुहोस् ।
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
कार्यप्रवाह वा कार्यको प्रगतिमा सरल तर लचिलो प्रगति पट्टीहरूको साथ अद्यावधिक प्रतिक्रिया प्रदान गर्नुहोस्।
प्रगति पट्टीहरूले तिनीहरूका केही प्रभावहरू प्राप्त गर्न CSS3 संक्रमण र एनिमेसनहरू प्रयोग गर्छन्। यी सुविधाहरू Internet Explorer 9 र Firefox को तल वा पुरानो संस्करणहरूमा समर्थित छैनन्। Opera 12 ले एनिमेसनहरूलाई समर्थन गर्दैन।
यदि तपाईंको वेबसाइटमा सामग्री सुरक्षा नीति (CSP) छ जसले अनुमति दिँदैन , तब तपाईंले तलका उदाहरणहरूमा देखाइए अनुसार प्रगति पट्टी चौडाइहरू सेट गर्न style-src 'unsafe-inline'
इनलाइन विशेषताहरू प्रयोग गर्न सक्नुहुने छैन । style
कडा सीएसपीहरूसँग मिल्दो चौडाइहरू सेट गर्नका लागि वैकल्पिक विधिहरूमा थोरै अनुकूलन JavaScript (जुन सेट गर्दछ element.style.width
) वा अनुकूलन CSS कक्षाहरू प्रयोग गर्ने समावेश छ।
पूर्वनिर्धारित प्रगति पट्टी।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
दृश्य प्रतिशत देखाउनको लागि प्रगति पट्टी भित्रबाट कक्षा <span>
सहित हटाउनुहोस् ।.sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
लेबल पाठ कम प्रतिशतका लागि पनि पढ्न योग्य छ भनी सुनिश्चित min-width
गर्न, प्रगति पट्टीमा थप्ने विचार गर्नुहोस्।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
प्रगति पट्टीहरूले समान शैलीहरूका लागि केही समान बटन र अलर्ट कक्षाहरू प्रयोग गर्छन्।
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
स्ट्रिप गरिएको प्रभाव सिर्जना गर्न ग्रेडियन्ट प्रयोग गर्दछ। IE9 र तल उपलब्ध छैन।
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
दायाँ देखि बायाँ स्ट्रिपहरू एनिमेट गर्न मा .active
थप्नुहोस् । .progress-bar-striped
IE9 र तल उपलब्ध छैन।
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
तिनीहरूलाई स्ट्याक गर्न एकै ठाउँमा धेरै बारहरू राख्नुहोस् ।
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
विभिन्न प्रकारका कम्पोनेन्टहरू (जस्तै ब्लग टिप्पणीहरू, ट्वीटहरू, आदि) निर्माण गर्नका लागि सार वस्तु शैलीहरू जसले पाठ्य सामग्रीको साथमा बायाँ- वा दायाँ-पङ्क्तिबद्ध छवि सुविधा दिन्छ।
पूर्वनिर्धारित मिडियाले सामग्री ब्लकको बायाँ वा दायाँ तिर मिडिया वस्तु (छवि, भिडियो, अडियो) प्रदर्शन गर्दछ।
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
क्लासहरू .pull-left
र .pull-right
पनि अवस्थित छन् र पहिले मिडिया कम्पोनेन्टको भागको रूपमा प्रयोग गरिएको थियो, तर v3.3.0 को रूपमा त्यो प्रयोगको लागि हटाइएको छ। तिनीहरू लगभग बराबर छन् .media-left
र .media-right
, बाहेक html मा .media-right
पछि राखिएको हुनुपर्छ ।.media-body
छविहरू वा अन्य मिडिया शीर्ष, मध्य, वा तल पङ्क्तिबद्ध गर्न सकिन्छ। पूर्वनिर्धारित शीर्ष पङ्क्तिबद्ध छ।
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।
Donec sed odio dui। Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।
Donec sed odio dui। Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।
Donec sed odio dui। Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
अलिकति अतिरिक्त मार्कअपको साथ, तपाइँ सूची भित्र मिडिया प्रयोग गर्न सक्नुहुन्छ (टिप्पणी थ्रेड वा लेख सूचीहरूको लागि उपयोगी)।
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis।
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
सूची समूहहरू तत्वहरूको साधारण सूचीहरू मात्र होइन, तर अनुकूलन सामग्रीका साथ जटिलहरू पनि प्रदर्शन गर्न लचिलो र शक्तिशाली कम्पोनेन्ट हुन्।
सबैभन्दा आधारभूत सूची समूह भनेको सूची वस्तुहरू, र उचित वर्गहरूको साथ एक अक्रमित सूची हो। पछ्याउने विकल्पहरू वा तपाईंको आफ्नै CSS आवश्यकता अनुसार यसलाई निर्माण गर्नुहोस्।
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
कुनै पनि सूची समूह वस्तुमा ब्याज कम्पोनेन्ट थप्नुहोस् र यो स्वचालित रूपमा दायाँमा राखिनेछ।
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
सूची वस्तुहरूको सट्टा एङ्कर ट्यागहरू प्रयोग गरेर सूची समूह वस्तुहरू लिङ्क गर्नुहोस् (यसको अर्थ एकको सट्टा अभिभावक पनि हो <div>
) <ul>
। प्रत्येक तत्व वरिपरि व्यक्तिगत आमाबाबुको लागि आवश्यक छैन।
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
सूची समूह वस्तुहरू सूची वस्तुहरूको सट्टा बटनहरू हुन सक्छन् (यसको अर्थ एकको <div>
सट्टा अभिभावक पनि हो <ul>
)। प्रत्येक तत्व वरिपरि व्यक्तिगत आमाबाबुको लागि आवश्यक छैन। यहाँ मानक कक्षाहरू प्रयोग नगर्नुहोस् ।.btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
यसलाई असक्षम देखिन खरानी .disabled
बनाउन a मा थप्नुहोस् ।.list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
शैली सूची वस्तुहरू, पूर्वनिर्धारित वा लिङ्क गरिएको सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्। राज्य पनि समावेश छ .active
।
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
तलको जस्तै लिङ्क गरिएको सूची समूहहरूको लागि पनि, भित्र लगभग कुनै पनि HTML थप्नुहोस्।
Donec id elit non mi porta gravida at eget metus। Maecenas sed diam eget risus varius blandit।
Donec id elit non mi porta gravida at eget metus। Maecenas sed diam eget risus varius blandit।
Donec id elit non mi porta gravida at eget metus। Maecenas sed diam eget risus varius blandit।
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
सधैं आवश्यक नहुँदा, कहिलेकाहीँ तपाईंले आफ्नो DOM लाई बक्समा राख्नु पर्छ। ती अवस्थाहरूको लागि, प्यानल घटक प्रयास गर्नुहोस्।
पूर्वनिर्धारित रूपमा, सबैले .panel
केही सामग्री समावेश गर्न केही आधारभूत किनारा र प्याडिङ लागू गर्दछ।
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
तपाईको प्यानलमा सजिलैसँग हेडिङ कन्टेनर थप्नुहोस् .panel-heading
। तपाईंले कुनै पनि समावेश गर्न सक्नुहुन्छ <h1>
- पूर्व-शैली शीर्षक थप्नको लागि कक्षाको <h6>
साथ । .panel-title
यद्यपि, <h1>
- को फन्ट साइजहरू <h6>
ओभरराइड गरिएका छन् .panel-heading
।
उचित लिङ्क रङको लागि, लिङ्कहरू भित्र शीर्षकहरूमा राख्न निश्चित हुनुहोस् .panel-title
।
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
बटनहरू वा माध्यमिक पाठमा बेर्नुहोस् .panel-footer
। ध्यान दिनुहोस् कि प्यानल फुटरहरूले सन्दर्भ भिन्नताहरू प्रयोग गर्दा रङहरू र किनाराहरू इनहेरिट गर्दैनन् किनभने तिनीहरू अग्रभूमिमा हुनुको अर्थ होइन।
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
अन्य कम्पोनेन्टहरू जस्तै, कुनै पनि सान्दर्भिक राज्य वर्गहरू थपेर प्यानललाई विशेष सन्दर्भमा अझ अर्थपूर्ण बनाउनुहोस्।
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
सिमलेस डिजाइनको लागि प्यानल भित्र कुनै पनि गैर-सीमा जोड्नुहोस् । यदि त्यहाँ छ भने .panel-body
, हामी विभाजनको लागि तालिकाको शीर्षमा अतिरिक्त किनार थप्छौं।
यहाँ केही पूर्वनिर्धारित प्यानल सामग्री। Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur। Aenean eu leo quam। Pellentesque ornare sem lacinia quam venenatis vestibulum। Nullam id dolor id nibh ultricies vehicula ut id elit।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
यदि त्यहाँ कुनै प्यानल बडी छैन भने, कम्पोनेन्ट बिना अवरोध बिना प्यानल हेडरबाट तालिकामा सर्छ।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
सजिलैसँग कुनै पनि प्यानल भित्र पूर्ण-चौडाइको सूची समूहहरू समावेश गर्नुहोस्।
यहाँ केही पूर्वनिर्धारित प्यानल सामग्री। Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur। Aenean eu leo quam। Pellentesque ornare sem lacinia quam venenatis vestibulum। Nullam id dolor id nibh ultricies vehicula ut 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>