Glyphs ar fáil

Áirítear os cionn 250 glyphs i bhformáid chló ó thacar Glyphicon Halflings. De ghnáth ní bhíonn Glyphicons Halflings ar fáil saor in aisce, ach chuir a cruthaitheoir iad ar fáil do Bootstrap saor ó chostas. Mar bhuíochas, ní iarraimid ach nasc ar ais chuig Glyphicons a chur isteach nuair is féidir.

glyphicon glyphicon-réiltín
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-lúide
glyphicon glyphicon-scamall
glyphicon glyphicon-clúdach
glyphicon glyphicon-peann luaidhe
glyphicon glyphicon-gloine
glyphicon glyphicon-ceol
glyphicon glyphicon-search
glyphicon glyphicon-croí
glyphicon glyphicon-star
glyphicon glyphicon-réalta-folamh
glyphicon úsáideoir glyphicon
Scannán glyphicon glyphicon
glyphicon glyphicon-ú-mór
glyphicon glyphicon-ú
glyphicon glyphicon-ú-liosta
glyphicon glyphicon-ok
glyphicon glyphicon-bhaint
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-uaire
glyphicon comhartha glyphicon
glyphicon glyphicon-cog
glyphicon glyphicon-bhruscar
glyphicon glyphicon-bhaile
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-bóthar
Íosluchtaigh glyphicon glyphicon alt
Íosluchtaigh glyphicon glyphicon
glyphicon glyphicon-uaslódáil
glyphicon glyphicon-bosca isteach
glyphicon glyphicon-imirt-chiorcal
glyphicon glyphicon-athrá
glyphicon glyphicon-athnuachan
glyphicon glyphicon-list-alt
glyphicon glyphicon-glas
glyphicon glyphicon-flag
glyphicon glyphicon-cluasáin
glyphicon glyphicon-toirte-uaire
glyphicon glyphicon-toirt-síos
glyphicon glyphicon-toirt-suas
glyphicon glyphicon qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon clibeanna glyphicon
Leabhar glyphicon glyphicon
glyphicon glyphicon-leabharmharc
glyphicon glyphicon-print
glyphicon ceamara glyphicon
glyphicon glyphicon-cló
glyphicon glyphicon-trom
glyphicon glyphicon-iodálach
glyphicon glyphicon-téacs-airde
glyphicon glyphicon-téacs-leithead
glyphicon glyphicon-ailíniú-ar chlé
glyphicon glyphicon-ailíniú-lár
glyphicon glyphicon-ailíniú-ar dheis
glyphicon glyphicon-ailíniú-údar
glyphicon glyphicon-list
glyphicon glyphicon-fleasc-ar chlé
glyphicon glyphicon-fleasc-ar dheis
glyphicon glyphicon-facetime-físeán
glyphicon glyphicon-pictiúr
glyphicon glyphicon-mapa-marcóir
glyphicon glyphicon-choigeartú
glyphicon glyphicon-tint
glyphicon glyphicon-eagar
glyphicon glyphicon-share
glyphicon glyphicon-seiceáil
glyphicon glyphicon-bogadh
glyphicon glyphicon-céim ar gcúl
glyphicon glyphicon-tapa-ais
glyphicon glyphicon-ar gcúl
glyphicon glyphicon-imirt
glyphicon glyphicon-sos
glyphicon glyphicon-stad
glyphicon glyphicon-ar aghaidh
glyphicon glyphicon-tapa ar aghaidh
glyphicon glyphicon-céim ar aghaidh
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-chlé
glyphicon glyphicon-chevron-ar dheis
glyphicon glyphicon-plus-comhartha
glyphicon comhartha glyphicon lúide
glyphicon glyphicon-bain-comhartha
glyphicon glyphicon-ok-comhartha
glyphicon glyphicon-comhartha ceiste
glyphicon glyphicon-info-comhartha
glyphicon glyphicon-scáileán
glyphicon glyphicon-bain-ciorcal
glyphicon glyphicon-ok-ciorcal
glyphicon glyphicon-ban-chiorcal
glyphicon glyphicon-arrow-clé
glyphicon glyphicon-arrow-deas
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-síos
glyphicon glyphicon-share-alt
glyphicon glyphicon-athraigh méid-iomlán
glyphicon glyphicon-athraigh méid-beag
glyphicon glyphicon-exclamation-comhartha
glyphicon glyphicon-bronntanas
glyphicon glyphicon-duille
glyphicon glyphicon-tine
glyphicon glyphicon-súil-oscailte
glyphicon glyphicon-súil-dlúth
glyphicon comhartha rabhaidh glyphicon
glyphicon glyphicon-eitleán
glyphicon glyphicon-féilire
glyphicon glyphicon-randamach
glyphicon glyphicon-trácht
glyphicon glyphicon-maighnéad
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-siopadóireacht-chairt
glyphicon glyphicon-fillteán-gar
glyphicon glyphicon-fillteán-oscailte
glyphicon glyphicon-athraigh méid-ingearach
glyphicon glyphicon-athraigh méid-cothrománach
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon deimhniú glyphicon
glyphicon glyphicon-ordóga-suas
glyphicon glyphicon-ordóga síos
glyphicon glyphicon-láimhe ar dheis
glyphicon glyphicon-láimhe ar chlé
glyphicon glyphicon-lámh suas
glyphicon glyphicon-lámh síos
glyphicon glyphicon-ciorcal-saighead-dheis
glyphicon glyphicon-ciorcal-saighead-chlé
glyphicon glyphicon-ciorcal-saighead-suas
glyphicon glyphicon-ciorcal-saighead-síos
glyphicon glyphicon-globe
glyphicon glyphicon-rinse
glyphicon tascanna glyphicon
glyphicon glyphicon-scagaire
glyphicon glyphicon-cás gairid
glyphicon glyphicon scáileán iomlán
glyphicon glyphicon-deais
glyphicon glyphicon-gearrthóg páipéir
glyphicon glyphicon-croí-folamh
glyphicon nasc glyphicon
glyphicon glyphicon fón
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sórtáil
glyphicon glyphicon-sórtáil de réir aibítir
glyphicon glyphicon-sórtáil de réir aibítre-alt
glyphicon glyphicon-sórtáil de réir ordú
glyphicon glyphicon-sórtáil-de réir ordú-alt
glyphicon glyphicon-sórtáil de réir tréithe
glyphicon glyphicon-sórtáil de réir tréithe-alt
glyphicon glyphicon-gan seiceáil
glyphicon glyphicon-leathnú
glyphicon glyphicon-titim síos
glyphicon glyphicon-titim-suas
glyphicon glyphicon-logáil isteach
glyphicon glyphicon-flash
glyphicon glyphicon-logáil amach
glyphicon glyphicon-fuinneog nua
glyphicon glyphicon-taifead
glyphicon glyphicon-shábháil
glyphicon glyphicon-oscailte
glyphicon glyphicon-shábháil
glyphicon glyphicon-allmhairiú
glyphicon glyphicon-onnmhairiú
glyphicon glyphicon-seol
glyphicon glyphicon-floppy-diosca
glyphicon glyphicon-floppy-shábháil
glyphicon glyphicon-floppy-bain
glyphicon glyphicon-floppy-shábháil
glyphicon glyphicon-floppy-open
glyphicon glyphicon-cárta creidmheasa
glyphicon glyphicon-aistriú
glyphicon glyphicon-sceanra
glyphicon glyphicon-header
glyphicon glyphicon-comhbhrúite
glyphicon glyphicon-cluaise
glyphicon glyphicon-phone-alt
glyphicon glyphicon-túr
glyphicon glyphicon-stats
glyphicon glyphicon-sd-físeán
Físeán glyphicon glyphicon hd
glyphicon glyphicon-fotheidil
glyphicon glyphicon-fuaime-steirió
glyphicon glyphicon-fuaim-dolby
glyphicon glyphicon-fuaime-5-1
glyphicon glyphicon-fuaime-6-1
glyphicon glyphicon-fuaim-7-1
glyphicon glyphicon-cóipchirt-marc
glyphicon glyphicon-marc clárúcháin
Íosluchtaigh glyphicon glyphicon scamall
glyphicon glyphicon scamall-uaslódáil
glyphicon glyphicon-tree-buaircíneach
glyphicon glyphicon-crann-duillsilteach
glyphicon glyphicon-cd
glyphicon glyphicon-shábháil-comhad
glyphicon glyphicon-comhad oscailte
glyphicon glyphicon-leibhéal suas
glyphicon glyphicon-cóip
glyphicon glyphicon-greamaigh
glyphicon glyphicon-airdeall
glyphicon glyphicon-cothromóir
glyphicon glyphicon-rí
glyphicon glyphicon-banríon
glyphicon glyphicon-saighdiúir
glyphicon glyphicon-easpag
glyphicon glyphicon-ridire
glyphicon glyphicon-foirmle leanbh
glyphicon glyphicon-tent
glyphicon glyphicon-clár dubh
glyphicon glyphicon-leaba
glyphicon glyphicon-úll
glyphicon glyphicon-scriosadh
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampa
glyphicon glyphicon-dúblach
glyphicon glyphicon-muice-banc
glyphicon glyphicon-siosúr
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rúbal
glyphicon glyphicon-rub
glyphicon glyphicon-scála
glyphicon glyphicon-oighear-lolly
glyphicon glyphicon-oighear-blaiseadh
glyphicon glyphicon-oideachas
glyphicon glyphicon-rogha-cothrománach
glyphicon glyphicon-rogha-ingearach
glyphicon glyphicon-roghchlár-hamburger
glyphicon glyphicon-módúil-fhuinneog
glyphicon glyphicon-ola
glyphicon glyphicon-gráin
glyphicon glyphicon-spéaclaí gréine
glyphicon glyphicon-téacs-mhéid
glyphicon glyphicon-téacs-dath
glyphicon glyphicon-téacs-cúlra
glyphicon glyphicon-réad-ailíniú-barr
glyphicon glyphicon-réad-ailíniú-bun
glyphicon glyphicon-réad-ailíniú-cothrománach
glyphicon glyphicon-réad-ailíniú-ar chlé
glyphicon glyphicon-réad-ailíniú-ingearach
glyphicon glyphicon-object-ailíniú-ar dheis
glyphicon glyphicon-triantán-ar dheis
glyphicon glyphicon-triantán-clé
glyphicon glyphicon-triantán-bun
glyphicon glyphicon-triantán-barr
glyphicon glyphicon-consól
glyphicon glyphicon-superscript
glyphicon glyphicon-síntiús
glyphicon glyphicon-menu-ar chlé
glyphicon glyphicon-roghchlár-ar dheis
glyphicon glyphicon-roghchlár-síos
glyphicon glyphicon-roghchlár

Conas a úsáid

Ar chúiseanna feidhmíochta, teastaíonn bunrang agus rang deilbhíní aonair ó gach deilbhín. Chun é a úsáid, cuir an cód seo a leanas beagnach áit ar bith. Bí cinnte spás a fhágáil idir an deilbhín agus an téacs le haghaidh stuáil chuí.

Ná meascadh le comhpháirteanna eile

Ní féidir ranganna deilbhín a chomhcheangal go díreach le comhpháirteanna eile. Níor cheart iad a úsáid in éineacht le ranganna eile ar an ngné chéanna. Ina áit sin, cuir nead leis <span>agus cuir na ranganna deilbhín i bhfeidhm ar an <span>.

Le húsáid ar eilimintí folamh amháin

Níor cheart ranganna deilbhín a úsáid ach amháin ar eilimintí nach bhfuil aon ábhar téacs iontu agus nach bhfuil aon eilimintí linbh iontu.

Suíomh an chló deilbhín a athrú

Glacann Bootstrap leis go mbeidh comhaid chló deilbhíní suite san ../fonts/eolaire, i gcoibhneas leis na comhaid CSS tiomsaithe. Má bhogtar nó má athainmnítear na comhaid chló sin, is féidir an CSS a nuashonrú ar cheann de thrí bhealach:

Athraigh na hathróga @icon-font-pathagus/nó @icon-font-namena hathróga san fhoinse Lúide comhaid.
Bain úsáid as an rogha URLanna coibhneasta a sholáthraíonn an tiomsaitheoir Lúide.
Athraigh na url()cosáin sa CSS tiomsaithe.

Bain úsáid as cibé rogha is fearr a oireann do shocrú sainiúil forbartha.

Deilbhíní inrochtana

Fógrófar i leaganacha nua-aimseartha de theicneolaíochtaí cúnta inneachar ginte CSS, chomh maith le carachtair ar leith Unicode. Chun aschur neamhbheartaithe agus mearbhall a sheachaint i léitheoirí scáileáin (go háirithe nuair a úsáidtear deilbhíní le haghaidh maisiúcháin amháin), cuirimid i bhfolach iad leis an aria-hidden="true"tréith.

Má tá íocón á úsáid agat chun brí a chur in iúl (seachas mar eilimint mhaisiúcháin amháin), cinntigh go gcuirtear an bhrí seo in iúl freisin do theicneolaíochtaí cúnta - mar shampla, cuir san áireamh ábhar breise, atá i bhfolach ó thaobh amhairc leis an .sr-onlyrang.

Má tá rialuithe á gcruthú agat gan téacs ar bith eile (mar shampla <button>nach bhfuil ann ach íocón), ba cheart duit ábhar eile a sholáthar i gcónaí chun cuspóir an rialaithe a shainaithint, ionas go mbeidh ciall leis d’úsáideoirí na dteicneolaíochtaí cúnta. Sa chás seo, d'fhéadfá aria-labeltréith a chur leis an rialú féin.

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

Samplaí

Úsáid iad i gcnaipí, i ngrúpaí cnaipí le haghaidh barra uirlisí, nascleanúint, nó ionchuir fhoirm réamhullmhaithe.

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

Deilbhín a úsáidtear i bhfoláireamh lena chur in iúl gur teachtaireacht earráide atá ann, le .sr-onlytéacs breise chun an leid seo a chur in iúl d’úsáideoirí na dteicneolaíochtaí cúnta.

Cuir isteach seoladh ríomhphoist bailí

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

Roghchlár comhthéacsúil inscorraithe chun liostaí nasc a thaispeáint. Déanta idirghníomhach leis an mbreiseán JavaScript anuas .

Sampla

Wrap truicear an anuas agus an roghchlár anuas laistigh de .dropdown, nó eilimint eile a dhearbhaíonn position: relative;. Ansin cuir HTML an roghchláir leis.

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

Is féidir biachláir anuas a athrú chun leathnú aníos (in ionad anuas) trí chur .dropupleis an tuismitheoir.

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

Ailíniú

De réir réamhshocraithe, tá roghchlár anuas suite go huathoibríoch 100% ón mbarr agus ar an taobh clé dá thuismitheoir. Cuir .dropdown-menu-rightle a .dropdown-menuar dheis ailíniú an roghchlár anuas.

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

Ceanntásca

Cuir ceanntásc leis chun codanna de ghníomhartha a lipéadú in aon roghchlár anuas.

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

Roinnteoir

Cuir roinnteoir le sraith nasc ar leith i roghchlár anuas.

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

Míreanna roghchláir díchumasaithe

Cuir .disabledle <li>sa roghchlár anuas chun an nasc a dhíchumasú.

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

Grúpáil sraith cnaipí le chéile ar líne amháin leis an ngrúpa cnaipí. Cuir leis an raidió JavaScript roghnach agus an t-iompraíocht i stíl ticbhosca lenár mbreiseán cnaipí .

Teastaíonn socrú speisialta le haghaidh leideanna uirlisí & popovers i ngrúpaí cnaipí

Agus leideanna uirlisí nó popovers á n-úsáid agat ar eilimintí laistigh de .btn-group, beidh ort an rogha a shonrú container: 'body'chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus / nó ag cailliúint a coirnéil chothromú nuair a spreagtar an leid uirlisí nó an popover).

Cinntigh ceart `role`agus cuir lipéad ar fáil

Ionas gur féidir le teicneolaíochtaí cúnta – mar léitheoirí scáileáin – a chur in iúl go bhfuil sraith cnaipí grúpáilte, ní rolemór tréith chuí a sholáthar. I gcás grúpaí cnaipí, bheadh sé seo role="group", agus ba cheart go mbeadh role="toolbar".

Eisceacht amháin is ea grúpaí nach bhfuil iontu ach rialú amháin (mar shampla na grúpaí cnaipí a bhfuil údar leo agus <button>gnéithe) nó anuas.

Ina theannta sin, ba cheart lipéad sainráite a thabhairt do ghrúpaí agus do bharraí uirlisí, ós rud é nach bhfógróidh formhór na dteicneolaíochtaí cúnta iad ar shlí eile, in ainneoin go bhfuil an roletréith cheart i láthair. Sna samplaí a chuirtear ar fáil anseo, úsáidimid aria-label, ach is féidir roghanna eile ar nós aria-labelledbya úsáid freisin.

Sampla bunúsach

Wrap sraith cnaipí le .btni .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>

Comhcheangail tacair de <div class="btn-group">isteach i <div class="btn-toolbar">do chomhpháirteanna níos casta.

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

Sizing

In ionad ranganna méide cnaipí a chur i bhfeidhm ar gach cnaipe i ngrúpa, níl le déanamh ach cuir .btn-group-*le gach .btn-group, lena n-áirítear nuair a neadaíonn grúpaí iolracha.

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

Neadaithe

Cuir .btn-groupceann eile .btn-groupnuair is mian leat roghchláir anuas measctha le sraith cnaipí.

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

Athrú ingearach

Déan sraith de chnaipí a bheith le feiceáil Cruachta go hingearach seachas go cothrománach. Ní thacaítear le anuas cnaipe scoilte anseo.

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

Grúpaí cnaipí a bhfuil údar leo

Déan grúpa cnaipí a shíneadh ar mhéideanna comhionanna chun leithead iomlán a thuismitheora a rith. Oibríonn sé freisin le anuas cnaipe laistigh den ghrúpa cnaipí.

Teorainneacha a láimhseáil

Mar gheall ar an HTML agus CSS ar leith a úsáidtear chun cnaipí a chosaint (is é sin display: table-cell), déantar na teorainneacha eatarthu a dhúbailt. I ngrúpaí cnaipe rialta, margin-left: -1pxúsáidtear é chun na teorainneacha a chruachadh seachas iad a bhaint. Mar sin féin, marginní oibríonn sé le display: table-cell. Mar thoradh air sin, ag brath ar do shaincheapadh ar Bootstrap, b'fhéidir gur mhaith leat na teorainneacha a bhaint nó a dhathú arís.

IE8 agus teorainneacha

Ní fhágann Internet Explorer 8 teorainneacha ar chnaipí i ngrúpa cnaipí a bhfuil údar maith leo, bíodh sé ar siúl <a>nó <button>eilimintí. Chun dul timpeall air sin, fillte gach cnaipe i gceann eile .btn-group.

Féach #12476 le haghaidh tuilleadh eolais.

Le `<a>`heilimintí

Just a wrap sraith de .btns i .btn-group.btn-group-justified.

Ar chlé Meánach Ceart

Ar chlé Meánach

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

Naisc ag gníomhú mar cnaipí

Má <a>úsáidtear na heilimintí chun feidhmiú mar chnaipí – rud a spreagann feidhmiúlacht laistigh den leathanach, seachas a bheith ag nascleanúint chuig doiciméad nó rannán eile laistigh den leathanach reatha – ba cheart leathanach cuí a thabhairt dóibh freisin role="button".

Le `<button>`heilimintí

Chun grúpaí cnaipí a bhfuil údar leo a úsáid le <button>heilimintí, ní mór duit gach cnaipe a fhilleadh i ngrúpa cnaipí . Ní chuireann an chuid is mó de na brabhsálaithe ár CSS i bhfeidhm i gceart chun fírinniú a dhéanamh ar <button>eilimintí, ach ós rud é go dtacaímid le anuas cnaipí, is féidir linn oibriú timpeall 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>

Bain úsáid as aon chnaipe chun roghchlár anuas a spreagadh trína chur laistigh de .btn-groupagus trí mharcáil ceart an roghchláir a sholáthar.

Spleáchas breiseán

Ní mór an breiseán anuas a chur san áireamh i do leagan de Bootstrap le haghaidh anuas cnaipe.

Íosluchtaigh cnaipe anuas amháin

Cas cnaipe ina scorán anuas le roinnt athruithe bunúsacha marcála.

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

Scoilt anuas na cnaipí

Ar an gcaoi chéanna, cruthaigh anuas ar chnaipí scoilte leis na hathruithe marcála céanna, le cnaipe ar leith amháin.

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

Sizing

Oibríonn anuas cnaipe le cnaipí de gach méid.

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

Athrú dropup

Truicear roghchláir anuas os cionn eilimintí trí chur .dropupleis an tuismitheoir.

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

Déan rialuithe foirmeacha a leathnú trí théacs nó cnaipí a chur leis roimh, tar éis, nó ar an dá thaobh d'aon téacs-bhunaithe <input>. Bain úsáid as .input-grouple .input-group-addonnó .input-group-btnchun eilimintí a réamhshuiteáil nó a chur i gceangal le ceann amháin .form-control.

Téacs `<input>`s amháin

Seachain <select>eilimintí a úsáid anseo mar ní féidir iad a stíliú go hiomlán i mbrabhsálaithe WebKit.

Seachain <textarea>eilimintí a úsáid anseo mar rowsní bheidh meas ar a dtréith i gcásanna áirithe.

Teastaíonn socrú speisialta le haghaidh leideanna uirlisí & popovers i ngrúpaí ionchuir

Agus leideanna uirlisí nó popovers á n-úsáid agat ar eilimintí laistigh de .input-group, beidh ort an rogha a shonrú container: 'body'chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus / nó ag cailleadh a coirnéil chothromú nuair a spreagtar an leid uirlisí nó an popover).

Ná meascadh le comhpháirteanna eile

Ná measc grúpaí foirme nó ranganna colúin ghreille go díreach le grúpaí ionchuir. Ina áit sin, neadaigh an grúpa ionchuir taobh istigh den ghrúpa foirme nó den eilimint a bhaineann leis an ngreille.

Cuir lipéid leis i gcónaí

Beidh trioblóid ag léitheoirí scáileáin le d’fhoirmeacha mura n-áiríonn tú lipéad do gach ionchur. Maidir leis na grúpaí ionchuir seo, cinntigh go gcuirtear aon lipéad nó feidhmiúlacht bhreise in iúl do theicneolaíochtaí cúnta.

Braithfidh an teicníocht bheacht a úsáidfear ( <label>eilimintí infheicthe, <label>eilimintí i bhfolach ag baint úsáide as an .sr-onlyrang, nó úsáid an aria-label, aria-labelledby, , aria-describedby, titlenó placeholderaitreabúide) agus an fhaisnéis bhreise a chaithfear a chur in iúl ar an gcineál comhéadain atá á chur i bhfeidhm agat. Soláthraíonn na samplaí sa chuid seo roinnt cur chuige a mholtar a bhaineann go sonrach le cás.

Sampla bunúsach

Cuir breiseán nó cnaipe amháin ar gach taobh den ionchur. Is féidir leat ceann a chur ar an dá thaobh d'ionchur freisin.

Ní thacaímid le breisithe iolracha ( .input-group-addonnó .input-group-btn) ar thaobh amháin.

Ní thacaímid le il-rialuithe foirme in aon ghrúpa ionchuir amháin.

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

Sizing

Cuir na haicmí méide foirme coibhneasta leis .input-groupféin agus athrófar méid na n-ábhar laistigh go huathoibríoch - ní gá na haicmí méide rialaithe foirme ar gach eilimint a athrá.

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

Seiceálacha agus breiseáin raidió

Cuir ticbhosca nó rogha raidió ar bith i mbreiseán grúpa ionchuir seachas téacs.

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

Breiseáin cnaipe

Tá cnaipí i ngrúpaí ionchuir beagán difriúil agus éilíonn siad leibhéal breise neadaithe amháin. In ionad .input-group-addon, beidh ort a úsáid .input-group-btnchun wrap na cnaipí. Tá sé seo ag teastáil mar gheall ar stíleanna brabhsálaí réamhshocraithe nach féidir a shárú.

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

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

Cnaipí deighilte

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

Cnaipí iolracha

Cé nach féidir leat ach breiseán amháin a bheith agat in aghaidh an taobh, is féidir leat cnaipí iolracha a bheith agat taobh istigh de .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>

Tá marcáil roinnte ag na Navanna atá ar fáil i Bootstrap, ag tosú leis an .navrang bonn, chomh maith le stáit roinnte. Babhtáil ranganna mionathraithe chun aistriú idir gach stíl.

Teastaíonn breiseán cluaisíní JavaScript le húsáid nascleanúint a dhéanamh le haghaidh painéil cluaisíní

Le haghaidh cluaisíní a bhfuil limistéir thábáilte orthu, ní mór duit an breiseán JavaScript tabs a úsáid . Beidh tréithe breise roleagus ARIA ag teastáil don mharcáil freisin – féach marcáil shampla an bhreiseáin le haghaidh tuilleadh sonraí.

Déan nascleanúint a úsáid mar loingseoireacht inrochtana

Má tá nascleanúint á n-úsáid agat chun barra nascleanúna a chur ar fáil, cinntigh go gcuirfidh tú role="navigation"leis an tuismitheoir coimeádán is loighciúil den <ul>, nó cuir <nav>eilimint thart ar an nascleanúint iomlán. Ná cuir an ról leis <ul>féin, mar go gcuirfeadh sé seo cosc ar theicneolaíochtaí cúnta a fhógairt mar liosta iarbhír.

Cluaisíní

Tabhair faoi deara go .nav-tabsdteastaíonn an .navbunrang ón rang.

<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

Tóg an HTML céanna sin, ach úsáid .nav-pillsina ionad 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>

Is féidir pills a chruachadh go hingearach freisin. Just a chur leis .nav-stacked.

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

údar

Déan cluaisíní nó piollaí go héasca ar chomhleithead a dtuismitheoirí ag scáileáin níos leithne ná 768px le .nav-justified. Ar scáileáin níos lú, tá na naisc nascleanúna cruachta.

Ní thacaítear le naisc bharra nascleanúna a bhfuil údar leo faoi láthair.

Safari agus loingseoireachtaí freagrúla a bhfuil údar leo

Ó v9.1.2, taispeánann Safari fabht ina n-eascraíonn athrú méide do bhrabhsálaí go cothrománach earráidí rindreála sa loingseoireacht a bhfuil údar leis agus a ghlantar nuair a dhéantar é a athnuachan. Taispeántar an fabht seo freisin sa sampla nav inchosanta .

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

Naisc faoi mhíchumas

Maidir le haon chomhpháirt nascleanúna (cluaisíní nó piollaí), cuir .disabledle haghaidh naisc ghlasa agus gan aon éifeachtaí hover .

Níor cuireadh isteach ar fheidhmiúlacht naisc

Ní athróidh an rang seo ach an <a>chuma, ní a fheidhmiúlacht. Úsáid JavaScript saincheaptha chun naisc a dhíchumasú anseo.

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

Ag baint úsáide as dropdowns

Cuir biachláir anuas leis le beagán HTML breise agus an breiseán JavaScript anuas .

Cluaisíní 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>

Is comhpháirteanna meitefhreagracha iad Navbarras a fheidhmíonn mar cheanntásca nascleanúna do d’fheidhmchlár nó do shuíomh. Tosaíonn siad tite (agus is féidir iad a scoránaigh) i radharcanna soghluaiste agus éiríonn siad cothrománach de réir mar a mhéadaíonn leithead an amhairc atá ar fáil.

Ní thacaítear le naisc bharra nascleanúna a bhfuil údar leo faoi láthair.

Ábhar cur thar maoil

Ós rud é nach bhfuil a fhios ag Bootstrap cé mhéad spáis atá de dhíth ar an ábhar i do bharra nascleanúna, b'fhéidir go mbeidh fadhbanna agat maidir le hábhar a chuimsiú i dara sraith. Chun é seo a réiteach, is féidir leat:

Laghdú ar an méid nó leithead na n-ítimí navbar.
Folaigh míreanna barraí nascleanúna áirithe ag méideanna scáileáin áirithe ag úsáid ranganna fóntais sofhreagracha .
Athraigh an pointe ag a athraíonn do bharra navála idir mód tite agus modh cothrománach. Saincheap an @grid-float-breakpointathróg nó cuir do cheist meán féin leis.

Brisphointe barra navbarra soghluaiste tite a athrú

Titeann an barra nascleanúna isteach ina radharc soghluaiste ingearach nuair a bhíonn an t-amharc níos cúinge ná @grid-float-breakpoint, agus leathnaíonn sé isteach ina radharc cothrománach neamh-soghluaiste nuair a bhíonn an t-amharc ar a laghad @grid-float-breakpointar leithead. Coigeartaigh an athróg seo sa fhoinse Lúide le rialú nuair a thiteann/a leathnaíonn an barra nascleanúna. Is é an luach réamhshocraithe 768px(an scáileán "beag" nó "tablet" is lú).

<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 d'íomhá féin in ionad an bhranda nascleanúna ach an téacs a mhalartú le haghaidh <img>. Ós rud é go .navbar-brandbhfuil a stuáil agus airde féin aige, b'fhéidir go mbeadh ort roinnt CSS a shárú ag brath ar d'íomhá.

<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 ábhar na foirme laistigh .navbar-formd'ailíniú ceart ingearach agus d'iompar tite i gcalafoirt chúnga. Bain úsáid as na roghanna ailínithe le socrú cá bhfuil sé laistigh d'inneachar an bharra nascleanúna.

Mar cinnirí suas, .navbar-formroinneann sé cuid mhór dá chód le .form-inlinevia mixin. D'fhéadfadh sé go mbeadh gá le leithid seasta a thaispeáint i gceart laistigh de bharra nascleanúna le haghaidh rialuithe foirme áirithe, cosúil le grúpaí ionchuir.

<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 lipéid leis i gcónaí

Beidh trioblóid ag léitheoirí scáileáin le d’fhoirmeacha mura n-áiríonn tú lipéad do gach ionchur. Maidir leis na foirmeacha inlíne seo, is féidir leat na lipéid a cheilt ag baint úsáide as an .sr-onlyrang. Tá modhanna malartacha eile ann chun lipéad a sholáthar do theicneolaíochtaí cúnta, amhail an aria-label, aria-labelledbynó an titleaitreabúid. Mura bhfuil aon cheann díobh seo i láthair, féadfaidh léitheoirí scáileáin úsáid a bhaint as an placeholdertréith, más ann dóibh, ach tabhair faoi deara placeholdernach moltar é a úsáid in ionad modhanna eile lipéadaithe.

Cuir an .navbar-btnrang le <button>heilimintí nach bhfuil cónaí orthu in a <form>chun iad a lárú go ceartingearach sa bharra nav.

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

Wrap teaghráin téacs i eilimint le .navbar-text, de ghnáth ar <p>chlib chun tosaigh agus dath cuí.

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

I gcás daoine a úsáideann naisc chaighdeánacha nach bhfuil laistigh den chomhpháirt rialta nascleanúna barra nascleanúna, bain úsáid as an .navbar-linkrang chun na dathanna cearta a chur leis do na roghanna barra loingseoireachta réamhshocraithe agus inbhéartach.

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

Ailínigh naisc nav, foirmeacha, cnaipí, nó téacs, ag baint úsáide as na ranganna .navbar-leftnó .navbar-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe. Mar shampla, chun naisc nascleanúna a ailíniú, cuir ar leithligh iad <ul>leis an rang áirgiúlachta faoi seach a cuireadh i bhfeidhm.

.pull-leftLeaganacha measctha de agus , is ea na ranganna seo .pull-right, ach déantar iad a raon feidhme d'fhiosrúcháin ó na meáin chun comhpháirteanna barra nascleanúna thar mhéideanna gléasanna a láimhseáil níos éasca.

Cuir leis .navbar-fixed-topagus cuir san áireamh ábhar an bharra nascleanúna .containernó .container-fluidchuig lár agus eochaircheap.

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

stuáil coirp ag teastáil

Déanfaidh an barra nascleanúna seasta d'inneachar eile a fhorleagan, ach amháin má chuireann tú paddingle barr an <body>. Bain triail as do luachanna féin nó bain úsáid as ár mblúire thíos. Leid: De réir réamhshocraithe, tá an barra nascleanúna 50px ar airde.

body { padding-top: 70px; }

Déan cinnte é seo a chur san áireamh tar éis an croí Bootstrap CSS.

Cuir leis .navbar-fixed-bottomagus cuir san áireamh ábhar an bharra nascleanúna .containernó .container-fluidchuig lár agus eochaircheap.

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

stuáil coirp ag teastáil

Déanfaidh an barra nascleanúna seasta d'inneachar eile a fhorleagan, ach amháin má chuireann tú paddingle bun an <body>. Bain triail as do luachanna féin nó bain úsáid as ár mblúire thíos. Leid: De réir réamhshocraithe, tá an barra nascleanúna 50px ar airde.

body { padding-bottom: 70px; }

Déan cinnte é seo a chur san áireamh tar éis an croí Bootstrap CSS.

Cruthaigh barra nascleanúna lánleithead a scrollaíonn ar shiúl leis an leathanach trí inneachar an bharra nascleanúna a chur leis .navbar-static-topagus a chur san áireamh .containernó .container-fluidgo lár agus eochaircheap.

Murab ionann agus na .navbar-fixed-*ranganna, ní gá duit aon stuáil ar an body.

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

Athraigh cuma an bharra nascleanúna trí .navbar-inverse.

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

Brioscáin aráin

Léirigh suíomh an leathanaigh reatha laistigh d'ordlathas loingseoireachta.

Cuirtear deighilteoirí leis go huathoibríoch i CSS trí :beforeagus content.

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

Leathanaigh

Cuir naisc uimhriúcháin ar fáil do do shuíomh nó d’aip leis an gcomhpháirt leathanach il-leathanaigh, nó an rogha glaoire níos simplí .

Leathanach réamhshocraithe

Leathanacháil shimplí spreagtha ag Rdio, iontach le haghaidh apps agus torthaí cuardaigh. Is deacair an bloc mór a chailleann, inscálaithe go héasca, agus soláthraíonn sé limistéir mhóra cliceáil.

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

Lipéadú an chomhpháirt uimhriúcháin

Ba cheart an chomhpháirt uimhriúcháin a fhilleadh i <nav>mír chun é a aithint mar mhír loingseoireachta do léitheoirí scáileáin agus teicneolaíochtaí cúnta eile. Ina theannta sin, toisc gur dócha go mbeidh níos mó ná roinn amháin nascleanúna den sórt sin ag leathanach cheana féin (cosúil leis an bpríomhnascleanúint sa cheanntásc, nó nascleanúint ar an mbarra taoibh), moltar tuairisc a chur ar fáil le aria-labelhaghaidh <nav>a léiríonn a chuspóir. Mar shampla, má úsáidtear comhpháirt an leathanaigh chun nascleanúint a dhéanamh idir sraith torthaí cuardaigh, d’fhéadfadh lipéad cuí a bheith ar aria-label="Search results pages".

Stáit faoi mhíchumas agus stáit ghníomhacha

Tá naisc inoiriúnaithe do chúinsí éagsúla. Bain úsáid as .disabledchun naisc nach féidir a chliceáil agus .activechun an leathanach reatha a léiriú.

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

Molaimid duit ancairí gníomhacha nó díchumasaithe a mhalartú le haghaidh <span>, nó an t-ancaire a fhágáil ar lár i gcás na saigheada roimhe seo nó na chéad saigheada eile, chun feidhm chliceáil a bhaint agus na stíleanna atá beartaithe a choinneáil.

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

Sizing

An bhfuil fonn ort uimhrigh níos mó nó níos lú? Cuir .pagination-lgnó .pagination-smle haghaidh méideanna breise.

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

glaoire

Naisc thapa roimhe seo agus ina dhiaidh le haghaidh feidhmiúcháin uimhriúcháin shimplí le marcáil éadrom agus stíleanna. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.

Sampla réamhshocraithe

De réir réamhshocraithe, díríonn an glaoire naisc.

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

Naisc ailínithe

Nó, is féidir leat gach nasc a ailíniú leis na taobhanna:

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

Staid díchumasaithe roghnach

Úsáideann naisc ghlaoire freisin an .disabledrang fóntais ghinearálta ón leathanach.

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

Sampla

Sampla ceannteideal Nua

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

Athruithe atá ar fáil

Cuir aon cheann de na haicmí mionathraithe thíos leis chun cuma lipéid a athrú.

Réamhshocrú Faisnéis Rathúlachta Bunscoile Rabhadh Contúirt

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

An bhfuil tonna de lipéid?

Féadann fadhbanna rindreála teacht chun cinn nuair a bhíonn mórán lipéad inlíne agat laistigh de choimeádán caol, agus a inline-blockeilimint féin ag gach ceann díobh (cosúil le deilbhín). Is é an bealach timpeall seo ag leagan síos display: inline-block;. Le haghaidh comhthéacs agus sampla, féach #13219 .

Cuir béim go héasca ar mhíreanna nua nó neamhléite trí <span class="badge">nasc, loingseoireachta Bootstrap, agus go leor eile a chur leis.

Bosca Isteach42

<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 ag titim as a chéile

Nuair nach bhfuil aon mhíreanna nua nó neamhléite ann, laghdóidh suaitheantais go simplí (trí :emptyroghnóir CSS) ar choinníoll nach bhfuil aon ábhar ann.

Comhoiriúnacht tras-bhrabhsálaí

Ní thitfidh suaitheantais féin in Internet Explorer 8 toisc nach bhfuil tacaíocht ann don :emptyroghnóir.

In oiriúint do stáit loingseoireachta ghníomhacha

Áirítear stíleanna insuite chun suaitheantais a chur i stáit ghníomhacha i loingseoireacht 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>

Comhpháirt éadrom, solúbtha atá in ann an radharc iomlán a leathnú go roghnach chun príomhábhar ar do shuíomh a thaispeáint.

Dia duit, domhan!

Is aonad laoch simplí é seo, comhpháirt shimplí de stíl jumbotron chun aird bhreise a dhíriú ar ábhar nó ar fhaisnéis faoi thrácht.

Foghlaim níos mó

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

Chun an jumbotron a dhéanamh ar leithead iomlán, agus gan coirnéil chothromú, cuir é taobh amuigh de gach .containers agus ina ionad sin cuir .containertaobh istigh leis.

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

Sliogán simplí le spásáil a dhéanamh h1go cuí agus codanna den ábhar a dheighilt ar leathanach. Is féidir leis an eilimint h1réamhshocraithe a úsáid small, chomh maith le formhór na gcomhpháirteanna eile (le stíleanna breise).

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

Leathnaigh córas eangaí Bootstrap leis an gcomhpháirt mionsamhlacha chun greillí íomhánna, físeáin, téacs agus go leor eile a thaispeáint go héasca.

Má tá tú ag lorg mionsamhlacha ar airde agus/nó leithead éagsúla a chur i láthair cosúil le Pinterest, beidh ort breiseán tríú páirtí a úsáid mar Shaoirseacht , Iseatóp , nó Salvatore .

Sampla réamhshocraithe

De réir réamhshocraithe, tá mionsamhlacha Bootstrap deartha chun íomhánna nasctha a thaispeáint le híosmhéid marcála riachtanach.

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

Ábhar saincheaptha

Le beagán marcála breise, is féidir aon chineál ábhar HTML cosúil le ceannteidil, ailt, nó cnaipí a chur isteach i mionsamhlacha.

Lipéad mionsamhlacha

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

Cnaipe Cnaipe

Lipéad mionsamhlacha

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

Cnaipe Cnaipe

Lipéad mionsamhlacha

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

Cnaipe Cnaipe

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

Teachtaireachtaí aiseolais comhthéacsúla a sholáthar do ghnáthghníomhartha úsáideoirí leis an dornán de theachtaireachtaí foláirimh solúbtha atá ar fáil.

Samplaí

Wrap aon téacs agus cnaipe díbhe roghnach isteach .alertagus i gceann de na ceithre rang comhthéacsúla (m.sh., .alert-success) le haghaidh teachtaireachtaí foláirimh bunúsacha.

Gan rang réamhshocraithe

Níl ranganna réamhshocraithe ag foláirimh, ní bhíonn ach bunranganna agus ranganna mionathraithe acu. Ní bhaineann an iomarca ciall le foláireamh liath réamhshocraithe, mar sin ní mór duit cineál a shonrú trí rang comhthéacsúil. Roghnaigh ó rath, eolas, rabhadh, nó baol.

An-mhaith! D'éirigh leat an teachtaireacht thábhachtach foláirimh seo a léamh.

Cinnirí suas! Ní mór d'aird a thabhairt ar an bhfoláireamh seo, ach níl sé thar a bheith tábhachtach.

Rabhadh! Seiceáil níos fearr duit féin, níl tú ag breathnú ró-mhaith.

Ó Léim! Athraigh cúpla rud agus bain triail as é a chur isteach arís.

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

Foláirimh dhíbhe

Tóg ar aon foláireamh trí .alert-dismissiblechnaipe roghnach agus dún a chur leis.

Tá breiseán foláirimh JavaScript de dhíth

Chun foláirimh dhíbhe atá ag feidhmiú go hiomlán, ní mór duit an breiseán foláirimh JavaScript .

Rabhadh! Seiceáil níos fearr duit féin, níl tú ag breathnú ró-mhaith.

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

A chinntiú go bhfuil iompar cuí thar gach feiste

Bí cinnte an <button>eilimint leis an data-dismiss="alert"tréith sonraí a úsáid.

Naisc i foláirimh

Bain úsáid as an .alert-linkrang áirgiúlachta chun naisc dhaite meaitseála a sholáthar go tapa laistigh d'fholáireamh ar bith.

An-mhaith! D'éirigh leat an teachtaireacht thábhachtach foláirimh seo a léamh .

Cinnirí suas! Ní mór d'aird a thabhairt ar an bhfoláireamh seo , ach níl sé thar a bheith tábhachtach.

Rabhadh! Níos fearr a sheiceáil duit féin, nach bhfuil tú ag breathnú ró-mhaith .

Ó Léim! Athraigh cúpla rud agus bain triail as é a chur isteach arís.

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

Aiseolas cothrom le dáta a sholáthar ar dhul chun cinn sreabhadh oibre nó gníomhaíochta le barraí dul chun cinn simplí ach solúbtha.

Comhoiriúnacht tras-bhrabhsálaí

Úsáideann barraí dul chun cinn aistrithe agus beochan CSS3 chun cuid dá n-éifeachtaí a bhaint amach. Ní thacaítear leis na gnéithe seo in Internet Explorer 9 agus thíos nó i leaganacha níos sine de Firefox. Ní thacaíonn Opera 12 le beochan.

Comhoiriúnacht don Bheartas Slándála Ábhar (CSP).

Má tá Beartas Slándála Ábhar (CSP) ag do shuíomh Gréasáin nach gceadaíonn style-src 'unsafe-inline', ní bheidh tú in ann styletréithe inlíne a úsáid chun leithid barra dul chun cinn a shocrú mar a léirítear inár samplaí thíos. I measc na modhanna malartacha chun na leithid atá comhoiriúnach le CSPanna dochta a shocrú tá beagán JavaScript saincheaptha (a shocraíonn element.style.width) nó ranganna CSS saincheaptha a úsáid.

Sampla bunúsach

Barra dul chun cinn réamhshocraithe.

<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 lipéad

Bain an <span>rang .sr-onlyón taobh istigh den bharra dul chun cinn chun céatadán infheicthe a thaispeáint.

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>

Chun a chinntiú go bhfanann téacs an lipéid inléite fiú i gcás céatadáin ísle, smaoinigh ar min-widthbharra dul chun cinn a chur leis.

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>

Roghanna comhthéacsúla

Úsáideann barraí dul chun cinn cuid de na ranganna cnaipe agus foláirimh céanna le haghaidh stíleanna comhsheasmhacha.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Striped

Úsáideann sé grádán chun éifeacht stríocach a chruthú. Níl sé ar fáil in IE9 agus thíos.

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

Beoite

Cuir .activeleis .progress-bar-stripedna stríoca a bheochan ó dheas go clé. Níl sé ar fáil in IE9 agus thíos.

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

Cruachta

Cuir barraí iolracha isteach mar an gcéanna .progresschun iad a chruachadh.

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

Stíleanna oibiachta teibí chun cineálacha éagsúla comhpháirteanna a thógáil (cosúil le tuairimí blag, Tweets, srl) a bhfuil íomhá ailínithe ar chlé nó ar dheis taobh le hábhar téacsach.

Meáin réamhshocraithe

Taispeánann na meáin réamhshocraithe réad meán (íomhánna, físeáin, fuaime) ar chlé nó ar dheis de bhloc inneachair.

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó scelerisque roimh ré sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó scelerisque roimh ré sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Ceannteideal meán neadaithe

Cras sit amet nibh libero, in gravida nulla. Nulla nó scelerisque roimh ré sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Ceannteideal meáin

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

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó 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>

Tá na haicmí .pull-leftann .pull-rightchomh maith agus a úsáideadh roimhe seo mar chuid de chomhpháirt na meán, ach ní dhéantar iad a mheas don úsáid sin mar v3.3.0. Tá siad beagnach coibhéiseach le .media-leftagus .media-right, ach amháin .media-rightba chóir a chur i ndiaidh an .media-bodysa html.

Ailíniú meáin

Is féidir na híomhánna nó meáin eile a ailíniú ó bharr, lár, nó bun. Tá an réamhshocrú ailínithe go barr.

Meáin ailínithe barr

Cras sit amet nibh libero, in gravida nulla. Nulla nó 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 i bhfaucibus.

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

Meáin mheán-ailínithe

Cras sit amet nibh libero, in gravida nulla. Nulla nó 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 i bhfaucibus.

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

Meáin ailínithe ag bun

Cras sit amet nibh libero, in gravida nulla. Nulla nó 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 i bhfaucibus.

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

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

Liosta meáin

Le beagán marcála breise, is féidir leat meáin laistigh den liosta a úsáid (úsáideach le haghaidh snáitheanna tuairimí nó liostaí alt).

Ceannteideal meáin

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

Ceannteideal meán neadaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ceannteideal meán neadaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ceannteideal meán neadaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó 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>

Is comhpháirt sholúbtha chumhachtach iad grúpaí liosta chun ní hamháin liostaí simplí d’eilimintí a thaispeáint, ach cinn casta le hábhar saincheaptha.

Sampla bunúsach

Níl sa ghrúpa liosta is bunúsaí ach liosta neamhordaithe le míreanna liostaí, agus na haicmí cearta. Tóg air leis na roghanna a leanann, nó do CSS féin de réir mar is gá.

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

Suaitheantais

Cuir comhpháirt na suaitheantais le haon mhír ghrúpa liosta agus beidh sé suite go huathoibríoch ar dheis.

14Cras justo odio
2Dapibus agus facilisis i
1Morbi leo risus

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

Míreanna nasctha

Déan liosta de na míreanna a ghrúpáil Linkify trí úsáid a bhaint as clibeanna ancaire in ionad míreanna liosta (ciallaíonn sé sin tuismitheoir <div>in ionad <ul>). Níl gá le tuismitheoirí aonair thart ar gach eilimint.

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

Míreanna cnaipe

Is féidir gur cnaipí iad míreanna grúpa liostaí seachas míreanna liosta (ciallaíonn sé sin tuismitheoir <div>in ionad <ul>). Níl gá le tuismitheoirí aonair thart ar gach eilimint. Ná húsáid na .btnranganna caighdeánacha anseo.

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

Míreanna faoi mhíchumas

Cuir .disabledle .list-group-itemglas é le feiceáil díchumasaithe.

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

Ranganna comhthéacsúla

Úsáid ranganna comhthéacsúla chun míreanna a liostáil, réamhshocraithe nó nasctha. Áirítear freisin .activestáit.

Dapibus agus facilisis i
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum agus Eros

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

Ábhar saincheaptha

Cuir beagnach aon HTML istigh leis, fiú do ghrúpaí liostaí nasctha mar an ceann thíos.

Liosta ceannteideal míre grúpa

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

Liosta ceannteideal míre grúpa

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

Liosta ceannteideal míre grúpa

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>

Cé nach bhfuil sé riachtanach i gcónaí, uaireanta is gá duit do DOM a chur i mbosca. I gcás na gcásanna sin, bain triail as an gcomhpháirt painéil.

Sampla bunúsach

De réir réamhshocraithe, is é an rud go léir a .paneldhéanann ná roinnt bunteorainn agus stuáil a chur i bhfeidhm chun roinnt ábhar a chuimsiú.

Sampla painéal bunúsach

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

Painéal le ceannteideal

Cuir coimeádán ceannteidil le do phainéal go héasca le .panel-heading. Is féidir leat aon cheann a chur san áireamh freisin <h1>- <h6>le .panel-titlerang chun ceannteideal réamhstílithe a chur leis. Mar sin féin, tá na clómhéideanna de <h1>- <h6>sáraithe ag .panel-heading.

Le dathú naisc chuí, bí cinnte naisc a chur i gceannteidil laistigh de .panel-title.

Ceannteideal painéil gan teideal

Ábhar an phainéil

Teideal an phainéil

Ábhar an phainéil

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

Painéal le buntásc

Wrap cnaipí nó téacs tánaisteach i .panel-footer. Tabhair faoi deara nach n-oidhríonn buntásca painéil dathanna agus teorainneacha agus éagsúlachtaí comhthéacsúla á n-úsáid toisc nach bhfuil siad ceaptha a bheith sa tulra.

Ábhar an phainéil

Buntásc an phainéil

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

Roghanna comhthéacsúla

Cosúil le comhpháirteanna eile, déan painéal níos brí go héasca do chomhthéacs áirithe trí aon cheann de na haicmí stáit comhthéacsúla a chur leis.

Teideal an phainéil

Ábhar an phainéil

Teideal an phainéil

Ábhar an phainéil

Teideal an phainéil

Ábhar an phainéil

Teideal an phainéil

Ábhar an phainéil

Teideal an phainéil

Ábhar an phainéil

<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 táblaí

Cuir aon neamhtheorann .tablelaistigh de phainéal le haghaidh dearadh gan uaim. Má tá .panel-body, cuirimid teorainn bhreise le barr an tábla le haghaidh scaradh.

Ceannteideal an phainéil

Roinnt ábhar painéil réamhshocraithe anseo. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id ultricies vehicula ut id elit.

#	Ainm	Sloinne	Ainm úsáideora
1	Marcáil	Otto	@mdo
2	Iacób	Thornton	@saille
3	Larry	an t-éan	@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 bhfuil aon chorp painéil ann, bogann an comhpháirt ó cheanntásc an phainéil go dtí tábla gan bhriseadh.

Ceannteideal an phainéil

#	Ainm	Sloinne	Ainm úsáideora
1	Marcáil	Otto	@mdo
2	Iacób	Thornton	@saille
3	Larry	an t-éan	@twitter

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

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

Le grúpaí liosta

Cuir grúpaí liostaí lánleithead san áireamh go héasca laistigh d'aon phainéal.

Ceannteideal an phainéil

Roinnt ábhar painéil réamhshocraithe anseo. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aeinean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id ultricies vehicula ut id elit.

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

Lig do bhrabhsálaithe toisí fístaispeána nó taispeántais sleamhnán a chinneadh bunaithe ar leithead a mbloc ina bhfuil siad trí chóimheas intreach a chruthú a dhéanfaidh scála ceart ar aon fheiste.

Cuirtear rialacha i bhfeidhm go díreach ar <iframe>, <embed>, <video>, agus <object>eilimintí; úsáid go roghnach aicme shliocht follasach .embed-responsive-itemnuair is mian leat an stíliú le haghaidh tréithe eile a mheaitseáil.

Pro-Leid! Ní gá duit a chur san áireamh frameborder="0"i do <iframe>chuid mar go sáraíonn muid é duit.

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

Réamhshocrú go maith

Bain úsáid as an tobar mar éifeacht shimplí ar eilimint chun éifeacht inset a thabhairt dó.

Féach, táim i dtobar!

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

Ranganna roghnacha

Stuáil rialaithe agus coirnéil chothromú le dhá rang mionathraithe roghnacha.

Féach, tá mé i tobar mór!

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

Féach, tá mé i tobar beag!

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

Comhpháirteanna

Glyphicons

Glyphs ar fáil

Conas a úsáid

Ná meascadh le comhpháirteanna eile

Le húsáid ar eilimintí folamh amháin

Suíomh an chló deilbhín a athrú

Deilbhíní inrochtana

Samplaí

Droim anuas

Sampla

Ailíniú

Seans go mbeidh gá le suíomh breise

.pull-rightAilíniú dímheasta

Ceanntásca

Roinnteoir

Míreanna roghchláir díchumasaithe

Grúpaí cnaipí

Teastaíonn socrú speisialta le haghaidh leideanna uirlisí & popovers i ngrúpaí cnaipí

Cinntigh ceart roleagus cuir lipéad ar fáil

Sampla bunúsach

Barra uirlisí cnaipe

Sizing

Neadaithe

Athrú ingearach

Grúpaí cnaipí a bhfuil údar leo

Teorainneacha a láimhseáil

IE8 agus teorainneacha

Le <a>heilimintí

Naisc ag gníomhú mar cnaipí

Le <button>heilimintí

Cnaipí anuas

Spleáchas breiseán

Íosluchtaigh cnaipe anuas amháin

Scoilt anuas na cnaipí

Sizing

Athrú dropup

Grúpaí ionchuir

Téacs <input>s amháin

Teastaíonn socrú speisialta le haghaidh leideanna uirlisí & popovers i ngrúpaí ionchuir

Ná meascadh le comhpháirteanna eile

Cuir lipéid leis i gcónaí

Sampla bunúsach

Sizing

Seiceálacha agus breiseáin raidió

Breiseáin cnaipe

Cnaipí le dropdowns

Cnaipí deighilte

Cnaipí iolracha

Navs

Teastaíonn breiseán cluaisíní JavaScript le húsáid nascleanúint a dhéanamh le haghaidh painéil cluaisíní

Déan nascleanúint a úsáid mar loingseoireacht inrochtana

Cluaisíní

Pills

údar

Safari agus loingseoireachtaí freagrúla a bhfuil údar leo

Naisc faoi mhíchumas

Níor cuireadh isteach ar fheidhmiúlacht naisc

Ag baint úsáide as dropdowns

Cluaisíní le dropdowns

Pills le dropdowns

Navbar

Barra nascleanúna réamhshocraithe

Ábhar cur thar maoil

Tá breiseán JavaScript de dhíth

Brisphointe barra navbarra soghluaiste tite a athrú

Déan barraí nascleanúna a rochtain

Íomhá branda

Foirmeacha

Fógra maidir le gléasanna soghluaiste

Cuir lipéid leis i gcónaí

Cnaipí

Úsáid comhthéacs-shonrach

Téacs

Naisc nach seoltaí iad

Ailíniú comhpháirte

Ailíniú ceart comhpháirteanna iolracha

Seasta go barr

stuáil coirp ag teastáil

Seasta go bun

`.pull-right`Ailíniú dímheasta

Cinntigh ceart `role`agus cuir lipéad ar fáil

Le `<a>`heilimintí

Le `<button>`heilimintí

Téacs `<input>`s amháin