Glyphicons

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-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-tèks-wotè
  • glyphicon glyphicon-tèks-lajè
  • 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.

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

Dropdowns

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

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>

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.

Ka mande pou pozisyon adisyonèl

Dropdowns yo otomatikman pozisyone atravè CSS nan koule nòmal nan dokiman an. Sa vle di paran ki gen sèten pwopriyete yo ka koupe dropdowns overflowoswa parèt andeyò pòtay la. Abòde pwoblèm sa yo poukont ou pandan y ap parèt.

Depreche .pull-rightaliyman

Kòm nan v3.1.0, nou te depreche .pull-rightsou meni deroulan. Pou fè aliman dwat yon meni, sèvi ak .dropdown-menu-right. Konpozan nav ki aliye adwat nan navbar la itilize yon vèsyon mixin nan klas sa a pou aliman meni an otomatikman. Pou pase sou tèt li, sèvi ak .dropdown-menu-left.

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

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>

Ajoute yon divizyon separe seri lyen nan yon meni deroulant.

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

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 bouton

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

Ba zouti bouton

Konbine ansanm <div class="btn-group">nan yon <div class="btn-toolbar">pou 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>

Varyasyon vètikal

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.

<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, men depi nou sipòte dropdowns bouton, 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>

Bouton dropdowns

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>

Antre gwoup yo

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.

@

@egzanp.com

$ .00

https://example.com/users/
<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

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.

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>

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>

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 navs

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>

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>

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

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.

Kontni debòde

Depi Bootstrap pa konnen ki kantite espas kontni an nan navbar ou bezwen, ou ta ka rankontre pwoblèm ak anbalaj kontni nan yon dezyèm ranje. Pou rezoud sa a, ou kapab:

  1. Diminye kantite oswa lajè atik navbar yo.
  2. Kache sèten atik navbar nan sèten gwosè ekran lè l sèvi avèk klas sèvis piblik ki reponn .
  3. Chanje pwen kote navbar ou a chanje ant mòd tonbe ak orizontal. Customize @grid-float-breakpointvaryab la oswa ajoute pwòp rekèt medya ou.

Mande JavaScript plugin

Si JavaScript dezaktive epi fenèt la ase etwat pou navbar la tonbe, li pral enposib pou elaji navbar la epi gade kontni an nan .navbar-collapse.

Navbar ki reponn a mande pou plugin efondreman an enkli nan vèsyon ou nan Bootstrap.

Chanje pwen rupture navbar mobil ki tonbe a

Navbar la tonbe nan vi mobil vètikal li lè vi a pi etwat pase @grid-float-breakpoint, epi li elaji nan vi orizontal li ki pa mobil lè vi a se omwen @grid-float-breakpointnan lajè. Ajiste varyab sa a nan sous la Mwens pou kontwole lè navbar la tonbe/agrandi. Valè default la se 768px(pi piti ekran an "ti" oswa "tablèt").

Fè navbars aksesib

Asire w ou sèvi ak yon <nav>eleman oswa, si w ap itilize yon eleman ki pi jenerik tankou yon <div>, ajoute yon role="navigation"nan chak navbar pou idantifye li klèman kòm yon rejyon enpòtan pou itilizatè teknoloji asistans.

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

Opozisyon aparèy mobil

Gen kèk opozisyon konsènan lè l sèvi avèk kontwòl fòm nan eleman fiks sou aparèy mobil. Gade dokiman sipò navigatè nou an pou plis detay.

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 okenn nan sa yo pa prezan, lektè ekran yo ka 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>

Itilizasyon kontèks espesifik

Tankou klas bouton estanda yo , .navbar-btnyo ka itilize sou <a>ak <input>eleman. Sepandan, ni .navbar-btnni klas bouton estanda yo ta dwe itilize sou <a>eleman ki nan .navbar-nav.

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.

Dwa aliman plizyè konpozan

Navbars kounye a gen yon limit ak plizyè .navbar-rightklas. Pou byen espas kontni, nou itilize maj negatif sou dènye .navbar-righteleman an. Lè gen plizyè eleman k ap itilize klas sa a, maj sa yo pa travay jan sa vle di.

Nou pral revize sa a lè nou ka reekri eleman sa a nan v4.

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>

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>

Etikèt

Egzanp

Egzanp tit Nouvo

Egzanp tit Nouvo

Egzanp tit Nouvo

Egzanp tit Nouvo

Egzanp tit Nouvo
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 veso etwat, yo chak genyen inline-blockeleman pwòp pa yo (tankou yon icon). Wout la alantou sa a se anviwònman display: inline-block;. Pou yon kontèks ak yon egzanp, gade #13219 .

Badj

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

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

Jumbotron

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>

Tèt paj

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>

Miniatures

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.

100%x200

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

100%x200

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

100%x200

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>

Alèt

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.

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

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

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

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

Ba pwogrè

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

60% konplè
<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.

40% konplè (siksè)
20% konplè
60% konplè (avètisman)
80% konplè (danje)
<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.

40% konplè (siksè)
20% konplè
60% konplè (avètisman)
80% konplè (danje)
<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.

45% Konplete
<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.

35% konplè (siksè)
20% konplè (avètisman)
10% konplè (danje)
<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>

Objè medya yo

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

Lis gwoup

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.

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

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

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

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

Panno yo

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>

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

Reponn embed

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>

Wells

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>