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:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </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.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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»

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.

Clò-bhuail putan

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.

Comharrachadh eisimpleir

Coltach ri buidheann putan, bidh an comharradh 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.

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle = "dropdown" href = "#"> _ _
  3. Gnìomh
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = ""dropdown-menu" >
  7. <!-- ceanglaichean clàr-taice -->
  8. </ul>
  9. </div>

Ag obair leis a h-uile meud putan

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

Tha feum air 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 gnàthaichte.


Split dropdowns putanan

Geàrr-chunntas agus eisimpleirean

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.

Meudan

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- ceanglaichean clàr-taice -->
  5. </ul>
  6. </div>

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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Gnìomh </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  4. <span class = "caret" ></span>
  5. </putan>
  6. <ul class = ""dropdown-menu" >
  7. <!-- ceanglaichean clàr-taice -->
  8. </ul>
  9. </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.

  1. <div class = "dropup btn-group" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "tuiteam-sìos" >
  4. <span class = "caret" ></span>
  5. </putan>
  6. <ul class = ""dropdown-menu" >
  7. <!-- ceanglaichean clàr-taice -->
  8. </ul>
  9. </div>

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

  1. <div class = "duilleag" >
  2. <ul>
  3. <li><a href = "#"> Roimhe </a> </li>
  4. <li class = "gnìomhach" >
  5. <a href="#"> 1 </a> _ _ _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#"> Air adhart </a></li>
  11. </ul>
  12. </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.

Stàite ciorramach roghainneil

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

Eisimpleir bunaiteach

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> Roimhe </a> _ _ _
  4. </li>
  5. <li>
  6. <a href="#"> Air adhart </a> _ _
  7. </li>
  8. </ul>

Ceanglaichean ceangailte

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

  1. <ul class = "pager" >
  2. <li class = "roimhe seo" >
  3. <a href = "#"> & larr; Nas sine </a>
  4. </li>
  5. <li class = "ath" >
  6. <a href = "#"> Nas ùire & rarr ; </a>
  7. </li>
  8. </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>
Inbhéartach <span class="label label-inverse">Inverse</span>

Mu dheidhinn

Tha bràistean nan co-phàirtean beaga, sìmplidh airson comharradh no cunntadh de sheòrsa air choreigin a thaisbeanadh. Bidh iad rim faighinn gu cumanta ann an teachdaichean post-d mar Mail.app no ​​air aplacaidean gluasadach airson fiosan putaidh.

Clasaichean rim faighinn

Ainm eisimpleir Marcaich
Deònach 1 <span class="badge">1</span>
Soirbheachas 2 <span class="badge badge-success">2</span>
Rabhadh 4 <span class="badge badge-warning">4</span>
Cudromach 6 <span class="badge badge-important">6</span>
Fiosrachadh 8 <span class="badge badge-info">8</span>
Inbhéartach 10 <span class="badge badge-inverse">10</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:

  1. <div class = "aonad-gaisgeach" >
  2. <h1> Ceann < /h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class="btn btn-bun-sgoile btn-large"> _
  6. Ionnsaich barrachd
  7. </a>
  8. </p>
  9. </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 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).

  1. <div class = "ceann-duilleig" >
  2. <h1> Eisimpleir bann-cinn na duilleige </h1>
  3. </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 :

  1. <ul class = "mion-dhealbhan" >
  2. <li class = "span3" >
  3. <a href="#" class="mion-dhealbh"> _ _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "mion-dhealbhan" >
  2. <li class = "span3" >
  3. <div class = "mion-dhealbh" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Leubail mion-dhealbh </h5>
  6. <p> Fonn-sgrìobhadh mion-dhealbh an-seo... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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 lughdachadh - 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.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Rabhadh! </strong> Feuch an dèan thu fhèin thu fhèin, chan eil thu a 'coimhead ro mhath.
  4. </div>

Cinn suas! Feumaidh innealan iOS inneal href="#"airson rabhaidhean a chuir às. Dèan cinnteach gun cuir thu a-steach e agus am feart dàta airson ìomhaighean dlùth acair. 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.

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. Cleachd comodo cursus magna, no scelerisque nisl consectetur et.

  1. <div class = "bacadh rabhaidh" >
  2. <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _
  3. <h4 class = "heading-alert" > Rabhadh! </h4>
  4. An sgrùdadh as fheàrr dhut fhèin, chan eil thu ...
  5. </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.
  1. <div class = "mearachd rabhaidh" >
  2. ...
  3. </div>

Soirbheachas

S math a rinn thu! Leugh thu an teachdaireachd rabhaidh chudromach seo gu soirbheachail.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Fiosrachadh

Cinn suas! Feumaidh an rabhadh seo d’ aire, ach chan eil e air leth cudromach.
  1. <div class = "fios rabhaidh" >
  2. ...
  3. </div>

Eisimpleirean agus comharrachadh

Bunaiteach

Bàr adhartais bunaiteach le caisead dìreach.

  1. <div class = "adhartas" >
  2. <div class = "bàr"
  3. style = " leud : 60 %; " </div>
  4. </div>

Air a stialladh

A’ cleachdadh caisead gus buaidh stiallach a chruthachadh (gun IE).

  1. <div class = "stiall adhartais" >
  2. <div class = "bàr"
  3. style = " leud : 20 %; " </div>
  4. </div>

Beothaichte

Gabh an eisimpleir stiallach agus beothaichidh e e (chan eil IE).

  1. <div class = "adhartas adhartas-stripe
  2. gnìomhach" >
  3. <div class = "bàr"
  4. style = " leud : 40 %; " </div>
  5. </div>

Roghainnean agus taic brabhsair

Dathan a bharrachd

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

Bàraichean stiallach

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

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

Chan eil Opera agus IE 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!
  1. <div class = "math" >
  2. ...
  3. </div>

Dùin an ìomhaigh

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

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

Feumaidh innealan iOS href="#" airson tachartasan cliog mas fheàrr leat acair.

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