Glyphicons

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.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Dropdowns

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

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>

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

Inogona kuda imwe nzvimbo

Dropdowns inomisikidzwa otomatiki kuburikidza neCSS mukati meyakajairika kuyerera kwegwaro. Izvi zvinoreva kuti kudonha kunogona kuchekwa nevabereki vane zvimwe overflowzvivakwa kana kuoneka kunze kwemiganhu yekuona. Rongedza nyaya idzi woga padzinomuka.

.pull-rightKurongeka kwakareruka

Kubva pav3.1.0, isu takasiya .pull-rightmamenu ekudonha. Kurongedza menyu kurudyi, shandisa .dropdown-menu-right. Kurudyi-yakamisikidzwa nav components mubhara rekushandisa shandisa mixin vhezheni yekirasi ino kurongedza otomatiki menyu. Kuti uwedzere, shandisa .dropdown-menu-left.

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

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>

Wedzera divider kuti iparadzanise nhevedzano yezvekubatanidza mune yekudonha menyu.

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

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>

Mabhatani mapoka

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

Bhatani toolbar

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

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

Mabhatani anodonhedza

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>

Input groups

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.

@

@muenzaniso.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

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

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.

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>

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>

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>

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>

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>

Navbar

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:

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

Inoda JavaScript plugin

Kana JavaScript yakaremara uye nzvimbo yekuona yakamanikana zvekuti navbar inodonha, hazvigoneke kuwedzera navbar uye kuona zviri mukati me..navbar-collapse .

Iyo inopindura navbar inoda iyo yekudonha plugin kuti ibatanidzwe mune yako vhezheni yeBootstrap.

Kusandura iyo yakadonha mobile navbar breakpoint

Iyo navbar inodonha ichipinda yakatwasuka nharembozha kana nzvimbo yekutarisa yakatetepa kupfuura @grid-float-breakpoint, uye inowedzera kune yakachinjika isiri-yenhare yekuona kana nzvimbo yekutarisa iri @grid-float-breakpointmuhupamhi. Rongedza shanduko iyi muChishoma sosi kuti udzore kana navbar yadonha/kuwedzera. Iyo yakasarudzika kukosha ndeye 768px(diki "diki" kana "tablet" skrini).

Ita kuti ma navbar awanikwe

Iva nechokwadi chekushandisa chimwe <nav>chinhu kana, kana ukashandisa chimwe chinhu chakajairika senge <div>, wedzera role="navigation"kune imwe navbar kuti uiratidze zvakajeka senzvimbo ine mukurumbira kune vashandisi vetekinoroji inobatsira.

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

Mobile mudziyo caveats

Kune mamwe macaveats ane chekuita nekushandisa mafomu ekudzora mukati mezvakagadziriswa zvinhu panharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.

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>

Context-chaiyo kushandiswa

Kufanana neyakajairwa bhatani makirasi , .navbar-btnanogona kushandiswa pane <a>uye <input>zvinhu. Nekudaro, .navbar-btnkana iwo akajairwa mabhatani makirasi haafanire kushandiswa pazvinhu <a>zviri mukati .navbar-nav.

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.

Kurudyi kurongedza zvikamu zvakawanda

Navbars parizvino ane muganhu .navbar-rightnemakirasi akawanda. Kuti tiite zvakanaka nzvimbo yemukati, tinoshandisa negative margin pane yekupedzisira .navbar-rightelement. Kana paine zvinhu zvakawanda zvinoshandisa kirasi iyoyo, mapeji aya haashande sezvakarongwa.

Tichaongorora izvi kana takwanisa kunyora zvakare chikamu muv4.

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

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>

Labels

Muenzaniso

Muenzaniso musoro New

Muenzaniso musoro New

Muenzaniso musoro New

Muenzaniso musoro New

Muenzaniso musoro New
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 .

Mabheji

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>

Jumbotron

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>

Musoro wepeji

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>

Thumbnails

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.

100%x200

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

100%x200

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

100%x200

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>

Alerts

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.

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

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

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

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

Mabhawa ekufambira mberi

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.

60% Yakakwana
<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.

40% Yakakwana (kubudirira)
20% Yakakwana
60% Yakakwana (yambiro)
80% Yakakwana (njodzi)
<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.

40% Yakakwana (kubudirira)
20% Yakakwana
60% Yakakwana (yambiro)
80% Yakakwana (njodzi)
<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.

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

35% Yakakwana (kubudirira)
20% Yakakwana (yambiro)
10% Yakakwana (njodzi)
<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>

Media chinhu

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>

Rondedzera boka

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

Basic muenzaniso

Boka rinonyanya kukosha 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.

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

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

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

Panels

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, iva nechokwadi chekuisa 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>

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

Inopindura embed

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>

Wells

Default zvakanaka

Shandisa tsime seyakapusa 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>