उपलब्ध ग्लिफहरू

Glyphicon Halflings सेटबाट फन्ट ढाँचामा 250 भन्दा बढी ग्लिफहरू समावेश गर्दछ। Glyphicons Halflings सामान्यतया नि: शुल्क उपलब्ध छैन, तर तिनीहरूको निर्माताले तिनीहरूलाई बुटस्ट्र्यापको लागि निःशुल्क उपलब्ध गराएको छ। धन्यवादको रूपमा, हामी केवल तपाईंले सम्भव भएसम्म Glyphicons मा लिंक समावेश गर्न अनुरोध गर्दछौं ।

glyphicon glyphicon-Asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-माइनस
glyphicon glyphicon-Cloud
glyphicon glyphicon-खाम
glyphicon glyphicon-पेन्सिल
glyphicon glyphicon-ग्लास
glyphicon glyphicon-संगीत
glyphicon glyphicon-खोज
glyphicon glyphicon-हृदय
glyphicon glyphicon-star
glyphicon glyphicon-star-खाली
glyphicon glyphicon-प्रयोगकर्ता
glyphicon glyphicon-फिल्म
glyphicon glyphicon-th-th-ठूलो
glyphicon glyphicon-th
glyphicon glyphicon-th-सूची
glyphicon glyphicon-ठीक छ
glyphicon glyphicon-हटाउनुहोस्
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-संकेत
glyphicon glyphicon-cog
glyphicon glyphicon- रद्दीटोकरी
glyphicon glyphicon-घर
glyphicon glyphicon-फाइल
glyphicon glyphicon-समय
glyphicon glyphicon-सडक
glyphicon glyphicon-download-alt
glyphicon glyphicon-डाउनलोड
glyphicon glyphicon-अपलोड
glyphicon glyphicon-इनबक्स
glyphicon glyphicon-play-circle
glyphicon glyphicon-दोहोरिने
glyphicon glyphicon-रिफ्रेस
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-झण्डा
glyphicon glyphicon-हेडफोन
glyphicon glyphicon-भोल्युम-अफ
glyphicon glyphicon-भोल्युम-डाउन
glyphicon glyphicon-भोल्युम-अप
glyphicon glyphicon-qrcode
glyphicon glyphicon-बारकोड
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-बुकमार्क
glyphicon glyphicon-प्रिन्ट
glyphicon glyphicon-क्यामेरा
glyphicon glyphicon-font
glyphicon glyphicon-बोल्ड
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-पङ्क्तिबद्ध-बायाँ
glyphicon glyphicon-align-center
glyphicon glyphicon-align-दायाँ
glyphicon glyphicon-align-justify
glyphicon glyphicon-सूची
glyphicon glyphicon-इन्डेन्ट-बायाँ
glyphicon glyphicon-Indent-दायाँ
glyphicon glyphicon-facetime-video
glyphicon glyphicon-चित्र
glyphicon glyphicon-नक्सा-मार्कर
glyphicon glyphicon-समायोजित
glyphicon glyphicon-tint
glyphicon glyphicon-सम्पादन
glyphicon glyphicon-share
glyphicon glyphicon-चेक
glyphicon glyphicon - चाल
glyphicon glyphicon-step-backward
glyphicon glyphicon-फास्ट-ब्याकवर्ड
glyphicon glyphicon-पछाडि
glyphicon glyphicon-play
glyphicon glyphicon-पज
glyphicon glyphicon-स्टप
glyphicon glyphicon-अगाडि
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-Eject
glyphicon glyphicon-chevron-बायाँ
glyphicon glyphicon-chevron-दायाँ
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-हटाउने-चिह्न
glyphicon glyphicon-ok-sign
glyphicon glyphicon-प्रश्न-चिह्न
glyphicon glyphicon-info-sign
glyphicon glyphicon-स्क्रिनसट
glyphicon glyphicon-remove-सर्कल
glyphicon glyphicon-ok-सर्कल
glyphicon glyphicon-ban-सर्कल
glyphicon glyphicon-तीर-बायाँ
glyphicon glyphicon-तीर-दायाँ
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-विस्मयादिबोधक चिन्ह
glyphicon glyphicon-उपहार
glyphicon glyphicon-पत्ती
glyphicon glyphicon-आगो
glyphicon glyphicon-आँखा खोल्नुहोस्
glyphicon glyphicon-आँखा बन्द
glyphicon glyphicon-चेतावनी-चिह्न
glyphicon glyphicon-प्लेन
glyphicon glyphicon-क्यालेन्डर
glyphicon glyphicon-यादृच्छिक
glyphicon glyphicon-टिप्पणी
glyphicon glyphicon-चुम्बक
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-शपिंग-कार्ट
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-प्रमाणपत्र
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-हात-दायाँ
glyphicon glyphicon-हात-बायाँ
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-वृत्त-तीर-दायाँ
glyphicon glyphicon-वृत्त-तीर-बायाँ
glyphicon glyphicon-वृत्त-तीर-माथि
glyphicon glyphicon-सर्कल-एरो-डाउन
glyphicon glyphicon-globe
glyphicon glyphicon-रेंच
glyphicon glyphicon-कार्यहरू
glyphicon glyphicon फिल्टर
glyphicon glyphicon-briefcase
glyphicon glyphicon-फुलस्क्रिन
glyphicon glyphicon-ड्यासबोर्ड
glyphicon glyphicon-paperclip
glyphicon glyphicon-हृदय-खाली
glyphicon glyphicon-link
glyphicon glyphicon-फोन
glyphicon glyphicon-पुशपिन
glyphicon glyphicon-USD
glyphicon glyphicon-gbp
glyphicon glyphicon- क्रमबद्ध
glyphicon glyphicon-क्रमबद्ध-अक्षर
glyphicon glyphicon-sorrt-by-alphabet-alt
glyphicon glyphicon-क्रमबद्ध क्रमबद्ध
glyphicon glyphicon-क्रमबद्ध-अर्डर-alt
glyphicon glyphicon-क्रमबद्ध-विशेषताहरू
glyphicon glyphicon-sort-by-विशेषता-alt
glyphicon glyphicon-अनचेक
glyphicon glyphicon-विस्तार
glyphicon glyphicon-पतन-डाउन
glyphicon glyphicon-पतन-अप
glyphicon glyphicon-log-in
glyphicon glyphicon-फ्लैश
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-रेकर्ड
glyphicon glyphicon-बचत
glyphicon glyphicon-खुला
glyphicon glyphicon-सेभ गरियो
glyphicon glyphicon-आयात
glyphicon glyphicon-निर्यात
glyphicon glyphicon-send
glyphicon glyphicon-फ्लपी-डिस्क
glyphicon glyphicon-फ्लपी-सेभ गरियो
glyphicon glyphicon-फ्लपी-हटाउनुहोस्
glyphicon glyphicon-floppy-save
glyphicon glyphicon-फ्लपी-खुला
glyphicon glyphicon-क्रेडिट कार्ड
glyphicon glyphicon-स्थानान्तरण
glyphicon glyphicon-cutlery
glyphicon glyphicon-हेडर
glyphicon glyphicon-संकुचित
glyphicon glyphicon-इयरफोन
glyphicon glyphicon-phone-alt
glyphicon glyphicon-टावर
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-उपशीर्षकहरू
glyphicon glyphicon-ध्वनि-स्टीरियो
glyphicon glyphicon-ध्वनि-डल्बी
glyphicon glyphicon-ध्वनि-5-1
glyphicon glyphicon-ध्वनि-6-1
glyphicon glyphicon-ध्वनि-7-1
glyphicon glyphicon-प्रतिलिपि अधिकार चिन्ह
glyphicon glyphicon-Registration-mark
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-ट्री-कोनिफर
glyphicon glyphicon-ट्री-पर्णपाती
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-स्तर-माथि
glyphicon glyphicon-प्रतिलिपि
glyphicon glyphicon-पेस्ट
glyphicon glyphicon-सूचना
glyphicon glyphicon-इक्वेलाइजर
glyphicon glyphicon-king
glyphicon glyphicon-रानी
glyphicon glyphicon- प्यादा
glyphicon glyphicon-bishop
glyphicon glyphicon-नाइट
glyphicon glyphicon-बेबी-सूत्र
glyphicon glyphicon-तम्बू
glyphicon glyphicon-ब्ल्याकबोर्ड
glyphicon glyphicon-बेड
glyphicon glyphicon-सेब
glyphicon glyphicon-मेटाउने
glyphicon glyphicon-hourglass
glyphicon glyphicon-बत्ती
glyphicon glyphicon-डुप्लिकेट
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-कैंची
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-स्केल
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-स्वाद
glyphicon glyphicon-शिक्षा
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-तेल
glyphicon glyphicon-अनाज
glyphicon glyphicon-धूप का चश्मा
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-पृष्ठभूमि
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-शीर्ष
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-तल
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-क्षैतिज
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-बायाँ
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-ऊर्ध्वाधर
glyphicon glyphicon-वस्तु-पङ्क्तिबद्ध-दायाँ
glyphicon glyphicon-त्रिकोण-दायाँ
glyphicon glyphicon-त्रिकोण-बायाँ
glyphicon glyphicon-त्रिकोण-तल
glyphicon glyphicon-त्रिकोण-शीर्ष
glyphicon glyphicon-console
glyphicon glyphicon-सुपरस्क्रिप्ट
glyphicon glyphicon-subscript
glyphicon glyphicon-मेनु-बायाँ
glyphicon glyphicon-menu-दायाँ
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

कसरी प्रयोग गर्ने

कार्यसम्पादन कारणहरूका लागि, सबै आइकनहरूलाई आधार वर्ग र व्यक्तिगत प्रतिमा वर्ग चाहिन्छ। प्रयोग गर्नको लागि, तलको कोड लगभग कहीं पनि राख्नुहोस्। उचित प्याडिङका लागि प्रतिमा र पाठ बीचमा खाली ठाउँ छोड्न निश्चित हुनुहोस्।

अन्य अवयवहरूसँग मिश्रण नगर्नुहोस्

प्रतिमा वर्गहरू अन्य कम्पोनेन्टहरूसँग प्रत्यक्ष रूपमा संयोजन गर्न सकिँदैन। तिनीहरू समान तत्वमा अन्य वर्गहरूसँग प्रयोग गर्नु हुँदैन। यसको सट्टा, एउटा नेस्टेड थप्नुहोस् <span>र आइकन वर्गहरूमा लागू गर्नुहोस् <span>।

खाली तत्वहरूमा प्रयोगको लागि मात्र

आइकन वर्गहरू केवल पाठ सामग्री नभएको र बाल तत्वहरू नभएका तत्वहरूमा मात्र प्रयोग गरिनु पर्छ।

आइकन फन्ट स्थान परिवर्तन गर्दै

../fonts/बुटस्ट्र्यापले आइकन फन्ट फाइलहरू डाइरेक्टरीमा कम्पाइल गरिएका CSS फाइलहरूको सापेक्षमा अवस्थित हुनेछ भनी मान्दछ । ती फन्ट फाइलहरू सार्नु वा पुन: नामाकरण गर्नु भनेको तीन मध्ये एउटा तरिकामा CSS अद्यावधिक गर्नु हो:

स्रोत कम फाइलहरूमा @icon-font-pathर/वा चरहरू परिवर्तन गर्नुहोस्।@icon-font-name
कम कम्पाइलर द्वारा प्रदान गरिएको सापेक्ष URL विकल्प प्रयोग गर्नुहोस्।
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

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

हेडरहरू

कुनै पनि ड्रपडाउन मेनुमा कार्यहरूको खण्डहरू लेबल गर्न हेडर थप्नुहोस्।

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

डिभाइडर

ड्रपडाउन मेनुमा लिङ्कहरूको अलग श्रृंखलामा एक विभाजक थप्नुहोस्।

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

असक्षम मेनु वस्तुहरू

लिङ्क असक्षम गर्न ड्रपडाउनमा .disabledथप्नुहोस् ।<li>

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

बटन समूहको साथ एउटै लाइनमा सँगै बटनहरूको श्रृंखला समूहबद्ध गर्नुहोस्। हाम्रो बटन प्लगइनको साथ वैकल्पिक JavaScript रेडियो र चेकबक्स शैली व्यवहार थप्नुहोस् ।

बटन समूहहरूमा उपकरणटिपहरू र पपभरहरू विशेष सेटिङ आवश्यक पर्दछ

टुलटिपहरू वा पपओभरहरू भित्र तत्वहरूमा प्रयोग गर्दा .btn-group, तपाईंले container: 'body'अनावश्यक साइड इफेक्टहरू (जस्तै टुलटिप वा पपओभर ट्रिगर हुँदा तत्व फराकिलो हुने र/वा यसको गोलाकार कुनाहरू गुमाउनु)बाट बच्न विकल्प निर्दिष्ट गर्नुपर्नेछ।

सही सुनिश्चित गर्नुहोस् `role`र लेबल प्रदान गर्नुहोस्

सहायक प्रविधिहरूका लागि - जस्तै स्क्रिन रिडरहरू - बटनहरूको शृङ्खलालाई समूहबद्ध गरिएको छ भनी बताउन, उपयुक्त roleविशेषता प्रदान गर्न आवश्यक छ। बटन समूहहरूको लागि, यो हुनेछ role="group", जबकि उपकरणपट्टीमा एक हुनुपर्छ role="toolbar"।

एउटा अपवाद समूहहरू हुन् जसमा केवल एकल नियन्त्रण हुन्छ (उदाहरणका लागि तत्वहरू सहितको उचित बटन समूहहरू<button> ) वा ड्रपडाउन।

थप रूपमा, समूहहरू र उपकरणपट्टीहरूलाई स्पष्ट लेबल दिइनुपर्छ, किनकि धेरै सहायक प्रविधिहरूले सही roleविशेषताको उपस्थिति भएता पनि तिनीहरूलाई घोषणा गर्दैनन्। यहाँ प्रदान गरिएका उदाहरणहरूमा, हामी प्रयोग गर्छौं aria-label, तर विकल्पहरू aria-labelledbyपनि प्रयोग गर्न सकिन्छ।

आधारभूत उदाहरण

.btnभित्र बटनहरूको श्रृंखला लपेट्नुहोस् .btn-group।

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

थप जटिल कम्पोनेन्टहरूको लागि <div class="btn-group">a मा सेटहरू मिलाउनुहोस् ।<div class="btn-toolbar">

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

साइजिङ

समूहमा प्रत्येक बटनमा बटन साइजिङ वर्गहरू लागू गर्नुको सट्टा, धेरै समूहहरू नेस्ट गर्दा सहित .btn-group-*प्रत्येकमा थप्नुहोस्।.btn-group

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

नेस्टिङ

जब तपाईं ड्रपडाउन मेनुहरू बटनहरूको श्रृंखलासँग मिसाउन चाहनुहुन्छ भने .btn-groupअर्को भित्र राख्नुहोस् ।.btn-group

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

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

ठाडो भिन्नता

तेर्सो भन्दा ठाडो रूपमा स्ट्याक गरिएको बटनहरूको सेट बनाउनुहोस्। स्प्लिट बटन ड्रपडाउनहरू यहाँ समर्थित छैनन्।

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

जायज बटन समूहहरू

बटनहरूको समूहलाई यसको अभिभावकको सम्पूर्ण चौडाइमा फैलाउन बराबर आकारमा तन्काउनुहोस्। बटन समूह भित्र बटन ड्रपडाउनहरूसँग पनि काम गर्दछ।

सीमाना ह्यान्डल गर्दै

विशेष HTML र CSS को कारणले बटनहरूलाई उचित ठहराउन प्रयोग गरिन्छ (अर्थात display: table-cell), तिनीहरू बीचको सीमानाहरू दोब्बर हुन्छन्। नियमित बटन समूहहरूमा, margin-left: -1pxतिनीहरूलाई हटाउनुको सट्टा किनाराहरू स्ट्याक गर्न प्रयोग गरिन्छ। यद्यपि, marginसंग काम गर्दैन display: table-cell। नतिजाको रूपमा, बुटस्ट्र्यापमा तपाइँको अनुकूलनको आधारमा, तपाइँ सीमानाहरू हटाउन वा पुन: रङ गर्न चाहनुहुन्छ।

IE8 र सीमानाहरू

Internet Explorer 8 ले उचित बटन समूहमा बटनहरूमा सीमानाहरू रेन्डर गर्दैन, चाहे यो सक्रिय होस् <a>वा <button>तत्वहरू। त्यसको वरिपरि प्राप्त गर्न, प्रत्येक बटनलाई अर्कोमा बेर्नुहोस् .btn-group।

थप जानकारीको लागि #12476 हेर्नुहोस् ।

`<a>`तत्वहरु संग

केवल .btns को श्रृंखला लपेट्नुहोस् .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-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

आधारभूत उदाहरण

इनपुटको दुबै छेउमा एउटा एड-अन वा बटन राख्नुहोस्। तपाईंले इनपुटको दुबै छेउमा एउटा पनि राख्न सक्नुहुन्छ।

हामी एकल पक्षमा धेरै एड-अन ( .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 -->

बटन addons

इनपुट समूहहरूमा बटनहरू अलि फरक छन् र नेस्टिङको एक अतिरिक्त स्तर चाहिन्छ। यसको सट्टा .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क्लासबाट सुरु हुने, साथै साझा राज्यहरू। प्रत्येक शैली बीच स्विच गर्न परिमार्जक वर्गहरू स्वैप गर्नुहोस्।

ट्याब प्यानलहरूको लागि navs प्रयोग गर्न JavaScript ट्याबहरू प्लगइन आवश्यक छ

ट्याबयोग्य क्षेत्रहरू भएका ट्याबहरूका लागि, तपाईंले ट्याबहरू JavaScript प्लगइन प्रयोग गर्नुपर्छ । मार्कअपलाई थप roleर ARIA विशेषताहरू पनि चाहिन्छ - थप विवरणहरूको लागि प्लगइनको उदाहरण मार्कअप हेर्नुहोस्।

नेभिगेसन पहुँचयोग्य रूपमा प्रयोग गरिएको navs बनाउनुहोस्

यदि तपाइँ नेभिगेसन पट्टी प्रदान गर्न navs प्रयोग गर्दै हुनुहुन्छ भने, role="navigation"को सबैभन्दा तार्किक अभिभावक कन्टेनरमा थप्न निश्चित हुनुहोस् <ul>, वा <nav>सम्पूर्ण नेभिगेसन वरिपरि एउटा तत्व लपेट्नुहोस्। भूमिकालाई आफैमा थप नगर्नुहोस् <ul>, किनकि यसले सहयोगी प्रविधिहरूद्वारा वास्तविक सूचीको रूपमा घोषणा गर्नबाट रोक्छ।

ट्याबहरू

नोट गर्नुहोस् कि कक्षालाई आधार वर्ग .nav-tabsचाहिन्छ ।.nav

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

चक्कीहरू

उही HTML लिनुहोस्, तर .nav-pillsयसको सट्टा प्रयोग गर्नुहोस्:

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

चक्कीहरू पनि ठाडो रूपमा स्ट्याक योग्य छन्। मात्र थप्नुहोस् .nav-stacked।

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

जायज

768px भन्दा फराकिलो स्क्रिनहरूमा सजिलैसँग ट्याबहरू वा गोलीहरू तिनीहरूको अभिभावकको बराबर चौडाइहरू बनाउनुहोस् .nav-justified। साना स्क्रिनहरूमा, एनएभि लिङ्कहरू स्ट्याक गरिएका छन्।

उचित navbar एनएभि लिङ्कहरू हाल समर्थित छैनन्।

सफारी र उत्तरदायी न्यायसंगत navs

v9.1.2 को रूपमा, सफारीले एउटा बग प्रदर्शन गर्दछ जसमा तपाईंको ब्राउजरलाई तेर्सो रूपमा रिसाइज गर्दा उचित एनएभिमा रेन्डरिङ त्रुटिहरू निम्त्याउँछ जुन रिफ्रेस गर्दा खाली गरिन्छ। यो बग उचित एनएभ उदाहरणमा पनि देखाइएको छ ।

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

असक्षम गरिएका लिङ्कहरू

कुनै पनि एनएभ कम्पोनेन्ट (ट्याब वा चक्कीहरू) को .disabledलागि , खैरो लिङ्कहरू थप्नुहोस् र कुनै होभर प्रभावहरू छैनन् ।

लिङ्क कार्यक्षमता प्रभावित छैन

यो वर्गले यसको रूप मात्र परिवर्तन गर्नेछ <a>, यसको कार्यक्षमता होइन। यहाँ लिङ्कहरू असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुहोस्।

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

ड्रपडाउनहरू प्रयोग गर्दै

थोरै अतिरिक्त HTML र ड्रपडाउनहरू JavaScript प्लगइनको साथ ड्रपडाउन मेनुहरू थप्नुहोस् ।

ड्रपडाउनका साथ ट्याबहरू

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

ड्रपडाउन संग गोली

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

नेभबारहरू उत्तरदायी मेटा कम्पोनेन्टहरू हुन् जसले तपाईंको एप्लिकेसन वा साइटका लागि नेभिगेसन हेडरको रूपमा सेवा गर्दछ। तिनीहरू मोबाइल दृश्यहरूमा पतन हुन थाल्छन् (र टगल गर्न योग्य छन्) र उपलब्ध भ्यूपोर्ट चौडाइ बढ्दै जाँदा तेर्सो हुन्छन्।

उचित navbar एनएभि लिङ्कहरू हाल समर्थित छैनन्।

ओभरफ्लो सामग्री

बुटस्ट्र्यापले तपाइँको नेभबारको सामग्रीलाई कति ठाउँ चाहिन्छ भन्ने थाहा नभएको कारणले, तपाइँ सामग्रीलाई दोस्रो पङ्क्तिमा र्‍याप गर्ने समस्यामा पर्न सक्नुहुन्छ। यसलाई समाधान गर्न, तपाईं सक्नुहुन्छ:

navbar वस्तुहरूको मात्रा वा चौडाइ घटाउनुहोस्।
उत्तरदायी उपयोगिता कक्षाहरू प्रयोग गरेर निश्चित स्क्रिन आकारहरूमा केही नेभबार वस्तुहरू लुकाउनुहोस् ।
बिन्दु परिवर्तन गर्नुहोस् जहाँ तपाईंको नेभबार पतन र तेर्सो मोड बीच स्विच गर्दछ। चर अनुकूलन गर्नुहोस् @grid-float-breakpointवा तपाईंको आफ्नै मिडिया क्वेरी थप्नुहोस्।

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

यदि JavaScript असक्षम गरिएको छ र भ्युपोर्ट पर्याप्त साँघुरो छ कि navbar पतन हुन्छ, यो navbar विस्तार गर्न र भित्र सामग्री हेर्न असम्भव हुनेछ।.navbar-collapse ।

उत्तरदायी नेभबारलाई तपाईंको बुटस्ट्र्यापको संस्करणमा समावेश गर्नको लागि पतन प्लगइन आवश्यक छ।

पतित मोबाइल नवबार ब्रेकपोइन्ट परिवर्तन गर्दै

भ्युपोर्ट भन्दा साँघुरो हुँदा नेभबार यसको ठाडो मोबाइल दृश्यमा पतन हुन्छ @grid-float-breakpoint, र भ्युपोर्ट कम्तिमा @grid-float-breakpointचौडाइमा हुँदा यसको तेर्सो गैर-मोबाइल दृश्यमा विस्तार हुन्छ। यो भेरिएबललाई कम स्रोतमा समायोजन गर्नुहोस् जब नेभबार पतन/विस्तार हुन्छ नियन्त्रण गर्न। पूर्वनिर्धारित मान हो 768px(सबैभन्दा सानो "सानो" वा "ट्याब्लेट" स्क्रिन)।

Navbars पहुँचयोग्य बनाउनुहोस्

एक तत्व प्रयोग गर्न निश्चित हुनुहोस् <nav>वा, यदि अधिक सामान्य तत्व जस्तै a को प्रयोग गर्दै हुनुहुन्छ भने, सहयोगी प्रविधिहरूको प्रयोगकर्ताहरूका लागि ल्यान्डमार्क क्षेत्रको रूपमा स्पष्ट रूपमा पहिचान गर्न प्रत्येक नेभबारमा <div>एउटा थप्नुहोस् ।role="navigation"

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

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

एक को लागी पाठ स्वैप गरेर आफ्नो आफ्नै छवि संग 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>

मोबाइल उपकरण चेतावनी

त्यहाँ मोबाइल उपकरणहरूमा निश्चित तत्वहरू भित्र फारम नियन्त्रणहरू प्रयोग गर्ने सन्दर्भमा केही चेतावनीहरू छन्। विवरणहरूको लागि हाम्रो ब्राउजर समर्थन कागजातहरू हेर्नुहोस्।

सधैं लेबलहरू थप्नुहोस्

यदि तपाईंले प्रत्येक इनपुटको लागि लेबल समावेश गर्नुभएन भने स्क्रिन रिडरहरूलाई तपाईंको फारमहरूमा समस्या हुनेछ। .sr-onlyयी इनलाइन फारमहरूको लागि, तपाईंले वर्ग प्रयोग गरेर लेबलहरू लुकाउन सक्नुहुन्छ । सहायक टेक्नोलोजीहरूको लागि लेबल प्रदान गर्ने थप वैकल्पिक विधिहरू छन्, जस्तै aria-label, aria-labelledbyवा titleविशेषता। यदि यी मध्ये कुनै पनि अवस्थित छैन भने, स्क्रिन रिडरहरूले placeholderविशेषता प्रयोग गर्न रिसोर्ट गर्न सक्छन्, यदि अवस्थित छ, तर ध्यान दिनुहोस् कि placeholderअन्य लेबलिङ विधिहरूको लागि प्रतिस्थापनको रूपमा प्रयोग गर्न सल्लाह दिइँदैन।

नभबारमा ठाडो रूपमा केन्द्रमा राख्नका लागि a मा नबस्ने तत्वहरूमा .navbar-btnवर्ग थप्नुहोस् ।<button><form>

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

उचित अग्रगामी र रङको लागि .navbar-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, तर तिनीहरू यन्त्र आकारहरूमा नेभबार कम्पोनेन्टहरूको सजिलो ह्यान्डलिङको लागि मिडिया क्वेरीहरूमा स्कोप गरिएका छन्।

धेरै कम्पोनेन्टहरू दायाँ पङ्क्तिबद्ध गर्दै

Navbars मा हाल धेरै .navbar-rightकक्षाहरु संग एक सीमा छ। स्पेस सामग्री ठीकसँग गर्न, हामी अन्तिम .navbar-rightतत्वमा नकारात्मक मार्जिन प्रयोग गर्छौं। जब त्यहाँ त्यो वर्ग प्रयोग गर्ने धेरै तत्वहरू छन्, यी मार्जिनहरू उद्देश्य अनुसार काम गर्दैनन्।

हामी यसलाई पुन: भ्रमण गर्नेछौं जब हामी त्यो घटक v4 मा पुन: लेख्न सक्छौं।

केन्द्र र प्याड नवबार सामग्री थप्नुहोस् .navbar-fixed-topर समावेश .containerगर्नुहोस् ।.container-fluid

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

शरीर प्याडिङ आवश्यक छ

फिक्स्ड नेभबारले तपाइँको अन्य सामग्री ओभरले गर्नेछ, जबसम्म तपाइँ paddingशीर्षमा थप्नुहुन्न <body>। तपाईंको आफ्नै मानहरू प्रयास गर्नुहोस् वा तल हाम्रो स्निपेट प्रयोग गर्नुहोस्। सुझाव: पूर्वनिर्धारित रूपमा, navbar 50px उच्च छ।

body { padding-top: 70px; }

कोर बुटस्ट्र्याप CSS पछि यसलाई समावेश गर्न निश्चित गर्नुहोस् ।

केन्द्र र प्याड नवबार सामग्री थप्नुहोस् .navbar-fixed-bottomर समावेश .containerगर्नुहोस् ।.container-fluid

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

शरीर प्याडिङ आवश्यक छ

फिक्स्ड नेभबारले तपाइँको अन्य सामग्री ओभरले गर्नेछ, जबसम्म तपाइँ paddingतल थप्नुहुन्न <body>। तपाईंको आफ्नै मानहरू प्रयास गर्नुहोस् वा तल हाम्रो स्निपेट प्रयोग गर्नुहोस्। सुझाव: पूर्वनिर्धारित रूपमा, navbar 50px उच्च छ।

body { padding-bottom: 70px; }

कोर बुटस्ट्र्याप CSS पछि यसलाई समावेश गर्न निश्चित गर्नुहोस् ।

एक वा केन्द्र र प्याड नेभबार सामग्री थपेर .navbar-static-topर समावेश गरेर पृष्ठको साथ स्क्रोल गर्ने पूर्ण-चौडाइको नेभबार सिर्जना गर्नुहोस्।.container.container-fluid

कक्षाहरूको विपरीत .navbar-fixed-*, तपाईंले मा कुनै पनि प्याडिङ परिवर्तन गर्न आवश्यक छैन body।

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

थपेर नवबारको रूप परिमार्जन गर्नुहोस् .navbar-inverse।

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

ब्रेडक्रम्ब्स

नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस्।

सेपरेटरहरू स्वचालित रूपमा CSS मा :beforeर मार्फत थपिन्छन् content।

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

पृष्ठांकन

बहु-पृष्ठ पृष्ठांकन कम्पोनेन्ट, वा सरल पेजर विकल्पको साथ तपाईंको साइट वा एपको लागि पृष्ठांकन लिङ्कहरू प्रदान गर्नुहोस् ।

पूर्वनिर्धारित पृष्ठांकन

Rdio द्वारा प्रेरित सरल पृष्ठांकन, अनुप्रयोगहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।

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

पृष्ठांकन घटक लेबल गर्दै

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

असक्षम र सक्रिय राज्यहरू

लिङ्कहरू विभिन्न परिस्थितिहरूको लागि अनुकूलन योग्य छन्। .disabledक्लिक गर्न नसकिने लिङ्कहरूको लागि र .activeहालको पृष्ठ संकेत गर्न प्रयोग गर्नुहोस्।

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

हामी सुझाव दिन्छौं कि तपाईले सक्रिय वा असक्षम एङ्करहरू स्वैप गर्नुहोस् <span>, वा अघिल्लो/अर्को तीरहरूको मामलामा एङ्कर छोड्नुहोस्, इच्छित शैलीहरू कायम राख्दा क्लिक कार्यक्षमता हटाउन।

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

साइजिङ

फेन्सी ठूलो वा सानो पृष्ठांकन? थप्नुहोस् .pagination-lgवा .pagination-smथप आकारहरूको लागि।

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

पेजर

हल्का मार्कअप र शैलीहरूको साथ सरल पृष्ठांकन कार्यान्वयनका लागि द्रुत अघिल्लो र अर्को लिङ्कहरू। यो ब्लग वा पत्रिका जस्ता साधारण साइटहरूको लागि उत्कृष्ट छ।

पूर्वनिर्धारित उदाहरण

पूर्वनिर्धारित रूपमा, पेजर केन्द्रहरू लिङ्कहरू।

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

पङ्क्तिबद्ध लिङ्कहरू

वैकल्पिक रूपमा, तपाइँ प्रत्येक लिङ्कलाई छेउमा पङ्क्तिबद्ध गर्न सक्नुहुन्छ:

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

वैकल्पिक असक्षम अवस्था

पेजर लिङ्कहरूले .disabledपृष्ठांकनबाट सामान्य उपयोगिता वर्ग पनि प्रयोग गर्दछ।

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

उदाहरण

नयाँ शीर्षकको उदाहरण

<h3>Example heading <span class="label label-default">New</span></h3>

उपलब्ध भिन्नताहरू

लेबलको रूप परिवर्तन गर्न तल उल्लेखित परिमार्जनक वर्गहरू मध्ये कुनै पनि थप्नुहोस्।

पूर्वनिर्धारित प्राथमिक सफलता जानकारी चेतावनी खतरा

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

धेरै लेबलहरू छन्?

रेन्डरिङ समस्याहरू उत्पन्न हुन सक्छ जब तपाईंसँग साँघुरो कन्टेनर भित्र दर्जनौं इनलाइन लेबलहरू हुन्छन्, प्रत्येकमा यसको आफ्नै inline-blockतत्व (जस्तै आइकन) समावेश हुन्छ। यो वरिपरि बाटो सेटिङ छ display: inline-block;। सन्दर्भ र उदाहरणको लागि, #13219 हेर्नुहोस् ।

<span class="badge">लिङ्कहरू, 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>

जम्बोट्रोन पूर्ण चौडाइ बनाउन र गोलाकार कुनाहरू बिना, यसलाई सबै .containers बाहिर राख्नुहोस् र यसको सट्टा .containerभित्र थप्नुहोस्।

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

h1पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा स्पेस आउट गर्न र खण्डहरू विभाजन गर्नको लागि एउटा साधारण शेल । यसले h1'को पूर्वनिर्धारित smallतत्व, साथै अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।

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

बुटस्ट्र्यापको ग्रिड प्रणालीलाई थम्बनेल कम्पोनेन्टको साथ विस्तार गर्नुहोस् सजिलैसँग छविहरू, भिडियोहरू, पाठ, र थपको ग्रिडहरू प्रदर्शन गर्न।

यदि तपाईं फरक उचाइ र/वा चौडाइहरूको थम्बनेलहरूको Pinterest-जस्तो प्रस्तुति खोज्दै हुनुहुन्छ भने, तपाईंले मेसनरी, आइसोटोप, वा साल्वाटोर जस्ता तेस्रो-पक्ष प्लगइन प्रयोग गर्न आवश्यक छ ।

पूर्वनिर्धारित उदाहरण

पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।

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

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

थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।

थम्बनेल लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

टांक टांक

थम्बनेल लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

टांक टांक

थम्बनेल लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

टांक टांक

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

मुठ्ठीभर उपलब्ध र लचिलो अलर्ट सन्देशहरूको साथ सामान्य प्रयोगकर्ता कार्यहरूको लागि प्रासंगिक प्रतिक्रिया सन्देशहरू प्रदान गर्नुहोस्।

उदाहरणहरू

आधारभूत अलर्ट सन्देशहरूका लागि कुनै पनि पाठ र वैकल्पिक खारेज बटन .alertर चार सान्दर्भिक कक्षाहरू (जस्तै, ) मध्ये एउटा बेर्नुहोस् ।.alert-success

कुनै पूर्वनिर्धारित कक्षा छैन

अलर्टहरूमा पूर्वनिर्धारित कक्षाहरू छैनन्, केवल आधार र परिमार्जक वर्गहरू। पूर्वनिर्धारित ग्रे अलर्टले धेरै अर्थ राख्दैन, त्यसैले तपाइँलाई प्रासंगिक वर्ग मार्फत एक प्रकार निर्दिष्ट गर्न आवश्यक छ। सफलता, जानकारी, चेतावनी, वा खतराबाट छनौट गर्नुहोस्।

राम्रो काम! तपाईंले यो महत्त्वपूर्ण चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो।

हेड अप! यो अलर्टलाई तपाईंको ध्यान चाहिन्छ, तर यो धेरै महत्त्वपूर्ण छैन।

चेतावनी! राम्रो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।

ओह स्न्याप! केहि चीजहरू परिवर्तन गर्नुहोस् र फेरि पेश गर्ने प्रयास गर्नुहोस्।

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

खारेज गर्न मिल्ने अलर्टहरू

.alert-dismissibleवैकल्पिक र बन्द बटन थपेर कुनै पनि अलर्टमा निर्माण गर्नुहोस् ।

JavaScript अलर्ट प्लगइन आवश्यक छ

पूर्ण रूपमा कार्य गर्नका लागि, खारेज गर्न मिल्ने अलर्टहरू, तपाईंले अलर्टहरू 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">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

सबै यन्त्रहरूमा उचित व्यवहार सुनिश्चित गर्नुहोस्

डेटा विशेषताको <button>साथ तत्व प्रयोग गर्न निश्चित हुनुहोस् ।data-dismiss="alert"

अलर्टहरूमा लिङ्कहरू

.alert-linkकुनै पनि अलर्ट भित्र मिल्दो रंगीन लिङ्कहरू द्रुत रूपमा प्रदान गर्न उपयोगिता वर्ग प्रयोग गर्नुहोस् ।

राम्रो काम! तपाईंले यो महत्त्वपूर्ण चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो ।

हेड अप! यो अलर्टलाई तपाईंको ध्यान चाहिन्छ , तर यो धेरै महत्त्वपूर्ण छैन।

चेतावनी! आफैलाई राम्रोसँग जाँच्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन ।

ओह स्न्याप! केहि चीजहरू परिवर्तन गर्नुहोस् र फेरि पेश गर्ने प्रयास गर्नुहोस्।

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

कार्यप्रवाह वा कार्यको प्रगतिमा सरल तर लचिलो प्रगति पट्टीहरूको साथ अद्यावधिक प्रतिक्रिया प्रदान गर्नुहोस्।

क्रस-ब्राउजर अनुकूलता

प्रगति पट्टीहरूले तिनीहरूका केही प्रभावहरू प्राप्त गर्न CSS3 संक्रमण र एनिमेसनहरू प्रयोग गर्छन्। यी सुविधाहरू Internet Explorer 9 र Firefox को तल वा पुरानो संस्करणहरूमा समर्थित छैनन्। Opera 12 ले एनिमेसनहरूलाई समर्थन गर्दैन।

सामग्री सुरक्षा नीति (CSP) अनुकूलता

यदि तपाईंको वेबसाइटमा सामग्री सुरक्षा नीति (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-stripedIE9 र तल उपलब्ध छैन।

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

स्ट्याक गरिएको

.progressतिनीहरूलाई स्ट्याक गर्न एकै ठाउँमा धेरै बारहरू राख्नुहोस् ।

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

विभिन्न प्रकारका कम्पोनेन्टहरू (जस्तै ब्लग टिप्पणीहरू, ट्वीटहरू, आदि) निर्माण गर्नका लागि सार वस्तु शैलीहरू जसले पाठ्य सामग्रीको साथमा बायाँ- वा दायाँ-पङ्क्तिबद्ध छवि सुविधा दिन्छ।

पूर्वनिर्धारित मिडिया

पूर्वनिर्धारित मिडियाले सामग्री ब्लकको बायाँ वा दायाँ तिर मिडिया वस्तु (छवि, भिडियो, अडियो) प्रदर्शन गर्दछ।

मिडिया शीर्षक

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

मिडिया शीर्षक

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। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

नेस्टेड मिडिया शीर्षक

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। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।

मिडिया शीर्षक

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।

मिडिया शीर्षक

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।

<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।

नेस्टेड मिडिया शीर्षक
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।

नेस्टेड मिडिया शीर्षक
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।

नेस्टेड मिडिया शीर्षक
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 आवश्यकता अनुसार यसलाई निर्माण गर्नुहोस्।

Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum

<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>

ब्याजहरू

कुनै पनि सूची समूह वस्तुमा ब्याज कम्पोनेन्ट थप्नुहोस् र यो स्वचालित रूपमा दायाँमा राखिनेछ।

१४Cras justo odio
२Dapibus ac facilisis in
१मोरबी लियो रिसस

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

लिङ्क गरिएका वस्तुहरू

सूची वस्तुहरूको सट्टा एङ्कर ट्यागहरू प्रयोग गरेर सूची समूह वस्तुहरू लिङ्क गर्नुहोस् (यसको अर्थ एकको सट्टा अभिभावक पनि हो <div>) <ul>। प्रत्येक तत्व वरिपरि व्यक्तिगत आमाबाबुको लागि आवश्यक छैन।

Cras justo odio Dapibus ac facilisis in मोरबी लियो रिसस Porta ac consectetur ac eros मा Vestibulum

<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

Cras justo odio Dapibus ac facilisis in मोरबी लियो रिसस Porta ac consectetur ac eros मा Vestibulum

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

प्रासंगिक कक्षाहरू

शैली सूची वस्तुहरू, पूर्वनिर्धारित वा लिङ्क गरिएको सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्। राज्य पनि समावेश छ .active।

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
eros मा Vestibulum

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac eros मा Vestibulum

<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
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@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>

यदि त्यहाँ कुनै प्यानल बडी छैन भने, कम्पोनेन्ट बिना अवरोध बिना प्यानल हेडरबाट तालिकामा सर्छ।

प्यानल शीर्षक

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

<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।

Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum

<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>

अवयवहरू

Glyphicons

उपलब्ध ग्लिफहरू

कसरी प्रयोग गर्ने

अन्य अवयवहरूसँग मिश्रण नगर्नुहोस्

खाली तत्वहरूमा प्रयोगको लागि मात्र

आइकन फन्ट स्थान परिवर्तन गर्दै

पहुँचयोग्य आइकनहरू

उदाहरणहरू

ड्रपडाउनहरू

उदाहरण

पङ्क्तिबद्धता

अतिरिक्त स्थिति आवश्यक हुन सक्छ

बहिष्कृत .pull-rightपङ्क्तिबद्धता

हेडरहरू

डिभाइडर

असक्षम मेनु वस्तुहरू

बटन समूहहरू

बटन समूहहरूमा उपकरणटिपहरू र पपभरहरू विशेष सेटिङ आवश्यक पर्दछ

सही सुनिश्चित गर्नुहोस् roleर लेबल प्रदान गर्नुहोस्

आधारभूत उदाहरण

बटन उपकरणपट्टी

साइजिङ

नेस्टिङ

ठाडो भिन्नता

जायज बटन समूहहरू

सीमाना ह्यान्डल गर्दै

IE8 र सीमानाहरू

<a>तत्वहरु संग

बटनको रूपमा काम गर्ने लिङ्कहरू

<button>तत्वहरु संग

बटन ड्रपडाउनहरू

प्लगइन निर्भरता

एकल बटन ड्रपडाउनहरू

विभाजित बटन ड्रपडाउनहरू

साइजिङ

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

इनपुट समूहहरू

पाठ्य <input>एस मात्र

इनपुट समूहहरूमा उपकरणटिपहरू र पपभरहरू विशेष सेटिङ आवश्यक पर्दछ

अन्य अवयवहरूसँग मिश्रण नगर्नुहोस्

सधैं लेबलहरू थप्नुहोस्

आधारभूत उदाहरण

साइजिङ

चेकबक्सहरू र रेडियो एडअनहरू

बटन addons

ड्रपडाउनका साथ बटनहरू

खण्डित बटनहरू

बहु बटनहरू

Navs

ट्याब प्यानलहरूको लागि navs प्रयोग गर्न JavaScript ट्याबहरू प्लगइन आवश्यक छ

नेभिगेसन पहुँचयोग्य रूपमा प्रयोग गरिएको navs बनाउनुहोस्

ट्याबहरू

चक्कीहरू

जायज

सफारी र उत्तरदायी न्यायसंगत navs

असक्षम गरिएका लिङ्कहरू

लिङ्क कार्यक्षमता प्रभावित छैन

ड्रपडाउनहरू प्रयोग गर्दै

ड्रपडाउनका साथ ट्याबहरू

ड्रपडाउन संग गोली

नवबार

पूर्वनिर्धारित navbar

ओभरफ्लो सामग्री

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

पतित मोबाइल नवबार ब्रेकपोइन्ट परिवर्तन गर्दै

Navbars पहुँचयोग्य बनाउनुहोस्

ब्रान्ड छवि

फारमहरू

मोबाइल उपकरण चेतावनी

सधैं लेबलहरू थप्नुहोस्

बटनहरू

सन्दर्भ-विशिष्ट प्रयोग

पाठ

गैर-नेभि लिंकहरू

कम्पोनेन्ट पङ्क्तिबद्धता

धेरै कम्पोनेन्टहरू दायाँ पङ्क्तिबद्ध गर्दै

शीर्षमा फिक्स गरियो

शरीर प्याडिङ आवश्यक छ

तल फिक्स गरियो

बहिष्कृत `.pull-right`पङ्क्तिबद्धता

सही सुनिश्चित गर्नुहोस् `role`र लेबल प्रदान गर्नुहोस्

`<a>`तत्वहरु संग

`<button>`तत्वहरु संग

पाठ्य `<input>`एस मात्र