Glyphicons

Glyphs rim faighinn

A’ toirt a-steach còrr air 250 glyphs ann an cruth cruth-clò bhon t-seata Glyphicon Halflings. Mar as trice chan eil Glyphicons Halflings rim faighinn an-asgaidh, ach tha an neach-cruthachaidh aca air an toirt seachad airson Bootstrap an-asgaidh. Mar thaing, chan iarr sinn ach gun cuir thu a-steach ceangal air ais gu Glyphicons nuair as urrainnear.

  • glyphicon glyphicon-rionnag
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-nuas minus
  • glyphicon glyphicon-sgòth
  • glyphicon glyphicon-cèis
  • glyphicon glyphicon-peansail
  • glyphicon glyphicon-glainne
  • glyphicon glyphicon ceòl
  • glyphicon glyphicon-lorg
  • glyphicon glyphicon-cridhe
  • glyphicon glyphicon-rionnag
  • glyphicon glyphicon-star-falamh
  • cleachdaiche glyphicon glyphicon
  • Film glyphicon glyphicon saor an asgaidh
  • glyphicon glyphicon-th-mòr
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-a thoirt air falbh
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon dheth
  • glyphicon glyphicon-comharra
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-sgudal
  • glyphicon glyphicon-dachaigh
  • glyphicon faidhle glyphicon
  • glyphicon glyphicon-ùine
  • glyphicon glyphicon-rathaid
  • glyphicon glyphicon-luchdaich a-nuas alt
  • Luchdaich a-nuas glyphicon glyphicon.
  • Glyphicon glyphicon luchdadh a-nuas
  • glyphicon bogsa a-steach glyphicon
  • glyphicon cearcall-cluiche glyphicon
  • glyphicon glyphicon-ath-aithris
  • glyphicon glyphicon ùrachadh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-glas
  • glyphicon bratach glyphicon
  • glyphicon fònaichean-cluaise glyphicon
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-leabhar-sìos
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon tagaichean glyphicon
  • Leabhar glyphicon glyphicon
  • glyphicon comharra-leabhair glyphicon
  • glyphicon clò-bhualadh glyphicon
  • glyphicon camara glyphicon
  • glyphicon cruth-clò glyphicon
  • glyphicon glyphicon-trom
  • glyphicon glyphicon- eadailteach
  • glyphicon glyphicon-text-àirde
  • glyphicon glyphicon-teacsa-leud
  • glyphicon glyphicon-align-clì
  • glyphicon ionad glyphicon-align
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon liosta glyphicon
  • glyphicon glyphicon-indent-clì
  • glyphicon glyphicon-indent-deas
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-dealbh
  • glyphicon comharra-mapa glyphicon
  • glyphicon glyphicon-atharraich
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-deasaich
  • glyphicon glyphicon-roinn
  • glyphicon glyphicon-seic
  • glyphicon glyphicon-gluasad
  • glyphicon glyphicon-ceum air ais
  • glyphicon glyphicon-luath-air ais
  • glyphicon glyphicon-air ais
  • glyphicon cluich glyphicon
  • glyphicon glyphicon-stad
  • glyphicon glyphicon-stad
  • glyphicon glyphicon-air adhart
  • glyphicon glyphicon-luath air adhart
  • glyphicon glyphicon-ceum air adhart
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-chlì
  • glyphicon glyphicon-chevron-deas
  • glyphicon soidhne glyphicon-plus
  • glyphicon soidhne glyphicon-minus
  • glyphicon glyphicon-soidhne toirt air falbh
  • glyphicon soidhne glyphicon-ok
  • glyphicon soidhne ceist glyphicon
  • glyphicon soidhne glyphicon-info
  • glyphicon glacadh-sgrìn glyphicon
  • glyphicon glyphicon-toirt air falbh cearcall
  • glyphicon cearcall glyphicon-ok
  • glyphicon glyphicon-ban-cearcall
  • glyphicon glyphicon-saighead-chlì
  • glyphicon glyphicon-saighead-deas
  • glyphicon glyphicon-saighead suas
  • glyphicon glyphicon-saighead sìos
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-ath-mheudachadh-làn
  • glyphicon glyphicon-ath-mheudachadh-beag
  • glyphicon glyphicon-exclamation-sign
  • glyphicon tiodhlac glyphicon
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-teine
  • glyphicon glyphicon-sùil fosgailte
  • glyphicon glyphicon-sùil-dùin
  • glyphicon soidhne-rabhaidh glyphicon
  • glyphicon glyphicon-itealan
  • glyphicon glyphicon-mìosachan
  • glyphicon glyphicon-air thuaiream
  • glyphicon glyphicon-beachd
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-suas
  • glyphicon glyphicon-chevron sìos
  • glyphicon glyphicon-ath-sgrìobhadh
  • glyphicon cairt-bhùthan glyphicon
  • glyphicon glyphicon-pasgan-dlùth
  • glyphicon glyphicon-pasgan-fosgailte
  • glyphicon glyphicon-ath-mheudachadh-inghearach
  • glyphicon glyphicon-ath-mheudachadh-còmhnard
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • Teisteanas glyphicon glyphicon
  • glyphicon glyphicon-òrdagan-suas
  • glyphicon glyphicon-òrdagan sìos
  • glyphicon glyphicon-làmh-làimh dheis
  • glyphicon glyphicon-làimh chlì
  • glyphicon glyphicon-làimhe suas
  • glyphicon glyphicon-làimhe sìos
  • glyphicon glyphicon-cearcall-saighead-deas
  • glyphicon glyphicon-cearcall-saighead-clì
  • glyphicon glyphicon-cearcall-saighead-suas
  • glyphicon glyphicon-cearcall-saighead-sìos
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon gnìomhan glyphicon
  • glyphicon glyphicon-filter
  • glyphicon geàrr-chunntas glyphicon
  • glyphicon glyphicon làn-sgrìn
  • glyphicon deas-bhòrd glyphicon
  • glyphicon glyphicon-clip pàipear
  • glyphicon glyphicon-cridhe falamh
  • glyphicon ceangal glyphicon
  • glyphicon glyphicon-fòn
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon seòrsa glyphicon
  • glyphicon glyphicon-seòrsa a rèir aibidil
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-seòrsa-a rèir òrdugh
  • glyphicon glyphicon-seòrsa-a rèir òrdugh-alt
  • glyphicon glyphicon-seòrsa-a-rèir feartan
  • glyphicon glyphicon-seòrsa-a-rèir feartan-alt
  • glyphicon glyphicon gun sgrùdadh
  • glyphicon glyphicon-leudachadh
  • glyphicon glyphicon-tuiteam sìos
  • glyphicon glyphicon-tuiteam suas
  • glyphicon glyphicon-log a-steach
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-uinneag ùr
  • glyphicon clàr glyphicon
  • glyphicon glyphicon-sàbhail
  • glyphicon glyphicon-fosgailte
  • glyphicon glyphicon air a shàbhaladh
  • glyphicon glyphicon-in-mhalairt
  • glyphicon glyphicon-às-mhalairt
  • glyphicon glyphicon-cuir
  • glyphicon glyphicon-floppy-diosc
  • glyphicon glyphicon-floppy-sàbhaladh
  • glyphicon glyphicon-floppy-toirt air falbh
  • glyphicon glyphicon-floppy-sàbhail
  • glyphicon glyphicon-floppy-fosgailte
  • glyphicon glyphicon-cairt-creideis
  • glyphicon glyphicon-gluasad
  • glyphicon glyphicon-gearraidh
  • glyphicon glyphicon-cinn
  • glyphicon glyphicon-dùmhlaichte
  • glyphicon glyphicon-fòn
  • glyphicon glyphicon-fòn-alt
  • glyphicon tùr glyphicon
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-bhidio
  • glyphicon glyphicon hd bhidio
  • glyphicon glyphicon-fo-thiotalan
  • glyphicon glyphicon-fuaim-stereo
  • glyphicon glyphicon-fuaim-dolby
  • glyphicon glyphicon-fuaim-5-1
  • glyphicon glyphicon-fuaim-6-1
  • glyphicon glyphicon-fuaim-7-1
  • glyphicon glyphicon-comharra dlighe-sgrìobhaidh
  • glyphicon comharra-clàraidh glyphicon
  • Luchdaich a-nuas glyphicon glyphicon-cloud.
  • glyphicon glyphicon-cloud-luchdaich suas
  • glyphicon glyphicon-craobh-durcain
  • glyphicon glyphicon-craobh-searbhagach
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-sàbhail faidhle
  • glyphicon glyphicon-faidhle fosgailte
  • glyphicon glyphicon ìre suas
  • glyphicon glyphicon-lethbhreac
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon co-ionannachd glyphicon
  • glyphicon glyphicon-rìgh
  • glyphicon glyphicon-bhanrigh
  • glyphicon glyphicon-pìob
  • glyphicon glyphicon-easbaig
  • glyphicon glyphicon-ridire
  • glyphicon glyphicon-foirmle pàisde
  • glyphicon glyphicon-teanta
  • glyphicon glyphicon-bòrd dubh
  • glyphicon glyphicon-leabaidh
  • glyphicon glyphicon-ubhal
  • glyphicon glyphicon-sguab às
  • glyphicon glyphicon-uair-ghlainne
  • glyphicon glyphicon-lampa
  • glyphicon glyphicon-dùblaichte
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-siosar
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon sgèile glyphicon
  • glyphicon glyphicon-deigh-lolly
  • glyphicon glyphicon-deigh-lolly-blasad
  • glyphicon glyphicon-foghlaim
  • glyphicon glyphicon-roghainn-còmhnard
  • glyphicon glyphicon-roghainn-inghearach
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-uinneag
  • glyphicon glyphicon-ola
  • glyphicon glyphicon-gràn
  • glyphicon glainneachan-grèine glyphicon
  • glyphicon glyphicon-meud teacsa
  • glyphicon glyphicon-teacsa-dath
  • glyphicon glyphicon-teacsa-cùl-raon
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bonn
  • glyphicon glyphicon-rud-co-thaobhadh-còmhnard
  • glyphicon glyphicon-rud-co-thaobhadh-chlì
  • glyphicon glyphicon-rud-co-thaobhadh-inghearach
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triantan-deas
  • glyphicon glyphicon-triantan-clì
  • glyphicon glyphicon-triantan-bun
  • glyphicon glyphicon-triantan-mullach
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-fo-sgrìobhadh
  • glyphicon glyphicon-menu-clì
  • glyphicon glyphicon-menu-deas
  • glyphicon glyphicon-menu-down
  • glyphicon clàr-taice glyphicon suas

Ciamar a chleachdadh

Airson adhbharan coileanaidh, feumaidh gach ìomhaigh clas bunaiteach agus clas ìomhaigh fa leth. Gus a chleachdadh, cuir an còd a leanas faisg air àite sam bith. Dèan cinnteach gum fàg thu àite eadar an ìomhaigh agus an teacsa airson pleadhag ceart.

Na bi a 'measgachadh le co-phàirtean eile

Chan urrainnear clasaichean ìomhaigh a chur còmhla gu dìreach ri pàirtean eile. Cha bu chòir an cleachdadh còmhla ri clasaichean eile air an aon eileamaid. An àite sin, cuir nead ris <span>agus cuir na clasaichean ìomhaigh an sàs anns an fhaidhle <span>.

A-mhàin airson a chleachdadh air eileamaidean falamh

Cha bu chòir clasaichean ìomhaigh a chleachdadh ach air eileamaidean anns nach eil susbaint teacsa agus aig nach eil eileamaidean cloinne.

Ag atharrachadh suidheachadh cruth-clò na h-ìomhaigh

Tha Bootstrap a’ gabhail ris gum bi faidhlichean cruth-clò ìomhaigh suidhichte san ../fonts/eòlaire an coimeas ris na faidhlichean CSS a chaidh a chur ri chèile. Tha gluasad no ath-ainmeachadh nam faidhlichean cruth-clò sin a’ ciallachadh an CSS ùrachadh ann an aon de thrì dòighean:

  • Atharraich na @icon-font-pathagus/no @icon-font-namecaochladairean san stòr Nas lugha de fhaidhlichean.
  • Cleachd an roghainn URLan càirdeach a thug an t-inneal-tionndaidh Nas lugha seachad.
  • Atharraich na url()slighean anns an CSS cruinnichte.

Cleachd ge bith dè an roghainn as fheàrr a fhreagras air an t-suidheachadh leasachaidh sònraichte agad.

Ìomhaighean ruigsinneach

Bidh dreachan ùr-nodha de theicneòlasan taice ag ainmeachadh susbaint a ghineadh CSS, a bharrachd air caractaran sònraichte Unicode. Gus toraidhean gun dùil agus troimh-chèile a sheachnadh ann an leughadairean sgrion (gu sònraichte nuair a thathas a ’cleachdadh ìomhaighean dìreach airson sgeadachadh), bidh sinn gan falach leis a’ aria-hidden="true"fheart.

Ma tha thu a’ cleachdadh ìomhaigh gus brìgh a chuir an cèill (seach a-mhàin mar eileamaid sgeadachaidh), dèan cinnteach gu bheil an ciall seo cuideachd air a thoirt do theicneòlasan cuideachaidh - mar eisimpleir, cuir a-steach susbaint a bharrachd, falaichte gu fradharcach leis a’ .sr-onlychlas.

Ma tha thu a’ cruthachadh smachdan gun teacsa sam bith eile (leithid <button>ìomhaigh anns nach eil ach ìomhaigh), bu chòir dhut an-còmhnaidh susbaint eile a thoirt seachad gus adhbhar an smachd a chomharrachadh, gus am bi e ciallach do luchd-cleachdaidh theicneòlasan taice. Anns a 'chùis seo, dh' fhaodadh tu aria-labelfeart a chur ris an smachd fhèin.

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

Eisimpleirean

Cleachd iad ann am putanan, buidhnean putan airson bàr-inneal, seòladh, no cuir a-steach foirm ro-shuidhichte.

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

Ìomhaigh air a chleachdadh ann an rabhadh gus innse gur e teachdaireachd mearachd a th’ ann, le .sr-onlyteacsa a bharrachd gus am beachd seo a thoirt do luchd-cleachdaidh teicneòlasan cuideachaidh.

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

Droch-dhìol

Clàr-taice co-theacsail so-ghluasadach airson liostaichean de cheanglaichean a thaisbeanadh. Air a dhèanamh eadar-ghnìomhach leis a’ plugan tuiteam-sìos JavaScript .

Paisg inneal-brosnachaidh an tuiteam-sìos agus an clàr a-nuas taobh a-staigh .dropdown, no eileamaid eile a dhearbhas position: relative;. An uairsin cuir ris HTML a 'chlàr-taice.

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

Faodar clàran-bìdh atharrachadh gus leudachadh gu h-àrd (an àite sìos) le bhith a’ cur .dropupris a’ phàrant.

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

Gu gnàthach, tha clàr tuiteam-sìos air a shuidheachadh gu fèin-ghluasadach 100% bhon mhullach agus air taobh clì a phàrant. Cuir .dropdown-menu-rightri a .dropdown-menugu deas co-thaobhadh ris a’ chlàr tuiteam-sìos.

Dh’ fhaodadh gum bi feum air suidheachadh a bharrachd

Bidh dropdowns air an suidheachadh gu fèin-ghluasadach tro CSS taobh a-staigh sruth àbhaisteach na sgrìobhainn. Tha seo a’ ciallachadh gum faod pàrantan aig a bheil overflowfeartan sònraichte a bhith air tuiteam sìos no nochdadh taobh a-muigh crìochan an t-seallaidh. Cuir aghaidh air na cùisean sin leat fhèin mar a thig iad am bàrr.

Co .pull-right-thaobhadh neo-leasaichte

Mar v3.1.0, tha sinn air ìsleachadh .pull-rightair clàran-bìdh tuiteam-sìos. Gus clàr-taice a cho-thaobhadh gu deas, cleachd .dropdown-menu-right. Bidh co-phàirtean seòlaidh le co-thaobhadh ceart anns a’ bhàr seòlaidh a’ cleachdadh dreach mixin den chlas seo gus an clàr a cho-thaobhadh gu fèin-ghluasadach. Gus faighinn thairis air, cleachd .dropdown-menu-left.

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

Cuir bann-cinn ris gus earrannan de ghnìomhan a chomharrachadh ann an clàr-taice sam bith.

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

Cuir roinneadh ri sreath de cheanglaichean fa leth ann an clàr-taice a-nuas.

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

Cuir .disabledri <li>sa chlàr-taice gus an ceangal a chur à comas.

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

Buidhnean putan

Cuir sreath de phutanan còmhla air aon loidhne leis a’ bhuidheann phutanan. Cuir ris an rèidio JavaScript roghainneil agus giùlan stoidhle bogsa sgrùdaidh leis a’ plugan putanan againn .

Feumaidh molaidhean innealan & popovers ann am buidhnean putan suidheachadh sònraichte

Nuair a bhios tu a’ cleachdadh molaidhean innealan no popovers air eileamaidean taobh a-staigh faidhle .btn-group, feumaidh tu an roghainn a shònrachadh container: 'body'gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/no a’ call a h-oiseanan cruinn nuair a thèid an inneal no an popover a phiobrachadh).

Dèan cinnteach gu bheil e ceart roleagus thoir seachad bileag

Gus an urrainn do theicneòlasan cuideachaidh - leithid leughadairean sgrion - innse gu bheil sreath de phutanan air an cruinneachadh, rolefeumar feart iomchaidh a thoirt seachad. Airson buidhnean putan, bhiodh seo role="group", agus bu chòir faidhle role="toolbar".

Is e aon eisgeachd buidhnean anns nach eil ach aon smachd (mar eisimpleir na buidhnean putan reusanta le <button>eileamaidean) no tuiteam-sìos.

A bharrachd air an sin, bu chòir bileag soilleir a thoirt do bhuidhnean agus bàraichean-inneal, leis nach ainmich a’ mhòr-chuid de theicneòlasan cuideachaidh iad air dhòigh eile, a dh’ aindeoin gu bheil am rolefeart ceart ann. Anns na h-eisimpleirean a tha air an toirt seachad an seo, bidh sinn a’ cleachdadh aria-label, ach faodar roghainnean eile leithid aria-labelledbya chleachdadh cuideachd.

Eisimpleir bunaiteach

Paisg sreath de phutanan le .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>

Bàr inneal putan

Cuir còmhla seataichean de a- <div class="btn-group">steach <div class="btn-toolbar">airson co-phàirtean nas iom-fhillte.

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

Meudachadh

An àite clasaichean meud putan a chuir an sàs anns a h-uile putan ann am buidheann, dìreach cuir .btn-group-*ris gach .btn-group, a ’toirt a-steach nuair a bhios tu a’ neadachadh grunn bhuidhnean.




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

A' neadachadh

Cuir taobh a- .btn-groupstaigh fear eile .btn-groupnuair a tha thu ag iarraidh clàran-bìdh a tha measgaichte le sreath de phutanan.

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

Atharrachadh dìreach

Dèan seata de phutanan a’ nochdadh air an cruachadh gu dìreach seach gu còmhnard. Chan eil taic ri dropdowns putan roinnte an seo.

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

Buidhnean putan air am fìreanachadh

Dèan buidheann de phutanan a shìneadh aig meudan co-ionann gus a dhol thairis air leud iomlan a phàrant. Bidh e cuideachd ag obair le putan tuiteam sìos taobh a-staigh buidheann nam putanan.

A 'làimhseachadh chrìochan

Air sgàth an HTML agus CSS sònraichte a thathas a’ cleachdadh gus putanan fhìreanachadh (is e sin display: table-cell), tha na crìochan eatorra air an dùblachadh. Ann am buidhnean putan cunbhalach, margin-left: -1pxair a chleachdadh gus na crìochan a chruachadh an àite an toirt air falbh. Ge-tà, marginchan eil e ag obair le display: table-cell. Mar thoradh air an sin, a rèir do ghnàthachadh air Bootstrap, is dòcha gum bi thu airson na crìochan a thoirt air falbh no ath-dhathadh.

IE8 agus crìochan

Cha bhith Internet Explorer 8 a’ toirt seachad crìochan air putanan ann am buidheann putan a tha air fhìreanachadh, ge bith a bheil e air <a>no <button>eileamaidean. Gus faighinn timcheall air sin, paisg gach putan ann an tè eile .btn-group.

Faic #12476 airson tuilleadh fiosrachaidh.

Le <a>eileamaidean

Dìreach cuir a-steach sreath de .btnshuidheachaidhean .btn-group.btn-group-justified.

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

Ceanglaichean ag obair mar phutanan

Ma thèid na h- <a>eileamaidean a chleachdadh mar phutanan - a’ brosnachadh gnìomhachd in-duilleag, an àite a bhith a’ seòladh gu sgrìobhainn no earrann eile air an duilleag làithreach - bu chòir faidhle iomchaidh a thoirt dhaibh cuideachd role="button".

Le <button>eileamaidean

Gus buidhnean putan reusanta a chleachdadh le <button>eileamaidean, feumaidh tu gach putan a phasgadh ann am buidheann putan . Cha bhith a’ mhòr-chuid de bhrobhsairean a’ cur an CSS againn an sàs gu ceart airson fìreanachadh <button>eileamaidean, ach leis gu bheil sinn a’ toirt taic do dropdowns putan, is urrainn dhuinn obrachadh timcheall air sin.

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

Clò-bhuail putan

Cleachd putan sam bith gus clàr tuiteam-sìos a bhrosnachadh le bhith ga chuir taobh a-staigh a .btn-groupagus a’ toirt seachad an comharra clàr ceart.

An urra ri plugan

Feumaidh dropdowns putan am plugan tuiteam -sìos a bhith air a ghabhail a-steach don dreach agad de Bootstrap.

Lìon sìos putan singilte

Tionndaidh putan gu toggle tuiteam sìos le cuid de dh’ atharrachaidhean comharrachaidh bunaiteach.

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

San aon dòigh, cruthaich dropdowns putan roinnte leis na h-aon atharrachaidhean comharrachaidh, dìreach le putan air leth.

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

Meudachadh

Bidh dropdowns putan ag obair le putanan de gach meud.

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

Atharrachadh dropup

Cuir sìos clàran-bìdh os cionn eileamaidean le bhith a’ cur .dropupris a’ phàrant.

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

Buidhnean cuir a-steach

Leudaich smachdan foirm le bhith a’ cur teacsa no putanan ris ro, às deidh, no air gach taobh de theacsa teacsa sam bith <input>. Cleachd .input-grouple .input-group-addonno .input-group-btnairson eileamaidean a chur ri chèile no a cheangal ri aon .form-control.

Teacs <input>a-mhàin

Seachain a bhith a’ cleachdadh <select>eileamaidean an seo oir chan urrainn dhaibh a bhith air an làn stoidhle ann am brobhsairean WebKit.

Seachain a bhith a’ cleachdadh <textarea>eileamaidean an seo oir rowscha tèid spèis a thoirt don fheart aca ann an cuid de chùisean.

Feumaidh molaidhean innealan & popovers ann am buidhnean cuir a-steach suidheachadh sònraichte

Nuair a bhios tu a’ cleachdadh molaidhean innealan no popovers air eileamaidean taobh a-staigh faidhle .input-group, feumaidh tu an roghainn a shònrachadh container: 'body'gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/no a’ call a h-oiseanan cruinn nuair a thèid an inneal-toisich no an popover a phiobrachadh).

Na bi a 'measgachadh le co-phàirtean eile

Na bi a’ measgachadh buidhnean cruth no clasaichean colbh clèithe gu dìreach le buidhnean cuir a-steach. An àite sin, neadaich am buidheann cuir a-steach taobh a-staigh a’ bhuidheann fhoirm no eileamaid co-cheangailte ris a’ ghriod.

Cuir bileagan ris an-còmhnaidh

Bidh trioblaid aig leughadairean sgrion leis na foirmean agad mura cuir thu a-steach bileag airson a h-uile cuir a-steach. Airson na buidhnean cuir a-steach sin, dèan cinnteach gu bheil leubail no gnìomh sam bith a bharrachd air a chuir gu teicneòlasan taice.

Bidh an dearbh dhòigh a thèid a chleachdadh (eileamaidean faicsinneach <label>, <label>eileamaidean falaichte a’ cleachdadh a’ .sr-onlychlas, no cleachdadh an aria-label, aria-labelledby, , aria-describedby, titleno placeholderfeart) agus dè am fiosrachadh a bharrachd a dh’ fheumar a thoirt seachad ag atharrachadh a rèir an dearbh sheòrsa de widget eadar-aghaidh a tha thu a’ cur an gnìomh. Tha na h-eisimpleirean anns an earrainn seo a’ toirt seachad beagan dhòighean-obrach a tha air am moladh, a tha sònraichte do chùisean.

Eisimpleir bunaiteach

Cuir aon tuilleadan no putan air gach taobh de chur-a-steach. Faodaidh tu cuideachd fear a chuir air gach taobh de chuir a-steach.

Chan eil sinn a’ toirt taic do dh’iomadh tuilleadan ( .input-group-addonno .input-group-btn) air aon taobh.

Chan eil sinn a’ toirt taic do dh’ iomadh smachd foirm ann an aon bhuidheann cuir a-steach.

@

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

Meudachadh

Cuir na clasaichean meud cruth coimeasach ris .input-groupfhèin agus thèid na tha a-staigh a mheudachadh gu fèin-ghluasadach - chan eil feum air na clasaichean meud smachd foirm ath-aithris air gach eileamaid.

@

@

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

Bogsaichean sgrùdaidh agus addons rèidio

Cuir bogsa sgrùdaidh no roghainn rèidio taobh a-staigh addon buidheann cuir a-steach an àite teacsa.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Addons putan

Tha putanan ann am buidhnean cuir a-steach beagan eadar-dhealaichte agus feumach air aon ìre neadachaidh a bharrachd. An àite .input-group-addon, feumaidh tu a chleachdadh .input-group-btngus na putanan a phasgadh. Tha feum air seo air sgàth stoidhlichean brobhsair bunaiteach nach gabh a dhol thairis air.

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

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

Putanan sgaraichte

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

Ioma putanan

Ged nach urrainn dhut ach aon tuilleadan a bhith agad gach taobh, faodaidh grunn phutanan a bhith agad am broinn aon fhaidhle .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

Tha comharran co-roinnte aig Navs a tha rim faighinn ann am Bootstrap, a’ tòiseachadh leis a’ .navchlas bhunaiteach, a bharrachd air stàitean co-roinnte. Dèan iomlaid air clasaichean mion-atharrachaidh gus gluasad eadar gach stoidhle.

Le bhith a’ cleachdadh navs airson pannalan tab tha feum air plugan tabaichean JavaScript

Airson tabaichean le raointean tabbable, feumaidh tu am plugan tabaichean JavaScript a chleachdadh . Bidh feum aig a’ chomharradh air rolebuadhan a bharrachd agus ARIA - faic eisimpleir a’ plugan airson tuilleadh fiosrachaidh.

Dèan navs air an cleachdadh mar sheòladh ruigsinneach

Ma tha thu a’ cleachdadh navs gus bàr seòlaidh a thoirt seachad, bi cinnteach gun cuir thu ris role="navigation"a’ ghobhar phàrant as loidsigeach den <ul>, no paisg <nav>eileamaid timcheall air an t-seòladh gu lèir. Na cuir an dreuchd ris <ul>fhèin, oir chuireadh seo stad air bho bhith air ainmeachadh mar fhìor liosta le teicneòlasan taice.

Thoir an aire gu bheil .nav-tabsfeum aig a’ chlas air a’ .navbhun-chlas.

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

Gabh an aon HTML sin, ach cleachd .nav-pillsan àite sin:

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

Tha pills cuideachd air an cruachadh gu dìreach. Dìreach cuir .nav-stacked.

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

Dèan tabaichean no pills gu furasta an aon leud den phàrant aca aig scrionaichean nas fharsainge na 768px le .nav-justified. Air scrionaichean nas lugha, tha na ceanglaichean nav air an càrnadh.

Chan eil taic ri ceanglaichean navbar nav ceart an-dràsta.

Safari agus navs reusanta freagairteach

Mar v9.1.2, tha Safari a’ taisbeanadh bug anns am bi ath-mheudachadh do bhrobhsair gu còmhnard ag adhbhrachadh mhearachdan anns an t-seòladh seòlaidh reusanta a thèid fhuadach às deidh ùrachadh. Tha am biast seo cuideachd ri fhaicinn san eisimpleir nav reusanta .

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

Airson co-phàirt nav sam bith (tabs no pills), cuir ris .disabledairson ceanglaichean glasa agus gun bhuaidhean hover .

Cha deach buaidh a thoirt air gnìomhachd ceangail

Chan atharraich an clas seo ach <a>coltas, chan e a ghnìomhachd. Cleachd JavaScript gnàthaichte gus ceanglaichean a chur à comas an seo.

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

Cuir clàran-bìdh sìos le beagan HTML a bharrachd agus am plugan tuiteam-sìos JavaScript .

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

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

Tha navbars nan co-phàirtean meta freagairteach a bhios mar chinn-cinn seòlaidh airson an tagradh no an làrach-lìn agad. Bidh iad a’ tòiseachadh a’ tuiteam às a chèile (agus tha iad toggleable) ann an seallaidhean gluasadach agus a’ fàs còmhnard mar a bhios leud an t-seallaidh a tha ri fhaighinn ag àrdachadh.

Chan eil taic ri ceanglaichean navbar nav ceart an-dràsta.

Susbaint thar-shruth

Leis nach eil fios aig Bootstrap dè an ìre de rùm a tha a dhìth air an t-susbaint anns a’ bhàr seòlaidh agad, is dòcha gum bi duilgheadasan agad le susbaint a’ pasgadh ann an dàrna sreath. Gus seo a rèiteachadh, faodaidh tu:

  1. Lùghdaich meud no leud nithean navbar.
  2. Falaich cuid de rudan bàr seòlaidh aig meudan sgrion sònraichte a’ cleachdadh clasaichean goireasach freagairteach .
  3. Atharraich am puing aig a bheil am bàr seòlaidh agad a’ tionndadh eadar modh tuiteam is còmhnard. Gnàthaich an @grid-float-breakpointcaochladair no cuir ris a’ cheist mheadhanan agad fhèin.

Feumaidh plugan JavaScript

Ma tha JavaScript à comas agus gu bheil am port-seallaidh cumhang gu leòr 's gun tuit am bàr nav, bidh e eu-comasach leudachadh air a' bhàr-seòlaidh agus an t-susbaint am broinn an fhaidhle .navbar-collapse.

Feumaidh am bàr seòlaidh freagairteach am plugan tuiteam a-steach don dreach agad de Bootstrap.

Ag atharrachadh an àite brisidh navbar gluasadach a thuit

Tuitidh am bàr nav a-steach don t-sealladh gluasadach dhìreach aige nuair a tha am port-seallaidh nas cumhainge na @grid-float-breakpoint, agus leudaichidh e a-steach don t-sealladh neo-ghluasadach còmhnard aige nuair a tha am port-seallaidh co-dhiù @grid-float-breakpointann an leud. Atharraich an caochladair seo san stòr Nas lugha gus smachd a chumail air nuair a thuiteas am bàr seòlaidh / leudachaidh. Is e an luach bunaiteach 768px(an sgrion "beag" no "tablet" as lugha).

Dèan navbars ruigsinneach

Dèan cinnteach gun cleachd thu <nav>eileamaid no, ma chleachdas tu eileamaid nas gnèitheach leithid <div>, cuir ris role="navigation"a h-uile bàr seòlaidh gus a chomharrachadh gu soilleir mar sgìre shònraichte airson luchd-cleachdaidh teicneòlasan cuideachaidh.

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

Cuir an ìomhaigh agad fhèin an àite a’ bhrand navbar le bhith ag atharrachadh an teacsa airson faidhle <img>. Leis gu .navbar-brandbheil am pleadhag agus an àirde aige fhèin, is dòcha gum feum thu a dhol thairis air cuid de CSS a rèir an ìomhaigh agad.

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

Cuir susbaint cruth a-staigh .navbar-formairson co-thaobhadh ceart dìreach agus giùlan tuiteam ann am puirt-seallaidh cumhang. Cleachd na roghainnean co-thaobhadh gus co-dhùnadh càite a bheil e taobh a-staigh susbaint a’ bhàr nav.

Mar cheann shuas, bidh e .navbar-forma’ roinn mòran den chòd aige le .form-inlinevia mixin. Dh’ fhaodadh gum feum cuid de smachdan cruth, leithid buidhnean cuir a-steach, leudan stèidhichte a bhith air an nochdadh gu ceart taobh a-staigh bàr nav.

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

Draibhearan airson innealan-làimhe

Tha cuid de rabhaidhean ann a thaobh a bhith a’ cleachdadh smachdan foirm taobh a-staigh eileamaidean stèidhichte air innealan gluasadach. Faic na docaichean taic brabhsair againn airson mion-fhiosrachadh.

Cuir bileagan ris an-còmhnaidh

Bidh trioblaid aig leughadairean sgrion leis na foirmean agad mura cuir thu a-steach bileag airson a h-uile cuir a-steach. Airson na foirmean in-loidhne seo, faodaidh tu na bileagan fhalach a’ cleachdadh a’ .sr-onlychlas. Tha dòighean eile ann airson bileag a thoirt seachad airson teicneòlasan taice, leithid an aria-label, aria-labelledbyno titlefeart. Mura h-eil gin dhiubh sin an làthair, faodaidh luchd-leughaidh sgrion a bhith a’ cleachdadh a’ placeholderbhuadh, ma tha iad ann, ach thoir an aire nach placeholdereilear a’ comhairleachadh a chleachdadh an àite dòighean bileagan eile.

Cuir an .navbar-btnclas ri <button>eileamaidean nach eil a’ fuireach ann an a <form>gus am meadhan iad gu dìreach anns a’ bhàr nav.

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

Cleachdadh co-theacsa sònraichte

Coltach ris na clasaichean putan àbhaisteach , .navbar-btnfaodar a chleachdadh air <a>agus <input>eileamaidean. Ach, cha .navbar-btnbu chòir na clasaichean putan àbhaisteach a bhith air an cleachdadh air <a>eileamaidean taobh a-staigh .navbar-nav.

Paisg sreangan teacsa ann an eileamaid le .navbar-text, mar as trice air <p>tag airson stiùireadh agus dath ceart.

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

Airson daoine a tha a’ cleachdadh ceanglaichean àbhaisteach nach eil taobh a-staigh na h-earrainn seòlaidh àbhaisteach navbar, cleachd an .navbar-linkclas gus na dathan ceart a chur ris airson na roghainnean bunaiteach agus inverse navbar.

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

Co-thaobhadh nav ceanglaichean, foirmean, putanan, no teacsa, cleachdadh na clasaichean .navbar-leftno utility. .navbar-rightCuiridh an dà chlas fleòdradh CSS ris an taobh ainmichte. Mar eisimpleir, gus ceanglaichean nav a cho-thaobhadh, cuir a-steach iad air leth <ul>leis a’ chlas goireis fa leth air a chuir an sàs.

Tha na clasaichean sin nan dreachan measgaichte de .pull-leftagus .pull-right, ach tha iad air an cuairteachadh gu ceistean meadhanan airson làimhseachadh nas fhasa air co-phàirtean navbar thar meudan innealan.

Co-thaobhadh ceart grunn phàirtean

Tha cuingealachadh aig Navbars an-dràsta le grunn .navbar-rightchlasaichean. Gus susbaint àite a chuir gu ceart, bidh sinn a’ cleachdadh iomall àicheil air an .navbar-righteileamaid mu dheireadh. Nuair a bhios grunn eileamaidean a’ cleachdadh a’ chlas sin, chan obraich na h-iomaill sin mar a bha dùil.

Tadhlaidh sinn air seo a-rithist nuair as urrainn dhuinn am pàirt sin ath-sgrìobhadh ann an v4.

Cuir ris .navbar-fixed-topagus cuir a-steach .containerno .container-fluidgu susbaint bàr seòlaidh sa mheadhan agus pad.

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

Tha feum air pleadhag bodhaig

Cuiridh am bàr seòlaidh thairis an t-susbaint eile agad, mura cuir thu paddingri mullach an fhaidhle <body>. Feuch na luachan agad fhèin no cleachd a’ chriomag againn gu h-ìosal. Gliocas: Gu gnàthach, tha am bàr nav 50px àrd.

body { padding-top: 70px; }

Dèan cinnteach gun cuir thu seo a-steach às deidh prìomh Bootstrap CSS.

Cuir ris .navbar-fixed-bottomagus cuir a-steach .containerno .container-fluidgu susbaint bàr seòlaidh sa mheadhan agus pad.

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

Tha feum air pleadhag bodhaig

Còmhdaichidh am bàr-seòlaidh stèidhichte thairis air an t-susbaint eile agad, mura cuir thu paddingri bonn an fhaidhle <body>. Feuch na luachan agad fhèin no cleachd a’ chriomag againn gu h-ìosal. Gliocas: Gu gnàthach, tha am bàr nav 50px àrd.

body { padding-bottom: 70px; }

Dèan cinnteach gun cuir thu seo a-steach às deidh prìomh Bootstrap CSS.

Cruthaich bàr seòlaidh làn-leud a ghluaiseas air falbh leis an duilleag le bhith a’ cur ris .navbar-static-topagus a’ toirt a-steach .containersusbaint .container-fluidbàr seòlaidh sa mheadhan agus sa mheadhan.

Eu-coltach ris na .navbar-fixed-*clasaichean, chan fheum thu pleadhag sam bith atharrachadh air an fhaidhle body.

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

Atharraich coltas a’ bhàr seòlaidh le bhith a’ cur .navbar-inverse.

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

Briosgaidean

Sònraich far a bheil an duilleag làithreach taobh a-staigh rangachd seòlaidh.

Bithear a’ cur dealadairean gu fèin-ghluasadach ann an CSS tro :beforeagus content.

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

Duilleagadh

Thoir seachad ceanglaichean duilleagachaidh airson do làrach no app leis a’ phàirt duilleagachaidh ioma-dhuilleag, no an roghainn pager nas sìmplidhe .

Duilleagan bunaiteach

Duilleagan sìmplidh air a bhrosnachadh le Rdio, sgoinneil airson aplacaidean agus toraidhean rannsachaidh. Tha am bloc mòr duilich a chall, furasta a scalladh, agus a’ toirt seachad raointean cliog mòr.

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

A’ comharrachadh na h-earrainn duilleagachaidh

Bu chòir am pàirt duilleagachaidh a bhith air a phasgadh ann an <nav>eileamaid gus a chomharrachadh mar roinn seòlaidh airson leughadairean sgrion agus teicneòlasan taice eile. A bharrachd air an sin, leis gu bheil coltas ann gu bheil barrachd air aon roinn seòlaidh den leithid aig duilleag mar-thà (leithid a’ phrìomh sheòladh anns a’ bhann-cinn, no seòladh bàr-taoibh), tha e ciallach tuairisgeul a thoirt seachad aria-labelairson an <nav>adhbhar a tha a’ nochdadh. Mar eisimpleir, ma thèid am pàirt duilleagachaidh a chleachdadh gus seòladh eadar seata de thoraidhean rannsachaidh, dh’ fhaodadh bileag iomchaidh a bhith aria-label="Search results pages".

Stàitean ciorramach agus gnìomhach

Tha ceanglaichean gnàthaichte airson diofar shuidheachaidhean. Cleachd .disabledairson ceanglaichean nach gabh cliogadh agus .activegus an duilleag làithreach a chomharrachadh.

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

Tha sinn a’ moladh gun atharraich thu acraichean gnìomhach no ciorramach airson <span>, no gun cuir thu a-mach an acair a thaobh nan saighdean roimhe/an ath rud, gus comas-gnìomh cliog a thoirt air falbh fhad ‘s a chumas tu na stoidhlichean a tha san amharc.

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

Meudachadh

A bheil thu ag iarraidh duilleag nas motha no nas lugha? Cuir ris .pagination-lgno .pagination-smairson meudan a bharrachd.

<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

Ceanglaichean sgiobalta roimhe seo agus an ath rud airson buileachadh duilleag-dhuilleag sìmplidh le comharrachadh aotrom agus stoidhlichean. Tha e math airson làraich sìmplidh leithid blogaichean no irisean.

Eisimpleir bunaiteach

Gu gnàthach, bidh am pager a’ cuimseachadh air ceanglaichean.

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

Air neo, faodaidh tu gach ceangal a cho-thaobhadh ris na taobhan:

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

Stàite ciorramach roghainneil

Bidh ceanglaichean Pager cuideachd a’ cleachdadh a’ .disabledchlas goireasach coitcheann bhon duilleag.

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

Bileagan

eisimpleir

Eisimpleir air ceann Ùr

Eisimpleir air ceann Ùr

Eisimpleir air ceann Ùr

Eisimpleir air ceann Ùr

Eisimpleir air ceann Ùr
Eisimpleir air ceann Ùr
<h3>Example heading <span class="label label-default">New</span></h3>

Eadar-dhealachaidhean rim faighinn

Cuir gin de na clasaichean atharrachaidh gu h-ìosal ris gus coltas leubail atharrachadh.

Fiosrachadh bunaiteach mu shoirbheachas Rabhadh Cunnart
<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>

A bheil tonna de bhileagan agad?

Faodaidh duilgheadasan tairgse èirigh nuair a tha dusanan de bhileagan in-loidhne agad taobh a-staigh soitheach cumhang, anns gach fear le a inline-blockeileamaid fhèin (mar ìomhaigh). Is e suidheachadh an t-slighe timcheall seo display: inline-block;. Airson co-theacsa agus eisimpleir, faic #13219 .

Bràistean

Comharraich nithean ùra no gun leughadh gu furasta le bhith a’ cur <span class="badge">ri ceanglaichean, Bootstrap navs, agus barrachd.

Bogsa a-steach42

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

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

Fèin a’ tuiteam às a chèile

Nuair nach eil stuth ùr no gun leughadh ann, tuitidh bràistean dìreach (tro :emptyroghnaichear CSS) fhad ‘s nach eil susbaint ann.

Co-fhreagarrachd tar-bhrabhsair

Cha tuit bràistean ann an Internet Explorer 8 leis nach eil taic ann don :emptyroghnaichear.

Ag atharrachadh gu stàitean seòlaidh gnìomhach

Tha stoidhlichean togte air an gabhail a-steach airson bràistean a chuir ann an stàitean gnìomhach ann an seòlaidhean pill.

<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

Pàirt aotrom, sùbailte as urrainn an raon-seallaidh gu lèir a leudachadh gu roghnach gus prìomh shusbaint air an làrach-lìn agad a thaisbeanadh.

Hàlo a Shaoghail!

Is e aonad gaisgeach sìmplidh a tha seo, pàirt sìmplidh ann an stoidhle jumbotron airson aire a bharrachd a tharraing gu susbaint no fiosrachadh sònraichte.

Ionnsaich barrachd

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

Gus an jumbotron a dhèanamh làn leud, agus às aonais oiseanan cruinn, cuir e taobh a-muigh a h .container-uile càil agus an àite sin cuir a-steach e .container.

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

Ceann-duilleig

Slige shìmplidh airson h1earrannan de shusbaint a chuir a-mach agus a roinn gu h-iomchaidh air duilleag. Faodaidh e an eileamaid h1bhunaiteach a chleachdadh small, a bharrachd air a’ mhòr-chuid de phàirtean eile (le stoidhlichean a bharrachd).

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

Mion-dhealbhan

Leudaich siostam clèithe Bootstrap leis a’ cho-phàirt mion-dhealbh gus cliathan de dhealbhan, bhideothan, teacsa agus barrachd a thaisbeanadh gu furasta.

Ma tha thu a’ coimhead airson taisbeanadh coltach ri Pinterest de òrdagan de dhiofar àirdean agus/no leud, feumaidh tu plugan treas-phàrtaidh a chleachdadh leithid Clachaireachd , Isotope , no Salvatore .

Eisimpleir bunaiteach

Gu gnàthach, tha mion-dhealbhan Bootstrap air an dealbhadh gus ìomhaighean ceangailte a thaisbeanadh le glè bheag de chomharradh riatanach.

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

Susbaint gnàthaichte

Le beagan comharrachaidh a bharrachd, tha e comasach seòrsa sam bith de shusbaint HTML leithid cinn, paragrafan, no putanan a chur ri òrdagan.

100%x200

Leubail mion-dhealbh

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

Putan Putan

100%x200

Leubail mion-dhealbh

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

Putan Putan

100%x200

Leubail mion-dhealbh

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

Putan Putan

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

Rabhaidhean

Thoir seachad teachdaireachdan fios air ais co-theacsail airson gnìomhan àbhaisteach luchd-cleachdaidh leis an dòrlach de theachdaireachdan rabhaidh sùbailte a tha rim faighinn.

Eisimpleirean

Paisg teacsa sam bith agus putan cuir às roghnach a-steach .alertagus aon de na ceithir clasaichean co-theacsail (me, .alert-success) airson teachdaireachdan rabhaidh bunaiteach.

Chan eil clas bunaiteach ann

Chan eil clasaichean bunaiteach aig rabhaidhean, dìreach clasaichean bunaiteach agus mion-atharrachaidh. Chan eil rabhadh glas àbhaisteach a’ dèanamh cus ciall, agus mar sin feumaidh tu seòrsa a shònrachadh tro chlas co-theacsail. Tagh bho shoirbheachas, fiosrachadh, rabhadh no cunnart.

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

Rabhaidhean nach gabh àicheadh

Tog air rabhadh sam bith le bhith a’ cur .alert-dismissibleputan roghainneil is dùin ris.

Feumaidh plugan rabhaidh JavaScript

Airson rabhaidhean a tha ag obair gu h-iomlan agus nach gabh an cur às, feumaidh tu am plugan rabhaidhean JavaScript .

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

Dèanamh cinnteach à giùlan ceart thar gach inneal

Dèan cinnteach gun cleachd thu an <button>eileamaid leis a’ data-dismiss="alert"bhuadh dàta.

Cleachd an .alert-linkclas goireis gus ceanglaichean dathte a thoirt seachad gu sgiobalta taobh a-staigh rabhadh sam bith.

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

Bàraichean adhartais

Thoir seachad fios air ais as ùire mu adhartas sruth-obrach no gnìomh le bàraichean adhartais sìmplidh ach sùbailte.

Co-fhreagarrachd tar-bhrabhsair

Bidh bàraichean adhartais a’ cleachdadh eadar-ghluasadan CSS3 agus beòthachaidhean gus cuid de na buaidhean aca a choileanadh. Chan eil na feartan sin a’ faighinn taic ann an Internet Explorer 9 agus gu h-ìosal no ann an tionndaidhean nas sine de Firefox. Chan eil Opera 12 a’ cur taic ri beòthachaidhean.

Co-fhreagarrachd Poileasaidh Tèarainteachd Susbaint (CSP).

Ma tha Poileasaidh Tèarainteachd Susbaint (CSP) aig an làrach-lìn agad nach eil a’ ceadachadh style-src 'unsafe-inline', cha bhith e comasach dhut stylebuadhan in-loidhne a chleachdadh gus leud bàr adhartais a shuidheachadh mar a chithear sna h-eisimpleirean againn gu h-ìosal. Tha dòighean eile airson na leudan a shuidheachadh a tha co-chosmhail ri CSPn teann a’ toirt a-steach a bhith a’ cleachdadh beagan JavaScript àbhaisteach (a bhios a’ suidheachadh element.style.width) no a’ cleachdadh chlasaichean CSS àbhaisteach.

Eisimpleir bunaiteach

Bàr adhartais bunaiteach.

60% Crìochnaichte
<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>

Le leubail

Thoir air falbh an clas <span>leis .sr-onlybhon taobh a-staigh den bhàr adhartais gus ceudad faicsinneach a shealltainn.

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>

Gus dèanamh cinnteach gu bheil teacsa an leubail fhathast furasta a leughadh eadhon airson ceudadan ìosal, smaoinich air cuir ris min-widtha’ bhàr adhartais.

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>

Roghainnean co-theacsail

Bidh bàraichean adhartais a’ cleachdadh cuid den aon phutan agus clasaichean rabhaidh airson stoidhlichean cunbhalach.

40% Crìochnaichte (soirbheachas)
20% Crìochnaichte
60% Crìochnaichte (rabhadh)
80% Crìochnaichte (cunnart)
<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>

Air a stialladh

A’ cleachdadh caisead gus buaidh stiallach a chruthachadh. Chan eil e ri fhaighinn ann an IE9 agus gu h-ìosal.

40% Crìochnaichte (soirbheachas)
20% Crìochnaichte
60% Crìochnaichte (rabhadh)
80% Crìochnaichte (cunnart)
<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>

Beothaichte

Cuir .activeris .progress-bar-stripedgus na stiallan a bheothachadh bho dheas gu clì. Chan eil e ri fhaighinn ann an IE9 agus gu h-ìosal.

45% Crìochnaichte
<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>

Air a chruachadh

Cuir grunn bhàraichean a-steach don aon rud .progressgus an cruachadh.

35% Crìochnaichte (soirbheachas)
20% Crìochnaichte (rabhadh)
10% coileanta (cunnart)
<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>

Rud meadhanan

Stoidhlichean cuspair geàrr airson diofar sheòrsaichean de cho-phàirtean a thogail (leithid beachdan blog, Tweets, msaa) anns a bheil ìomhaigh air an taobh chlì no air an làimh dheis còmhla ri susbaint teacsa.

Na meadhanan bunaiteach

Bidh na meadhanan bunaiteach a’ taisbeanadh nì meadhanan (ìomhaighean, bhidio, claisneachd) air taobh clì no deas bloc susbaint.

Ceann nam meadhanan

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Ceann nam meadhanan

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Ceann meadhanan neadaichte

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Ceann nam meadhanan

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ceann nam meadhanan

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. 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>

Tha na clasaichean .pull-leftagus .pull-rightcuideachd ann agus bha iad air an cleachdadh roimhe seo mar phàirt de na meadhanan, ach chan eil iad air an moladh airson an cleachdadh sin mar v3.3.0. Tha iad timcheall air co-ionann ri .media-leftagus .media-right, ach a-mhàin a .media-rightbu chòir a chuir às deidh an .media-bodysan html.

Co-thaobhadh meadhanan

Faodaidh na h-ìomhaighean no meadhanan eile a bhith air an co-thaobhadh gu h-àrd, sa mheadhan no aig a’ bhonn. Tha an suidheachadh bunaiteach air a cho-thaobhadh gu h-àrd.

Meadhanan co-thaobhadh àrd

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus.

Meadhanan co-thaobhadh meadhanach

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus.

Meadhanan co-thaobhadh gu h-ìosal

Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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>

Liosta nam meadhanan

Le beagan comharrachaidh a bharrachd, faodaidh tu meadhanan taobh a-staigh liosta a chleachdadh (feumail airson snàithleanan beachd no liostaichean artaigilean).

  • Ceann nam meadhanan

    Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Ceann meadhanan neadaichte

    Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Ceann meadhanan neadaichte

    Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Ceann meadhanan neadaichte

    Cras sit amet nibh libero, ann an gravida nulla. Nulla no metus scelerisque ante sollicitudin comodo. 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>

Buidheann liosta

Tha buidhnean liosta nam pàirt sùbailte is cumhachdach airson a bhith a’ taisbeanadh chan e a-mhàin liostaichean sìmplidh de eileamaidean, ach feadhainn iom-fhillte le susbaint àbhaisteach.

Eisimpleir bunaiteach

Is e a’ bhuidheann liosta as bunaitiche dìreach liosta gun òrdugh le nithean liosta, agus na clasaichean ceart. Tog air leis na roghainnean a leanas, no an CSS agad fhèin mar a dh’ fheumar.

  • Dìreach odio
  • Dapibus agus facilisis ann an
  • Morbi leo risus
  • Porta agus consectetur ac
  • Vestbulum aig 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>

Bràistean

Cuir pàirt nam bràistean ri nì buidheann liosta sam bith agus thèid a shuidheachadh gu fèin-ghluasadach air an taobh cheart.

  • 14Dìreach odio
  • 2Dapibus agus facilisis ann an
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Feartan ceangailte

Linkify liosta de nithean buidhne le bhith a’ cleachdadh tagaichean acair an àite nithean liosta (tha sin cuideachd a’ ciallachadh pàrant <div>an àite <ul>). Chan eil feum air pàrantan fa leth timcheall air gach eileamaid.

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

Feartan putan

Faodaidh rudan buidhne liosta a bhith nam putanan an àite nithean liosta (tha sin cuideachd a’ ciallachadh pàrant <div>an àite <ul>). Chan eil feum air pàrantan fa leth timcheall air gach eileamaid. Na cleachd na .btnclasaichean àbhaisteach an seo.

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

Nithean ciorramach

Cuir .disabledri a .list-group-itemgus a ghlasadh a-mach gus nochdadh ciorramach.

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

Clasaichean co-theacsail

Cleachd clasaichean co-theacsail gus nithean liosta a stoidhle, bunaiteach no ceangailte. Cuideachd a’ toirt a-steach .activestàite.

  • Dapibus agus facilisis ann an
  • Cras sit amet nibh libero
  • Porta agus consectetur ac
  • Vestbulum aig 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>

Susbaint gnàthaichte

Cuir cha mhòr HTML sam bith a-staigh, eadhon airson buidhnean liosta ceangailte mar an tè gu h-ìosal.

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

Panalan

Ged nach eil e an-còmhnaidh riatanach, uaireannan feumaidh tu do DOM a chuir ann am bogsa. Airson na suidheachaidhean sin, feuch am pàirt pannal.

Eisimpleir bunaiteach

Gu gnàthach, is e a h-uile rud a .panelnì thu beagan chrìochan bunaiteach agus pleadhag gus beagan susbaint a chumail a-steach.

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

Pannal le ceann-cinn

Cuir gu furasta soitheach cinn ris a’ phannal agad le .panel-heading. Faodaidh tu cuideachd gin a thoirt a-steach <h1>- <h6>le .panel-titleclas gus ceann ro-stoidhle a chur ris. Ach, tha meudan cruth-clò <h1>- <h6>air an toirt thairis le .panel-heading.

Airson dath ceangail ceart, dèan cinnteach gun cuir thu ceanglaichean ann an cinn taobh a-staigh .panel-title.

Ceann pannal gun tiotal
Susbaint pannal

Tiotal a 'phannal

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

Wrap putanan no teacsa àrd-sgoile ann an .panel-footer. Thoir an aire nach sealbhaich coisichean pannal dathan agus crìochan nuair a bhios tu a’ cleachdadh atharrachaidhean co-theacsail leis nach eil còir aca a bhith air beulaibh an deilbh.

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

Roghainnean co-theacsail

Coltach ri co-phàirtean eile, dèan pannal gu furasta nas ciallaiche do cho-theacsa sònraichte le bhith a’ cur gin de na clasaichean stàite co-theacsail ris.

Tiotal a 'phannal

Susbaint pannal

Tiotal a 'phannal

Susbaint pannal

Tiotal a 'phannal

Susbaint pannal

Tiotal a 'phannal

Susbaint pannal

Tiotal a 'phannal

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

Le bùird

Cuir ris neo-chrìochnaichte .tabletaobh a-staigh pannal airson dealbhadh fuaigheil. Ma tha .panel-body, cuiridh sinn crìoch a bharrachd air mullach a 'bhùird airson dealachadh.

Ceann pannal

Cuid de shusbaint pannal bunaiteach an seo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# A’ chiad ainm An t-ainm mu dheireadh Ainm-cleachdaidh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Mura h-eil bodhaig pannal ann, gluaisidh am pàirt bho bhann-cinn a’ phannail gu bòrd gun bhriseadh sam bith.

Ceann pannal
# A’ chiad ainm An t-ainm mu dheireadh Ainm-cleachdaidh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Le buidhnean liosta

Cuir gu furasta buidhnean liosta làn-leud taobh a- staigh pannal sam bith.

Ceann pannal

Cuid de shusbaint pannal bunaiteach an seo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Dìreach odio
  • Dapibus agus facilisis ann an
  • Morbi leo risus
  • Porta agus consectetur ac
  • Vestbulum aig 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>

Gabhail a-steach freagairteach

Leig le brobhsairean tomhasan bhidio no taisbeanadh-shleamhnagan a dhearbhadh stèidhichte air leud a’ bhloc anns a bheil iad le bhith a’ cruthachadh co-mheas gnèitheach a nì sgèile ceart air inneal sam bith.

Tha riaghailtean air an cur gu dìreach ri <iframe>, <embed>, , <video>, agus <object>eileamaidean; gu roghnach cleachd clas sliochd soilleir .embed-responsive-itemnuair a tha thu airson a bhith co-ionnan ris an stoidhle airson buadhan eile.

Pro-Tip! Chan fheum thu a chuir a-steach frameborder="0"na do chuid <iframe>oir tha sinn a’ dol thairis air sin dhut.

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

tobraichean

Default gu math

Cleachd an tobar mar bhuaidh shìmplidh air eileamaid gus buaidh inset a thoirt dha.

Seall, tha mi ann an tobar!
<div class="well">...</div>

Clasaichean roghainneil

Padding smachd agus oiseanan cruinn le dà chlas atharrachaidh roghainneil.

Seall, tha mi ann an tobar mòr!
<div class="well well-lg">...</div>
Seall, tha mi ann an tobar beag!
<div class="well well-sm">...</div>