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:

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

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.

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.

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

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.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- ceanglaichean clàr-taice -->
  </ul>
</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.

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

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>

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 .nav​​​​chlas.

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:

• Dhachaigh
• Pròifil
• Teachdaireachdan

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

• Dhachaigh
• Pròifil
• Teachdaireachdan

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

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

• Dhachaigh
• Pròifil
• Teachdaireachdan

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

Pills air an cruachadh

• Dhachaigh
• Pròifil
• Teachdaireachdan

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

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

• Dhachaigh
• Cuideachadh
• Droch-dhiol
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Dhachaigh
• Cuideachadh
• Droch-dhiol
  • Action
  • Another action
  • Something else here
  • Separated link

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

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.

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>

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>

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.

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 .

space → Luchdaich a-nuas javascript

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.

Airson tabaichean co-thaobhadh deas no clì, paisg an .nav-tabsagus a- .tab-contentsteach .tabbable.

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

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>

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

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

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

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

Nuair a cheanglas tu am bàr nav, cuimhnich cunntas a thoirt air an àite falaichte gu h-ìosal. Cuir 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>

Foirmichean ann an navbar

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" >  
</form>

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>

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 do shusbaint nav 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>

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>

Co-thaobhadh co-phàirteach

Gus nav, foirm sgrùdaidh, no teacsa a cho-thaobhadh, cleachd am faidhle.pull-left.pull-right clasaichean no goireasan. Cuiridh an dà chlas fleòdradh CSS ris an taobh ainmichte.

A 'cur ris a' chlàr tuiteam-sìos

Tha e gu math sìmplidh a bhith a’ cur dropdowns agus dropups ris an nav, ach tha feum air ar plugan javascript a chleachdadh 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

Teacs anns a’ bhàr seòlaidh

Paisg sreathan de theacsa ann am faidhle <.navbar-text>, mar as trice air <p>tag airson stiùireadh agus dath ceart.

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.

• Dhachaigh

• Dachaigh /
• Leabharlann

• Dachaigh /
• Leabharlann /
• Dàta

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 = "active" > Dàta </li> 
</ul>

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>

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.

• Roimhe
• Air adhart

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

• ← Nas sine
• → nas ùire

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

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

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>

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

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.

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

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

Mearachd no cunnart

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

Soirbheachas

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

Fiosrachadh

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

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 (gun IE).

<div class = "stiall adhartais" > 
  <div class = "bàr" 
       style = " leud : 20 %; " </div> 
</div>

Beothaichte

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

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

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.

<div class = "math" > 
  ...
</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="#" airson tachartasan cliog mas fheàrr leat acair.

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