Grúpaí cnaipí

Úsáid grúpaí cnaipí chun cnaipí iolracha a cheangal le chéile mar chomhpháirt ilchodach amháin. Tóg iad le sraith <a>nó <button>eilimintí.

Na cleachtais is fearr

Molaimid na treoirlínte seo a leanas maidir le grúpaí cnaipí agus barraí uirlisí a úsáid:

• Bain úsáid as an eilimint chéanna i ngrúpa cnaipí amháin, <a>nó <button>.
• Ná measc cnaipí de dhathanna éagsúla sa ghrúpa cnaipí céanna.
• Úsáid deilbhíní i dteannta nó in ionad téacs, ach bí cinnte go gcuimseofar alt agus téacs teidil nuair is cuí.

Ba chóir grúpaí Cnaipe Gaolmhara le anuas (féach thíos) a ghlaoch amach ar leithligh agus cúram anuas a chur san áireamh i gcónaí chun iompar beartaithe a chur in iúl.

Sampla réamhshocraithe

Seo mar a lorgaíonn an HTML grúpa cnaipe caighdeánach a tógadh le cnaipí clib ancaire:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Sampla barra uirlisí

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

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

Blasanna ticbhosca agus raidió

Is féidir le grúpaí cnaipí feidhmiú mar raidiónna freisin, áit nach féidir ach cnaipe amháin a bheith gníomhach, nó ticbhoscaí, áit a bhféadfadh líon ar bith cnaipí a bheith gníomhach. Féach ar na doiciméid Javascript chuige sin.

Faigh javascript »

Anuas i ngrúpaí cnaipí

Cinnirí suas! Ní mór cnaipí le anuas a bheith fillte ina n-aonar .btn-grouplaistigh de le .btn-toolbarhaghaidh rindreála cuí.

Forbhreathnú agus samplaí

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

Marcáil shampla

Cosúil le grúpa cnaipí, úsáideann ár marcáil marcáil cnaipe rialta, ach le dornán breiseanna chun an stíl a bheachtú agus chun tacú le breiseán jQuery anuas Bootstrap.

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle = "titim" href="#"> _ _ _ _   
    Gníomh
    <span class = "caret" ></span> 
  </a>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Oibríonn sé le gach méid cnaipe

Oibríonn dropdowns cnaipe ar aon mhéid. méideanna do chnaipe chuig .btn-large, .btn-small, nó .btn-mini.

Tá javascript ag teastáil

Éilíonn anuas cnaipe an breiseán anuas Bootstrap chun feidhmiú.

I gcásanna áirithe—cosúil le fóin phóca—sínfidh biachláir anuas lasmuigh den radharc. Ní mór duit an t-ailíniú a réiteach de láimh nó le javascript saincheaptha.

Forbhreathnú agus samplaí

Ag tógáil ar stíleanna agus marcáil an ghrúpa cnaipe, is féidir linn cnaipe scoilte a chruthú go héasca. Tá gníomh caighdeánach ar chlé i gceist le cnaipí scoilte agus scorán anuas ar dheis le naisc chomhthéacsúla.

Méideanna

Bain úsáid as na ranganna breise cnaipe .btn-mini, .btn-small, nó .btn-largele haghaidh méide.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Marcáil shampla

Déanaimid leathnú ar na gnáth-anuasanna cnaipe chun an dara gníomh cnaipe a sholáthar a fheidhmíonn mar truicear anuas ar leith.

<div class = "btn-group" > 
  <button class = "btn" > Gníomh </button> 
  <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
    <span class = "caret" ></span> 
  </cnaipe>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Roghchláir dropup

Is féidir roghchláir anuas a scoránú ón mbun aníos freisin trí rang amháin a chur le neasthuismitheoir .dropdown-menu. Smeachfaidh sé treo an .caretagus athshuífidh sé an roghchlár féin chun bogadh ón mbun aníos in ionad ón mbarr anuas.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
    <span class = "caret" ></span> 
  </cnaipe>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Bunrang cumhachtach

Roinneann na comhpháirteanna uile nav anseo - cluaisíní, piollaí, agus liostaí - an bonnmharcáil agus na stíleanna céanna tríd an .navrang.

Cathain a úsáid

Tá cluaisíní agus piollaí iontach le haghaidh codanna den ábhar nó le nascleanúint a dhéanamh idir leathanaigh d’ábhar gaolmhar.

Ailíniú comhpháirte

Chun naisc nascleanúna a ailíniú, úsáid na .pull-leftranganna .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Cluaisíní bunúsacha

Glac líon rialta <ul>de naisc agus cuir leis .nav-tabs:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class = "nav nav-cluaisíní" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> < /li> 
  <li><a href = "#"> ... </a> < /li> 
</ul>

pills bunúsacha

Tóg an HTML céanna sin, ach úsáid .nav-pillsina ionad sin:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> < /li> 
  <li><a href = "#"> ... </a> < /li> 
</ul>

Conas iad a chruachadh

Toisc go bhfuil cluaisíní agus piollaí cothrománacha de réir réamhshocraithe, ní gá ach rang a dó, .nav-stacked, a chur leis chun iad a chur le feiceáil go hingearach.

Cluaisíní Cruachta

• Baile
• Próifíl
• Teachtaireachtaí

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

Pills cruachta

• Baile
• Próifíl
• Teachtaireachtaí

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

Biachláir saibhir déanta éasca

Tá biachláir anuas i gcluaisíní agus piollaí Bootstrap thar a bheith éasca agus ní theastaíonn ach beagán HTML breise agus breiseán éadrom jQuery.

Téigh ar aghaidh chuig an leathanach Javascript chun na doiceanna a léamh maidir le híoslódálacha a thosú i Bootstrap.

Cluaisíní le dropdowns

• Baile
• Cabhrú
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class = "nav nav-cluaisíní" > 
  <li class = "dropdown" > 
    < a class = "dropdown-scoránaigh" 
       data-toggle = "titim anuas"
       href = "#" >
        Titim síos
        <b class = "caret" ></b> 
      </a>
    <ul class = "roghchlár anuas" > 
      <!-- naisc -->
    </ul>
  </li>
</ul>

Pills le dropdowns

• Baile
• Cabhrú
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    < a class = "dropdown-scoránaigh" 
       data-toggle = "titim anuas"
       href = "#" >
        Titim síos
        <b class = "caret" ></b> 
      </a>
    <ul class = "roghchlár anuas" > 
      <!-- naisc -->
    </ul>
  </li>
</ul>

Nascleanúint feidhmchláir

Soláthraíonn liostaí nascleanúna bealach simplí agus éasca chun grúpaí de naisc loingseoireachta a chruthú le ceanntásca roghnacha. Is fearr iad a úsáid i barraí taoibh mar an Aimsitheoir in OS X.

Go struchtúrach, tá siad bunaithe ar na stíleanna lárnacha nascleanúna céanna le cluaisíní agus piollaí, agus mar sin tá úsáid agus saincheapadh simplí.

Le deilbhíní

Is furasta liostaí nascleanúna a threalmhú le deilbhíní freisin. Cuir an <i>chlib cheart leis an rang agus tá tú socraithe.

Roinneoirí cothrománacha

Cuir roinnteoir cothrománach leis trí mhír liosta folamh a chruthú leis an rang .divider, mar seo a leanas:

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

Sampla liosta nav

Glac liosta naisc agus cuir leis class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Ceanntásc liosta
  </li>
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Leabharlann </a> _ _ _ 
  </li>
  ...
</ul>

Sampla le deilbhíní

Sampla céanna, ach le <i>clibeanna le haghaidh deilbhíní.

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

Cad atá san áireamh

Cuir do chuid cluaisíní ar an saol le breiseán simplí chun scoránaigh idir ábhar trí chluaisíní. Comhtháthaíonn Bootstrap cluaisíní cluaisíní i gceithre stíl: barr (réamhshocraithe), ar dheis, ar bhun agus ar chlé.

Is furasta iad a athrú agus ní gá ach fíorbheagán marcála a athrú.

Céimnithe i gcluaisíní

Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fadele gach .tab-pane.

Tá breiseán jQuery ag teastáil

Tá gach cluaisín cluaisín faoi thiomáint ag ár mbreiseán éadrom jQuery. Léigh tuilleadh faoi conas cluaisíní a thabhairt chun beochta ar leathanach na ndoiciméad javascript .

Faigh an javascript →

Sampla tábla

Chun cluaisíní a dhéanamh inchurtha, cruthaigh .tab-paneID uathúil do gach cluaisín agus fillte isteach iad .tab-content.

Le haghaidh cluaisíní ailínithe ar dheis nó ar chlé, fillte an .nav-tabsagus .tab-contentisteach .tabbable.

Marcáil simplí

Teastaíonn div fillte, sraith cluaisíní, agus sraith ábhar cluaisíní le cluaisíní tabbable a úsáid.

<div class = "tabable" > <!-- Ní theastaíonn ach do na cluaisíní clé/deas -->  
  <ul class = "nav nav-cluaisíní" > 
    <li class = "active" < a href = "#tab1 " data- toggle = "cluaisín" > Roinn 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "cluaisín" > Roinn 2 </a></li>  
  </ul>
  <div class = "cluaisín-ábhar" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Tá mé i Roinn 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, tá mé i Roinn 2. </p>
    </div>
  </div>
</div>

Cluaisíní ar an mbun

Smeach ord an HTML agus cuir rang leis chun cluaisíní a chur ar an mbun.

<div class = "cluaisíní tabable-thíos" > 
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
</div>

Cluaisíní ar thaobh na láimhe clé

Babhtáil an rang chun cluaisíní a chur ar thaobh na láimhe clé.

<div class = "cluaisíní-clé" > 
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
</div>

Cluaisíní ar dheis

Babhtáil an rang chun cluaisíní a chur ar dheis.

<div class = "cluaisíní tabable-deas" > 
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
</div>

Scafall Navbar

Níl ach cúpla div ag teastáil ón mbarra loingseoireachta chun é a struchtúrú go maith le haghaidh taispeáint statach nó sheasta.

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

Navbar seasta

Deisigh an barra nascleanúna ar bharr nó bun an amhairc le rang breise ar an div is forimeallaí, .navbar.

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

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

Nuair a ghreamaíonn tú an barra nascleanúna, cuimhnigh cuntas a thabhairt ar an limistéar folaithe thíos. Cuir 40px nó níos mó de stuáil leis an <body>. Bí cinnte é seo a chur leis tar éis an CSS Bootstrap lárnach agus roimh an CSS freagrúil roghnach.

Ainm branda

Ní theastaíonn ach clib ancaire le nasc simplí chun do bhranda nó d’ainm tionscadail a thaispeáint.

<a class="brand" href="#"> _ _ _ _ _  
  Ainm an tionscadail
</a>

Foirmeacha i navbar

Chun foirm a stíliú agus a shuíomh i gceart laistigh den bharra nascleanúna, cuir na haicmí cuí leis mar a thaispeántar thíos. Le haghaidh foirm réamhshocraithe, cuir san áireamh .navbar-formagus ceachtar acu .pull-leftnó .pull-rightchun é a ailíniú i gceart.

<form class = "navbar-form tarraingt-chlé" > 
  <input type = "text" class = "span2" >  
</form>

Chun foirm chuardaigh níos saincheaptha a fháil, cuir .navbar-searchleis an ionchur formagus .search-queryleis an ionchur do stíleanna speisialaithe sa bharra nascleanúna.

<form class = "navbar-search tarraingt-chlé" > 
  <input type = "text" class = "search-query" placeholder = "Cuardaigh" >   
</form>

Athrú sofhreagrach roghnach

Ag brath ar an méid ábhair i do bharrbharra, b'fhéidir gur mhaith leat na roghanna sofhreagracha a chur i bhfeidhm. Chun é sin a dhéanamh, fillte do chuid ábhar nav i div, .nav-collapse.collapse, agus cuir an cnaipe scoránaigh an nascleanúna, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      Úsáidtear <!-- .btn-navbar mar an scoránaigh le haghaidh ábhar an bharra nascleanúna tite -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> _ _ _ _ _ _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Bí cinnte an branda a fhágáil amach ansin más mian leat é a thaispeáint -->
      <a class="brand" href="#"> Ainm an tionscadail </a> _ _ _  
 
      <!-- Gach rud atá uait i bhfolach ag 940px nó níos lú, cuir isteach anseo -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, srl -->
      </div>
 
    </div>
  </div>
</div>

Naisc Nav

Is furasta míreanna nascleanúna a chur leis trí liostaí neamhordaithe.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href="#"> Nasc </a> < / li > 
  <li><a href="#"> Nasc </a> < / li > 
</ul>

Is féidir leat roinnteoirí a chur le do naisc nascleanúna go héasca le mír liosta folamh agus rang simplí. Cuir é seo idir naisc:

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

Ailíniú comhpháirte

Chun nav, foirm chuardaigh, nó téacs a ailíniú, úsáid na ranganna .pull-leftnó .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Ag cur roghchláir anuas leis

Tá sé thar a bheith simplí anuas agus dropups a chur leis an nascleanúint, ach ní mór úsáid a bhaint as ár mbreiseán javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          aicme = "dropdown-toggle"
          data-toggle = "titim anuas" >
          Cuntas
          <b class = "caret" ></b> 
    </a>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </li>
</ul>

Faigh an javascript →

Téacs sa bharra loingseoireachta

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

Cén fáth iad a úsáid

Úsáidtear loingseoireacht arán mar bhealach chun úsáideoirí a thaispeáint cá bhfuil siad laistigh d’aip nó de shuíomh, ach ní le haghaidh loingseoireachta príomhúil. Coinnigh a n-úsáid gann agus gonta le bheith ar an mbealach is éifeachtaí.

Samplaí

Taispeántar sampla amháin mar go bhféadfaí é a thaispeáint thar leathanaigh iolracha.

• Baile

• Baile /
• Leabharlann

• Baile /
• Leabharlann /
• Sonraí

Marcáil

Is é HTML do liosta caighdeánach neamhordaithe le naisc.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> Abhaile < /span> <span class = " divider " > / < / span>   
  </li>
  <li>
    <a href="#"> Leabharlann < / span > <span class = "divider" > / < /span>   
  </li>
  <li class = "active" > Sonraí </li> 
</ul>

Cathain a úsáid

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

Naisc leathanach ráiteasacha

Is féidir naisc a shaincheapadh agus oibríonn siad i roinnt cúinsí leis an rang ceart. .disabledle haghaidh naisc nach féidir a chliceáil agus .activele haghaidh an leathanaigh reatha.

Ailíniú solúbtha

Cuir ceachtar den dá rang roghnach leis chun ailíniú naisc uimhriúcháin a athrú: .pagination-centeredagus .pagination-right.

Samplaí

Tá an chomhpháirt uimhriúcháin réamhshocraithe solúbtha agus oibríonn sé i roinnt éagsúlachtaí.

Marcáil

Fillte i <div>leathanach , níl ann ach leathanach <ul>.

<div class = "leathanach" > 
  <ul>
    <li><a href = " #"> Roimhe </a> < /li> 
    <li class = "active" > 
      <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 = " #"> Ar Aghaidh </a> < /li> 
  </ul>
</div>

Maidir le glaoire

Is é atá sa chomhpháirt glaoire ná sraith nasc le haghaidh cur i bhfeidhm leathanach simplí le marcáil éadrom agus fiú stíleanna níos éadroime. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.

Staid díchumasaithe roghnach

Úsáideann naisc ghlaoch freisin an .disabledrang ginearálta ón leathanach.

Sampla réamhshocraithe

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

• Roimhe Seo
• Ar aghaidh

<ul class = "pager" > 
  <li>
    <a href="#"> Roimhe </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Ar Aghaidh </a> _ _ 
  </li>
</ul>

Naisc ailínithe

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

• ← Níos sine
• Níos nuaí →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href="#"> & larr ; _ Níos sine </a> 
  </li>
  <li rang = "ar aghaidh" > 
    <a href="#"> Níos nuaí & rarr ; </a> 
  </li>
</ul>

Faoi

Is comhpháirteanna beaga simplí iad suaitheantais chun táscaire nó comhaireamh de shaghas éigin a thaispeáint. Faightear iad go coitianta i gcliant ríomhphoist amhail Mail.app nó ar aipeanna móibíleacha le haghaidh fógraí brú.

Ranganna ar fáil

Soláthraíonn Bootstrap comhpháirt éadrom, solúbtha ar a dtugtar aonad laoch chun ábhar ar do shuíomh a thaispeáint. Oibríonn sé go maith ar mhargaíocht agus ar shuímh atá trom le hábhar.

Marcáil

Wrap d'inneachar divmar sin:

<div class = "laoch-aonad" > 
  <h1> Ceannteideal </h1>
  <p> Cliblíne </p>
  <p>
    <a class="btn btn-bunscoil btn-large"> _ 
      Foghlaim níos mó
    </a>
  </p>
</div>

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

<div class = "page-header" > 
  <h1> Ceanntásc leathanaigh samplach </h1>
</div>

Mionsamhlacha réamhshocraithe

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

An-customizable

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

• 

  Lipéad mionsamhlacha

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

  Gníomh Gníomh

• 

  Lipéad mionsamhlacha

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

  Gníomh Gníomh

Cén fáth mionsamhlacha a úsáid

Tá mionsamhlacha ( .media-gridgo dtí v1.4 roimhe seo) iontach do ghreillí grianghraif nó físeáin, torthaí cuardaigh íomhá, táirgí miondíola, punanna, agus go leor eile. Is féidir iad a bheith ina naisc nó ina n-ábhar statach.

Simplí, marcáil solúbtha

Tá marcáil mionsamhlacha simplí—is é sin ulle haon líon lieilimintí atá ag teastáil. Tá sé thar a bheith solúbtha freisin, rud a ligeann d'aon chineál ábhair a bhfuil beagán níos mó marcála aige chun d'inneachar a chuimilt.

Úsáideann sé méideanna colún greille

Ar deireadh, úsáideann comhpháirt na mionsamhlacha aicmí córais ghreille atá ann cheana féin - cosúil le .span2nó .span3- chun toisí mionsamhlacha a rialú.

An marcáil

Mar a luadh cheana, tá an marcáil riachtanach le haghaidh mionsamhlacha éadrom agus simplí. Seo breathnú ar an socrú réamhshocraithe le haghaidh íomhánna nasctha :

<ul class = "mionsamhlacha" > 
  <li class = "span3" > 
    < a href = " # " class = " mionsamhail " >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Maidir le hábhar HTML saincheaptha i mionsamhlacha, athraíonn an marcáil beagán. Chun an t-ábhar blocleibhéil a cheadú áit ar bith, malartóidh muid é le <a>haghaidh a <div>leithéid:

<ul class = "mionsamhlacha" > 
  <li class = "span3" > 
    <div class = "mionsamhla" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Lipéad mionsamhla </h5>
      <p> Fotheideal mionsamhla anseo... </p>
    </div>
  </li>
  ...
</ul>

Tuilleadh samplaí

Déan iniúchadh ar na roghanna go léir atá agat leis na ranganna eangaí éagsúla atá ar fáil duit. Is féidir leat méideanna éagsúla a mheascadh agus a mheaitseáil freisin.

Bunrang athscríofa

Le Bootstrap 2, tá an bunrang simplithe againn: .alertin ionad .alert-message. Táimid tar éis an t-íosmhéid marcála a theastaíonn a laghdú freisin - níl aon <p>ghá ag teastáil de réir réamhshocraithe, ní gá ach an ceann seachtrach <div>.

Teachtaireacht foláirimh aonair

Chun comhpháirt níos marthanaí agus níos lú cód a fháil, tá deireadh curtha againn leis an gcuma idirdhealaitheach le haghaidh blocrabhaidh, teachtaireachtaí a thagann le níos mó stuála agus níos mó téacs de ghnáth. D'athraigh an rang go .alert-block.

Go hiontach le javascript

Tagann Bootstrap le breiseán jQuery iontach a thacaíonn le teachtaireachtaí foláirimh, rud a fhágann go bhfuil siad tapa agus éasca iad a dhíbhe.

Faigh an breiseán »

Foláirimh shamplacha

Wrap do theachtaireacht agus deilbhín gar roghnach i div le rang simplí.

<div class = "aire" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Rabhadh! </strong> Is fearr a sheiceáil duit féin, níl tú ag breathnú ró-mhaith.
</div>

Cinnirí suas! Teastaíonn ó ghléasanna iOS href="#"chun foláirimh a dhífhostú. Bí cinnte é a chur san áireamh agus an tréith sonraí le haghaidh deilbhíní gar-ancaire. Nó, is féidir leat <button>eilimint a úsáid leis an tréith sonraí, rud a roghnaigh muid a dhéanamh dár ndoiciméid. Nuair a bheidh tú ag úsáid <button>, ní mór duit a chur san áireamh type="button"nó ní féidir d'fhoirmeacha a chur isteach.

Leathnaigh an teachtaireacht foláirimh chaighdeánach go héasca le dhá rang roghnacha: .alert-blockle haghaidh tuilleadh stuála agus rialuithe téacs agus .alert-headingle haghaidh ceannteideal meaitseála.

<div class = "bloc foláirimh" > 
  <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _   
  <h4 class = "alert-heading" > Rabhadh! </h4> 
  Is fearr seiceáil leat féin, níl tú ...
</div>

Earráid nó baol

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

Rath

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

Eolas

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

Bunúsach

Barra dul chun cinn réamhshocraithe le grádán ceartingearach.

<div class = "progress" > 
  <div class = "barra" 
       style = " leithead : 60 %; " ></div> 
</div>

Striped

Úsáideann sé grádán chun éifeacht stríocach a chruthú (gan IE).

<div class = "progress progress-striped" > 
  <div class = "barra" 
       style = " leithead : 20 %; " ></div> 
</div>

Beoite

Glacann sé an sampla stríocach agus beochann sé é (gan IE).

< div class = " dul chun cinn progress-striped 
     gníomhach" >
  <div class = "barra" 
       style = " leithead : 40 %; " ></div> 
</div>

Dathanna breise

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

Barraí striped

Cosúil leis na dathanna soladacha, tá barraí dul chun cinn stiallacha éagsúla againn.

Iompar

Úsáideann barraí dul chun cinn aistrithe CSS3, mar sin má choigeartóidh tú an leithead go dinimiciúil trí javascript, déanfar é a athrú go réidh.

Má úsáideann tú an .activerang, beochtóidh do .progress-stripedbharraí dul chun cinn na stríoca ó chlé go deas.

Tacaíocht bhrabhsálaí

Úsáideann barraí dul chun cinn grádáin CSS3, aistrithe agus beochan chun a n-éifeachtaí go léir a bhaint amach. Ní thacaítear leis na gnéithe seo in IE7-9 nó i leaganacha níos sine de Firefox.

Ní thacaíonn Opera agus IE le beochan faoi láthair.

toibreacha

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

<div rang = "go maith" > 
  ...
</div>

Dún an deilbhín

Bain úsáid as an deilbhín gar-chineálach chun ábhar cosúil le módúil agus foláirimh a dhíbhe.

×

<button class = "close" > × </cnaipe> 

Teastaíonn href="#" ó ghléasanna iOS le haghaidh imeachtaí cliceáil más fearr leat ancaire a úsáid.

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