eisimpleir

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 .

<ul class = "dropdown-menu" role = "clàr-taice" aria-labelledby = "Clàr-taice a-nuas" >   
  <li><a tabindex = "-1" href="#"> Gnìomh </a> < /li >  
  <li><a tabindex = "-1" href="#"> Gnìomh eile </a> </li >  
  <li><a tabindex = "-1" href="#"> Rudeigin eile an-seo </a></li >  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href="#"> Ceangal air a sgaradh </a></li >  
</ul>

Marcaich

A 'coimhead air dìreach an clàr-taice a-nuas, seo an HTML a tha a dhìth. Feumaidh tu inneal-brosnachaidh an tuiteam-sìos agus an clàr a-nuas a phasgadh taobh a-staigh .dropdown, no eileamaid eile a dhearbhas position: relative;. An uairsin dìreach cruthaich an clàr-taice.

<div class = "dropdown" > 
  <!-- Ceangal no putan gus an tuiteam-sìos a thogail -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href="#"> Gnìomh </a> < /li >  
    <li><a tabindex = "-1" href="#"> Gnìomh eile </a> </li >  
    <li><a tabindex = "-1" href="#"> Rudeigin eile an-seo </a></li >  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href="#"> Ceangal air a sgaradh </a></li >  
  </ul>
</div>

Roghainnean

Co-thaobhadh clàran-bìdh air an taobh cheart agus cuir ris a’ toirt a-steach ìrean a bharrachd de dropdowns.

A 'co-thaobhadh nan clàran-bìdh

Cuir .pull-rightri a .dropdown-menugu deas co-thaobhadh ris a’ chlàr tuiteam-sìos.

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

Roghainnean clàr-taice ciorramach

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

<ul class = "dropdown-menu" role = "clàr-taice" aria-labelledby = "Clàr-taice a-nuas" >   
  <li><a tabindex = "-1" href="#"> Ceangal cunbhalach </a> </li >  
  <li class = "disabled" ><a tabindex = " -1" href = "#"> Ceangal à comas </a> </li >   
  <li><a tabindex = "-1" href="#"> Ceangal eile </a> </li >  
</ul>

Fo-chlàran air dropdowns

Cuir ìre a bharrachd de chlàran-taice a-steach, a’ nochdadh air hover mar an fheadhainn aig OS X, le cuid de chur-ris sìmplidh. Cuir .dropdown-submenuri gin liann an clàr-taice a tha ann mu thràth airson stoidhle fèin-ghluasadach.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex="-1" href="#"> Barrachd roghainnean </a> _ _ _ _  
    <ul class = ""dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Eisimpleirean

Dà roghainn bunaiteach, còmhla ri dà atharrachadh nas sònraichte.

Buidheann putan singilte

Paisg sreath de phutanan le .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Clì </button> 
  <button class = "btn" > Meadhan </button> 
  <button class = "btn" > Deas </button> 
</div>

Buidheann ioma-phutan

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" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Buidhnean putan dìreach

Dèan seata de phutanan a’ nochdadh air an cruachadh gu dìreach seach gu còmhnard.

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

Bogsa seic agus blasan rèidio

Faodaidh buidhnean putan a bhith ag obair mar rèidiothan cuideachd, far nach bi ach aon phutan gnìomhach, no bogsaichean-seic, far am faod àireamh sam bith de phutanan a bhith gnìomhach. Thoir sùil air na docaichean JavaScript airson sin.

Dropdowns ann am buidhnean putan

Cinn suas!Feumaidh putanan le dropdowns a bhith air am pasgadh leotha fhèin .btn-grouptaobh a-staigh a .btn-toolbarairson toirt seachad ceart.

Geàrr-chunntas agus eisimpleirean

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.

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle = "dropdown" href = "#"> _ _   
    Gnìomh
    <span class = "caret" ></span> 
  </a>
  <ul class = ""dropdown-menu" > 
    <!-- ceanglaichean clàr-taice -->
  </ul>
</div>

Ag obair leis a h-uile meud putan

Bidh dropdowns putan ag obair aig meud sam bith: .btn-large, .btn-small, no .btn-mini.

Feumaidh JavaScript

Feumaidh tuiteam sìos putan am plugan tuiteam-sìos Bootstrap gus obrachadh.

Ann an cuid de chùisean - leithid gluasadach - leudaichidh clàran-bìdh taobh a-muigh a’ phort-seallaidh. Feumaidh tu an co-thaobhadh fhuasgladh le làimh no le JavaScript àbhaisteach.

Split dropdowns putanan

A’ togail air stoidhlichean buidheann putan agus comharrachadh, is urrainn dhuinn putan sgoltadh a chruthachadh gu furasta. Tha putanan roinnte a’ nochdadh gnìomh àbhaisteach air an taobh chlì agus tog sìos air an taobh cheart le ceanglaichean co-theacsail.

<div class = "btn-group" > 
  <button class = "btn" > Gnìomh </button> 
  <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >  
    <span class = "caret" ></span> 
  </putan>
  <ul class = ""dropdown-menu" > 
    <!-- ceanglaichean clàr-taice -->
  </ul>
</div>

Meudan

Cleachd na clasaichean putan a bharrachd .btn-mini, .btn-small, no .btn-largeairson meud.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Gnìomh </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "tuiteam sìos" >  
    <span class = "caret" ></span> 
  </putan>
  <ul class = ""dropdown-menu" > 
    <!-- ceanglaichean clàr-taice -->
  </ul>
</div>

Clàr-taice dropup

Faodar clàran-bìdh tuiteam sìos a thogail bhon bhonn gu h-àrd le bhith a’ cur aon chlas ri pàrant dlùth .dropdown-menu. Tionndaidhidh e stiùir a .caret’ chlàr agus ath-shuidhichidh e a’ chlàr fhèin gus gluasad bhon bhonn gu h-àrd an àite a bhith bhon mhullach sìos.

<div class = "dropup btn-group" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >  
    <span class = "caret" ></span> 
  </putan>
  <ul class = ""dropdown-menu" > 
    <!-- ceanglaichean clàr-taice -->
  </ul>
</div>

Eas-bhuannachdan aotrom An aon chomharradh, clasaichean eadar-dhealaichte

Bidh a h-uile pàirt nav an seo - tabaichean, pills, agus liostaichean - a’ roinn an aon chomharra bunaiteach agus stoidhlichean tron .nav​​​​chlas.

Tabaichean bunaiteach

Gabh gu cunbhalach <ul>de cheanglaichean agus cuir ris .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "gnìomhach" > 
    <a href="#"> Dachaigh </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> </li> 
  <li><a href = "#"> ... </a> </li> 
</ul>

Pilean bunaiteach

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

<ul class = "nav nav-pills" > 
  <li class = "gnìomhach" > 
    <a href="#"> Dachaigh </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> </li> 
  <li><a href = "#"> ... </a> </li> 
</ul>

Stàite ciorramach

Airson co-phàirt nav sam bith (tabs, pills, no liosta), cuir ris .disabledairson ceanglaichean glasa agus gun bhuaidhean hover . Bidh ceanglaichean fhathast ri cliogadh, ge-tà, mura toir thu air falbh am hreffeart. Air neo, dh’ fhaodadh tu JavaScript àbhaisteach a chuir an gnìomh gus casg a chuir air na cliogan sin.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href="#"> Dachaigh </a> < /li >  
  ...
</ul>

Co-thaobhadh co-phàirteach

Gus ceanglaichean nav a cho-thaobhadh, cleachd na clasaichean .pull-leftno .pull-rightgoireasan. Cuiridh an dà chlas fleòdradh CSS ris an taobh ainmichte.

Stackable

Leis gu bheil tabaichean agus pilean còmhnard gu gnàthach, dìreach cuir dàrna clas, .nav-stacked, gus toirt orra nochdadh air an cruachadh gu dìreach.

Tabaichean air an cruachadh

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

Pills air an cruachadh

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

Droch-dhìol

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 class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "tuiteam sìos"
       href = "#" >
        Droch-dhiol
        <b class = "caret" ></b> 
      </a>
    <ul class = ""dropdown-menu" > 
      <!-- ceanglaichean -->
    </ul>
  </li>
</ul>

Pills le dropdowns

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "tuiteam sìos"
       href = "#" >
        Droch-dhiol
        <b class = "caret" ></b> 
      </a>
    <ul class = ""dropdown-menu" > 
      <!-- ceanglaichean -->
    </ul>
  </li>
</ul>

Nav liostaichean

Dòigh shìmplidh is furasta airson buidhnean de cheanglaichean seòlaidh a thogail le cinn-cinn roghainneil. Tha iad air an cleachdadh as fheàrr ann am bàraichean-taoibh mar an Finder ann an OS X.

Eisimpleir liosta nav

Gabh liosta de cheanglaichean agus cuir ris class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Liosta bann-cinn </li> 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li><a href="#"> Leabharlann </a> < /li > 
  ...
</ul>

Thoir an aireAirson neadachadh taobh a-staigh liosta seòlaidh, cuir a-steach class="nav nav-list"air nead sam bith <ul>.

Luchd-sgaraidh còmhnard

Cuir roinneadh còmhnard ris le bhith a’ cruthachadh rud liosta falamh leis a’ chlas .divider, mar sin:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Clàr-taice nav

Thoir beò na tabaichean agad le plugan sìmplidh gus gluasad eadar susbaint tro tabaichean. Bidh Bootstrap a’ fighe a-steach tabaichean tabbable ann an ceithir stoidhlichean: mullach (bunaiteach), deas, bonn, agus clì.

Eisimpleir clàr

Gus tabaichean a dhèanamh tabable, cruthaich .tab-paneID sònraichte airson a h-uile taba agus cuir a-steach iad .tab-content.

<div class = "tabbable" > <!-- Chan eil feum air ach airson tabaichean clì/deas -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Earrann 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "taba" > Earrann 2 </a></li>  
  </ul>
  <div class = "tab-susbaint" > 
    <div class = "tab-pane gnìomhach" id = "tab1" >  
      <p> Tha mi ann an Roinn 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, tha mi ann an Roinn 2. </p>
    </div>
  </div>
</div>

Slaod anns na tabaichean

Gus toirt air tabaichean a dhol a-steach, cuir .faderis gach .tab-pane.

Tha feum air plugan jQuery

Tha a h-uile taba tabable air a stiùireadh leis a’ plugan jQuery aotrom againn. Leugh tuilleadh mu mar a bheir thu beò tabaichean tabbable air duilleag JavaScript docs .

Clàr ann an stiùireadh sam bith

Tabaichean air a 'bhonn

Dèan flip air òrdugh an HTML agus cuir clas ris gus tabaichean a chuir air a’ bhonn.

<div class = "tabable tabaichean-gu h-ìosal" > 
  <div class = "tab-susbaint" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabaichean air an taobh chlì

Dèan iomlaid air a’ chlas gus tabaichean a chuir air an taobh chlì.

<div class = "clì tabaichean-clì" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-susbaint" > 
    ...
  </div>
</div>

Tabaichean air an làimh dheis

Dèan iomlaid air a’ chlas gus tabaichean a chuir air an taobh cheart.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-susbaint" > 
    ...
  </div>
</div>

Bàr seòlaidh bunaiteach

Airson tòiseachadh, tha navbars statach (gun a bhith ceangailte ris a’ mhullach) agus a’ toirt a-steach taic airson ainm pròiseict agus seòladh bunaiteach. Cuir fear an àite sam bith taobh a-staigh .container, a shuidhicheas leud do làrach agus susbaint.

<div class = "navbar" > 
  <div class = "navbar-staigh" > 
    <a class="brand" href="#"> Tiotal </a> _ _ _ _ _  
    <ul class = "nav" > 
      <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
      <li><a href = "#"> Ceangal </a> </li> 
      <li><a href = "#"> Ceangal </a> </li> 
    </ul>
  </div>
</div>

Co-phàirtean navbar

Brand

Feumaidh ceangal sìmplidh airson do bhrand no ainm pròiseict a shealltainn ach tag acair.

<a class="brand" href="#"> Ainm a ' phròiseict </a> _ _  

Ceanglaichean nav

Tha nithean Nav furasta an cur ris tro liostaichean gun òrdugh.

<ul class = "nav" > 
  <li class = "gnìomhach" > 
    <a href="#"> Dachaigh </a> _ _ _ 
  </li>
  <li><a href = "#"> Ceangal </a> </li> 
  <li><a href = "#"> Ceangal </a> </li> 
</ul>

Is urrainn dhut gu furasta luchd-sgaraidh a chuir ris na ceanglaichean nav agad le rud liosta falamh agus clas sìmplidh. Dìreach cuir seo eadar ceanglaichean:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Foirmean

Gus foirm a stoidhleachadh agus a shuidheachadh gu ceart taobh a-staigh a’ bhàr nav, cuir ris na clasaichean iomchaidh mar a chithear gu h-ìosal. Airson foirm bunaiteach, cuir a-steach .navbar-formagus an dàrna cuid .pull-leftno .pull-rightgus a cho-thaobhadh gu ceart.

<form class = "navbar-form tarraing-clì" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Cuir a-steach </button>  
</form>

Foirm lorg

Airson foirm sgrùdaidh nas gnàthaichte, cuir .navbar-searchris formagus .search-queryris an cuir a-steach airson stoidhlichean sònraichte anns a’ bhàr seòlaidh.

<form class = "navbar-search tarraing-clì" > 
  <input type = "text" class = "search-query" placeholder = "Lorg" >   
</form>

Co-thaobhadh co-phàirteach

Co-thaobhadh ceanglaichean nav, foirm sgrùdaidh, no teacsa, cleachd na clasaichean .pull-leftno goireasan. .pull-rightCuiridh an dà chlas fleòdradh CSS ris an taobh ainmichte.

A 'cleachdadh dropdowns

Cuir dropdowns agus dropups ris an inneal-seòlaidh le beagan comharrachaidh agus am plugan tuiteam-sìos JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "tuiteam sìos">   
      Cunntas
      <b class = "caret" ></b> 
    </a>
    <ul class = ""dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Tadhail air na sgrìobhainnean tuiteam-sìos JavaScript airson barrachd chomharran agus fiosrachadh mu bhith a’ gairm dropdowns.

Teacs

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

Eadar-dhealachaidhean taisbeanaidh roghainneil

Ceartaich am bàr nav gu mullach no bonn a’ phuirt-seallaidh le clas a bharrachd air an div as fhaide a-muigh, .navbar.

Stèidhichte gu mullach

Cuir ris .navbar-fixed-topagus cuimhnich cunntas a thoirt air an àite falaichte fodha le bhith a’ cur co-dhiù 40px paddingris an fhaidhle <body>. Dèan cinnteach gun cuir thu seo ris às deidh a’ phrìomh Bootstrap CSS agus ron CSS freagairteach roghainneil.

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

Stèidhichte gu bonn

Cuir .navbar-fixed-bottomna àite.

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

Bàr seòlaidh mullach statach

Cruthaich bàr seòlaidh làn-leud a ghluaiseas air falbh leis an duilleag le bhith a’ cur .navbar-static-top. Eu-coltach ris a’ .navbar-fixed-topchlas, chan fheum thu pleadhag sam bith atharrachadh air an body.

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

Bathar-bog freagairteach

Gus bàr-seòlaidh freagairteach a tha a’ tuiteam sìos a chuir an gnìomh, paisg do shusbaint navbar ann an div anns a bheil , .nav-collapse.collapse, agus cuir am putan toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-staigh" > 
    <div class = "container" > 
 
      <!-- Tha .btn-navbar air a chleachdadh mar an togl airson susbaint a’ bhàr seòlaidh a thuit -->
      <a class="btn btn-navbar" data-toggle = "tuiteam" data-target = ".nav-collapse"> _ _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Dèan cinnteach gum fàg thu am brannd a-muigh an sin ma tha thu airson gun tèid a shealltainn -->
      <a class="brand" href="#"> Ainm a ' phròiseict </a> _ _  
 
      <!-- A h-uile dad a tha thu ag iarraidh falaichte aig 940px no nas lugha, cuir a-steach an seo -->
      <div class = "tuiteam nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Atharrachadh neo-dhìreach

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

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

Eisimpleirean

Aon eisimpleir air a shealltainn oir dh’ fhaodadh e a bhith air a thaisbeanadh thairis air grunn dhuilleagan.

<ul class = "breadcrumb" > 
  <li><a href="#"> Dachaigh </a> < span class = " divider " > / </span></li>   
  <li><a href="#"> Leabharlann </a> < span class = " divider " > / </span></li>   
  <li class = "active" > Dàta </li> 
</ul>

Duilleag àbhaisteach

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.

<div class = "duilleag" > 
  <ul>
    <li><a href = "#"> Roimhe </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 = "#"> Air adhart </a></li> 
  </ul>
</div>

Roghainnean

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.

<div class = "duilleag" > 
  <ul>
    <li class = "disabled" > <a href="#"> & laquo ; </a></li>  
    <li class = "gnìomhach" ><a href="#"> 1 </a> < /li >  
    ...
  </ul>
</div>

Faodaidh tu acraichean gnìomhach no ciorramach atharrachadh gu roghnach airson rèisean gus gnìomhachd cliog a thoirt air falbh fhad ‘s a chumas tu na stoidhlichean a tha san amharc.

<div class = "duilleag" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Meudan

A bheil thu ag iarraidh duilleag nas motha no nas lugha? Cuir ris .pagination-large, .pagination-small, no .pagination-miniairson meudan a bharrachd.

<div class = "duilleag-duilleag-mòr" > 
  <ul>
    ...
  </ul>
</div>
<div class = "duilleag" > 
  <ul>
    ...
  </ul>
</div>
<div class = "duilleag-duilleag-beag" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Co-thaobhadh

Cuir aon de dhà chlas roghnach ris gus co-thaobhadh nan ceanglaichean duilleag atharrachadh: .pagination-centeredagus .pagination-right.

<div class = "duilleag stèidhichte air duilleag" > 
  ...
</div>

<div class = "duilleag-duilleig-deas" > 
  ...
</div>

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.

<ul class = "pager" > 
  <li><a href = "#"> Air adhart </a> </li> 
  <li><a href = "#"> Air adhart </a></li> 
</ul>

Ceanglaichean ceangailte

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

<ul class = "pager" > 
  <li class = "roimhe seo" > 
    <a href = "#"> & larr; Nas sine </a> 
  </li>
  <li class = "ath" > 
    <a href = "#"> Nas ùire & rarr ; </a> 
  </li>
</ul>

Stàite ciorramach roghainneil

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

<ul class = "pager" > 
  <li class = "a chur à comas roimhe" > 
    <a href = "#"> & larr; Nas sine </a> 
  </li>
  ...
</ul>

Bileagan

Bràistean

Gu furasta tuiteam às a chèile

Airson buileachadh furasta, bidh bileagan is bràistean dìreach a’ tuiteam sìos (tro :emptyroghnaichear CSS) nuair nach eil susbaint ann.

Aonad gaisgeach

Pàirt aotrom, sùbailte gus prìomh shusbaint a thaisbeanadh air do làrach. Bidh e ag obair gu math air làraich margaidheachd agus susbaint trom.

<div class = "aonad-gaisgeach" > 
  <h1> Ceann < /h1>
  <p> Tagline </p>
  <p>
    <a class="btn btn-bun-sgoile btn-large"> _ 
      Ionnsaich barrachd
    </a>
  </p>
</div>

Ceann-duilleig

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

<div class = "ceann-duilleig" > 
  <h1> Eisimpleir bann-cinn na duilleige <small> Fo-theacsa airson bann-cinn </small></h1>
</div>

Mion-dhealbhan bunaiteach

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

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

Carson a chleachdas tu mion-dhealbhan

Tha mion-dhealbhan ( .media-gridsuas gu v1.4 roimhe seo) sgoinneil airson cliathaichean de dhealbhan no bhideothan, toraidhean sgrùdadh ìomhaighean, toraidhean reic, pasganan, agus mòran a bharrachd. Faodaidh iad a bhith nan ceanglaichean no susbaint statach.

Comharrachadh sìmplidh, sùbailte

Tha comharrachadh mion-dhealbh sìmplidh - is e ulle àireamh sam bith de lieileamaidean a tha a dhìth. Tha e cuideachd air leth sùbailte, a’ toirt cothrom do sheòrsa sam bith de shusbaint le dìreach beagan a bharrachd comharrachaidh do shusbaint a phasgadh.

A’ cleachdadh meudan colbh clèithe

Mu dheireadh, bidh am pàirt òrdagan a’ cleachdadh chlasaichean siostam clèithe a th’ ann mar-thà - leithid .span2no .span3- airson smachd a chumail air tomhasan mion-dhealbhan.

Marcaich

Mar a chaidh ainmeachadh roimhe, tha an comharradh riatanach airson òrdagan aotrom agus sìmplidh. Seo sùil air an t-suidheachadh bunaiteach airson dealbhan ceangailte :

<ul class = "mion-dhealbhan" > 
  <li class = "span4" > 
    <a href="#" class="mion-dhealbh"> _ _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Airson susbaint HTML àbhaisteach ann an òrdagan, bidh an comharrachadh ag atharrachadh beagan. Gus susbaint ìre bloca a cheadachadh an àite sam bith, bidh sinn ag iomlaid <a>airson a <div>leithid:

<ul class = "mion-dhealbhan" > 
  <li class = "span4" > 
    <div class = "mion-dhealbh" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Leubail mion-dhealbh </h3>
      <p> Ceann-iomall mion-dhealbh... </p>
    </div>
  </li>
  ...
</ul>

Tuilleadh eisimpleirean

Dèan sgrùdadh air na roghainnean agad gu lèir leis na diofar chlasaichean clèithe a tha rim faighinn dhut. Faodaidh tu cuideachd diofar mheudan a mheasgachadh agus a mhaidseadh.

Rabhadh bunaiteach

Paisg teacsa sam bith agus putan cuir às do roghainn .alertairson teachdaireachd rabhaidh bunaiteach.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &amannan; </putan>   
  <strong> Rabhadh! </strong> Feuch an dèan thu fhèin thu fhèin, chan eil thu a 'coimhead ro mhath.
</div>

Cuir às do na putanan

Tha feum aig brobhsairean Mobile Safari agus Mobile Opera, a bharrachd air a’ data-dismiss="alert"fheart, href="#"airson rabhaidhean a chuir às nuair a bhios tu a’ cleachdadh <a>tag.

<a href="#" class="close" data-dismiss="alert"> & amannan ; _ _ _ _ _ </a>   

Air neo, faodaidh tu <button>eileamaid a chleachdadh leis a’ bhuadh dàta, a tha sinn air roghnachadh a dhèanamh airson na docaichean againn. Nuair a bhios tu a’ cleachdadh <button>, feumaidh tu a bhith a’ toirt a-steach type="button"no chan fhaod na foirmean agad a chuir a-steach.

<button type = "button" class = "close" data-dismiss = "alert" > &amannan; </putan>   

Cuir às do rabhaidhean tro JavaScript

Cleachd am plugan rabhaidhean jQuery gus rabhaidhean a chuir às gu sgiobalta agus gu furasta.

Roghainnean

Airson teachdaireachdan nas fhaide, àrdaich am pleadhag air mullach is bonn an inneal-rabhaidh le bhith a’ cur .alert-block.

<div class = "bacadh rabhaidh" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &amannan; </putan>   
  <h4> Rabhadh! </h4>
  An sgrùdadh as fheàrr dhut fhèin, chan eil thu ...
</div>

Roghainnean co-theacsail

Cuir clasaichean roghainneil ris gus ciall an rabhaidh atharrachadh.

Mearachd no cunnart

<div class = "mearachd rabhaidh" > 
  ...
</div>

Soirbheachas

<div class = "alert alert-success" > 
  ...
</div>

Fiosrachadh

<div class = "fios rabhaidh" > 
  ...
</div>

Eisimpleirean agus comharrachadh

Bunaiteach

Bàr adhartais bunaiteach le caisead dìreach.

<div class = "adhartas" > 
  <div class = "bar" style = " leud : 60 %; " </div>   
</div>

Air a stialladh

A’ cleachdadh caisead gus buaidh stiallach a chruthachadh. Chan eil e ri fhaighinn ann an IE7-8.

<div class = "stiall adhartais" > 
  <div class = "bar" style = " leud : 20 %; " </div>   
</div>

Beothaichte

Cuir .activeris .progress-stripedgus na stiallan a bheothachadh bho dheas gu clì. Chan eil e ri fhaighinn anns a h-uile dreach de IE.

<div class = "adhartas gnìomhach le strì an adhartais" > 
  <div class = "bar" style = " leud : 40 %; " </div>   
</div>

Air a chruachadh

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

<div class = "adhartas" > 
  <div class = "bar bar-soirbheachas" style = " width : 35 %; " </div>   
  <div class = "bar-rabhadh bàr" style = " width : 20 %; " </div>   
  <div class = "bar bar-cunnart" style = " width : 10 %; " </div>   
</div>

Roghainnean

Dathan a bharrachd

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

<div class = "modh adhartas-fiosrachaidh" > 
  <div class = "bar" style = " leud : 20 % " ></div>   
</div>
<div class = "adhart adhartas-soirbheachas" > 
  <div class = "bar" style = " leud : 40 % " ></div>   
</div>
<div class = "rabhadh adhartais" > 
  <div class = "bar" style = " leud : 60 % " ></div>   
</div>
<div class = "adhartas adhartas-cunnart" > 
  <div class = "bar" style = " leud : 80 % " ></div>   
</div>

Bàraichean stiallach

Coltach ris na dathan cruaidh, tha bàraichean adhartais stiallach eadar-dhealaichte againn.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " leud : 20 % " ></div>   
</div>
<div class = "adhartas adhartas-soirbheachas adhartas-striped" > 
  <div class = "bar" style = " leud : 40 % " ></div>   
</div>
<div class = "adhart adhartas-rabhadh adhartais-stripe" > 
  <div class = "bar" style = " leud : 60 % " ></div>   
</div>
<div class = "adhartas adhartas-cunnart adhartas-striped" > 
  <div class = "bar" style = " leud : 80 % " ></div>   
</div>

Taic brabhsair

Bidh bàraichean adhartais a’ cleachdadh caiseadan CSS3, eadar-ghluasadan, agus beòthachaidhean gus am buaidh gu lèir a choileanadh. Chan eil na feartan sin a’ faighinn taic ann an IE7-9 no tionndaidhean nas sine de Firefox.

Chan eil tionndaidhean nas tràithe na Internet Explorer 10 agus Opera 12 a' cur taic ri beòthachaidhean.

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.

Eisimpleir bunaiteach

Tha na meadhanan bunaiteach a’ ceadachadh stuth meadhanan a chuir air bhog (ì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 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.

<div class = "media" > 
  <a class="pull-left" href="#"> _ _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-corp" > 
    <h4 class = "media-heading" > Ceann nam meadhanan </h4> 
    ...
 
    <!-- Rud meadhain neadachaidh -->
    <div class = "media" > 
      ...
    </div>
  </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).

<ul class = "liosta-meadhain" > 
  <li class = "media" > 
    <a class="pull-left" href="#"> _ _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-corp" > 
      <h4 class = "media-heading" > Ceann nam meadhanan </h4> 
      ...
 
      <!-- Rud meadhain neadachaidh -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

tobraichean

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

<div class = "gu math"  >
  ...
</div>

Clasaichean roghainneil

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

<div class = "math gu math mòr" > 
  ...
</div>

<div class = "math gu math beag" > 
  ...
</div>

Dùin an ìomhaigh

Cleachd an ìomhaigh dlùth choitcheann airson cuir às do shusbaint mar mhodalan agus rabhaidhean.

<button class = "close" > &amannan; </putan> 

Feumaidh innealan iOS href="#"tachartasan airson cliogadh nam b’ fheàrr leat acair a chleachdadh.

<a class="close" href="#"> & times ; _ _ _ </a>  

Clasaichean neach-cuideachaidh

Clasaichean sìmplidh le fòcas airson taisbeanadh beag no atharrachadh giùlain.

.tarraing-chlì

Cuir air bhog eileamaid air fhàgail

clas = "tarraing-chlì"

. tarraing - clì {
  fleòdradh : left ;
}

.tarraing-deas

Cuir air bhog eileamaid gu deas

clas = "tarraing-deas"

. tarraing - deas {
  fleòdradh : right ;
}

.sàmhach

Atharraich dath an eileamaid gu#999

clas = "sàmhach"

. sàmhach {
  dath : #999; 
}

.soilleir

Glan an floatair eileamaid sam bith

clas = "clearfix"

. soilleir {
  * zoom : 1 ; 
  &: roimhe ,
  &: an dèidh {
    taisbeanadh : table ;
    susbaint : "" ; 
  }
  &: an dèidh {
    soilleir : an dà chuid ;
  }
}