Co-phàirtean

Tha dusanan de cho-phàirtean ath-chleachdadh air an toirt a-steach do Bootstrap gus seòladh, rabhaidhean, popovers agus mòran a bharrachd a thoirt seachad.

Buidhnean putan

Cleachd buidhnean putan gus grunn phutanan a cheangal ri chèile mar aon phàirt cho-mheasgaichte. Tog iad le sreath de <a>no <button>eileamaidean.

Cleachdaidhean as fheàrr

Tha sinn a’ moladh an stiùireadh a leanas airson a bhith a’ cleachdadh buidhnean putan agus bàraichean-inneal:

Cleachd an aon eileamaid an-còmhnaidh ann am buidheann putan singilte, <a>no <button>.
Na measgachadh putanan de dhathan eadar-dhealaichte san aon bhuidheann putan.
Cleachd ìomhaighean a bharrachd air no an àite teacsa, ach dèan cinnteach gun cuir thu a-steach teacsa alt agus tiotal far a bheil sin iomchaidh.

Bu chòir buidhnean Putan co- cheangailte le dropdowns (faic gu h-ìosal) a bhith air an gairm a-mach air leth agus an-còmhnaidh a’ toirt a-steach cùram tuiteam-sìos gus an giùlan a tha san amharc a chomharrachadh.

Eisimpleir bunaiteach

Seo mar a tha an HTML a’ coimhead airson buidheann putan àbhaisteach a chaidh a thogail le putanan taga acair:

Clì Meadhanach Deas

<div class = "btn-group" > 
  <a class="btn" href="#"> 1 </a> _ _ _ _ _  
  <a class="btn" href="#"> 2 </a> _ _ _ _ _  
  <a class="btn" href="#"> 3 </a> _ _ _ _ _  
</div>

Eisimpleir bàr-inneal

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>

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.

faigh javascript»

Ceann suas

Tha CSS airson buidhnean putan ann am faidhle air leth, button-groups.less.

Clò-bhuail putan

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

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

Comharrachadh eisimpleir

Coltach ri buidheann putan, bidh an comharrachadh againn a’ cleachdadh comharrachadh putan cunbhalach, ach le dòrlach de rudan a bharrachd gus an stoidhle ùrachadh agus taic a thoirt don plugan sìos jQuery aig Bootstrap.

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

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.

Comharrachadh eisimpleir

Bidh sinn a’ leudachadh air na putanan tuiteam-sìos àbhaisteach gus dàrna gnìomh putan a thoirt seachad a bhios ag obair mar inneal tuiteam-sìos air leth.

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

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

Clas bunaiteach cumhachdach

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

Nuair a chleachdadh

Tha tabaichean is pilean math airson earrannan de shusbaint no airson seòladh eadar duilleagan de shusbaint co-cheangailte.

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.

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>

Stackable Dèan tabaichean no pilean dìreach

Ciamar a chruachadh iad

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>

Dropdowns Airson co-phàirtean adhartach nav

Clàran beairteach air an dèanamh furasta

Tha clàran-bìdh tuiteam-sìos ann an tabaichean Bootstrap agus pills gu math furasta agus chan fheum iad ach beagan HTML a bharrachd agus plugan jQuery aotrom.

Rach a-null gu duilleag Javascript gus na docaichean a leughadh mu bhith a’ tòiseachadh dropdowns ann am Bootstrap.

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>

Liostaichean Nav Tog seòlaidhean sìmplidh air an càrnadh, sgoinneil airson bàraichean-taoibh

Seòladh stoidhle tagraidh

Tha liostaichean Nav a’ toirt seachad dòigh shìmplidh is fhurasta 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.

Gu structarail, tha iad air an togail air na h-aon stoidhlichean seòlaidh bunaiteach ri tabaichean is pills, agus mar sin tha cleachdadh agus gnàthachadh furasta.

Le ìomhaighean

Tha liostaichean Nav cuideachd furasta an uidheamachadh le ìomhaighean. Cuir an taga ceart <i>leis a’ chlas agus tha thu deiseil.

Eisimpleir liosta nav

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Ceann-cinnidh liosta
  </li>
  <li class = "gnìomhach" > 
    <a href="#"> Dachaigh </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Leabharlann </a> _ _ _ 
  </li>
  ...
</ul>

Eisimpleir le ìomhaighean

An aon eisimpleir, ach le <i>tagaichean airson ìomhaighean.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#"> _ _ _ 
      <i class = "icon-book" ></i> 
      Leabharlann
    </a>
  </li>
  ...
</ul>

Tabbable nav Thoir tabaichean beò tro javascript

Dè tha air a ghabhail a-steach

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

Tha e furasta atharrachadh eatorra agus chan fheum e ach glè bheag de chomharradh atharrachadh.

Eisimpleir clàr

Gus tabaichean a dhèanamh tablaidean, paisg iad .nav-tabsann an div eile leis a’ chlas .tabbable.

Tha mi ann an Roinn 1.

Halò, tha mi ann an Earrann 2.

A nighean, is e seo Earrann 3.

Plugin gnàthaichte 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.

space → Luchdaich a-nuas javascript

Comharrachadh dìreach

Le bhith a’ cleachdadh tabaichean taba tha feum air div fillte, seata de thabaichean, agus seata de phìosan susbaint tabbable.

<div class = "clàr" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "taba" > Earrann 1 </a></li>   
    <li><a href = "#2" data-toggle = "taba" > Earrann 2 </a></li>  
  </ul>
  <div class = "tab-susbaint" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Tha mi ann an Roinn 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Howdy, tha mi ann an Roinn 2. </p>
    </div>
  </div>
</div>

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.

Tha mi ann an Roinn A.

Halò, tha mi ann an Roinn B.

A nighean, is e seo Roinn C.

<div class = "cluaisean taba-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ì.

Tha mi ann an Roinn A.

Halò, tha mi ann an Roinn B.

A nighean, is e seo Roinn C.

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

Tha mi ann an Roinn A.

Halò, tha mi ann an Roinn B.

A nighean, is e seo Roinn C.

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

Eisimpleir de navbar statach

Eisimpleir de bhàr seòlaidh statach (nach eil ceangailte ris a’ mhullach) le ainm pròiseict, seòladh, agus foirm sgrùdaidh.

Sgafall navbar

Chan fheum an navbar ach beagan divs gus a structaradh gu math airson taisbeanadh statach no stèidhichte.

<div class = "navbar" > 
  <div class = "navbar-staigh" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navbar stèidhichte

Gus am bàr seòlaidh a cheangal ri mullach an t-seallaidh, cuir .navbar-fixed-topris an div as fhaide a-muigh, .navbar.

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

Anns an CSS agad, feumaidh tu cuideachd cunntas a thoirt air an tar-tharraing a tha e ag adhbhrachadh le bhith a’ cur 40px no barrachd de phlugadh ris an fhaidhle <body>. Dèan cinnteach gun cuir thu seo ris às deidh a’ phrìomh Bootstrap CSS agus ron CSS freagairteach roghainneil.

Ainm branda

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>

Foirm lorg

Bidh foirmean sgrùdaidh a’ faighinn stoidhlichean àbhaisteach anns a’ bhàr seòlaidh leis a’ .navbar-searchchlas. Cuir a-steach .pull-leftno .pull-rightair an formgus a cho-thaobhadh.

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

Atharrachadh freagairteach roghainneil

A rèir na tha de shusbaint anns a’ bhàr-mullaich agad, is dòcha gum bi thu airson na roghainnean freagairteach a chuir an gnìomh. Gus sin a dhèanamh, paisg an t-susbaint nav agad 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 = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Cinn suas! Feumaidh am bàr seòlaidh freagairteach am plugan tuiteam .

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 luchd-sgaraidh a chuir ris na ceanglaichean nav agad gu furasta le rud liosta falamh agus clas sìmplidh. Dìreach cuir seo eadar ceanglaichean:

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

Co-thaobhadh co-phàirteach

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

A 'cur ris dropdowns

Tha e gu math sìmplidh a bhith a’ cur dropdowns ris an nav, ach tha feum air ar plugan javascript a chleachdadh .

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

space → Luchdaich a-nuas javascript

Carson a chleachdas iad

Bithear a’ cleachdadh seòladh Breadcrumb mar dhòigh air sealltainn do luchd-cleachdaidh far a bheil iad taobh a-staigh app no làrach, ach chan ann airson prìomh sheòladh. Cùm an cleachdadh gann agus goirid gus a bhith nas èifeachdaiche.

Eisimpleirean

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

Marcaich

Is e HTML an liosta àbhaisteach neo-òrdaichte agad le ceanglaichean.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> Dachaigh < /span> <span class= " divider " > / < / span >   
  </li>
  <li>
    <a href="#"> Leabharlann </a> < span class = " divider " > / </span>   
  </li>
  <li class = "gnìomhach" > 
    <a href="#"> Dàta </a> _ _ _ 
  </li>
</ul>

Duilleagan ioma-dhuilleag

Nuair a chleachdadh

Duilleagan ultra simplistic agus le glè bheag de stoidhle 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.

Ceanglaichean duilleag stàiteil

Tha ceanglaichean gnàthaichte agus ag obair ann an grunn shuidheachaidhean leis a’ chlas cheart. .disabledairson ceanglaichean nach gabh cliogadh agus .activeairson duilleag làithreach.

Co-thaobhadh sùbailte

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

Eisimpleirean

Tha am pàirt duilleagachaidh bunaiteach sùbailte agus ag obair ann an grunn atharrachaidhean.

Marcaich

Air a phasgadh ann an <div>duilleag , chan eil ann an duilleag ach <ul>.

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

Pager Airson ceanglaichean sgiobalta roimhe agus an ath rud

Mu dheidhinn pager

Is e seata de cheanglaichean a th’ anns a’ cho-phàirt pager airson buileachadh duilleagachaidh sìmplidh le comharrachadh aotrom agus eadhon stoidhlichean nas aotroime. 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="#"> Roimhe </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>

Bileagan	Marcaich
Deònach	`<span class="label">Default</span>`
Soirbheachas	`<span class="label label-success">Success</span>`
Rabhadh	`<span class="label label-warning">Warning</span>`
Cudromach	`<span class="label label-important">Important</span>`
Fiosrachadh	`<span class="label label-info">Info</span>`

Aonad gaisgeach

Tha Bootstrap a’ toirt seachad pàirt aotrom, sùbailte ris an canar aonad gaisgeach gus susbaint air do làrach a thaisbeanadh. Bidh e ag obair gu math air làraich margaidheachd agus susbaint trom.

Marcaich

Paisg an t-susbaint agad ann an divleithid de:

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

Hàlo a Shaoghail!

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

Ionnsaich barrachd

Ceann-duilleig

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

<div class = "page-haeder" > 
  <h1> Eisimpleir bann-cinn na duilleige </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.

Leubail mion-dhealbh

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

Gnìomh Gnìomh
Leubail mion-dhealbh

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

Gnìomh Gnìomh

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.

An comharradh

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 = "span3" > 
    <a href="#" class="mion-dhealbh"> _ _ _ _ _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "mion-dhealbh" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Leubail mion-dhealbh </h5>
      <p> Fonn-sgrìobhadh mion-dhealbh an-seo... </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.

Faclan-cinn aotrom

Clas bunaiteach air ath-sgrìobhadh

Le Bootstrap 2, tha sinn air an clas bunaiteach a dhèanamh nas sìmplidhe: .alertan àite .alert-message. Tha sinn cuideachd air an ìre as lugha de chomharradh a tha a dhìth a lùghdachadh - chan eil <p>feum air a ghnàth, dìreach am faidhle <div>.

Teachdaireachd rabhaidh singilte

Airson pàirt nas seasmhaiche le nas lugha de chòd, tha sinn air an sealladh eadar-dhealaichte a thoirt air falbh airson rabhaidhean bloca, teachdaireachdan a thig le barrachd pleadhaig agus mar as trice barrachd teacsa. Tha an clas cuideachd air atharrachadh gu .alert-block.

A ’dol gu math le javascript

Tha Bootstrap a ’tighinn le plugan jQuery sgoinneil a bheir taic do theachdaireachdan rabhaidh, a’ dèanamh an cuir às gu sgiobalta agus gu furasta.

faigh am plugan»

Eisimpleirean de rabhaidhean

Paisg do theachdaireachd agus ìomhaigh dlùth roghainneil ann an div le clas sìmplidh.

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

<div class = "alert" > 
  <a class="close" data-dismiss="alert"> × </a> _ _ _ _ _  
  <strong> Rabhadh! </strong> Feuch an dèan thu fhèin thu fhèin, chan eil thu a 'coimhead ro mhath.
</div>

Leudaich an teachdaireachd rabhaidh àbhaisteach gu furasta le dà chlas roghainneil: .alert-blockairson barrachd pleadhadh agus smachdan teacsa agus .alert-headingairson ceann co-ionnan.

Rabhadh!

Is fheàrr sgrùdadh a dhèanamh ort fhèin, chan eil thu a’ coimhead ro mhath. Nulla vitae elit libero, a pharetra augue. Bidh iad a’ moladh cursus magna, no scelerisque nisl consectetur et.

<div class = "bacadh rabhaidh" > 
  <a class="close" data-dismiss="alert"> × </a> _ _ _ _ _  
  <h4 class = "heading-alert" > Rabhadh! </h4> 
  An sgrùdadh as fheàrr dhut fhèin, chan eil thu ...
</div>

Roghainnean co-theacsail Cuir ris clasaichean roghainneil gus ciall an rabhaidh atharrachadh

Mearachd no cunnart

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

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

Soirbheachas

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

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

Fiosrachadh

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

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

Eisimpleirean agus comharrachadh

Bunaiteach

Bàr adhartais bunaiteach le caisead dìreach.

<div class = "adhartas" > 
  <div class = "bàr" 
       style = " leud : 60 %; " </div> 
</div>

Air a stialladh

A’ cleachdadh caisead gus buaidh stiallach a chruthachadh.

<div class = " adhartas adhartas-fiosrachaidh 
     adhartas-stripe" >
  <div class = "bàr" 
       style = " leud : 20 %; " </div> 
</div>

Beothaichte

Gabh an eisimpleir stiallach agus beothaichidh e e.

<div class = " adhartas adhartas-cunnart 
     gnìomhach le strì adhartais" >
  <div class = "bàr" 
       style = " leud : 40 %; " </div> 
</div>

Roghainnean agus taic brabhsair

Dathan a bharrachd

Bidh bàraichean adhartais a’ cleachdadh cuid de na h-aon ainmean clas mar phutanan agus rabhaidhean airson stoidhle coltach ris.

.progress-info
.progress-success
.progress-danger

Air neo, faodaidh tu na faidhlichean LESS a ghnàthachadh agus na dathan agus na meudan agad fhèin a roiligeadh.

Giùlan

Bidh bàraichean adhartais a’ cleachdadh eadar-ghluasadan CSS3, mar sin ma dh’ atharraicheas tu an leud gu dinamach tro javascript, atharraichidh e gu rèidh.

Ma chleachdas tu an .activeclas, .progress-stripedbeothaichidh na bàraichean adhartais agad na stiallan clì gu deas.

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-8 no tionndaidhean nas sine de Firefox.

Chan eil Opera a’ cur taic ri beòthachaidhean aig an àm seo.

tobraichean

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

Seall, tha mi ann an tobar!

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

Bràistean

Cleachd bràiste air eileamaid airson cunntas gun leughadh no mar chomharra sìmplidh.

<span class = "badge" > 3 </div>

Dùin an ìomhaigh

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

<a class="close"> & amannan ; _ </a>

Buidhnean putan Thig còmhla ri putanan airson barrachd gnìomh coltach ri bàr-inneal

Buidhnean putan

Cleachdaidhean as fheàrr

Eisimpleir bunaiteach

Eisimpleir bàr-inneal

Bogsa seic agus blasan rèidio

Ceann suas

Putanan tuiteam sìos Clàran-taice co-theacsail air an togail air buidhnean putan

Clò-bhuail putan

Comharrachadh eisimpleir

Split dropdowns putanan

Comharrachadh eisimpleir

Nav, tabaichean, agus pills Seòladh stoidhle liosta a ghabhas atharrachadh gu mòr

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

Clas bunaiteach cumhachdach

Nuair a chleachdadh

Co-thaobhadh co-phàirteach

Tabaichean bunaiteach

Pilean bunaiteach

Stackable Dèan tabaichean no pilean dìreach

Ciamar a chruachadh iad

Tabaichean air an cruachadh

Pills air an cruachadh

Dropdowns Airson co-phàirtean adhartach nav

Clàran beairteach air an dèanamh furasta

Tabaichean le dropdowns

Pills le dropdowns

Liostaichean Nav Tog seòlaidhean sìmplidh air an càrnadh, sgoinneil airson bàraichean-taoibh

Seòladh stoidhle tagraidh

Le ìomhaighean

Eisimpleir liosta nav

Eisimpleir le ìomhaighean

Tabbable nav Thoir tabaichean beò tro javascript

Dè tha air a ghabhail a-steach

Eisimpleir clàr

Plugin gnàthaichte jQuery

Comharrachadh dìreach

Clàr ann an stiùireadh sam bith

Tabaichean air a 'bhonn

Tabaichean air an taobh chlì

Tabaichean air an làimh dheis

Navbar

Eisimpleir de navbar statach

Sgafall navbar

Navbar stèidhichte

Ainm branda

Foirm lorg

Atharrachadh freagairteach roghainneil

Ceanglaichean nav

Co-thaobhadh co-phàirteach

A 'cur ris dropdowns

Briosgaidean

Carson a chleachdas iad

Eisimpleirean

Marcaich

Pagination Dà roghainn airson paging tro shusbaint

Duilleagan ioma-dhuilleag

Nuair a chleachdadh

Ceanglaichean duilleag stàiteil

Co-thaobhadh sùbailte

Eisimpleirean

Marcaich

Pager Airson ceanglaichean sgiobalta roimhe agus an ath rud

Mu dheidhinn pager

Eisimpleir bunaiteach

Ceanglaichean ceangailte

Bileagan in-loidhne Label agus notaichean teacsa

Co-phàirtean clò-sgrìobhaidh Ceann- duilleig agus aonad gaisgeach airson susbaint a sgaradh

Aonad gaisgeach

Marcaich

Hàlo a Shaoghail!

Ceann-duilleig

Mion-dhealbhan Grids de dhealbhan, bhideothan, teacsa agus barrachd

Mion-dhealbhan bunaiteach

Gu math gnàthaichte

Leubail mion-dhealbh

Leubail mion-dhealbh

Carson a chleachdas tu mion-dhealbhan

Comharrachadh sìmplidh, sùbailte

A’ cleachdadh meudan colbh clèithe