Glif ki disponib

Gen plis pase 250 glif nan fòma font ki soti nan seri Glyphicon Halflings la. Glyphicons Halflings nòmalman pa disponib pou gratis, men kreyatè yo te fè yo disponib pou Bootstrap gratis. Kòm yon remèsiman, nou sèlman mande pou ou mete yon lyen ki tounen nan Glyphicons chak fwa sa posib.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-mwens
glyphicon glyphicon-cloud
glyphicon glyphicon-anvlòp
glyphicon glyphicon-kreyon
glyphicon glyphicon-glass
glyphicon glyphicon-mizik
glyphicon glyphicon-rechèch
glyphicon glyphicon-kè
glyphicon glyphicon-star
glyphicon glyphicon-star-vid
glyphicon glyphicon-itilizatè
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-retire
glyphicon glyphicon-zoom-an
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-fatra
glyphicon glyphicon-kay
glyphicon glyphicon-dosye
glyphicon glyphicon-time
glyphicon glyphicon-wout
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-jwe-sèk
glyphicon glyphicon-repete
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-drapo
glyphicon glyphicon-koutè
glyphicon glyphicon-volim-off
glyphicon glyphicon-volim-desann
glyphicon glyphicon-volim-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-liv
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-tèks-wotè
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-dwat
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-dwat
glyphicon glyphicon-facetime-video
glyphicon glyphicon-foto
glyphicon glyphicon-map-marker
glyphicon glyphicon-ajiste
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-deplase
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-jwe
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-etap-devan
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-dwat
glyphicon glyphicon-plis-siy
glyphicon glyphicon-mwens-siy
glyphicon glyphicon-retire-siy
glyphicon glyphicon-ok-siy
glyphicon glyphicon-kesyon-siy
glyphicon glyphicon-info-siy
glyphicon glyphicon-screenshot
glyphicon glyphicon-retire-sèk
glyphicon glyphicon-ok-sèk
glyphicon glyphicon-ban-sèk
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-dwat
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-siy-eksklamasyon
glyphicon glyphicon-kado
glyphicon glyphicon-leaf
glyphicon glyphicon-dife
glyphicon glyphicon-je-louvri
glyphicon glyphicon-je-fèmen
glyphicon glyphicon-avètisman-siy
glyphicon glyphicon-avyon
glyphicon glyphicon-kalandriye
glyphicon glyphicon-random
glyphicon glyphicon-kòmantè
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-dosye-fèmen
glyphicon glyphicon-dosye-louvri
glyphicon glyphicon-resize-vètikal
glyphicon glyphicon-resize-orizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sètifika
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-men-dwat
glyphicon glyphicon-men-gòch
glyphicon glyphicon-men-up
glyphicon glyphicon-men-desann
glyphicon glyphicon-sèk-flèch-adwat
glyphicon glyphicon-sèk-flèch-gòch
glyphicon glyphicon-sèk-flèch-up
glyphicon glyphicon-sèk-flèch-desann
glyphicon glyphicon-globe
glyphicon glyphicon-kle
glyphicon glyphicon-travay
glyphicon glyphicon-filtre
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dachboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-kè-vid
glyphicon glyphicon-lyen
glyphicon glyphicon-telefòn
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-pa-alfabè
glyphicon glyphicon-sort-pa-alfabè-alt
glyphicon glyphicon-sort-pa-lòd
glyphicon glyphicon-sort-pa-lòd-alt
glyphicon glyphicon-sort-pa-atribi
glyphicon glyphicon-sort-pa-atribi-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-effondreman-desann
glyphicon glyphicon-effondreman-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nouvo-fenèt
glyphicon glyphicon-dosye
glyphicon glyphicon-save
glyphicon glyphicon-louvri
glyphicon glyphicon-sove
glyphicon glyphicon-enpòte
glyphicon glyphicon-ekspòtasyon
glyphicon glyphicon-voye
glyphicon glyphicon-diskèt
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-louvri
glyphicon glyphicon-kat-kredi
glyphicon glyphicon-transfer
glyphicon glyphicon-koutell
glyphicon glyphicon-header
glyphicon glyphicon-konprese
glyphicon glyphicon-koutè
glyphicon glyphicon-telefòn-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sous-titres
glyphicon glyphicon-son-stereo
glyphicon glyphicon-son-dolby
glyphicon glyphicon-son-5-1
glyphicon glyphicon-son-6-1
glyphicon glyphicon-son-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-enskripsyon-mak
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-louvri-dosye
glyphicon glyphicon-level-up
glyphicon glyphicon-kopi
glyphicon glyphicon-paste
glyphicon glyphicon-alèt
glyphicon glyphicon-equalizer
glyphicon glyphicon-wa
glyphicon glyphicon-queen
glyphicon glyphicon-pyon
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tant
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-efase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lanp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-sizo
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-fwote
glyphicon glyphicon-scale
glyphicon glyphicon-glas-lolly
glyphicon glyphicon-glas-piwi-goute
glyphicon glyphicon-education
glyphicon glyphicon-opsyon-orizontal
glyphicon glyphicon-opsyon-vètikal
glyphicon glyphicon-menu-anmbègè
glyphicon glyphicon-modal-window
glyphicon glyphicon-lwil
glyphicon glyphicon-grenn
glyphicon glyphicon-linèt solèy
glyphicon glyphicon-text-size
glyphicon glyphicon-tèks-koulè
glyphicon glyphicon-tèks-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objè-aliy-orizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-objè-aliy-vètikal
glyphicon glyphicon-objè-aliy-dwa
glyphicon glyphicon-triyang-dwat
glyphicon glyphicon-triyang-left
glyphicon glyphicon-triyang-bottom
glyphicon glyphicon-triyang-top
glyphicon glyphicon-konsole
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-gòch
glyphicon glyphicon-menu-dwat
glyphicon glyphicon-menu-desann
glyphicon glyphicon-menu-up

Kouman pou itilize

Pou rezon pèfòmans, tout ikon mande pou yon klas debaz ak yon klas ikon endividyèl. Pou itilize, mete kòd sa a jis sou nenpòt kote. Asire ou ke ou kite yon espas ant icon nan ak tèks pou padding apwopriye.

Pa melanje ak lòt konpozan

Klas ikon yo pa ka konbine dirèkteman ak lòt konpozan. Yo pa ta dwe itilize ansanm ak lòt klas sou menm eleman. Olye de sa, ajoute yon enbrike <span>epi aplike klas icon yo nan <span>.

Sèlman pou itilize sou eleman vid

Klas ikon yo ta dwe itilize sèlman sou eleman ki pa gen okenn kontni tèks epi ki pa gen eleman pitit.

Chanje kote font icon yo

Bootstrap sipoze fichye font icon yo pral lokalize nan ../fonts/anyè a, parapò ak dosye CSS yo konpile. Deplase oswa chanje non fichye font sa yo vle di mete ajou CSS la nan youn nan twa fason:

Chanje @icon-font-pathak/oswa @icon-font-namevaryab nan sous la Mwens fichye yo.
Sèvi ak opsyon URL relatif yo bay nan konpilatè a mwens.
Chanje url()chemen yo nan CSS konpile a.

Sèvi ak nenpòt opsyon ki pi bon kostim konfigirasyon devlopman espesifik ou.

Ikon aksesib

Vèsyon modèn teknoloji asistans yo pral anonse kontni CSS ki pwodui, ansanm ak karaktè Unicode espesifik. Pou evite pwodiksyon envolontè ak konfizyon nan lektè ekran (patikilyèman lè ikon yo itilize piman pou dekorasyon), nou kache yo ak aria-hidden="true"atribi a.

Si w ap itilize yon ikon pou transmèt siyifikasyon (olye ke sèlman kòm yon eleman dekoratif), asire ke siyifikasyon sa a transmèt tou nan teknoloji asistans – pou egzanp, enkli kontni adisyonèl, vizyèlman kache ak .sr-onlyklas la.

Si w ap kreye kontwòl ki pa gen okenn lòt tèks (tankou yon <button>ki gen sèlman yon ikòn), ou ta dwe toujou bay kontni altènatif pou idantifye objektif kontwòl la, pou li ka fè sans pou itilizatè teknoloji asistans yo. Nan ka sa a, ou ta ka ajoute yon aria-labelatribi sou kontwòl nan tèt li.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Egzanp yo

Sèvi ak yo nan bouton, gwoup bouton pou yon ba ikòn, navigasyon, oswa antre fòm avan.

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

Yon icon yo itilize nan yon alèt pou fè konnen se yon mesaj erè, ak tèks adisyonèl .sr-onlypou transmèt allusion sa a bay itilizatè teknoloji asistans yo.

Antre yon adrès imel ki valab

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

Baskile, meni kontèks pou montre lis lyen yo. Fè entèaktif ak dropdown JavaScript Plugin la .

Egzanp

Anvlope deklanche dropdown la ak meni deroulant la nan .dropdown, oswa yon lòt eleman ki deklare position: relative;. Lè sa a, ajoute HTML meni an.

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

Meni déroulant yo ka chanje pou elaji anlè (olye pou yo desann) lè yo ajoute .dropupnan paran an.

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

Aliyman

Pa default, yon meni deroulant otomatikman pozisyone 100% soti nan tèt la ak sou bò gòch la nan paran li. Ajoute .dropdown-menu-rightyon .dropdown-menua dwat aliman meni an deroulant.

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

Tèt

Ajoute yon header pou make seksyon aksyon yo nan nenpòt meni deroulant.

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

Divizeur

Ajoute yon divizyon separe seri lyen nan yon meni deroulant.

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

Atik meni ki andikape

Ajoute .disabledyon <li>nan deroule a pou enfim lyen an.

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

Gwoup yon seri bouton ansanm sou yon sèl liy ak gwoup bouton an. Ajoute sou opsyon radyo JavaScript ak konpòtman stil kaz ak bouton plugin nou an .

Tooltips & popovers nan gwoup bouton mande pou yon anviwònman espesyal

Lè w ap itilize konsèy zouti oswa popovers sou eleman ki nan yon .btn-group, ou pral oblije presize opsyon container: 'body'pou evite efè segondè vle (tankou eleman nan ap grandi pi laj ak/oswa pèdi kwen awondi li yo lè konsèy la oswa popover deklanche).

Asire w kòrèk `role`epi bay yon etikèt

Pou teknoloji asistans yo - tankou lektè ekran - pou transmèt ke yon seri de bouton gwoupe, roleyo dwe bay yon atribi apwopriye. Pou gwoup bouton, sa a ta dwe role="group", pandan y ap ba zouti yo ta dwe gen yon role="toolbar".

Yon eksepsyon se gwoup ki genyen sèlman yon sèl kontwòl (pa egzanp gwoup bouton jistifye ak <button>eleman) oswa yon dropdown.

Anplis de sa, gwoup yo ak ba zouti yo ta dwe bay yon etikèt klè, paske pifò teknoloji asistans pa pral anonse yo, malgre prezans roleatribi ki kòrèk la. Nan egzanp yo bay isit la, nou itilize aria-label, men altènativ tankou aria-labelledbyyo ka itilize tou.

Egzanp de baz

Vlope yon seri bouton ak .btnnan .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>

Konbine ansanm nan <div class="btn-group">yon <div class="btn-toolbar">konpozan pi konplèks.

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

Dimansyon

Olye pou w aplike klas gwosè bouton nan chak bouton nan yon gwoup, jis ajoute .btn-group-*nan chak .btn-group, ki gen ladan lè nidifikasyon gwoup miltip.

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

Nidifikasyon

Mete yon .btn-groupnan yon lòt .btn-grouplè ou vle meni déroulant melanje ak yon seri de bouton.

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

Vètikal varyasyon

Fè yon seri bouton parèt vètikal anpile olye ke orizontal. Men dewoulman bouton divize yo pa sipòte isit la.

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

Gwoup bouton jistifye

Fè yon gwoup bouton detire nan gwosè egal pou span tout lajè paran li yo. Travay tou ak bouton dropdowns nan gwoup bouton an.

Manyen fwontyè yo

Akòz HTML espesifik ak CSS yo itilize pou jistifye bouton (savwa display: table-cell), fwontyè ki genyen ant yo double. Nan gwoup bouton regilye yo, margin-left: -1pxyo itilize pile fwontyè yo olye pou yo retire yo. Sepandan, marginli pa travay ak display: table-cell. Kòm yon rezilta, tou depann de personnalisation ou nan Bootstrap, ou ka vle retire oswa re-koulè fwontyè yo.

IE8 ak fwontyè

Internet Explorer 8 pa rann fwontyè sou bouton nan yon gwoup bouton jistifye, si li sou <a>oswa <button>eleman. Pou jwenn alantou sa, vlope chak bouton nan yon lòt .btn-group.

Gade #12476 pou plis enfòmasyon.

Avèk `<a>`eleman

Jis vlope yon seri de .btns nan .btn-group.btn-group-justified.

Agòch Mwayen Dwa

Agòch Mwayen

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

Lyen ki aji kòm bouton

Si <a>yo itilize eleman yo pou yo aji kòm bouton - deklanche fonksyonalite nan paj, olye ke navige nan yon lòt dokiman oswa seksyon nan paj aktyèl la - yo ta dwe tou bay yon role="button".

Avèk `<button>`eleman

Pou itilize gwoup bouton jistifye ak <button>eleman, ou dwe vlope chak bouton nan yon gwoup bouton . Pifò navigatè pa byen aplike CSS nou an pou jistifikasyon nan <button>eleman yo, men depi nou sipòte bouton dropdowns, nou ka travay sou sa.

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

Sèvi ak nenpòt bouton pou deklanche yon meni deroulant lè w mete l nan yon .btn-groupepi bay meni apwopriye maketing la.

Depandans Plugin

Bouton dropdowns mande pou plugin dropdown la dwe enkli nan vèsyon ou nan Bootstrap.

Dropdowns bouton sèl

Vire yon bouton nan yon deroulan ak kèk chanjman debaz maketing.

<!-- 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 bouton dropdowns

Menm jan an tou, kreye dropdown bouton fann ak menm chanjman maketing yo, sèlman ak yon bouton separe.

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

Dimansyon

Bouton dropdowns travay ak bouton tout gwosè.

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

Deklanche meni deroulan anlè eleman yo lè w ajoute .dropupnan paran an.

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

Pwolonje kontwòl fòm lè w ajoute tèks oswa bouton anvan, apre, oswa sou tou de bò nenpòt ki baze sou tèks <input>. Sèvi .input-groupak yon .input-group-addonoswa .input-group-btnpou ajoute oswa ajoute eleman nan yon sèl .form-control.

Textual `<input>`s sèlman

Evite itilize <select>eleman isit la paske yo pa ka konplètman style nan navigatè WebKit.

Evite itilize <textarea>eleman isit la kòm rowsatribi yo pa pral respekte nan kèk ka.

Tooltips & popovers nan gwoup opinyon yo mande pou yon anviwònman espesyal

Lè w ap itilize konsèy zouti oswa popovers sou eleman ki nan yon .input-group, ou pral oblije presize opsyon container: 'body'pou evite efè segondè endezirab (tankou eleman nan ap grandi pi laj ak/oswa pèdi kwen awondi li yo lè konsèy la oswa popover deklanche).

Pa melanje ak lòt konpozan

Pa melanje gwoup fòm oswa klas kolòn gri dirèkteman ak gwoup antre. Olye de sa, nich gwoup la antre anndan gwoup fòm oswa eleman ki gen rapò ak kadriyaj la.

Toujou ajoute etikèt

Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou gwoup opinyon sa yo, asire w ke nenpòt lòt etikèt oswa fonksyonalite transmèt nan teknoloji asistans.

Teknik egzak yo dwe itilize (eleman vizib <label>, <label>eleman kache lè l sèvi avèk .sr-onlyklas la, oswa itilizasyon aria-label, aria-labelledby, aria-describedby, titleoswa placeholderatribi) ak ki enfòmasyon adisyonèl yo pral bezwen transmèt yo pral varye selon kalite egzak widje koòdone w ap aplike. Egzanp yo nan seksyon sa a bay kèk sigjere, apwòch ka-espesifik.

Egzanp de baz

Mete yon sèl ajoute oswa bouton sou chak bò yon opinyon. Ou kapab tou mete youn sou tou de bò yon opinyon.

Nou pa sipòte plizyè ajoute ( .input-group-addonoswa .input-group-btn) sou yon sèl bò.

Nou pa sipòte plizyè fòm-kontwòl nan yon sèl gwoup opinyon.

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

Dimansyon

Ajoute klas relatif gwosè fòm yo nan .input-grouptèt li ak sa ki nan yo pral otomatikman redimensionne-pa bezwen repete klas gwosè kontwòl fòm yo sou chak eleman.

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

Case ak adisyon radyo

Mete nenpòt kaz oswa opsyon radyo nan addon yon gwoup opinyon olye pou yo tèks.

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

Bouton nan gwoup opinyon yo yon ti jan diferan epi yo mande pou yon nivo siplemantè nan nidifikasyon. Olye de .input-group-addon, w ap bezwen sèvi .input-group-btnak vlope bouton yo. Sa a se obligatwa akòz estil navigatè default ki pa ka pase sou plas.

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

Bouton ak dropdowns

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

Bouton segmenté

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

Plizyè bouton

Pandan ke ou ka sèlman gen yon sèl ajoute sou chak bò, ou ka gen plizyè bouton andedan yon sèl .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs ki disponib nan Bootstrap yo gen makasyon pataje, kòmanse ak .navklas debaz la, osi byen ke eta pataje. Boukante klas modifye pou chanje ant chak style.

Sèvi ak navs pou panno tab mande pou JavaScript tabs plugin

Pou onglè ki gen zòn tabulab, ou dwe itilize onglè JavaScript plugin . Markup la pral mande tou roleatribi adisyonèl ak ARIA - gade egzanp maketing plugin a pou plis detay.

Fè nav yo itilize kòm navigasyon aksesib

Si w ap itilize nav pou bay yon ba navigasyon, asire w ou ajoute yon role="navigation"nan veso paran ki pi lojik nan <ul>, oswa vlope yon <nav>eleman alantou tout navigasyon an. Pa ajoute wòl nan <ul>tèt li, paske sa ta anpeche teknoloji asistans yo anonse l kòm yon lis aktyèl.

Tabs

Remake byen .nav-tabsklas la mande pou .navklas debaz la.

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

Grenn

Pran menm HTML sa a, men sèvi ak .nav-pillspito:

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

Grenn yo tou vètikal anpile. Jis ajoute .nav-stacked.

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

jistifye

Fasil fè tab oswa grenn egal lajè paran yo nan ekran ki pi laj pase 768px ak .nav-justified. Sou ekran ki pi piti yo, lyen navigasyon yo anpile.

Lyen nav nav jistifye yo pa sipòte kounye a.

Safari ak repons jistifye nav

Apati v9.1.2, Safari montre yon ensèk nan ki redimansyonman navigatè ou a orizontal lakòz erè nan rann nan navigasyon jistifye ki efase lè rafrechi. Ensèk sa a montre tou nan egzanp nav jistifye .

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

Lyen andikape

Pou nenpòt eleman navigasyon (onglè oswa grenn), ajoute .disabledpou lyen gri epi pa gen efè hover .

Fonksyonalite lyen pa afekte

Klas sa a pral sèlman chanje <a>aparans la, pa fonksyonalite li yo. Sèvi ak JavaScript koutim pou enfim lyen isit la.

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

Sèvi ak dropdowns

Ajoute meni déroulants ak yon ti HTML anplis ak plugin JavaScript deroulans yo .

Onglet ak dropdowns

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

Grenn ak dropdowns

<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 yo se eleman meta ki reponn ki sèvi kòm headers navigasyon pou aplikasyon w lan oswa sit. Yo kòmanse efondre (epi yo baskile) nan vi mobil yo epi yo vin orizontal kòm lajè vi ki disponib la ogmante.

Lyen nav nav jistifye yo pa sipòte kounye a.

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

Ranplase mak navbar la ak pwòp imaj ou a lè w chanje tèks la pou yon <img>. Depi a .navbar-brandgen pwòp padding li yo ak wotè, ou ka bezwen pase sou desizyon kèk CSS depann sou imaj ou.

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

Mete kontni fòm nan .navbar-formpou aliyman vètikal apwopriye ak konpòtman tonbe nan pòtay etwat. Sèvi ak opsyon aliyman yo pou deside ki kote li abite nan kontni navbar la.

Kòm yon tèt, .navbar-formpataje anpil nan kòd li yo ak .form-inlinevia mixin. Gen kèk kontwòl fòm, tankou gwoup antre, ki ka mande pou lajè fiks yo parèt byen nan yon navbar.

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

Toujou ajoute etikèt

Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-onlyklas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label, aria-labelledbyoswa titleatribi. Si pa gen youn nan sa yo prezan, lektè ekran yo ka itilize itilize placeholderatribi a, si yo prezan, men sonje ke itilizasyon placeholderkòm yon ranplasman pou lòt metòd etikèt yo pa konseye.

Ajoute .navbar-btnklas la nan <button>eleman ki pa abite nan yon <form>vètikal santre yo nan navbar la.

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

Anvlope fisèl tèks nan yon eleman ak .navbar-text, anjeneral sou yon <p>tag pou bon dirijan ak koulè.

<p class="navbar-text">Signed in as Mark Otto</p>

Pou moun k ap itilize lyen estanda ki pa nan eleman navigasyon regilye navbar la, sèvi ak .navbar-linkklas la pou ajoute koulè apwopriye pou opsyon navbar default ak envès.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Aliman lyen navigasyon, fòm, bouton, oswa tèks, lè l sèvi avèk .navbar-leftklas .navbar-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a. Pou egzanp, aliman lyen navigasyon, mete yo nan yon separe <ul>ak klas sèvis piblik respektif yo aplike.

Klas sa yo se vèsyon mixin-ed nan .pull-leftak .pull-right, men yo ap aplike nan demann medya pou pi fasil manyen konpozan navbar atravè gwosè aparèy.

Ajoute .navbar-fixed-topepi enkli yon .containeroswa .container-fluidnan sant ak pad navbar kontni.

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

Kò padding obligatwa

Navbar fiks la pral kouvri lòt kontni ou, sof si ou ajoute paddingnan tèt la nan <body>. Eseye pwòp valè ou oswa itilize snippet nou anba a. Ide: Pa default, navbar la se 50px segondè.

body { padding-top: 70px; }

Asire w ou mete sa a apre debaz Bootstrap CSS la.

Ajoute .navbar-fixed-bottomepi enkli yon .containeroswa .container-fluidnan sant ak pad navbar kontni.

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

Kò padding obligatwa

Navbar fiks la pral kouvri lòt kontni ou a, sof si ou ajoute paddingnan anba a nan <body>. Eseye pwòp valè ou oswa itilize snippet nou anba a. Ide: Pa default, navbar la se 50px segondè.

body { padding-bottom: 70px; }

Asire w ou mete sa a apre debaz Bootstrap CSS la.

Kreye yon navbar plen lajè ki defile ak paj la lè w ajoute .navbar-static-topepi enkli yon .containeroswa .container-fluidnan sant ak pad kontni navbar.

Kontrèman ak .navbar-fixed-*klas yo, ou pa bezwen chanje okenn padding sou body.

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

Modifye aparans nan navbar la lè w ajoute .navbar-inverse.

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

Ti pen

Endike kote paj aktyèl la nan yon yerachi navigasyon.

Separatè yo otomatikman ajoute nan CSS atravè :beforeak content.

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

Papyaj

Bay lyen pajinasyon pou sit ou oswa aplikasyon w lan ak eleman pajinasyon ki gen plizyè paj, oswa altènatif pager ki pi senp lan .

Default pagination

Senp paginasyon enspire pa Rdio, bon pou apps ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

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

Mete etikèt sou eleman paginasyon an

Yo ta dwe vlope eleman paginasyon an nan yon <nav>eleman pou idantifye li kòm yon seksyon navigasyon pou ekran lektè ak lòt teknoloji asistans. Anplis de sa, kòm yon paj gen anpil chans pou gen plis pase yon seksyon navigasyon sa yo deja (tankou navigasyon prensipal la nan header la, oswa yon navigasyon bò kote), li rekòmande bay yon deskripsyon aria-labelpou la <nav>ki reflete objektif li. Pou egzanp, si yo itilize eleman paginasyon an pou navige ant yon seri rezilta rechèch, yon etikèt apwopriye ta ka aria-label="Search results pages".

Eta andikape ak aktif

Lyen yo customizable pou diferan sikonstans. Itilize .disabledpou lyen ki pa klike ak .activepou endike paj aktyèl la.

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

Nou rekòmande pou ou chanje jete lank aktif oswa andikape pou <span>, oswa evite jete lank nan ka flèch anvan/pwochen yo, pou retire fonksyonalite klike yo pandan w ap kenbe estil entansyon yo.

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

Dimansyon

Anpenpan pi gwo oswa pi piti paginasyon? Ajoute .pagination-lgoswa .pagination-smpou gwosè adisyonèl.

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

Pager

Lyen rapid anvan ak pwochen pou enplemantasyon paginasyon senp ak mak ak estil limyè. Li bon pou sit senp tankou blog oswa magazin.

Default egzanp

Pa default, pager la santre lyen.

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

Lyen ki aliyen

Altènativman, ou ka aliman chak lyen sou kote sa yo:

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

Si ou vle eta andikape

Lyen pager yo itilize tou klas itilite jeneral .disabledki soti nan paginasyon an.

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

Egzanp

Egzanp tit Nouvo

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

Varyasyon ki disponib

Ajoute nenpòt nan klas modifye yo mansyone anba a pou chanje aparans yon etikèt.

Default Primary Success Info Avètisman Danje

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

Gen tòn etikèt?

Pwoblèm rann yo ka parèt lè ou gen plizyè douzèn etikèt enline nan yon resipyan etwat, yo chak genyen inline-blockeleman pwòp li yo (tankou yon icon). Wout la alantou sa a se anviwònman display: inline-block;. Pou yon kontèks ak yon egzanp, gade #13219 .

Fasil mete aksan sou atik nouvo oswa ki poko li lè w ajoute yon <span class="badge">nan lyen, Bootstrap navs, ak plis ankò.

Bwat resepsyon42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Pwòp tèt ou tonbe

Lè pa gen okenn atik nouvo oswa ki poko li, badj yo pral tou senpleman tonbe (atravè :emptyseleksyon CSS la) depi pa gen okenn kontni ki egziste.

Konpatibilite kwa-navigatè

Badj yo pa pral tonbe tèt yo nan Internet Explorer 8 paske li manke sipò pou :emptyseleksyon an.

Adapte ak eta nav aktif

Styles entegre yo enkli pou mete badj nan eta aktif nan navigasyon grenn.

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

Yon eleman ki lejè, fleksib ki ka pwolonje tout vi a pou montre kontni kle sou sit ou a.

Bonjou, mond!

Sa a se yon inite ewo senp, yon senp eleman jumbotron-style pou rele plis atansyon sou kontni an prezante oswa enfòmasyon.

Aprann plis

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

Pou fè jumbotron a plen lajè, epi san kwen awondi, mete l deyò tout .containers epi olye ajoute yon .containerandedan.

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

Yon kokiy senp pou yon h1espas apwopriye epi segman seksyon kontni sou yon paj. Li ka itilize eleman h1default smallla, osi byen ke pifò lòt konpozan (ak estil adisyonèl).

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

Pwolonje sistèm kadriyaj Bootstrap la ak eleman miniature pou montre fasilman griyaj imaj, videyo, tèks, ak plis ankò.

Si w ap chèche pou Pinterest-tankou prezantasyon nan miniatures nan diferan wotè ak / oswa lajè, w ap bezwen sèvi ak yon Plugin twazyèm-pati tankou Masonry , Isotope , oswa Salvattore .

Default egzanp

Pa default, ti miniatures Bootstrap yo fèt pou montre imaj ki lye yo ak maketing minimòm obligatwa.

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

Kontni Custom

Avèk yon ti mak siplemantè, li posib pou ajoute nenpòt kalite kontni HTML tankou tit, paragraf, oswa bouton nan miniatures.

Etikèt miniature

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

Bouton Bouton

Etikèt miniature

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

Bouton Bouton

Etikèt miniature

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

Bouton Bouton

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

Bay mesaj fidbak kontèks pou aksyon itilizatè tipik ak ti ponyen mesaj alèt ki disponib ak fleksib.

Egzanp yo

Anvlope nenpòt tèks ak yon bouton anile opsyonèl nan .alertak youn nan kat klas kontèks yo (egzanp, .alert-success) pou mesaj alèt debaz yo.

Pa gen klas default

Alèt yo pa gen klas defo, sèlman klas baz ak modifikatè. Yon alèt gri default pa fè twòp sans, kidonk ou oblije presize yon kalite atravè klas kontèks. Chwazi nan siksè, enfòmasyon, avètisman, oswa danje.

Byen fè! Ou byen li mesaj alèt enpòtan sa a.

Tèt leve! Alèt sa a bezwen atansyon ou, men li pa trè enpòtan.

Avètisman! Pito tcheke tèt ou, ou pa gade twò bon.

Oh menen! Chanje kèk bagay epi eseye soumèt ankò.

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

Alèt ki pa gendwa

Bati sou nenpòt alèt lè w ajoute yon .alert-dismissiblebouton opsyonèl ak fèmen.

Mande JavaScript plugin alèt

Pou alèt yo byen fonksyone, ki pa gen okenn alèt, ou dwe itilize plugin JavaScript alèt yo .

Avètisman! Pito tcheke tèt ou, ou pa gade twò bon.

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

Asire bon konpòtman atravè tout aparèy

Asire ou ke ou sèvi ak <button>eleman ki gen data-dismiss="alert"atribi done a.

Lyen nan alèt yo

Sèvi ak .alert-linkklas sèvis piblik la byen vit bay lyen ki gen koulè ki matche nan nenpòt alèt.

Byen fè! Ou byen li mesaj alèt enpòtan sa a .

Tèt leve! Alèt sa a bezwen atansyon ou , men li pa trè enpòtan.

Avètisman! Pito ou tcheke tèt ou, ou pa gade twò bon .

Oh menen! Chanje kèk bagay epi eseye soumèt ankò.

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

Bay fidbak ajou sou pwogrè yon workflow oswa aksyon ak ba pwogrè senp men fleksib.

Konpatibilite kwa-navigatè

Ba pwogrè sèvi ak tranzisyon CSS3 ak animasyon pou reyalize kèk nan efè yo. Karakteristik sa yo pa sipòte nan Internet Explorer 9 ak pi ba a oswa ansyen vèsyon Firefox. Opera 12 pa sipòte animasyon yo.

Kontni Sekirite Règleman (CSP) konpatibilite

Si sit entènèt ou a gen yon Règleman Sekirite Kontni (CSP) ki pa pèmèt style-src 'unsafe-inline', Lè sa a, ou p ap kapab sèvi ak styleatribi enline pou mete lajè ba pwogrè jan yo montre nan egzanp nou yo anba a. Metòd altènatif pou fikse lajè ki konpatib ak CSP strik yo enkli lè l sèvi avèk yon ti JavaScript koutim (ki mete element.style.width) oswa lè l sèvi avèk klas CSS koutim.

Egzanp de baz

Default ba pwogrè.

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

Avèk etikèt

Retire klas la nan <span>ba .sr-onlypwogrè a pou montre yon pousantaj vizib.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Pou asire ke tèks etikèt la rete lizib menm pou pousantaj ki ba, konsidere ajoute yon min-widthnan ba pwogrè a.

0%

2%

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

Altènativ kontèks

Ba pwogrè sèvi ak kèk nan menm bouton ak klas alèt pou estil ki konsistan.

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

Raye

Sèvi ak yon gradyan pou kreye yon efè trase. Pa disponib nan IE9 ak anba a.

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

Anime

Ajoute .activenan .progress-bar-stripedpou anime bann yo dwat a goch. Pa disponib nan IE9 ak anba a.

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

Anpile

Mete plizyè ba nan menm bagay la .progresspou anpile yo.

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

Estil objè abstrè pou bati divès kalite konpozan (tankou kòmantè blog, Tweet, elatriye) ki prezante yon imaj ki aliye sou bò gòch oswa dwa ansanm ak kontni tèks.

Default medya

Medya default yo montre yon objè medya (imaj, videyo, odyo) sou bò gòch oswa adwat yon blòk kontni.

Medya tit

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 lacinia congue felis nan faucibus.

Medya tit

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 lacinia congue felis nan faucibus.

Tèt medya anbrike

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 lacinia congue felis nan faucibus.

Medya tit

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.

Medya tit

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>

Klas yo .pull-leftak .pull-righttou egziste epi yo te deja itilize kòm yon pati nan eleman nan medya yo, men yo depreche pou itilizasyon sa a nan v3.3.0. Yo apeprè ekivalan a .media-leftak .media-right, eksepte ke .media-rightyo ta dwe mete apre a .media-bodynan html la.

Medya aliyman

Imaj yo oswa lòt medya yo ka aliyen anwo, mitan, oswa anba. Defo a se tèt ki aliyen.

Top medya ki aliyen

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 lacinia congue felis nan faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus.

Mwayen ki aliyen medya yo

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 lacinia congue felis nan faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus.

Anba ki aliyen medya yo

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 lacinia congue felis nan faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak 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>

Lis medya yo

Avèk yon ti mak siplemantè, ou ka itilize medya andedan lis (itil pou fil kòmantè oswa lis atik).

Medya tit

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.

Tèt medya anbrike
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.

Tèt medya anbrike
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.

Tèt medya anbrike
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>

Gwoup lis yo se yon eleman fleksib ak pwisan pou montre non sèlman lis eleman senp, men lis konplèks ak kontni koutim.

Egzanp de baz

Gwoup lis ki pi fondamantal la se tou senpleman yon lis ki pa gen lòd ak atik lis yo, ak klas apwopriye yo. Bati sou li ak opsyon ki swiv yo, oswa pwòp CSS ou jan sa nesesè.

Cras justo odio
Dapibus ak fasilite nan
Morbi leo risus
Porta ac consectetur ac
Vestibulum nan eros

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

Badj

Ajoute eleman badj la nan nenpòt atik gwoup lis epi li pral otomatikman pozisyone sou bò dwat la.

14Cras justo odio
2Dapibus ak fasilite nan
1Morbi leo risus

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

Atik ki lye

Konekte atik gwoup lis yo lè l sèvi avèk etikèt jete lank olye pou yo atik lis yo (sa vle di tou yon paran <div>olye de yon <ul>). Pa bezwen paran endividyèl alantou chak eleman.

Cras justo odio Dapibus ak fasilite nan Morbi leo risus Porta ac consectetur ac Vestibulum nan eros

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

Atik bouton

Atik gwoup lis yo ka bouton olye de atik lis (sa vle di tou yon paran <div>olye de yon <ul>). Pa bezwen paran endividyèl alantou chak eleman. Pa sèvi ak klas estanda .btnyo isit la.

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

Atik ki andikape

Ajoute .disablednan yon .list-group-itemgri li soti nan parèt enfim.

Cras justo odio Dapibus ak fasilite nan Morbi leo risus Porta ac consectetur ac Vestibulum nan eros

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

Klas kontèks

Sèvi ak klas kontèks pou style atik lis, default oswa lye. Gen ladan tou .activeeta.

Dapibus ak fasilite nan
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum nan eros

Dapibus ak fasilite nan Cras sit amet nibh libero Porta ac consectetur ac Vestibulum nan eros

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

Kontni Custom

Ajoute prèske nenpòt HTML nan, menm pou gwoup lis lye tankou sa ki anba a.

Lis gwoup atik tit

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Lis gwoup atik tit

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Lis gwoup atik tit

Donec id elit non mi porta gravida at eget metus. Mecenas 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>

Pandan ke pa toujou nesesè, pafwa ou bezwen mete DOM ou nan yon bwat. Pou sitiyasyon sa yo, eseye eleman panèl la.

Egzanp de baz

Pa default, tout sa yo .panelfè se aplike kèk fwontyè debaz ak padding pou genyen kèk kontni.

Egzanp panèl debaz

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel ak tit

Fasil ajoute yon veso tit nan panèl ou a ak .panel-heading. Ou ka genyen tou nenpòt <h1>- <h6>ak yon .panel-titleklas pou ajoute yon tit pre-estile. Sepandan, gwosè font yo nan <h1>- <h6>yo depase pa .panel-heading.

Pou bon koloran lyen, asire w ou mete lyen nan tit nan .panel-title.

Panèl tit san tit

Kontni panèl

Tit panèl

Kontni panèl

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

Anvlope bouton oswa tèks segondè nan .panel-footer. Remake byen ke pye panèl pa eritye koulè ak fwontyè lè w ap itilize varyasyon kontèks yo paske yo pa vle di yo dwe nan premye plan an.

Kontni panèl

Panèl footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Altènativ kontèks

Menm jan ak lòt eleman, fasilman fè yon panèl plis sans nan yon kontèks patikilye lè w ajoute nenpòt nan klas eta kontèks yo.

Tit panèl

Kontni panèl

Tit panèl

Kontni panèl

Tit panèl

Kontni panèl

Tit panèl

Kontni panèl

Tit panèl

Kontni panèl

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

Avèk tab

Ajoute nenpòt ki pa bòdi .tablenan yon panèl pou yon konsepsyon san pwoblèm. Si gen yon .panel-body, nou ajoute yon fwontyè siplemantè nan tèt tab la pou separasyon.

tit panèl

Gen kèk kontni panèl default isit la. 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.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@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>

Si pa gen okenn kò panèl, eleman an deplase soti nan header panèl nan tab san entèripsyon.

tit panèl

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Avèk gwoup lis

Fasil enkli gwoup lis tout lajè nan nenpòt panèl.

tit panèl

Gen kèk kontni panèl default isit la. 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 ak fasilite nan
Morbi leo risus
Porta ac consectetur ac
Vestibulum nan eros

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

Pèmèt navigatè yo detèmine dimansyon videyo oswa diaporama ki baze sou lajè blòk ki genyen yo lè yo kreye yon rapò intrinsèque ki pral byen echèl sou nenpòt aparèy.

Règ yo aplike dirèkteman nan <iframe>, <embed>, <video>, ak <object>eleman; opsyonèlman sèvi ak yon klas desandan eksplisit .embed-responsive-itemlè ou vle matche ak stil pou lòt atribi.

Pro-Tip! Ou pa bezwen mete frameborder="0"nan <iframe>s ou kòm nou pase sou desizyon sa pou ou.

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

Default byen

Sèvi ak pi a kòm yon efè senp sou yon eleman bay li yon efè ensèkle.

Gade, mwen nan yon pi!

<div class="well">...</div>

Klas opsyonèl

Kontwòl padding ak kwen awondi ak de klas modifye opsyonèl.

Gade, mwen nan yon gwo pi!

<div class="well well-lg">...</div>

Gade, mwen nan yon ti pi!

<div class="well well-sm">...</div>

Eleman

Glyphicons

Glif ki disponib

Kouman pou itilize

Pa melanje ak lòt konpozan

Sèlman pou itilize sou eleman vid

Chanje kote font icon yo

Ikon aksesib

Egzanp yo

Dropdowns

Egzanp

Aliyman

Ka mande pou pozisyon adisyonèl

Depreche .pull-rightaliyman

Tèt

Divizeur

Atik meni ki andikape

Gwoup bouton

Tooltips & popovers nan gwoup bouton mande pou yon anviwònman espesyal

Asire w kòrèk roleepi bay yon etikèt

Egzanp de baz

Ba zouti bouton

Dimansyon

Nidifikasyon

Vètikal varyasyon

Gwoup bouton jistifye

Manyen fwontyè yo

IE8 ak fwontyè

Avèk <a>eleman

Lyen ki aji kòm bouton

Avèk <button>eleman

Bouton dropdowns

Depandans Plugin

Dropdowns bouton sèl

Split bouton dropdowns

Dimansyon

Dropup varyasyon

Antre gwoup yo

Textual <input>s sèlman

Tooltips & popovers nan gwoup opinyon yo mande pou yon anviwònman espesyal

Pa melanje ak lòt konpozan

Toujou ajoute etikèt

Egzanp de baz

Dimansyon

Case ak adisyon radyo

Addons bouton

Bouton ak dropdowns

Bouton segmenté

Plizyè bouton

Navs

Sèvi ak navs pou panno tab mande pou JavaScript tabs plugin

Fè nav yo itilize kòm navigasyon aksesib

Tabs

Grenn

jistifye

Safari ak repons jistifye nav

Lyen andikape

Fonksyonalite lyen pa afekte

Sèvi ak dropdowns

Onglet ak dropdowns

Grenn ak dropdowns

Navbar

Navbar default

Kontni debòde

Mande JavaScript plugin

Chanje pwen rupture navbar mobil ki tonbe a

Fè navbars aksesib

Imaj mak

Fòm

Opozisyon aparèy mobil

Toujou ajoute etikèt

Bouton

Itilizasyon kontèks espesifik

Tèks

Lyen ki pa navigatè

Aliyman eleman

Dwa aliman plizyè konpozan

Fiks sou tèt

Kò padding obligatwa

Fiks anba

Depreche `.pull-right`aliyman

Asire w kòrèk `role`epi bay yon etikèt

Avèk `<a>`eleman

Avèk `<button>`eleman

Textual `<input>`s sèlman