Muaj glyphs

suav nrog ntau dua 250 glyphs hauv font hom los ntawm Glyphicon Halflings teeb. Glyphicons Halflings feem ntau tsis muaj pub dawb, tab sis lawv tus tsim tau ua rau lawv muaj rau Bootstrap dawb xwb. Ua tsaug rau koj, peb tsuas yog thov kom koj suav nrog qhov txuas rov qab mus rau Glyphicons thaum twg los tau.

glyphicon glyphicon-asterisk
glyphicon glyphicon ntxiv
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon - rho tawm
glyphicon glyphicon huab
glyphicon glyphicon-lub hnab ntawv
glyphicon glyphicon cwj mem
glyphicon iav glyphicon-iav
glyphicon glyphicon suab paj nruag
glyphicon glyphicon nrhiav
glyphicon glyphicon-lub siab
glyphicon-lub hnub qub glyphicon
glyphicon glyphicon-hnub qub-dawb
glyphicon glyphicon-neeg siv
glyphicon glyphicon zaj duab xis
glyphicon glyphicon-th-loj
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-zoo
glyphicon glyphicon tshem tawm
glyphicon-zoom-in
glyphicon-zoom-out
glyphicon glyphicon tawm
glyphicon glyphicon-xov xwm
glyphicon glyphicon cog
glyphicon glyphicon-tshuaj lom
glyphicon glyphicon-tsev
glyphicon glyphicon-cov ntaub ntawv
glyphicon glyphicon-lub sijhawm
glyphicon glyphicon-txoj kev
glyphicon glyphicon-download-alt
glyphicon glyphicon download tau
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-ua si-lub voj voog
glyphicon glyphicon-rov ua dua
glyphicon glyphicon-ua tshiab
glyphicon glyphicon-list-alt
glyphicon glyphicon xauv
glyphicon glyphicon-chij
glyphicon glyphicon-lub mloog pob ntseg
glyphicon glyphicon-ntim-tawm
glyphicon glyphicon-ntim-down
glyphicon glyphicon ntim-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon-tag
glyphicon-tag
glyphicon glyphicon phau ntawv
glyphicon glyphicon-bookmark
glyphicon glyphicon luam tawm
glyphicon glyphicon-lub koob yees duab
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-ntawv-qhov siab
glyphicon glyphicon ntawv-dav
glyphicon glyphicon-align-sab laug
glyphicon glyphicon-align-center
glyphicon glyphicon-align-txoj cai
glyphicon glyphicon-align-justify
glyphicon glyphicon daim ntawv teev npe
glyphicon glyphicon-indent-sab laug
glyphicon glyphicon-indent-txoj cai
glyphicon glyphicon-facetime-video
glyphicon glyphicon-daim duab
glyphicon glyphicon-daim ntawv qhia-marker
glyphicon glyphicon-kho
glyphicon glyphicon-tint
glyphicon glyphicon-kho kom raug
glyphicon glyphicon sib koom
glyphicon glyphicon-xyuas
glyphicon glyphicon txav
glyphicon glyphicon-step-rov qab
glyphicon glyphicon-ceev-rov qab
glyphicon glyphicon-rov qab
glyphicon-ua si glyphicon
glyphicon-pause
glyphicon glyphicon nres
glyphicon glyphicon pem hauv ntej
glyphicon glyphicon-fast-forward
glyphicon glyphicon-qib-rau pem hauv ntej
glyphicon glyphicon tawm
glyphicon glyphicon-chevron-sab laug
glyphicon glyphicon-chevron-txoj cai
glyphicon glyphicon-plus-sign
glyphicon glyphicon-muas-kos npe
glyphicon glyphicon tshem tawm- kos npe
glyphicon glyphicon-ok-kos npe
glyphicon glyphicon-nug-kos npe
glyphicon glyphicon-info-kos npe
glyphicon glyphicon-screenshot duab
glyphicon glyphicon-tshem tawm-lub voj voog
glyphicon glyphicon-ok-lub voj voog
glyphicon glyphicon-ban-lub voj voog
glyphicon glyphicon- xub-sab laug
glyphicon glyphicon- xub-txoj cai
glyphicon glyphicon- xub-up
glyphicon glyphicon- xub-down
glyphicon glyphicon-pab-alt
glyphicon glyphicon-resize-tag nrho
glyphicon glyphicon-resize-me me
glyphicon glyphicon-exclamation-kos npe
glyphicon glyphicon khoom plig
glyphicon glyphicon nplooj
glyphicon glyphicon hluav taws
glyphicon glyphicon-qhov muag-qhib
glyphicon glyphicon-qhov muag-kaw
glyphicon glyphicon ceeb toom- kos npe
glyphicon glyphicon dav hlau
glyphicon daim ntawv qhia hnub glyphicon
glyphicon glyphicon random
glyphicon glyphicon-lus
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-tsheb
glyphicon glyphicon-folder-kaw
glyphicon glyphicon-folder-qhib
glyphicon glyphicon-resize- ntsug
glyphicon glyphicon-resize-kab rov tav
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn cov duab
glyphicon glyphicon- tswb
glyphicon glyphicon daim ntawv pov thawj
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-tes-txoj cai
glyphicon glyphicon-tes-sab laug
glyphicon glyphicon-ua-up
glyphicon glyphicon-tes-down
glyphicon glyphicon-lub voj voog- xub-txoj cai
glyphicon glyphicon-lub voj voog- xub-sab laug
glyphicon glyphicon-lub voj voog- xub-up
glyphicon glyphicon-lub voj voog- xub-down
glyphicon glyphicon ntiaj teb
glyphicon glyphicon ciaj ntswj
glyphicon glyphicon-ua haujlwm
glyphicon glyphicon-filter
glyphicon glyphicon hnab ntawv
glyphicon glyphicon puv npo
glyphicon glyphicon dashboard
glyphicon glyphicon daim ntawv clip
glyphicon glyphicon-lub siab-vim
glyphicon glyphicon txuas
glyphicon glyphicon-xov tooj
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-tsim
glyphicon glyphicon-sort-los ntawm cov tsiaj ntawv
glyphicon glyphicon-sort-los-niam ntawv-alt
glyphicon glyphicon-xyuas-los-kev txiav txim
glyphicon glyphicon-tso-los-order-alt
glyphicon glyphicon-tsib-los-tus cwj pwm
glyphicon glyphicon-sort-los-tus cwj pwm-alt
glyphicon glyphicon-tsis tau txheeb xyuas
glyphicon glyphicon nthuav dav
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon log tawm
glyphicon glyphicon-tshiab-qhov rai
glyphicon glyphicon-cov ntaub ntawv
glyphicon glyphicon-txuag
glyphicon glyphicon qhib
glyphicon glyphicon-txuag
glyphicon glyphicon-ntshuam
glyphicon glyphicon-export
glyphicon glyphicon-xa
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-txuag
glyphicon glyphicon-floppy-tshem tawm
glyphicon glyphicon-floppy-txuag
glyphicon glyphicon-floppy-qhib
glyphicon glyphicon-credit-card
glyphicon glyphicon hloov pauv
glyphicon glyphicon cutlery - daim ntawv qhia
glyphicon glyphicon taub hau
glyphicon glyphicon-compressed
glyphicon glyphicon-pob ntseg
glyphicon glyphicon-xov-alt
glyphicon-ntauwd
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon- suab- tso suab
glyphicon glyphicon-suab-dolby
glyphicon glyphicon-suab-5-1
glyphicon glyphicon-suab-6-1
glyphicon glyphicon-suab-7-1
glyphicon glyphicon-copyright-kos
glyphicon glyphicon-kev sau npe-kos npe
glyphicon glyphicon-cloud-download
glyphicon glyphicon-huab-upload
glyphicon glyphicon-ntoo-conifer
glyphicon glyphicon-ntoo-deciduous
glyphicon-cd
glyphicon glyphicon-txuag-file
glyphicon glyphicon-qhib-file
glyphicon glyphicon-theem-up
glyphicon glyphicon-copy
glyphicon muab tshuaj txhuam
glyphicon glyphicon ceeb toom
glyphicon glyphicon sib npaug
glyphicon-tus huab tais
glyphicon glyphicon- huab tais
glyphicon glyphicon-pawn
glyphicon glyphicon-npis sov
glyphicon glyphicon-knight
glyphicon glyphicon-tus me nyuam-formula
glyphicon glyphicon tsev pheeb suab
glyphicon glyphicon-blackboard
glyphicon glyphicon txaj
glyphicon glyphicon-apple
glyphicon glyphicon-luag
glyphicon glyphicon-hourglass
glyphicon glyphicon-lub teeb
glyphicon glyphicon duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon txiab
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon nplai
glyphicon glyphicon-dej-lolly
glyphicon glyphicon-ice-lolly-tseem
glyphicon glyphicon-kev kawm
glyphicon glyphicon-xaiv-kab rov tav
glyphicon glyphicon-xaiv-ntug
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-qhov rai
glyphicon glyphicon-roj
glyphicon glyphicon-cov nplej
glyphicon looj tsom iav dub
glyphicon glyphicon ntawv-loj
glyphicon glyphicon ntawv-xim
glyphicon glyphicon-ntawv nyeem-tom qab
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-hauv qab
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-verttical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-daim duab peb sab-txoj cai
glyphicon glyphicon-daim duab peb sab-sab laug
glyphicon glyphicon-daim duab peb sab-hauv qab
glyphicon glyphicon-daim duab peb sab-saum
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-sab laug
glyphicon glyphicon-menu-txoj cai
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Yuav siv li cas

Rau cov laj thawj kev ua tau zoo, txhua lub cim yuav tsum muaj chav kawm hauv paus thiab cov chav icon ib leeg. Txhawm rau siv, tso cov lej hauv qab no cia li nyob txhua qhov chaw. Nco ntsoov tso qhov chaw nruab nrab ntawm lub cim thiab cov ntawv nyeem kom zoo.

Tsis txhob sib tov nrog lwm yam khoom

Cov chav kawm icon tsis tuaj yeem ua ke ncaj qha nrog lwm cov khoom. Lawv yuav tsum tsis txhob siv nrog rau lwm cov chav kawm ntawm tib lub caij. Xwb, ntxiv ib qho nested <span>thiab siv cov chav kawm icon rau lub <span>.

Tsuas yog siv rau ntawm cov khoom khoob

Cov chav kawm icon yuav tsum tsuas yog siv rau cov ntsiab lus uas tsis muaj cov ntawv nyeem thiab tsis muaj cov ntsiab lus me me.

Hloov lub icon font qhov chaw

Bootstrap xav tias icon font cov ntaub ntawv yuav nyob rau hauv ../fonts/phau ntawv qhia, txheeb ze rau cov ntaub ntawv CSS suav. Tsiv lossis hloov npe cov ntaub ntawv font txhais tau tias hloov kho CSS hauv ib qho ntawm peb txoj kev:

Hloov cov @icon-font-paththiab/lossis @icon-font-namehloov pauv hauv cov ntaub ntawv tsawg dua.
Siv qhov txheeb ze URLs xaiv muab los ntawm Less compiler.
Hloov url()txoj hauv kev hauv CSS suav.

Siv txhua qhov kev xaiv zoo tshaj plaws rau koj qhov kev txhim kho tshwj xeeb.

Siv tau icons

Cov qauv niaj hnub ntawm cov thev naus laus zis pabcuam yuav tshaj tawm CSS cov ntsiab lus tsim, nrog rau cov cim Unicode tshwj xeeb. Txhawm rau kom tsis txhob muaj kev xav tsis meej thiab tsis meej pem hauv cov ntawv nyeem (tshwj xeeb yog thaum cov cim siv rau kev kho kom zoo nkauj), peb zais lawv nrog tus aria-hidden="true"cwj pwm.

Yog tias koj siv lub cim los qhia lub ntsiab lus (tshwj tsis yog cov khoom siv kho kom zoo nkauj xwb), xyuas kom meej tias lub ntsiab lus no tseem raug xa mus rau cov thev naus laus zis pabcuam - piv txwv li, suav nrog cov ntsiab lus ntxiv, pom qhov muag zais nrog cov .sr-onlychav kawm.

Yog tias koj tab tom tsim kev tswj hwm tsis muaj lwm cov ntawv nyeem (xws li ib qho <button>uas tsuas muaj lub cim), koj yuav tsum tau muab lwm cov ntsiab lus los txheeb xyuas lub hom phiaj ntawm kev tswj hwm, yog li ntawd nws yuav ua rau cov neeg siv cov cuab yeej pab. Hauv qhov no, koj tuaj yeem ntxiv tus aria-labelcwj pwm ntawm kev tswj nws tus kheej.

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

Piv txwv

Siv lawv nyob rau hauv cov nyees khawm, khawm pawg rau ib lub toolbar, navigation, los yog prepended daim ntawv inputs.

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

Ib lub cim siv hauv kev ceeb toom los qhia tias nws yog lus yuam kev, nrog rau cov .sr-onlyntawv ntxiv los qhia cov lus qhia no rau cov neeg siv cov cuab yeej pabcuam.

Sau tus email chaw nyob siv tau

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

Toggleable, contextual menu rau displaying lists links. Ua kev sib tham nrog lub dropdown JavaScript plugin .

Piv txwv

Qhwv lub dropdown tus txhais thiab cov ntawv qhia zaub mov hauv .dropdown, lossis lwm lub ntsiab lus uas tshaj tawm position: relative;. Tom qab ntawd ntxiv cov ntawv qhia zaub mov HTML.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dropdown menus tuaj yeem hloov pauv kom nthuav dav ntxiv (tsis yog downwards) los ntawm kev ntxiv .dropuprau niam txiv.

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

Kev sib tw

Los ntawm lub neej ntawd, cov ntawv qhia zaub mov poob cia li tso 100% los ntawm sab saum toj thiab sab laug ntawm nws niam nws txiv. Ntxiv .dropdown-menu-rightrau .dropdown-menutxoj cai dlhos cov ntawv qhia zaub mov.

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

Headers

Ntxiv ib lub header rau daim ntawv lo rau ntu ntawm kev ua hauv ib qho ntawv qhia zaub mov.

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

Faib

Ntxiv ib qho kev faib rau cais cov kab sib txuas hauv cov ntawv qhia zaub mov.

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

Disabled khoom noj khoom haus

Ntxiv .disabledrau ib qho <li>hauv dropdown kom lov tes taw qhov txuas.

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

Pab pawg ntawm cov nyees khawm ua ke ntawm ib kab nrog cov pab pawg khawm. Ntxiv rau qhov xaiv tau JavaScript xov tooj cua thiab checkbox style cwj pwm nrog peb cov nyees khawm plugin .

Cov lus qhia & popovers hauv cov pab pawg khawm yuav tsum tau teeb tsa tshwj xeeb

Thaum siv cov lus qhia lossis popovers ntawm cov ntsiab lus hauv ib qho .btn-group, koj yuav tsum tau qhia txog qhov kev xaiv container: 'body'kom tsis txhob muaj kev phiv tshwm sim (xws li lub caij loj hlob thiab / lossis poob nws qhov sib npaug thaum lub tooltip lossis popover tshwm sim).

Xyuas kom tseeb `role`thiab muab ib daim ntawv lo

Txhawm rau txhawm rau pab thev naus laus zis - xws li kev tshuaj ntsuam nyeem ntawv - kom qhia tau tias cov nyees khawm tau muab faib ua pawg, roleyuav tsum muaj cov yam ntxwv tsim nyog. Rau cov pab pawg khawm, qhov no yuav yog role="group", thaum toolbars yuav tsum muaj role="toolbar".

Ib qho kev zam yog cov pab pawg uas tsuas muaj ib qho kev tswj hwm nkaus xwb (piv txwv li cov pob khawm ncaj ncees nrog <button>cov ntsiab lus) lossis ib qho kev poob.

Tsis tas li ntawd, pawg thiab toolbars yuav tsum tau muab ib daim ntawv qhia meej, vim tias cov cuab yeej pab cuam feem ntau yuav tsis tshaj tawm rau lawv, txawm tias muaj tus rolecwj pwm raug. Hauv cov piv txwv muab ntawm no, peb siv aria-label, tab sis lwm yam xws li aria-labelledbytuaj yeem siv tau.

Piv txwv

Qhwv ib cov nyees khawm nrog .btnrau hauv .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>

Muab cov khoom sib xyaw ua ke <div class="btn-group">rau hauv ib qho <div class="btn-toolbar">rau ntau qhov sib txawv.

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

Qhov loj me

Hloov chaw siv khawm qhov loj me rau txhua lub pob hauv ib pab pawg, tsuas yog ntxiv .btn-group-*rau txhua tus .btn-group, suav nrog thaum ua zes ntau pawg.

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

Zes

Muab tso rau .btn-grouphauv lwm qhov .btn-groupthaum koj xav tau dropdown menus tov nrog cov nyees khawm.

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

Vertical variation

Ua ib txheej ntawm cov nyees khawm tshwm vertically stacked es horizontally. Split khawm dropdowns tsis txaus siab ntawm no.

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

Justified khawm pawg

Ua ib pab pawg ntawm cov nyees khawm ncab ntawm qhov sib npaug ntawm qhov sib npaug kom nthuav dav tag nrho nws niam nws txiv. Kuj tseem ua haujlwm nrog khawm dropdowns hauv pawg khawm.

tuav ciam teb

Vim yog qhov tshwj xeeb HTML thiab CSS siv los ua kom pom tseeb cov nyees khawm (xws li display: table-cell), ciam teb ntawm lawv ob npaug. Hauv cov pab pawg khawm tsis tu ncua, margin-left: -1pxyog siv los teeb cov ciam teb es tsis txhob tshem lawv. Txawm li cas los xij, margintsis ua haujlwm nrog display: table-cell. Yog li ntawd, nyob ntawm koj qhov kev hloov kho rau Bootstrap, koj tuaj yeem xav tshem tawm lossis rov xim cov ciam teb.

IE8 thiab ciam teb

Internet Explorer 8 tsis ua ciam teb ntawm cov nyees khawm hauv pawg khawm kom ncaj ncees, txawm tias nws nyob ntawm <a>lossis <button>cov ntsiab lus. Txhawm rau kom tau txais qhov ntawd, qhwv txhua lub pob hauv lwm qhov .btn-group.

Saib #12476 yog xav paub ntxiv.

Nrog `<a>`cov ntsiab lus

Cia li qhwv ib tug series ntawm .btns nyob rau hauv .btn-group.btn-group-justified.

Sab laug Nruab nrab Txoj cai

Sab laug Nruab nrab

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

Links ua raws li cov nyees khawm

Yog tias cov <a>ntsiab lus raug siv los ua cov nyees khawm - ua rau hauv nplooj ntawv ua haujlwm, es tsis yog mus rau lwm daim ntawv lossis ntu hauv nplooj ntawv tam sim no - lawv kuj yuav tsum tau muab qhov tsim nyog role="button".

Nrog `<button>`cov ntsiab lus

Txhawm rau siv cov pawg khawm ncaj ncees nrog <button>cov ntsiab lus, koj yuav tsum qhwv txhua lub pob hauv ib pawg khawm . Feem ntau cov browsers tsis siv peb cov CSS kom raug rau <button>cov ntsiab lus, tab sis txij li thaum peb txhawb nqa khawm dropdowns, peb tuaj yeem ua haujlwm ntawm qhov ntawd.

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

Siv ib lub pob kom ua rau cov ntawv qhia poob qis los ntawm qhov muab tso rau hauv ib qho .btn-groupthiab muab cov ntawv qhia zaub mov kom raug.

Plugin kev vam meej

Khawm dropdowns xav tau lub dropdown plugin kom muab tso rau hauv koj lub version ntawm Bootstrap.

Ib lub khawm dropdowns

Tig ib lub pob mus rau hauv lub dropdown toggle nrog qee qhov kev hloov pauv yooj yim.

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

Ib yam li ntawd, tsim phua khawm dropdowns nrog tib lub cim kev hloov pauv, tsuas yog nrog lub pob cais.

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

Qhov loj me

Khawm dropdowns ua haujlwm nrog cov nyees khawm ntawm txhua qhov ntau thiab tsawg.

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

Trigger dropdown menus saum cov ntsiab lus los ntawm kev ntxiv .dropuprau cov niam txiv.

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

Txuas daim ntawv tswj hwm los ntawm kev ntxiv cov ntawv lossis cov nyees khawm ua ntej, tom qab, lossis ob sab ntawm cov ntawv nyeem <input>. Siv .input-groupnrog ib .input-group-addonlossis los .input-group-btnua ntej lossis ntxiv cov ntsiab lus rau ib leeg .form-control.

Textual `<input>`s xwb

Tsis txhob siv <select>cov ntsiab lus ntawm no vim tias lawv tsis tuaj yeem ua tiav hauv WebKit browsers.

Tsis txhob siv <textarea>cov ntsiab lus ntawm no vim tias lawv cov rowscwj pwm yuav tsis raug hwm hauv qee kis.

Cov lus qhia & popovers hauv pawg tswv yim xav tau kev teeb tsa tshwj xeeb

Thaum siv cov lus qhia los yog popovers ntawm cov ntsiab lus hauv ib qho .input-group, koj yuav tsum tau qhia qhov kev xaiv container: 'body'kom tsis txhob muaj kev phiv tshwm sim (xws li lub caij loj hlob thiab / lossis poob nws cov kab sib npaug thaum lub tooltip lossis popover tshwm sim).

Tsis txhob sib tov nrog lwm yam khoom

Tsis txhob sib xyaw cov pab pawg lossis cov chav kawm kab sib txuas ncaj qha nrog pab pawg nkag. Hloov chaw, zes pawg tswv yim sab hauv ntawm pawg ntawv lossis kab sib txuas nrog cov khoom.

Ib txwm ntxiv daim ntawv lo

Cov neeg nyeem ntawv yuav muaj teeb meem nrog koj cov ntawv yog tias koj tsis suav nrog daim ntawv lo rau txhua qhov kev tawm tswv yim. Rau cov pab pawg tswv yim no, xyuas kom meej tias cov ntawv sau ntxiv lossis kev ua haujlwm tau raug xa mus rau cov cuab yeej pabcuam.

Cov txheej txheem tseeb uas yuav tsum tau siv (pom <label>cov ntsiab lus, <label>cov ntsiab lus zais hauv .sr-onlychav kawm, lossis siv cov aria-label, aria-labelledby, aria-describedby, titlelossis placeholdertus cwj pwm) thiab cov ntaub ntawv ntxiv uas yuav tsum tau muab nthuav tawm yuav txawv nyob ntawm seb hom kev sib cuam tshuam uas koj tab tom siv. Cov piv txwv nyob rau hauv nqe lus no muab ob peb qhov kev pom zoo, cov xwm txheej tshwj xeeb.

Piv txwv

Muab ib qho add-on los yog khawm ntawm ob sab ntawm ib qho kev tawm tswv yim. Koj tseem tuaj yeem tso ib qho ntawm ob sab ntawm kev nkag.

Peb tsis txhawb ntau add-ons ( .input-group-addonlos yog .input-group-btn) ntawm ib sab.

Peb tsis txhawb ntau daim ntawv-tswj nyob rau hauv ib pab pawg tswv yim.

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

Qhov loj me

Ntxiv cov txheeb ze daim ntawv sizing chav kawm rau .input-groupnws tus kheej thiab cov ntsiab lus nyob rau hauv yuav cia li hloov pauv - tsis tas yuav rov ua dua daim ntawv tswj cov chav kawm ntawm txhua lub caij.

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

Checkboxes thiab xov tooj cua addons

Muab ib lub checkbox lossis xov tooj cua xaiv nyob rau hauv ib pab pawg neeg lub addon es tsis txhob ntawv.

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

Khawm addons

Cov nyees khawm hauv pawg tswv yim sib txawv me ntsis thiab xav tau ib qib ntxiv ntawm kev zes. Hloov chaw .input-group-addon, koj yuav tsum tau siv .input-group-btnlos qhwv cov nyees khawm. Qhov no yuav tsum tau vim yog qhov browser style uas tsis tuaj yeem overridden.

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

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

Segmented nyees khawm

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

Ntau lub khawm

Thaum koj tsuas tuaj yeem muaj ib qho ntxiv rau ib sab, koj tuaj yeem muaj ntau lub nyees khawm hauv ib qho .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 muaj nyob rau hauv Bootstrap tau sib koom markup, pib nrog cov .navchav kawm hauv paus, nrog rau cov xeev sib koom. Hloov cov chav kawm hloov pauv hloov ntawm txhua tus qauv.

Siv navs rau tab panels xav tau JavaScript tabs plugin

Rau tabs nrog thaj chaw tabbable, koj yuav tsum siv tabs JavaScript plugin . Lub cim tseem yuav xav tau ntxiv rolethiab ARIA tus cwj pwm - saib lub plugin tus piv txwv markup kom paub meej ntxiv.

Ua navigation siv tau los siv tau

Yog tias koj siv navs los muab ib qho kev qhia navigation, nco ntsoov ntxiv ib role="navigation"lub thawv rau niam txiv lub ntsiab lus tshaj plaws ntawm lub <ul>, lossis qhwv ib lub <nav>caij nyob ib ncig ntawm tag nrho cov navigation. Tsis txhob ntxiv lub luag haujlwm rau <ul>nws tus kheej, vim qhov no yuav tiv thaiv nws los ntawm kev tshaj tawm raws li cov npe tiag tiag los ntawm kev pabcuam thev naus laus zis.

Tabs

Nco ntsoov cov .nav-tabschav kawm yuav tsum muaj cov .navchav kawm hauv paus.

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

Cov tshuaj

Siv tib yam HTML, tab sis siv .nav-pillshloov:

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

Cov tshuaj kuj yog vertically stackable. Tsuas yog ntxiv .nav-stacked.

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

Kev ncaj ncees

Yooj yim ua tabs lossis tshuaj sib npaug ntawm lawv niam txiv ntawm cov ntxaij vab tshaus dav dua 768px nrog .nav-justified. Ntawm cov ntxaij vab tshaus me, cov kev sib txuas nav tau muab tso ua ke.

Kev ncaj ncees navbar nav txuas tam sim no tsis txaus siab.

Safari thiab teb ncaj ncees navs

Raws li ntawm v9.1.2, Safari nthuav tawm cov kab laum nyob rau hauv uas resizing koj browser kab rov tav ua rau rendering yuam kev nyob rau hauv lub ncaj ncees nav uas yog cleared thaum refreshing. Kab laum no kuj pom nyob rau hauv qhov kev ncaj ncees nav piv txwv .

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

Cov kab txuas tsis taus

Rau ib qho kev tivthaiv nav (tabs lossis tshuaj), ntxiv .disabledrau grey txuas thiab tsis muaj qhov cuam tshuam .

Txuas kev ua haujlwm tsis cuam tshuam

Cov chav kawm no tsuas yog hloov lub <a>ntsej muag, tsis yog nws txoj haujlwm. Siv kev cai JavaScript los lov tes taw txuas ntawm no.

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

Siv cov dropdowns

Ntxiv dropdown menus nrog me ntsis ntxiv HTML thiab dropdowns JavaScript plugin .

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

Cov tshuaj nrog 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>

Navbars yog cov lus teb meta Cheebtsam uas ua haujlwm raws li kev taw qhia headers rau koj daim ntawv thov lossis qhov chaw. Lawv pib vau (thiab toggleable) hauv mobile views thiab ua kab rov tav raws li qhov muaj qhov dav dav dav ntxiv.

Kev ncaj ncees navbar nav txuas tam sim no tsis txaus siab.

Tshaj tawm cov ntsiab lus

Txij li thaum Bootstrap tsis paub ntau npaum li cas qhov chaw cov ntsiab lus hauv koj qhov kev xav tau navbar, koj yuav khiav mus rau cov teeb meem nrog cov ntsiab lus wrapping rau hauv kab thib ob. Txhawm rau daws qhov no, koj tuaj yeem:

Txo tus nqi lossis qhov dav ntawm cov khoom navbar.
Nkaum qee cov khoom navbar ntawm qee qhov screen loj uas siv cov chav kawm siv hluav taws xob teb .
Hloov qhov taw tes uas koj tus navbar hloov pauv ntawm kev sib tsoo thiab kab rov tav hom. Customize qhov @grid-float-breakpointsib txawv los yog ntxiv koj tus kheej cov lus nug hauv xov xwm.

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

Hloov lub npe navbar nrog koj tus kheej cov duab los ntawm kev sib pauv cov ntawv rau ib qho <img>. Txij li thaum nws .navbar-brandmuaj nws tus kheej padding thiab qhov siab, tej zaum koj yuav tau override ib co CSS nyob ntawm koj daim duab.

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

Muab cov ntsiab lus tso rau hauv .navbar-formrau qhov kev sib tw ntsug kom zoo thiab kev coj tus cwj pwm hauv qhov nqaim. Siv cov kev xaiv sib tw los txiav txim qhov twg nws nyob hauv cov ntsiab lus navbar.

Raws li lub taub hau, .navbar-formsib qhia ntau ntawm nws cov cai nrog .form-inlinentawm mixin. Qee daim ntawv tswj hwm, zoo li pab pawg nkag, yuav xav tau qhov dav ruaj khov kom pom zoo nyob hauv 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>

Ib txwm ntxiv daim ntawv lo

Cov neeg nyeem ntawv yuav muaj teeb meem nrog koj cov ntawv yog tias koj tsis suav nrog daim ntawv lo rau txhua qhov kev tawm tswv yim. Rau cov ntaub ntawv hauv kab no, koj tuaj yeem nkaum cov ntawv lo siv cov .sr-onlychav kawm. Muaj lwm txoj hauv kev los muab ib daim ntawv lo rau cov cuab yeej pabcuam, xws li aria-label, aria-labelledbylossis titletus cwj pwm. Yog tias tsis muaj ib qho ntawm cov no tam sim no, cov neeg siv tshuaj ntsuam tuaj yeem siv rau kev siv tus placeholdercwj pwm, yog tias tam sim no, tab sis nco ntsoov tias kev siv placeholderlos hloov lwm txoj kev sau npe tsis raug qhia.

Ntxiv cov .navbar-btnchav kawm rau <button>cov ntsiab lus uas tsis nyob hauv ib qho <form>rau vertically nruab nrab ntawm lawv hauv navbar.

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

Qhwv cov hlua ntawm cov ntawv hauv ib lub caij nrog .navbar-text, feem ntau ntawm ib <p>daim ntawv rau kev coj ua thiab xim.

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

Rau cov neeg siv cov qauv txuas uas tsis nyob rau hauv cov kev qhia navigation tsis tu ncua, siv cov .navbar-linkchav kawm ntxiv cov xim tsim nyog rau lub neej ntawd thiab kev xaiv navbar rov qab.

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

Align nav links, forms, buttons, or text, using the .navbar-leftor .navbar-rightutility classes. Ob chav kawm yuav ntxiv CSS ntab hauv cov lus qhia. Piv txwv li, txhawm rau txhim kho cov kev sib txuas nav, muab tso rau hauv ib qho kev sib cais <ul>nrog cov chav kawm siv hluav taws xob uas siv tau.

Cov chav kawm no yog mixin-ed versions ntawm .pull-leftthiab .pull-right, tab sis lawv nyob nraum scoped rau xov xwm queries kom yooj yim tuav ntawm navbar Cheebtsam nyob rau hauv ntau thiab tsawg pab kiag li lawm.

Ntxiv .navbar-fixed-topthiab suav nrog ib .containerlossis .container-fluidrau nruab nrab thiab ncoo navbar cov ntsiab lus.

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

Lub cev padding yuav tsum tau

Lub navbar ruaj khov yuav overlay koj lwm cov ntsiab lus, tshwj tsis yog tias koj ntxiv paddingrau sab saum toj ntawm <body>. Sim tawm koj tus kheej qhov tseem ceeb lossis siv peb cov lus hauv qab no. Tswv yim: Los ntawm lub neej ntawd, lub navbar yog 50px siab.

body { padding-top: 70px; }

Nco ntsoov suav nrog qhov no tom qab cov tub ntxhais Bootstrap CSS.

Ntxiv .navbar-fixed-bottomthiab suav nrog ib .containerlossis .container-fluidrau nruab nrab thiab ncoo navbar cov ntsiab lus.

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

Lub cev padding yuav tsum tau

Lub navbar ruaj khov yuav overlay koj lwm cov ntsiab lus, tshwj tsis yog koj ntxiv paddingrau hauv qab ntawm <body>. Sim tawm koj tus kheej qhov tseem ceeb lossis siv peb cov lus hauv qab no. Tswv yim: Los ntawm lub neej ntawd, lub navbar yog 50px siab.

body { padding-bottom: 70px; }

Nco ntsoov suav nrog qhov no tom qab cov tub ntxhais Bootstrap CSS.

Tsim ib tug puv-dav navbar uas scrolls deb nrog nplooj ntawv los ntawm kev ntxiv .navbar-static-topthiab suav nrog ib .containerlos yog .container-fluidrau nruab nrab thiab ncoo navbar cov ntsiab lus.

Tsis zoo li cov .navbar-fixed-*chav kawm, koj tsis tas yuav hloov ib qho padding ntawm body.

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

Hloov kho qhov zoo ntawm navbar los ntawm kev ntxiv .navbar-inverse.

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

Breadcrumbs

Qhia rau nplooj ntawv tam sim no qhov chaw nyob hauv ib qho kev taw qhia hierarchy.

Separators tau txais ntxiv hauv CSS los ntawm :beforethiab content.

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

Pagination

Muab cov pagination txuas rau koj qhov chaw lossis app nrog rau ntau nplooj ntawv pagination tivthaiv, lossis lwm yam yooj yim pager .

Default pagination

Yooj yim pagination tshwm sim los ntawm Rdio, zoo rau cov apps thiab tshawb nrhiav. Qhov loj thaiv yog ib qho nyuaj rau nco, yooj yim scalable, thiab muab loj nias qhov chaw.

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

Labeling lub pagination tivthaiv

Cov pagination tivthaiv yuav tsum tau muab qhwv rau hauv ib lub <nav>caij kom paub tias nws yog ib qho kev taw qhia rau kev tshuaj xyuas cov neeg nyeem thiab lwm yam cuab yeej pab. Tsis tas li ntawd, raws li nplooj ntawv yuav muaj ntau tshaj li ib qho kev taw qhia uas twb muaj lawm (xws li thawj navigation nyob rau hauv header, los yog ib tug sidebar navigation), nws yog advisable muab ib tug piav qhia aria-labeltxog qhov <nav>uas qhia txog nws lub hom phiaj. Piv txwv li, yog hais tias cov pagination tivthaiv yog siv los mus rau ntawm ib pawg ntawm kev tshawb nrhiav, ib daim ntawv lo tsim nyog yuav yog aria-label="Search results pages".

Disabled thiab active xeev

Cov ntawv txuas yog customizable rau ntau qhov xwm txheej. Siv .disabledrau unclickable links thiab .activeqhia cov nplooj ntawv tam sim no.

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

Peb pom zoo kom koj pauv tawm cov khoom siv lossis cov neeg xiam oob qhab rau <span>, lossis tshem tawm cov thauj tog rau nkoj hauv cov ntaub ntawv dhau los / tom ntej, kom tshem tawm cov nyem ua haujlwm thaum khaws cov hom phiaj.

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

Qhov loj me

Xav kom loj dua lossis me dua pagination? Ntxiv .pagination-lglossis .pagination-smrau qhov ntau thiab tsawg.

<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

Kev sib txuas ceev dhau los thiab tom ntej rau kev siv pagination yooj yim nrog lub teeb cim thiab cov qauv. Nws yog qhov zoo rau cov chaw yooj yim xws li blogs lossis cov ntawv xov xwm.

Piv txwv li

Los ntawm lub neej ntawd, pager chaw txuas.

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

Aligned links

Xwb, koj tuaj yeem kho txhua qhov txuas mus rau sab:

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

Xaiv lub xeev tsis taus

Pager links kuj siv cov .disabledchav kawm siv hluav taws xob dav dav los ntawm pagination.

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

Piv txwv

Piv txwv nqe lus tshiab

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

Muaj variations

Ntxiv ib qho ntawm cov chav kawm hloov kho hauv qab no los hloov cov tsos ntawm daim ntawv lo.

Default Primary Success Info ceeb toom Danger

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

Puas muaj tons ntawm daim ntawv lo?

Rendering teeb meem tuaj yeem tshwm sim thaum koj muaj kaum ob ntawm cov ntawv sau hauv kab hauv lub thawv nqaim, txhua tus muaj nws tus kheej inline-block(xws li lub cim). Txoj kev nyob ib ncig ntawm no yog teem display: inline-block;. Rau cov ntsiab lus thiab piv txwv, saib #13219 .

Yooj yim qhia cov khoom tshiab lossis tsis tau nyeem los ntawm kev ntxiv <span class="badge">rau cov kev sib txuas, Bootstrap navs, thiab ntau dua.

Inbox42

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

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

Self collapsing

Thaum tsis muaj cov khoom tshiab lossis tsis tau nyeem, cov paib yuav tsuas vau (ntawm CSS tus :emptyxaiv) uas tsis muaj cov ntsiab lus nyob hauv.

Cross-browser compatibility

Cov paib yuav tsis poob rau hauv Internet Explorer 8 vim nws tsis muaj kev txhawb nqa rau tus :emptyxaiv.

Adapts rau active nav xeev

Built-in styles suav nrog rau kev tso cov paib rau hauv cov xeev nquag hauv cov ntsiav tshuaj navigations.

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

Lub teeb yuag, hloov tau yooj yim uas tuaj yeem xaiv txuas ntxiv rau tag nrho cov chaw saib kom pom cov ntsiab lus tseem ceeb ntawm koj qhov chaw.

Nyob zoo, ntiaj teb!

Qhov no yog ib qho yooj yim hero unit, ib qho yooj yim jumbotron-style tivthaiv rau kev hu xov tooj ntxiv rau cov ntsiab lus tshwj xeeb lossis cov ntaub ntawv.

Kawm ntxiv

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

Txhawm rau ua kom lub jumbotron tag nrho dav, thiab tsis muaj qhov sib npaug, muab tso rau sab nraum txhua .containerqhov s thiab hloov ib qho ntxiv rau .containerhauv.

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

Lub plhaub yooj yim rau qhov h1kom tsim nyog qhov chaw tawm thiab ntu ntu ntawm cov ntsiab lus ntawm nplooj ntawv. Nws tuaj yeem siv qhov h1's default smallelement, nrog rau feem ntau lwm yam khoom (nrog rau cov qauv ntxiv).

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

Txuas Bootstrap lub kab sib chaws nrog cov thumbnail tivthaiv kom yooj yim tso saib daim phiaj duab, yeeb yaj duab, ntawv nyeem, thiab ntau dua.

Yog tias koj tab tom nrhiav Pinterest-zoo li kev nthuav qhia ntawm cov duab me me ntawm qhov sib txawv qhov siab thiab / lossis qhov dav, koj yuav tsum siv lub plugin thib peb xws li Masonry , Isotope , lossis Salvattore .

Piv txwv li

Los ntawm lub neej ntawd, Bootstrap's thumbnails yog tsim los qhia cov duab txuas nrog tsawg kawg yuav tsum tau kos.

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

Kev cai cov ntsiab lus

Nrog me ntsis ntawm cov cim ntxiv, nws muaj peev xwm ntxiv txhua hom HTML cov ntsiab lus xws li kab lus, kab lus, lossis cov nyees khawm rau hauv cov duab me.

Thumbnail daim ntawv lo

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

Khawm Khawm

Thumbnail daim ntawv lo

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

Khawm Khawm

Thumbnail daim ntawv lo

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

Khawm Khawm

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

Muab cov ntsiab lus tawm tswv yim tawm tswv yim rau cov neeg siv ib txwm ua nrog cov lus ceeb toom muaj thiab hloov pauv tau.

Piv txwv

Qhwv cov ntawv nyeem thiab xaiv lub khawm tso tawm rau hauv .alertthiab ib qho ntawm plaub chav kawm cov ntsiab lus (xws li, .alert-success) rau cov lus ceeb toom yooj yim.

Tsis muaj default class

Kev ceeb toom tsis muaj cov chav kawm ua ntej, tsuas yog cov hauv paus thiab cov chav hloov kho. Kev ceeb toom grey default tsis ua rau muaj kev nkag siab ntau dhau, yog li koj yuav tsum tau qhia ib hom ntawm cov ntsiab lus hauv chav kawm. Xaiv los ntawm kev ua tiav, cov ntaub ntawv, ceeb toom, lossis kev phom sij.

Ua tau zoo! Koj ua tiav nyeem cov lus ceeb toom tseem ceeb no.

Tau taub hau! Qhov kev ceeb toom no xav tau koj cov xim, tab sis nws tsis yog qhov tseem ceeb heev.

Ceeb toom! Xyuas koj tus kheej zoo dua, koj tsis saib zoo dhau.

Aw snap! Hloov ob peb yam thiab sim xa rov qab.

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

Tshem tawm cov lus ceeb toom

Tsim kom muaj kev ceeb toom los ntawm kev ntxiv ib qho kev xaiv .alert-dismissiblethiab kaw khawm.

Yuav tsum muaj JavaScript ceeb toom plugin

Txhawm rau ua haujlwm tau zoo, kev ceeb toom tsis raug, koj yuav tsum siv cov lus ceeb toom JavaScript plugin .

Ceeb toom! Xyuas koj tus kheej zoo dua, koj tsis saib zoo dhau.

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

Xyuas kom tus cwj pwm zoo nyob rau hauv txhua yam khoom siv

Nco ntsoov siv lub <button>caij nrog cov data-dismiss="alert"ntaub ntawv tus cwj pwm.

Txuas hauv kev ceeb toom

Siv cov .alert-linkchav kawm siv hluav taws xob kom sai muab cov xim sib xws hauv cov lus ceeb toom.

Ua tau zoo! Koj tau nyeem cov lus ceeb toom tseem ceeb no .

Tau taub hau! Qhov kev ceeb toom no xav tau koj cov xim , tab sis nws tsis yog qhov tseem ceeb heev.

Ceeb toom! Xyuas koj tus kheej zoo dua, koj tsis saib zoo dhau .

Aw snap! Hloov ob peb yam thiab sim xa rov qab.

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

Muab cov lus tawm tswv yim tshiab txog kev nce qib ntawm kev ua haujlwm lossis kev nqis tes ua nrog cov kab ua haujlwm yooj yim tab sis hloov tau yooj yim.

Cross-browser compatibility

Cov kab nce qib siv CSS3 kev hloov pauv thiab cov yeeb yaj kiab kom ua tiav qee yam ntawm lawv cov teebmeem. Cov yam ntxwv no tsis txaus siab hauv Internet Explorer 9 thiab hauv qab lossis cov laus dua ntawm Firefox. Opera 12 tsis txhawb cov animations.

Content Security Policy (CSP) compatibility

Yog tias koj lub vev xaib muaj Txoj Cai Tswjfwm Ntiag Tug (CSP) uas tsis tso cai style-src 'unsafe-inline', tom qab ntawd koj yuav tsis tuaj yeem siv cov stylecwj pwm inline los teeb tsa qhov dav dav raws li qhia hauv peb cov piv txwv hauv qab no. Lwm txoj hauv kev los teeb tsa qhov dav uas sib haum nrog CSPs nruj xws li siv JavaScript me me (uas teev element.style.width) lossis siv cov chav kawm CSS kev cai.

Piv txwv

Default kev nce qib bar.

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

Nrog daim ntawv lo

Tshem cov chav kawm <span>nrog .sr-onlyrau hauv qhov kev kawm bar kom pom qhov feem pua pom.

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>

Txhawm rau kom ntseeg tau tias cov ntawv sau ntawv tseem pom tau txawm tias feem pua tsawg, xav txog ntxiv min-widthrau qhov kev nce qib bar.

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>

Cov ntsiab lus sib txawv

Cov kab kev nce qib siv qee qhov tib lub pob thiab ceeb toom cov chav kawm rau cov qauv zoo ib yam.

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

striped

Siv cov gradient los tsim cov nyhuv striped. Tsis muaj nyob hauv IE9 thiab hauv qab no.

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

Animated

Ntxiv .activerau .progress-bar-stripedanimate cov kab txaij sab xis mus rau sab laug. Tsis muaj nyob hauv IE9 thiab hauv qab no.

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

stacked

Muab ntau qhov bar rau hauv ib yam .progresslos muab lawv.

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

Abstract object styles rau tsim ntau hom ntawm cov khoom (xws li blog lus, Tweets, thiab lwm yam) uas feature ib sab laug-los yog txoj cai-tsim duab nrog rau cov ntawv nyeem.

Default media

Lub neej ntawd xov xwm qhia txog cov khoom siv xov xwm (duab, yees duab, suab) rau sab laug lossis sab xis ntawm cov ntsiab lus thaiv.

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Nested media heading

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, 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>

Cov chav kawm .pull-leftthiab .pull-righttseem muaj nyob thiab yav dhau los tau siv los ua ib feem ntawm kev tshaj tawm xov xwm, tab sis raug txwv tsis pub siv li ntawm v3.3.0. Lawv yog kwv yees li sib npaug .media-leftthiab .media-right, tshwj tsis yog tias .media-rightyuav tsum tau muab tso rau tom qab .media-bodyhauv html.

Media alignment

Cov duab lossis lwm yam xov xwm tuaj yeem ua raws sab saum toj, nruab nrab, lossis hauv qab. Lub neej ntawd yog sab saum toj aligned.

Sab saum toj aligned media

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Ua tsaug os. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Ua tsaug os. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Hauv qab aligned media

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Ua tsaug os. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Media lis

Nrog me ntsis ntawm cov cim ntxiv, koj tuaj yeem siv xov xwm hauv daim ntawv teev npe (tseem ceeb rau cov lus tawm tswv yim lossis cov npe kab lus).

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.

Nested media heading
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.

Nested media heading
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.

Nested media heading
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, 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>

Cov npe pawg yog ib qho yooj yim thiab muaj zog tivthaiv rau kev nthuav tawm tsis yog cov npe yooj yim ntawm cov ntsiab lus, tab sis cov txheej txheem nyuaj nrog cov ntsiab lus kev cai.

Piv txwv

Cov pab pawg sau npe yooj yim tshaj plaws tsuas yog ib daim ntawv teev npe tsis muaj npe nrog cov npe khoom, thiab cov chav kawm tsim nyog. Ua raws li nws nrog cov kev xaiv ua raws, lossis koj tus kheej CSS raws li xav tau.

Cras justo odio
Dapibus ac facilisis nyob rau hauv
Morbi leo risus
Porta ac consectetur ac
Vestibulum thiab 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>

Daim paib

Ntxiv cov paib tivthaiv rau ib pawg npe khoom thiab nws yuav cia li muab tso rau ntawm sab xis.

14Cras justo odio
2Dapibus ac facilisis nyob rau hauv
1Morbi leo risus

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

Cov khoom sib txuas

Linkify daim ntawv teev cov khoom siv los ntawm kev siv thauj tog rau nkoj es tsis txhob sau cov khoom (uas kuj txhais tau tias niam txiv <div>tsis yog ib qho <ul>). Tsis xav tau ib tug niam txiv nyob ib ncig ntawm txhua lub caij.

Cras justo odio Dapibus ac facilisis nyob rau hauv Morbi leo risus Porta ac consectetur ac Vestibulum thiab 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>

Cov khoom khawm

Sau cov khoom pab pawg yuav yog cov nyees khawm es tsis txhob sau cov khoom (uas kuj txhais tau tias niam txiv <div>tsis yog ib qho <ul>). Tsis xav tau ib tug niam txiv nyob ib ncig ntawm txhua lub caij. Tsis txhob siv cov .btnchav kawm txheem ntawm no.

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

Cov khoom xiam oob qhab

Ntxiv .disabledrau ib qho .list-group-itemrau grey nws tawm kom pom neeg tsis taus.

Cras justo odio Dapibus ac facilisis nyob rau hauv Morbi leo risus Porta ac consectetur ac Vestibulum thiab 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>

Cov chav kawm ntawm cov ntsiab lus

Siv cov chav kawm hauv cov ntsiab lus los tsim cov npe khoom, default lossis txuas. Kuj suav nrog .activexeev.

Dapibus ac facilisis nyob rau hauv
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum thiab eros

Dapibus ac facilisis nyob rau hauv Cras sit amet nibh libero Porta ac consectetur ac Vestibulum thiab 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>

Kev cai cov ntsiab lus

Ntxiv ze li ntawm HTML nyob rau hauv, txawm rau cov pab pawg sib txuas xws li ib qho hauv qab no.

Sau npe pab pawg kab lus

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

Sau npe pab pawg kab lus

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

Sau npe pab pawg kab lus

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Thaum tsis tas yuav tsim nyog, qee zaum koj yuav tsum muab koj DOM tso rau hauv ib lub thawv. Rau cov xwm txheej ntawd, sim cov khoom vaj huam sib luag.

Piv txwv

Los ntawm lub neej ntawd, txhua qhov .panelua yog siv qee tus ciam teb thiab padding kom muaj qee cov ntsiab lus.

Basic vaj huam sib luag piv txwv

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

Vaj huam sib luag nrog nqe lus

Yooj yim ntxiv lub taub hau ntim rau koj lub vaj huam sib luag nrog .panel-heading. Koj kuj tseem tuaj yeem suav nrog ib qho <h1>- <h6>nrog rau .panel-titlechav kawm ntxiv rau cov npe ua ntej. Txawm li cas los xij, cov font loj ntawm <h1>- <h6>yog overridden los ntawm .panel-heading.

Txhawm rau kom cov xim txuas kom raug, nco ntsoov tso cov kab txuas hauv kab hauv qab .panel-title.

Vaj huam sib luag tsis muaj npe