Glyphs iripo

Inosanganisira anopfuura mazana maviri nemakumi mashanu glyphs mufomati font kubva kuGlyphicon Halflings set. Glyphicons Halflings haiwanzo kuwanikwa mahara, asi musiki wavo akaita kuti iwanikwe kuBootstrap mahara. Sekutenda, tinongokumbira kuti ubatanidze chinongedzo chekudzokera kuGlyphicons pese pazvinogoneka.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-penzura
glyphicon glyphicon-girazi
glyphicon glyphicon-music
glyphicon glyphicon-kutsvaga
glyphicon glyphicon-moyo
glyphicon glyphicon-nyeredzi
glyphicon glyphicon-nyeredzi-isina
glyphicon glyphicon-mushandisi
glyphicon glyphicon-firimu
glyphicon glyphicon-th-guru
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-bvisa
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-marara
glyphicon glyphicon-imba
glyphicon glyphicon-faira
glyphicon glyphicon-nguva
glyphicon glyphicon-mugwagwa
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-kutamba-denderedzwa
glyphicon glyphicon-kudzokorora
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-mureza
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-vhoriyamu-pasi
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-bhuku
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-chinyorwa-kureba
glyphicon glyphicon-text-width
glyphicon glyphicon-align-kuruboshwe
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-kuruboshwe
glyphicon glyphicon-indent-kurudyi
glyphicon glyphicon-facetime-vhidhiyo
glyphicon glyphicon-mufananidzo
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-kufamba
glyphicon glyphicon-nhanho-kumashure
glyphicon glyphicon-nekukurumidza-kumashure
glyphicon glyphicon-kumashure
glyphicon glyphicon-kutamba
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-mberi
glyphicon glyphicon-nekukurumidza-mberi
glyphicon glyphicon-nhanho-mberi
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-kuruboshwe
glyphicon glyphicon-chevron-kurudyi
glyphicon glyphicon-plus-chiratidzo
glyphicon glyphicon-minus-chiratidzo
glyphicon glyphicon-bvisa-chiratidzo
glyphicon glyphicon-ok-sign
glyphicon glyphicon-mubvunzo-chiratidzo
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-bvisa-denderedzwa
glyphicon glyphicon-ok-denderedzwa
glyphicon glyphicon-ban-circle
glyphicon glyphicon-museve-kuruboshwe
glyphicon glyphicon-museve-kurudyi
glyphicon glyphicon-arrow-up
glyphicon glyphicon-museve-pasi
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-diki
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-chipo
glyphicon glyphicon-shizha
glyphicon glyphicon-moto
glyphicon glyphicon-ziso-yakavhurika
glyphicon glyphicon-ziso-pedyo
glyphicon glyphicon-yambiro-chiratidzo
glyphicon glyphicon-ndege
glyphicon glyphicon-karenda
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-pasi
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-ngoro
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-yakazaruka
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-chitupa
glyphicon glyphicon-zvigunwe-kumusoro
glyphicon glyphicon-zvigunwe-pasi
glyphicon glyphicon-ruoko-kurudyi
glyphicon glyphicon-ruoko-kuruboshwe
glyphicon glyphicon-ruoko-kumusoro
glyphicon glyphicon-ruoko-pasi
glyphicon glyphicon-denderedzwa-museve-kurudyi
glyphicon glyphicon-denderedzwa-museve-kuruboshwe
glyphicon glyphicon-denderedzwa-museve-up
glyphicon glyphicon-denderedzwa-museve-pasi
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-mabasa
glyphicon glyphicon-sefa
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-moyo-isina
glyphicon glyphicon-link
glyphicon glyphicon-foni
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-ronga-ne-kurongeka
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-mhando-ne-maitiro
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-isina kutariswa
glyphicon glyphicon-kuwedzera
glyphicon glyphicon-kudonha-pasi
glyphicon glyphicon-kudonha-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nyowani-hwindo
glyphicon glyphicon-rekodhi
glyphicon glyphicon-chengetedza
glyphicon glyphicon-yakavhurika
glyphicon glyphicon-yakachengetedzwa
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-kutumira
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-yakachengetedzwa
glyphicon glyphicon-floppy-bvisa
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-yakavhurika
glyphicon glyphicon-kiredhiti-kadhi
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-vhidhiyo
glyphicon glyphicon-hd-vhidhiyo
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-muti-conifer
glyphicon glyphicon-muti-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-chengetedza-faira
glyphicon glyphicon-yakavhurika-faira
glyphicon glyphicon-level-up
glyphicon glyphicon-kopi
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-mambo
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-mwana-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-mubhedha
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-chigero
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-ravira
glyphicon glyphicon-dzidzo
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-hwindo
glyphicon glyphicon-mafuta
glyphicon glyphicon-zviyo
glyphicon glyphicon-magirazi
glyphicon glyphicon-chinyorwa-saizi
glyphicon glyphicon-chinyorwa-ruvara
glyphicon glyphicon-text-background
glyphicon glyphicon-chinhu-align-top
glyphicon glyphicon-chinhu-align-pasi
glyphicon glyphicon-chinhu-align-horizontal
glyphicon glyphicon-chinhu-align-kuruboshwe
glyphicon glyphicon-chinhu-align-vertical
glyphicon glyphicon-chinhu-align-kurudyi
glyphicon glyphicon-triangle-kurudyi
glyphicon glyphicon-triangle-kuruboshwe
glyphicon glyphicon-triangle-pasi
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-kuruboshwe
glyphicon glyphicon-menu-kurudyi
glyphicon glyphicon-menu-pasi
glyphicon glyphicon-menu-up

Kushandisa sei

Nezvikonzero zvekuita, zvese zvidhori zvinoda base kirasi uye yega icon kirasi. Kuti ushandise, isa kodhi inotevera chero kupi zvako. Ita shuwa yekusiya nzvimbo pakati peiyo icon uye zvinyorwa zvepadding chaiyo.

Usasanganise nezvimwe zvikamu

Icon makirasi haigone kusanganiswa zvakananga nezvimwe zvikamu. Izvo hazvifanirwe kushandiswa pamwe nemamwe makirasi pachinhu chimwe chete. Pane kudaro, wedzera nested <span>uye shandisa iyo icon makirasi kune iyo <span>.

Chete chekushandisa pazvinhu zvisina chinhu

Icon makirasi anofanirwa kungoshandiswa pazvinhu zvisina zvinyorwa uye zvisina mwana zvinhu.

Kuchinja iyo icon font nzvimbo

Bootstrap inotora icon font mafaera achave ari ../fonts/mudhairekitori, zvine chekuita neakaunganidzwa CSS mafaera. Kufambisa kana kutumidzazve iwo mafonti mafaera zvinoreva kuvandudza iyo CSS mune imwe yenzira nhatu:

Shandura iyo @icon-font-pathuye/kana @icon-font-namevhezheni mune sosi Mashoma mafaera.
Shandisa iyo hukama URLs sarudzo yakapihwa neMudiki compiler.
Shandura url()nzira muCSS yakaunganidzwa.

Shandisa chero sarudzo inonyatsokodzera yako chaiyo yekusimudzira setup.

Inowanikwa mifananidzo

Shanduro dzemazuva ano dzetekinoroji dzekubatsira dzichazivisa CSS inogadzirwa zvemukati, pamwe neakananga Unicode mavara. Kuti udzivise zvisingatarisirwe uye zvinovhiringa kubuda muvaverengi vescreen (kunyanya kana zvidhori zvichishandiswa kushongedza chete), tinozvivanza aria-hidden="true"nehunhu.

Kana uri kushandisa chiratidzo kuratidza zvinoreva (kwete sechinhu chekushongedza chete), ita shuwa kuti chirevo ichi chinosvitswa kune tekinoroji inobatsira - semuenzaniso, sanganisira zvimwe zvemukati, zvinoonekwa zvakavanzwa .sr-onlynekirasi.

Kana iwe uchigadzira zvidzoreso zvisina mamwe mavara ( <button>senge ane chiratidzo chete), iwe unofanirwa kugara uchipa zvimwe zvemukati kuratidza chinangwa chekutonga, kuitira kuti zvive zvine musoro kune vashandisi vetekinoroji inobatsira. Mune ino kesi, iwe unogona kuwedzera aria-labelhunhu pane iyo control pachayo.

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

Mienzaniso

Ashandise mumabhatani, mapoka emabhatani eturubhu, kufamba, kana mamepu akafanorongwa.

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

Chiratidzo chinoshandiswa muchenjedzo kuratidza kuti imhaka yemeseji, iine mamwe .sr-onlymavara ekuendesa iyi zano kune vashandisi vetekinoroji inobatsira.

Isa kero yeemail inoshanda

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

Inobatika, yemenu yemukati yekuratidza rondedzero yezvinongedzo. Yakagadzirwa kupindirana nekudonhedza JavaScript plugin .

Muenzaniso

Putira chinodonhedza chinokonzeresa uye menyu yekudonhedza mukati .dropdown, kana chimwe chinhu chinozivisa position: relative;. Wobva wawedzera HTML yemenyu.

<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 inogona kuchinjwa kuti iwedzere kumusoro (panzvimbo yepasi) nekuwedzera .dropupkumubereki.

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

Alignment

Nekumisikidza, menyu yekudonha inoiswa otomatiki 100% kubva kumusoro uye nekuruboshwe rwemubereki wayo. Wedzera .dropdown-menu-rightkune a .dropdown-menukune kurudyi gadzirisa menyu yekudonha.

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

Headers

Wedzera musoro kuti unyore zvikamu zvezviito mune chero kudonha menyu.

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

Divider

Wedzera divider kuti iparadzanise nhevedzano yezvekubatanidza mune yekudonha menyu.

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

Akaremara menyu zvinhu

Wedzera .disabledkune a <li>mukudonhedza kudzima chinongedzo.

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

Rongedza nhevedzano yemabhatani pamwe chete pamutsetse mumwechete neboka remabhatani. Wedzera pane inosarudzika JavaScript redhiyo uye cheki bhokisi maitiro nemabhatani edu plugin .

Zvishandiso & popover mumapoka emabhatani zvinoda kurongeka kwakakosha

Paunenge uchishandisa zvishandiso zvematurusi kana popovers pazvinhu zviri mukati me .btn-group, uchafanirwa kudoma sarudzo container: 'body'yekudzivirira zvisingadiwe mhedzisiro (senge chinhu chiri kukura zvakafara uye/kana kurasikirwa nemakona ayo akatenderedzwa kana chishandiso kana popover yatanga).

Iva nechokwadi chechokwadi `role`uye upe label

Kuti tekinoroji yekubatsira - senge yekuverenga skrini - kuratidza kuti nhevedzano yemabhatani akaiswa mumapoka, rolehunhu hwakakodzera hunoda kupihwa. Kumapoka emabhatani, izvi zvingave role="group", ukuwo maturusi anofanirwa kunge aine role="toolbar".

Imwe yakasarudzika mapoka anongove ane imwechete kutonga (semuenzaniso mabhatani mapoka ane <button>zvinhu) kana kudonhedza pasi.

Pamusoro pezvo, mapoka uye maturusi anofanirwa kupihwa chirairo chakajeka, sezvo tekinoroji zhinji dzinobatsira dzisingazozvizivise, kunyangwe kuvepo kwehunhu hwakakodzera role. Mumienzaniso yakapihwa pano, tinoshandisa aria-label, asi dzimwe nzira dzakadai aria-labelledbydzinogona kushandiswa zvakare.

Basic muenzaniso

Putira mabhatani akatevedzana ne .btnin .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>

Batanidza seti dzekuita <div class="btn-group">a <div class="btn-toolbar">kune zvimwe zvakaoma zvinoumba.

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

Kukura

Panzvimbo pekushandisa bhatani kuronga makirasi kune ese bhatani muboka, ingowedzera .btn-group-*kune yega yega .btn-group, kusanganisira kana uchisunungura mapoka mazhinji.

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

Nesting

Isa .btn-groupmukati meimwe .btn-groupkana iwe uchida mamenu ekudonha akasanganiswa nenhevedzano yemabhatani.

<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

Itai kuti mabhatani aite seti akaturikidzana kwete akachinjika. Kudonhedza mabhatani ekupatsanura hakushandi pano.

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

Mapoka emabhatani akapembedzwa

Ita boka remabhatani akatambanudzwa pahukuru hwakaenzana kuti urebe hupamhi hwese hwemubereki wayo. Inoshandawo nemabhatani ekudonhedza mukati meboka remabhatani.

Kubata miganhu

Nekuda kweiyo chaiyo HTML neCSS inoshandiswa kururamisa mabhatani (kureva display: table-cell), miganhu iri pakati pavo inopetwa kaviri. Mumapoka emabhatani enguva dzose, margin-left: -1pxanoshandiswa kuisa miganho pachinzvimbo chekuabvisa. Nekudaro, marginhazvishande ne display: table-cell. Nekuda kweizvozvo, zvinoenderana nemaitiro ako kuBootstrap, unogona kuda kubvisa kana kupendesazve miganhu.

IE8 uye miganhu

Internet Explorer 8 haipe miganhu pamabhatani ari muboka remabhatani anoruramiswa, ingave iri pairi <a>kana <button>zvinhu. Kuti utenderere ipapo, peta bhatani rega rega mune rimwe .btn-group.

Ona #12476 kuti uwane rumwe ruzivo.

Nezvinhu `<a>`_

Ingopeta mutsara we .btns mu .btn-group.btn-group-justified.

Ruboshwe Pakati Rudyi

Ruboshwe Pakati

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

Zvisungo zvinoshanda semabhatani

Kana izvo <a>zvinhu zvakashandiswa kuita semabhatani - zvichikonzera mukati-peji kushanda, pane kuenda kune rimwe gwaro kana chikamu mukati meiyo peji peji - ivo vanofanirwawo kupihwa yakakodzera role="button".

Nezvinhu `<button>`_

Kuti ushandise mabhatani mapoka ane <button>zvinhu, unofanirwa kuputira bhatani rega rega muboka remabhatani . Mabhurawuza mazhinji haashandise zvakanaka CSS yedu yekururamisa kune <button>zvinhu, asi sezvo isu tichitsigira kudonhedza mabhatani, tinogona kushanda tichitenderedza izvozvo.

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

Shandisa chero bhatani kukonzeresa menyu yekudonha nekuiisa mukati .btn-groupuye nekupa iyo yakakodzera menyu markup.

Plugin kutsamira

Mabhatani anodonhedza anoda iyo yekudonha plugin kuti ibatanidzwe mune yako vhezheni yeBootstrap.

Single button dropdowns

Shandura bhatani kuita rekudonhedza pasi uine dzimwe shanduko dzemakipu.

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

Split button dropdowns

Saizvozvo, gadzira kupatsanurwa bhatani kudonhedza neyakafanana markup shanduko, chete nebhatani rakasiyana.

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

Kukura

Mabhatani anodonhedza anoshanda nemabhatani emasaizi ese.

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

Tamba mamenu ekudonhedza pamusoro pezvinhu nekuwedzera .dropupkumubereki.

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

Wedzera zvidzoreso zvemafomu nekuwedzera mavara kana mabhatani pamberi, mushure, kana mativi ese echero mavara-akavakirwa <input>. Shandisa .input-groupne .input-group-addonkana .input-group-btnkugadzirira kana kubatanidza zvinhu kune imwechete .form-control.

Zvinyorwa `<input>`chete

Dzivisa kushandisa <select>zvinhu pano sezvo zvisingagone kunyorwa zvizere mumabhurawuza eWebKit.

Regedza kushandisa <textarea>zvinhu pano sezvo rowshunhu hwavo husingazoremekedzwa mune dzimwe nguva.

Zvishandiso & popover mumapoka ekuisa zvinoda kurongeka kwakakosha

Paunenge uchishandisa matipi ezvishandiso kana mapopovers pazvinhu zviri mukati me .input-group, uchafanirwa kudoma sarudzo container: 'body'yekudzivirira zvisingadiwe mhedzisiro (senge chinhu chiri kukura zvakafara uye/kana kurasikirwa nemakona ayo akatenderedzwa kana chishandiso kana popover yatanga).

Usasanganise nezvimwe zvikamu

Usasanganise mafomu mapoka kana grid column makirasi zvakananga nemapoka ekuisa. Pane kudaro, isa boka rekuisa mukati meboka refomu kana chinhu chine chekuita negrid.

Nguva dzose wedzera mavara

Vaverengi veScreen vanozonetseka nemafomu ako kana ukasabatanidza label yeese mapikisi. Kune aya mapoka ekuisa, ita shuwa kuti chero chekuwedzera label kana kushanda kwasvitswa kune anobatsira matekinoroji.

Maitiro chaiwo achashandiswa (zvinhu zvinoonekwa <label>, <label>zvinhu zvakavanzwa uchishandisa .sr-onlykirasi, kana kushandiswa kweiyo aria-label, aria-labelledby, aria-describedby, titlekana placeholderhunhu) uye ndeupi rumwe ruzivo rwunozoda kutaurirwa rwunosiyana zvichienderana nerudzi chairwo rwewidget yauri kuita. Mienzaniso iri muchikamu chino inopa nzira shoma dzakakurudzirwa, dzakanangana nenyaya.

Basic muenzaniso

Isa imwe add-on kana bhatani kune rimwe divi rekuisa. Iwe unogona zvakare kuisa imwe pamativi ese maviri ekuisa.

Isu hatitsigire akawanda ma-add-ons ( .input-group-addonkana .input-group-btn) kune rimwe divi.

Isu hatitsigire akawanda mafomu-zvinodzora muboka rekuisa rimwe chete.

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

Kukura

Wedzera iyo inoenderana fomu saizi makirasi kune iyo .input-grouppachayo uye zviri mukati zvinongozvigadzirisa-hapana chikonzero chekudzokorora fomu rekudzora saizi makirasi pane chimwe nechimwe chinhu.

<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 uye radio addons

Isa chero bhokisi rekutarisa kana redhiyo sarudzo mukati meboka rekupinda addon pane zvinyorwa.

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

Button addons

Mabhatani ari mumapoka ekuisa akati siyanei uye anoda imwe nhanho yekuwedzera yekugara. Panzvimbo pe .input-group-addon, iwe unozofanirwa kushandisa .input-group-btnkuputira mabhatani. Izvi zvinodikanwa nekuda kwezvitaera zvebrowser zvisingagone kupfuudzwa.

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

Mabhatani ane 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 mabhatani

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

Mabhatani akawanda

Nepo iwe uchingokwanisa kuve nekuwedzera-padivi padivi, iwe unogona kuve nemabhatani akawanda mukati meimwe .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 inowanikwa muBootstrap yakagovana markup, kutanga .navnekirasi yepasi, pamwe nenzvimbo dzakagovaniswa. Chinjana makirasi ekugadzirisa kuti uchinje pakati pechimwe nechimwe chimiro.

Kushandisa navs kune tab mapaneru kunoda JavaScript tabs plugin

Kune ma tabo ane nzvimbo dzinobatika, unofanira kushandisa ma tabs JavaScript plugin . Iyo markup inodawo yekuwedzera roleuye ARIA hunhu - ona iyo plugin muenzaniso markup kuti uwane rumwe ruzivo.

Ita kuti navs ishandiswe sekufambisa kusvike

Kana uri kushandisa navs kupa bhaa yekufambisa, ive shuwa yekuwedzera role="navigation"kune ine musoro mubereki chigaba che <ul>, kana kuputira <nav>chinhu kutenderedza kutenderera kwese. Usawedzera basa kune iro <ul>pacharo, sezvo izvi zvingadzivirira kuti zvisaziviswa sechinyorwa chaicho neanobatsira matekinoroji.

Tabs

Cherechedza kuti .nav-tabskirasi inoda .navkirasi yepasi.

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

Mapiritsi

Tora iyo HTML yakafanana, asi shandisa .nav-pillspachinzvimbo:

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

Mapiritsi anewo vertically stackable. Ingo wedzera .nav-stacked.

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

Kururamiswa

Gadzira ma tabhu kana mapiritsi zviri nyore hupamhi hwemubereki wavo pamasikirini akafara kupfuura 768px ane .nav-justified. Pamasikirini madiki, ma nav link akaturikidzana.

Manongedzo e navbar nav ane kodzero haasi kutsigirwa parizvino.

Safari uye inopindura inoruramiswa navs

Kubva pav9.1.2, Safari inoratidza tsikidzi umo kudzoreredza saizi yebrowser yako zvakachinjika kunokonzeresa kupa zvikanganiso mune inoruramiswa nav inocheneswa pakuzorodza. Iyi bug inoratidzwawo mu justified nav muenzaniso .

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

Disabled links

Kune chero chinhu che nav (ma tabhu kana mapiritsi), wedzera .disabledkune grey link uye hapana hover mhedzisiro .

Kushanda kwelink hakuna kukanganiswa

Kirasi iyi inongoshandura chimiro che <a>', kwete kushanda kwayo. Shandisa tsika JavaScript kudzima zvinongedzo pano.

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

Kushandisa dropdowns

Wedzera mamenu ekudonhedza nekamwe HTML kadiki uye anodonhedza JavaScript plugin .

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

Mapiritsi ane 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 inoteerera meta zvikamu zvinoshanda semafambiro emusoro wekushandisa kwako kana saiti. Ivo vanotanga kudonha (uye vari kuchinjika) munharembozha uye vova akachinjika sezvo inowanikwa yekuona hupamhi hunowedzera.

Manongedzo e navbar nav ane kodzero haasi kutsigirwa parizvino.

Kufashukira zvemukati

Sezvo Bootstrap isingazive kuti yakawanda sei nzvimbo yemukati mune yako navbar inoda, unogona kumhanyisa nyaya nezviri kuputirwa mumutsara wechipiri. Kuti ugadzirise izvi, unogona:

Deredza huwandu kana hupamhi hwezvinhu zve navbar.
Viga zvimwe zvinhu zvenavbar pane mamwe masikirwo emasikirini uchishandisa makirasi ekushandisa anoteerera .
Chinja poindi iyo navbar yako inochinja pakati pekudonha uye yakachinjika modhi. Gadzirisa @grid-float-breakpointshanduko kana wedzera yako midhiya yemubvunzo.

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

Tsiva iyo navbar brand nemufananidzo wako nekuchinjanisa mavara kune <img>. Sezvo iyo .navbar-brandine yayo padding uye kureba, ungangoda kudarika imwe CSS zvichienderana nemufananidzo wako.

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

Isa zviri mukati mefomu mukati .navbar-formkuitira kurongeka kwakaringana uye maitiro akaputsika munzvimbo dzakamanikana dzekuona. Shandisa sarudzo dzekugadzirisa kuti usarudze kuti inogara kupi mukati meiyo navbar yemukati.

Semusoro kumusoro, .navbar-forminogovera yakawanda yekodhi yayo ne .form-inlinekuburikidza ne mixin. Mamwe mafomu ekudzora, semapoka ekuisa, angangoda hupamhi hwakatarwa kuti huratidzike zvakanaka mukati mebhara.

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

Nguva dzose wedzera mavara

Vaverengi veScreen vanozonetseka nemafomu ako kana ukasasanganisira label yeese mapikisi. Kune aya mafomu emukati, unogona kuvanza mavara uchishandisa .sr-onlykirasi. Kune dzimwe nzira dzekupa label yekubatsira matekinoroji, senge aria-label, aria-labelledbykana titlehunhu. Kana pasina chimwe cheizvi chiripo, vaverengi vescreen vanogona kushandisa placeholderhunhu, kana huripo, asi cherechedza kuti kushandiswa placeholderkwechinzvimbo chedzimwe nzira dzekunyora hakuna kurairwa.

Wedzera .navbar-btnkirasi <button>kuzvinhu zvisiri kugara mu a <form>kuti vertically pakati pavo mu navbar.

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

Putira tambo dzemavara nechinhu ne .navbar-text, kazhinji <p>pategi yekutungamira uye ruvara rwakafanira.

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

Kune vanhu vanoshandisa zvakajairwa zvinongedzo zvisiri mukati meyenguva navbar yekufambisa chikamu, shandisa .navbar-linkkirasi kuwedzera iwo mavara akakodzera ezvakasarudzika uye inverse navbar sarudzo.

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

Gadzirisa nav zvinongedzo, mafomu, mabhatani, kana zvinyorwa, uchishandisa .navbar-leftkana .navbar-rightmakirasi ekushandisa. Makirasi ese ari maviri anozowedzera CSS inoyangarara munzira yakatarwa. Semuenzaniso, kurongedza nav link, zviise mune yakaparadzana <ul>neyakasiyana utility kirasi yakashandiswa.

Aya makirasi mamixin-ed vhezheni e .pull-leftuye .pull-right, asi anoiswa kune midhiya mibvunzo kuitira nyore kubata zvinhu zve navbar pamasaizi emudziyo.

Wedzera .navbar-fixed-topuye sanganisira a .containerkana .container-fluidpakati uye pad navbar zvemukati.

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

Body padding inodiwa

Iyo yakagadziriswa navbar ichafukidza zvimwe zvako zvirimo, kunze kwekunge wawedzera paddingkumusoro kweiyo <body>. Edza tsika dzako kana shandisa snippet yedu pazasi. Zano: Nekusagadzika, iyo navbar ndeye 50px yakakwirira.

body { padding-top: 70px; }

Ita shuwa yekuisa izvi mushure meiyo yakakosha Bootstrap CSS.

Wedzera .navbar-fixed-bottomuye sanganisira a .containerkana .container-fluidpakati uye pad navbar zvemukati.

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

Body padding inodiwa

Iyo yakagadziriswa navbar ichafukidza zvimwe zvako zvirimo, kunze kwekunge wawedzera paddingkuzasi kweiyo <body>. Edza tsika dzako kana shandisa snippet yedu pazasi. Zano: Nekusagadzika, iyo navbar ndeye 50px yakakwirira.

body { padding-bottom: 70px; }

Ita shuwa yekuisa izvi mushure meiyo yakakosha Bootstrap CSS.

Gadzira yakazara-yakafara navbar inotenderera ichienda nepeji nekuwedzera .navbar-static-topuye inosanganisira a .containerkana .container-fluidkuti pakati uye pad navbar zvemukati.

Kusiyana .navbar-fixed-*nemakirasi, haufanire kushandura chero padding pane body.

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

Shandura chitarisiko che navbar nekuwedzera .navbar-inverse.

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

Zvimedu zvechingwa

Ratidza nzvimbo yepeji iripo mukati mehurongwa hwekufamba.

Zviparadzanisa zvinowedzerwa otomatiki muCSS kuburikidza :beforeuye content.

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

Pagination

Ipa zvinongedzo zvemapeji esaiti yako kana app ine mapeji akawanda epagination chikamu, kana iri nyore kupeja imwe nzira .

Default pagination

Yakareruka pagination yakafemerwa neRdio, yakanakira maapplication uye mhinduro dzekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

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

Kunyora chikamu chepejini

Chikamu chepejini chinofanirwa kuputirwa muchinhu kuti chiratidze <nav>sechikamu chekufambisa kune vanoverenga skrini uye humwe hunyanzvi hwekubatsira. Pamusoro pezvo, sepeji ingangove iine zvinopfuura chikamu chimwe chete chekufamba chakadaro (sekutanga kufambisa mumusoro, kana kutenderera kweparutivi), zvinokurudzirwa kupa tsananguro aria-labelyeicho <nav>inoratidza chinangwa chayo. Semuyenzaniso, kana chikamu chepejination chikashandiswa kufamba pakati peseti yezviwanikwa zvekutsvaga, zita rakakodzera rinogona kunge riri aria-label="Search results pages".

Yakaremara uye inoshanda nyika

Zvisungo zvinogoneka kune akasiyana mamiriro. Shandisa .disabledkune unclickable links uye .activekuratidza peji iripo.

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

Isu tinokukurudzira kuti uchinje ma anchor anoshanda kana akaremara ku <span>, kana kusiya anchor kana iri miseve yapfuura/inotevera, kuti ubvise kuita kwekudzvanya uchichengeta masitaera akada.

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

Kukura

Fancy yakakura kana diki pagination? Wedzera .pagination-lgkana .pagination-smkuwedzera saizi.

<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

Kurumidza yapfuura uye inotevera zvinongedzo zvekushandisa zviri nyore pagination ine mwenje markup uye masitaera. Yakanakira masaiti akareruka senge mablogiki kana magazini.

Default muenzaniso

Nekumisikidza, iyo pager inoisa zvinongedzo.

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

Aligned links

Neimwe nzira, unogona kuenzanisa chinongedzo chimwe nechimwe kumativi:

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

Optional disabled state

Pager zvinongedzo zvinoshandisawo general .disabledutility kirasi kubva kupeji.

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

Muenzaniso

Muenzaniso musoro New

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

Misiyano iripo

Wedzera chero ipi zvayo yakataurwa pasi apa modifier makirasi kuti uchinje chitarisiko chezita.

Default Primary Success Info Warning 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>

Une matani emavara?

Kupa matambudziko anogona kumuka kana iwe uine akawanda einline mavara mukati memudziyo nhete, imwe neimwe iine yayo inline-blockchinhu (senge icon). Nzira yakapoteredza iyi iri kugadzika display: inline-block;. Kuti uwane mamiriro uye muenzaniso, ona #13219 .

Nyora zviri nyore zvinhu zvitsva kana zvisina kuverenga nekuwedzera <span class="badge">kune zvinongedzo, Bootstrap navs, nezvimwe.

Inbox42

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

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

Kuzviwisira pasi

Kana pasina zvinhu zvitsva kana zvisina kuverengwa, mabheji anongodonha (kuburikidza neCSS's :emptyselector) chero pasina zvirimo mukati.

Cross-browser kuenderana

Mabheji haazvipunzike ega muInternet Explorer 8 nekuti anoshaya rutsigiro kune :emptyanosarudza.

Inochinja kune inoshanda nav states

Zvitaera zvakavakwa zvinosanganisirwa zvekuisa mabheji munzvimbo dzinoshanda mukufamba kwemapiritsi.

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

Chinhu chisina kuremerwa, chinochinjika chinogona kukwidziridza nzvimbo yese yekutarisa kuratidza zvakakosha zvemukati pane yako saiti.

Mhoro, nyika!

Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.

Dzidza zvimwe

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

Kuita kuti jumbotron izere nehupamhi, uye isina makona akatenderedzwa, isa kunze kwese .containers uye panzvimbo pacho wedzera .containermukati.

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

Shell yakapfava h1yenzvimbo yakakodzera kunze uye zvikamu zvemukati pane peji. Inogona kushandisa iyo h1's default smallelement, pamwe nezvimwe zvakawanda zvinoumba (nemamwe masitayera).

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

Wedzera Giridhi yeBootstrap neiyo thumbnail chikamu kuratidza zviri nyore magiradhi emifananidzo, mavhidhiyo, zvinyorwa, nezvimwe.

Kana iwe uchitsvaga Pinterest-sekuratidzwa kwezvigunwe zvehurefu hwakasiyana uye/kana hupamhi, unozofanirwa kushandisa yechitatu-bato plugin yakadai Masonry , Isotope , kana Salvattore .

Default muenzaniso

Nekumisikidza, zvigunwe zveBootstrap zvakagadzirirwa kuratidza mifananidzo yakabatana ine shoma inodiwa markup.

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

Custom content

Nechimwe chekuwedzera markup, zvinokwanisika kuwedzera chero mhando yezvinyorwa zveHTML senge misoro, ndima, kana mabhatani muzvigunwe.

Thumbnail label

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

Bhatani Bhatani

Thumbnail label

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

Bhatani Bhatani

Thumbnail label

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

Bhatani Bhatani

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

Ipa mamiriro emhinduro mameseji ezviitwa zvemushandisi ane mashoma anowanikwa uye anochinjika echenjedzo meseji.

Mienzaniso

Putira chero mavara uye bhatani raungasarudze rekudzinga mukati .alertuye rimwe remakirasi mana emamiriro ezvinhu (semuenzaniso, .alert-success) kune mameseji echenjedzo.

No default class

Yambiro haina makirasi ekutanga, makirasi egasi uye ekugadzirisa chete. Yekuyeverwa yegrey yambiro haiite yakawandisa, saka unosungirwa kutsanangura mhando kuburikidza nekirasi yemamiriro. Sarudza kubva pakubudirira, ruzivo, yambiro, kana njodzi.

Kuita zvakanaka! Iwe wakabudirira kuverenga iyi yakakosha meseji yekuzivisa.

Musoro! Yambiro iyi inoda kutariswa newe, asi haina kukosha zvakanyanya.

Yambiro! Zvirinani uzviongorore, hausi kunyanya kutaridzika zvakanaka.

Oh snap! Shandura zvinhu zvishoma uye edza kutumira zvakare.

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

Zviziviso zvinodzingwa

Gadzira pane chero yambiro nekuwedzera sarudzo .alert-dismissibleuye yekuvhara bhatani.

Inoda JavaScript alert plugin

Kuti ushande zvizere, chenjedzo dzinodzingwa, unofanirwa kushandisa chenjedzo JavaScript plugin .

Yambiro! Zvirinani uzviongorore, hausi kunyanya kutaridzika zvakanaka.

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

Ita shuwa maitiro akanaka pamidziyo yese

Iva nechokwadi chekushandisa <button>chinhu chine data-dismiss="alert"data hunhu.

Links muzviziviso

Shandisa .alert-linkutility kirasi kukurumidza kupa anoenderana mavara ekubatanidza mukati meyambiro ipi neipi.

Kuita zvakanaka! Wakaverenga meseji yakakosha iyi yechenjedzo .

Musoro! Yambiro iyi inoda kutariswa newe , asi haina kukosha zvakanyanya.

Yambiro! Zvirinani uzviongorore, hausi kunyanya kutaridzika zvakanaka .

Oh snap! Shandura zvinhu zvishoma uye edza kutumira zvakare.

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

Ipa mhinduro dzezvino-zvino pamusoro pekufambira mberi kwekufambiswa kwebasa kana chiitiko chine mabara akareruka asi anochinjika ekufambira mberi.

Cross-browser kuenderana

Mabhawa ekufambira mberi anoshandisa CSS3 shanduko uye animations kuti iwane zvimwe zvadzo. Aya maficha haatsigirwe muInternet Explorer 9 uye pazasi kana shanduro dzekare dzeFirefox. Opera 12 haitsigire mifananidzo.

Content Security Policy (CSP) inoenderana

Kana webhusaiti yako iine Content Security Policy (CSP) isingatenderi style-src 'unsafe-inline', saka hauzokwanisi kushandisa inline stylehunhu kuseta kufambira mberi kwebhawa upamhi sezvakaratidzwa mumienzaniso yedu pazasi. Dzimwe nzira dzekuseta hupamhi hunoenderana neCSP dzakasimba dzinosanganisira kushandisa katsika JavaScript (iyo inoseta element.style.width) kana kushandisa makirasi eCSS etsika.

Basic muenzaniso

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

With label

Bvisa iyo <span>ine .sr-onlykirasi kubva mukati mekufambira mberi bar kuratidza chikamu chinooneka.

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>

Kuti uve nechokwadi chekuti mavara echinyorwa anoramba achinyoreka kunyangwe nezvikamu zvakaderera, funga kuwedzera a min-widthkune yekufambira mberi 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>

Contextual dzimwe nzira

Mabhawa ekufambira mberi anoshandisa mamwe bhatani rimwe chete uye makirasi ekuzivisa kune anowirirana masitaera.

<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

Inoshandisa gradient kugadzira mitsetse. Haisi kuwanikwa muIE9 uye pazasi.

<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

Wedzera .activekune .progress-bar-stripedkumutsa mitsetse kurudyi kuruboshwe. Haisi kuwanikwa muIE9 uye pazasi.

<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

Isa mabhawa akawanda mune imwechete .progresskuti aaise.

<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 chinhu masitaera ekuvaka akasiyana marudzi ezvikamu (seblog blog, maTweets, nezvimwewo) ane mufananidzo wekuruboshwe- kana kurudyi-padivi pezvinyorwa.

Default media

Iyo yakasarudzika midhiya inoratidza chinhu chemedia (mifananidzo, vhidhiyo, odhiyo) kuruboshwe kana kurudyi rwemukati block.

Musoro wenhau

Cras sit amet nibh libero, mu 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 in faucibus.

Musoro wenhau

Cras sit amet nibh libero, mu 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 in faucibus.

Nested media heading

Cras sit amet nibh libero, mu 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 in faucibus.

Musoro wenhau

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Musoro wenhau

Cras sit amet nibh libero, mu 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>

Makirasi .pull-leftuye .pull-rightaripo uye aimboshandiswa sechikamu chezvenhau, asi akaregwa kushandiswa ikoko sev3.3.0. Iwo anenge akaenzana ne .media-leftuye .media-right, kunze kwekunge .media-rightanofanirwa kuiswa mushure .media-bodymeiyo muhtml.

Media alignment

Iyo mifananidzo kana imwe midhiya inogona kuenderana kumusoro, pakati, kana pasi. Iyo yekusarudzika yakamisikidzwa kumusoro.

Top aligned media

Cras sit amet nibh libero, mu 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 in faucibus.

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

Pakati akarongedzerwa media

Cras sit amet nibh libero, mu 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 in faucibus.

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

Pazasi akarongedzerwa media

Cras sit amet nibh libero, mu 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 in faucibus.

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

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

Media list

Neine imwe yekuwedzera markup, unogona kushandisa midhiya mukati rondedzero (inobatsira kune ekutaura tambo kana zvinyorwa zvinyorwa).

Musoro wenhau

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu 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>

Mapoka ezvirongwa chinhu chinochinjika uye chine simba chekuratidza kwete zvinyorwa zviri nyore zvezvinhu, asi zvakaoma zvine tsika yemukati.

Basic muenzaniso

The most basic list group ingori rondedzero isina kurongeka ine zvinyorwa zvinhu, uye makirasi akakodzera. Vaka pamusoro payo nesarudzo dzinotevera, kana yako CSS sezvinodiwa.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum uye 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>

Mabheji

Wedzera chikamu chemabheji kune chero chinyorwa cheboka chinhu uye chinozoiswa kurudyi.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

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

Zvinhu zvakabatanidzwa

Batanidza zvinyorwa zveboka nekushandisa ma tag anchor pachinzvimbo chezvinyorwa zvinyorwa (zvinorevawo mubereki <div>pachinzvimbo che <ul>). Hapana chikonzero chevabereki vega pane chimwe chinhu.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum uye 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>

Bhatani zvinhu

Rondedzera zvinhu zveboka zvinogona kunge zviri mabhatani pachinzvimbo chezvinyorwa zvinhu (zvinorevawo mubereki <div>pachinzvimbo che <ul>). Hapana chikonzero chevabereki vega pane chimwe chinhu. Usashandise .btnmakirasi akajairwa pano.

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

Zvinhu zvakaremara

Wedzera .disabledkune a .list-group-itemkune grey kuti iite seyakaremara.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum uye 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>

Contextual classes

Shandisa makirasi emamiriro ezvinhu kuita zvinyorwa zvinyorwa, zvimiro kana zvakabatanidzwa. Inosanganisirawo .activenyika.

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

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum uye 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>

Custom content

Wedzera ingangoita chero HTML mukati, kunyangwe yeakabatana rondedzero mapoka senge ari pazasi.

Rondedzera musoro wechinhu cheboka

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

Rondedzera musoro wechinhu cheboka

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

Rondedzera musoro wechinhu cheboka

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>

Kunyange zvisingawanzo kudikanwa, dzimwe nguva unofanirwa kuisa DOM yako mubhokisi. Kune iwo mamiriro, edza chikamu chepaneru.

Basic muenzaniso

Nekumisikidza, zvese .panelzvinoitwa kushandisa imwe yakakosha muganho uye padding kuve nezvimwe zvirimo.

Basic panel muenzaniso

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

Panel ine musoro

Wedzera zviri nyore mudziyo wemusoro kune yako pani ne .panel-heading. Unogonawo kusanganisira chero <h1>- <h6>nekirasi .panel-titleyekuwedzera musoro wakanyorwa kare. Nekudaro, masaizi <h1>efonti <h6>e- anodarika ne .panel-heading.

Kuti uwane mavara ekubatanidza akakodzera, ita shuwa yekuisa zvinongedzo mumisoro mukati me .panel-title.

Panel musoro usina musoro

Panel content

Panel musoro

Panel content

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel ine footer

Putira mabhatani kana rugwaro rwechipiri mu .panel-footer. Ziva kuti matinji haagari nhaka yemavara nemiganhu kana uchishandisa misiyano yemamiriro ezvinhu sezvo isina kuitirwa kumberi.

Panel content

Panel footer

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

Contextual dzimwe nzira

Kufanana nezvimwe zvikamu, nyore nyore kuti pani ive nechinangwa kune imwe mamiriro nekuwedzera chero yemamiriro emamiriro emakirasi.

Panel musoro

Panel content

Panel musoro

Panel content

Panel musoro

Panel content

Panel musoro

Panel content

Panel musoro

Panel content

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

Nematafura

Wedzera chero isina kuganhurwa .tablemukati mepaneru kuitira dhizaini isina musono. Kana paine .panel-body, tinowedzera muganho wekuwedzera kumusoro kwetafura yekuparadzanisa.

Panel musoro

Zvimwe zvakagara zviripo pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id id nibh ultricies vehicula ut id elit.

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@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>

Kana pasina mutumbi wepanera, chikamu chinofamba kubva pane musoro wepaneru kuenda kune tafura pasina kukanganisa.

Panel musoro

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@twitter

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

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

Nemapoka emazita

Batanidza zviri nyore-yakazara- mazita mapoka mukati mechero pani.

Panel musoro

Zvimwe zvakagara zviripo pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum uye 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>

Bvumira mabhurawuza kuti atarise mavhidhiyo kana masiraidhi zviyero zvichienderana nehupamhi hweiyo ine block nekugadzira yemukati reshiyo inozonyatso kuyera pane chero mudziyo.

Mitemo inoshandiswa zvakananga ku <iframe>, <embed>, <video>, uye <object>zvinhu; .embed-responsive-itemkana uchida kuenzanisa masitaera ezvimwe hunhu .

Pro-Tip! Iwe haufanire kusanganisa frameborder="0"mune yako <iframe>sezvo isu tichipfuura izvo kwauri.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Default zvakanaka

Shandisa tsime seyakareruka mhedzisiro pane chinhu kuti upe iyo inset maitiro.

Tarirai, ndiri mutsime!

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

Optional makirasi

Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.

Tarirai, ndiri mutsime guru!

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

Tarirai, ndiri mutsime duku!

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

Zvikamu

Glyphicons

Glyphs iripo

Kushandisa sei

Usasanganise nezvimwe zvikamu

Chete chekushandisa pazvinhu zvisina chinhu

Kuchinja iyo icon font nzvimbo

Inowanikwa mifananidzo

Mienzaniso

Dropdowns

Muenzaniso

Alignment

Inogona kuda imwe nzvimbo

.pull-rightKurongeka kwakareruka

Headers

Divider

Akaremara menyu zvinhu

Mabhatani mapoka

Zvishandiso & popover mumapoka emabhatani zvinoda kurongeka kwakakosha

Iva nechokwadi chechokwadi roleuye upe label

Basic muenzaniso

Bhatani toolbar

Kukura

Nesting

Vertical variation

Mapoka emabhatani akapembedzwa

Kubata miganhu

IE8 uye miganhu

Nezvinhu <a>_

Zvisungo zvinoshanda semabhatani

Nezvinhu <button>_

Mabhatani anodonhedza

Plugin kutsamira

Single button dropdowns

Split button dropdowns

Kukura

Dropup musiyano

Input groups

Zvinyorwa <input>chete

Zvishandiso & popover mumapoka ekuisa zvinoda kurongeka kwakakosha

Usasanganise nezvimwe zvikamu

Nguva dzose wedzera mavara

Basic muenzaniso

Kukura

Checkboxes uye radio addons

Button addons

Mabhatani ane dropdowns

Segmented mabhatani

Mabhatani akawanda

Navs

Kushandisa navs kune tab mapaneru kunoda JavaScript tabs plugin

Ita kuti navs ishandiswe sekufambisa kusvike

Tabs

Mapiritsi

Kururamiswa

Safari uye inopindura inoruramiswa navs

Disabled links

Kushanda kwelink hakuna kukanganiswa

Kushandisa dropdowns

Tabs ane dropdowns

Mapiritsi ane dropdowns

Navbar

Default navbar

Kufashukira zvemukati

Inoda JavaScript plugin

Kusandura iyo yakadonha mobile navbar breakpoint

Ita kuti ma navbar awanikwe

Mufananidzo wechiratidzo

Mafomu

Mobile mudziyo caveats

Nguva dzose wedzera mavara

Mabhatani

Context-chaiyo kushandiswa

Text

Non-nav links

Component alignment

Kurudyi kurongedza zvikamu zvakawanda

Yakagadziriswa kumusoro

Body padding inodiwa

Yakagadziriswa kusvika pasi

`.pull-right`Kurongeka kwakareruka

Iva nechokwadi chechokwadi `role`uye upe label

Nezvinhu `<a>`_

Nezvinhu `<button>`_

Zvinyorwa `<input>`chete