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.

Cuir a-steach seòladh puist-d dligheach

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

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 .

eisimpleir

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>

Co-thaobhadh

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.

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

Cinn-cinn

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>

Roinn-roinn

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>

Nithean clàr-taice ciorramach

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>

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 `role`agus 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>

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.

Clì Meadhanach Deas

Clì Meadhanach

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

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>

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.

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

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.

Tabaichean

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>

Pills

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>

Air fhìreanachadh

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>

Ceanglaichean ciorramach

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>

A 'cleachdadh dropdowns

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>

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:

Lùghdaich meud no leud nithean navbar.
Falaich cuid de rudan bàr seòlaidh aig meudan sgrion sònraichte a’ cleachdadh clasaichean goireasach freagairteach .
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.

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

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

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>

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.

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>

Ceanglaichean ceangailte

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>

eisimpleir

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 .

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>

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>

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>

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.

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

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

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>

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.

S math a rinn thu! Leugh thu an teachdaireachd rabhaidh chudromach seo gu soirbheachail.

Cinn suas! Feumaidh an rabhadh seo d’ aire, ach chan eil e air leth cudromach.

Rabhadh! Tha e nas fheàrr sgrùdadh a dhèanamh ort fhèin, chan eil thu a’ coimhead ro mhath.

Ach snap! Atharraich beagan rudan suas is feuch ri cur a-steach a-rithist.

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

Rabhadh! Tha e nas fheàrr sgrùdadh a dhèanamh ort fhèin, chan eil thu a’ coimhead ro mhath.

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

Ceanglaichean ann an rabhaidhean

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

S math a rinn thu! Leugh thu an teachdaireachd rabhaidh chudromach seo gu soirbheachail .

Cinn suas! Feumaidh an rabhadh seo d’ aire , ach chan eil e air leth cudromach.

Rabhadh! Is fheàrr sgrùdadh a dhèanamh ort fhèin, chan eil thu a ’ coimhead ro mhath .

Ach snap! Atharraich beagan rudan suas is feuch ri cur a-steach a-rithist.

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

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.

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

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

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

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

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

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>

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.

Dìreach odio Dapibus agus facilisis ann an Morbi leo risus Porta agus consectetur ac Vestbulum aig Eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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.

Dìreach odio Dapibus agus facilisis ann an Morbi leo risus Porta agus consectetur ac Vestbulum aig Eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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

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.

Dèan liosta de cheann nan nithean buidhne

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

Dèan liosta de cheann nan nithean buidhne

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

Dèan liosta de cheann nan nithean buidhne

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

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

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>

Pannal le bonn-coise

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

Bun-stèidh 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>

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>

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>

Co-phàirtean

Glyphicons

Glyphs rim faighinn

Ciamar a chleachdadh

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

A-mhàin airson a chleachdadh air eileamaidean falamh

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

Ìomhaighean ruigsinneach

Eisimpleirean

Droch-dhìol

eisimpleir

Co-thaobhadh

Dh’ fhaodadh gum bi feum air suidheachadh a bharrachd

Co .pull-right-thaobhadh neo-leasaichte

Cinn-cinn

Roinn-roinn

Nithean clàr-taice ciorramach

Buidhnean putan

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

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

Eisimpleir bunaiteach

Bàr inneal putan

Meudachadh

A' neadachadh

Atharrachadh dìreach

Buidhnean putan air am fìreanachadh

A 'làimhseachadh chrìochan

IE8 agus crìochan

Le <a>eileamaidean

Ceanglaichean ag obair mar phutanan

Le<button>eileamaidean

Clò-bhuail putan

An urra ri plugan

Lìon sìos putan singilte

Split dropdowns putanan

Meudachadh

Atharrachadh dropup

Buidhnean cuir a-steach

Teacs <input>a-mhàin

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

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

Cuir bileagan ris an-còmhnaidh

Eisimpleir bunaiteach

Meudachadh

Bogsaichean sgrùdaidh agus addons rèidio

Addons putan

Putanan le dropdowns

Putanan sgaraichte

Ioma putanan

Navs

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

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

Tabaichean

Pills

Air fhìreanachadh

Safari agus navs reusanta freagairteach

Ceanglaichean ciorramach

Cha deach buaidh a thoirt air gnìomhachd ceangail

A 'cleachdadh dropdowns

Tabaichean le dropdowns

Pills le dropdowns

Navbar

Navbar bunaiteach

Susbaint thar-shruth

Feumaidh plugan JavaScript

Ag atharrachadh an àite brisidh navbar gluasadach a thuit

Dèan navbars ruigsinneach

Ìomhaigh branda

Foirmean

Draibhearan airson innealan-làimhe

Cuir bileagan ris an-còmhnaidh

Putanan

Cleachdadh co-theacsa sònraichte

Teacs

Ceanglaichean neo-nav

Co-thaobhadh co-phàirteach

Co-thaobhadh ceart grunn phàirtean

Stèidhichte gu mullach

Tha feum air pleadhag bodhaig

Stèidhichte gu bonn

Co `.pull-right`-thaobhadh neo-leasaichte

Dèan cinnteach gu bheil e ceart `role`agus thoir seachad bileag

Le `<a>`eileamaidean

Le`<button>`eileamaidean

Teacs `<input>`a-mhàin