Sampla

Roghchlár comhthéacsúil inscorraithe chun liostaí nasc a thaispeáint. Déanta idirghníomhach leis an mbreiseán JavaScript anuas .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "roghchlár anuas" >   
  <li> <a tabindex="-1" href="#"> Gníomh </a> < / li >  
  <li><a tabindex="-1" href="#"> Gníomh eile </a> < / li >  
  <li><a tabindex = " -1" href="#"> Rud éigin eile anseo </a> < /li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href="#"> Nasc scartha </a> < /li>  
</ul>

Marcáil

Ag féachaint ar an roghchlár anuas, seo an HTML riachtanach. Ní mór duit truicear an anuas agus an roghchlár anuas a chumhdach laistigh de .dropdown, nó eilimint eile a dhearbhaíonn position: relative;. Ansin díreach a chruthú ar an roghchlár.

<div class = "dropdown" > 
  <!-- Nasc nó cnaipe chun anuas a scoránaigh -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex="-1" href="#"> Gníomh </a> < / li >  
    <li><a tabindex="-1" href="#"> Gníomh eile </a> < / li >  
    <li><a tabindex = " -1" href="#"> Rud éigin eile anseo </a> < /li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href="#"> Nasc scartha </a> < /li>  
  </ul>
</div>

Roghanna

Ailínigh na biachláir ar dheis agus cuir leo leibhéil bhreise anuas san áireamh.

Na biachláir a ailíniú

Cuir .pull-rightle a .dropdown-menuar dheis ailíniú an roghchlár anuas.

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

Roghanna roghchláir díchumasaithe

Cuir .disabledle <li>sa roghchlár anuas chun an nasc a dhíchumasú.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "roghchlár anuas" >   
  <li><a tabindex = "-1" href="#"> Nasc rialta </a> < /li>  
  <li class = "míchumas" < a tabindex = "-1" href = "#" > Nasc díchumasaithe </a> </li>   
  <li><a tabindex="-1" href="#"> Nasc eile </a> < / li >  
</ul>

Fo-roghchláir ar anuas

Cuir leibhéal breise de roghchláir anuas leis, le feiceáil ar ainlíon cosúil le cinn OS X, le roinnt breiseanna simplí marcála. Cuir .dropdown-submenule ceann ar bith lii roghchlár anuas atá ann cheana féin le haghaidh stílithe uathoibríoch.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "fo-roghchlár anuas" > 
    <a tabindex="-1" href="#"> Tuilleadh roghanna </a> _ _ _ _  
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </li>
</ul>

Samplaí

Dhá rogha bhunúsacha, chomh maith le dhá athrú níos sainiúla.

Grúpa cnaipí aonair

Wrap sraith cnaipí le .btni .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Ar chlé </button> 
  <button class = "btn" > Meán </button> 
  <button class = "btn" > Ar dheis </button> 
</div>

Grúpaí cnaipí iolracha

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>

Grúpaí cnaipí ingearacha

Déan sraith de chnaipí a bheith le feiceáil Cruachta go hingearach seachas go cothrománach.

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

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.

<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 anuas cnaipe ag aon mhéid: .btn-large, .btn-small, nó .btn-mini.

Tá JavaScript de dhíth

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

Scoilt anuas na cnaipí

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.

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

Méideanna

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Gníomh </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "titim 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>

Mainneachtainí éadroma Marcáil chéanna, aicmí éagsúla

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.

Cluaisíní bunúsacha

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

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

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

Stát faoi mhíchumas

Maidir le haon chomhpháirt nascleanúna (cluaisíní, piollaí, nó liosta), cuir .disabledle haghaidh naisc ghlasa agus gan aon éifeachtaí hover . Beidh naisc fós inchliceáilte, áfach, mura mbaineann tú an hreftréith. Nó, d'fhéadfá JavaScript saincheaptha a chur i bhfeidhm chun na cliceanna sin a chosc.

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

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.

Cruachta

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

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

Pills cruachta

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

Droim anuas

Cuir biachláir anuas leis le beagán HTML breise agus an breiseán JavaScript anuas .

Cluaisíní le dropdowns

<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

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

Liostaí Nav

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.

Sampla liosta nav

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Liosta ceanntásca </li> 
  <li class = "active" < a href = " # " > Baile </a></li>  
  <li><a href="#">Leabharlann </a> < / li > 
  ...
</ul>

NótaLe neadú laistigh de liosta nascleanúna, cuir san áireamh class="nav nav-list"ar aon nead <ul>.

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>

Nav tábla

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

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.

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

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í inchurtha a thabhairt beo ar leathanach JavaScript docs .

Tabbable i dtreo ar bith

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>

Barra nascleanúna bunúsach

Chun tús a chur leis, tá na barraí nascleanúna statach (gan a bheith socraithe go dtí an barr) agus áirítear leo tacaíocht d'ainm tionscadail agus bunloingseoireachta. Cuir ceann in áit ar bith laistigh de .container, a shocraíonn leithead do shuíomh agus ábhair.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class="brand" href="#"> Teideal </a> _ _ _ _ _  
    <ul class = "nav" > 
      <li class = "active" < a href = " # " > Baile </a></li>  
      <li><a href="#"> Nasc </a> < / li > 
      <li><a href="#"> Nasc </a> < / li > 
    </ul>
  </div>
</div>

Comhpháirteanna Navbar

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

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>

Foirmeacha

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" >  
  <button type = "submit" class = "btn" > Cuir isteach </button>  
</form>

Foirm chuardaigh

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>

Ailíniú comhpháirte

Ailínigh naisc nascleanúna, foirm chuardaigh, nó téacs, úsáid na ranganna .pull-leftnó fóntais. .pull-rightCuirfidh an dá rang snámhán CSS sa treo sonraithe.

Ag baint úsáide as dropdowns

Cuir dropdowns agus dropups leis an nascleanúint le beagán marcála agus an breiseán JavaScript anuas .

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

Tabhair cuairt ar an gcáipéisíocht anuas JavaScript chun tuilleadh marcála agus faisnéis a fháil ar anuas glaonna.

Téacs

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

Athruithe taispeána roghnacha

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

Seasta go barr

Cuir .navbar-fixed-topleis agus cuimhnigh cuntas a thabhairt ar an limistéar folaithe thíos trí 40px ar a laghad a chur paddingleis an <body>. Bí cinnte é seo a chur leis tar éis an CSS Bootstrap lárnach agus roimh an CSS freagrúil roghnach.

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

Seasta go bun

Cuir .navbar-fixed-bottomina ionad sin.

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

Barra navbar statach

Cruthaigh barra nascleanúna lánleithead a scrollaíonn amach leis an leathanach trí .navbar-static-top. Murab ionann agus an .navbar-fixed-toprang, ní gá duit aon stuáil ar an body.

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

Barra nascleanúna sofhreagrach

Chun barra nascleanúna sofhreagrach atá ag titim a chur i bhfeidhm, fillte d'inneachar an bharra nascleanúna i div, .nav-collapse.collapse, agus cuir an cnaipe scoránaigh an bharra 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, srl -->
      </div>
 
    </div>
  </div>
</div>

Athrú inbhéartaithe

Athraigh cuma an bharra nascleanúna trí .navbar-inverse.

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

Samplaí

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

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

Leathanach caighdeánach

Leathanacháil shimplí 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.

<div class = "leathanach" > 
  <ul>
    <li><a href = " #"> Roimhe </a> < /li> 
    <li><a href="#"> 1 </a> < / li> 
    <li><a href="#">2 </a> < / li > 
    <li><a href="#">3 </a> < / li > 
    <li><a href="#">4 </a> < / li > 
    <li><a href="#">5 </a> < / li > 
    <li><a href = " #"> Ar Aghaidh </a> < /li> 
  </ul>
</div>

Roghanna

Stáit faoi mhíchumas agus stáit ghníomhacha

Tá naisc inoiriúnaithe do chúinsí éagsúla. Bain úsáid as .disabledchun naisc nach féidir a chliceáil agus .activechun an leathanach reatha a léiriú.

<div class = "leathanach" > 
  <ul>
    <li class = "míchumas" < a href = " # " > « </a></li>  
    <li class = "active" > <a href="#"> 1 </a> < /li>  
    ...
  </ul>
</div>

Is féidir leat ancairí gníomhacha nó díchumasaithe a mhalartú go roghnach le haghaidh raonta chun feidhm chliceáil a bhaint agus na stíleanna atá beartaithe a choinneáil.

<div class = "leathanach" > 
  <ul>
    <li class = "míchumasaithe" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Méideanna

An bhfuil fonn ort uimhrigh níos mó nó níos lú? Cuir .pagination-large, .pagination-small, nó .pagination-minile haghaidh méideanna breise.

<div class = "leathanach leathanach-mór" > 
  <ul>
    ...
  </ul>
</div>
<div class = "leathanach" > 
  <ul>
    ...
  </ul>
</div>
<div class = "uimhrigh leathanach-beag" > 
  <ul>
    ...
  </ul>
</div>
<div class = "uimhrigh mion-leathanach" > 
  <ul>
    ...
  </ul>
</div>

Ailíniú

Cuir ceann amháin de dhá rang roghnach leis chun ailíniú naisc uimhriúcháin a athrú: .pagination-centeredagus .pagination-right.

<div class = "leathanach leathanach-lárnach" > 
  ...
</div>

<div class = "uimhrigh leathanach ar dheis" > 
  ...
</div>

glaoire

Naisc thapa roimhe seo agus ina dhiaidh le haghaidh feidhmiúcháin uimhriúcháin shimplí le marcáil éadrom agus stíleanna. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.

Sampla réamhshocraithe

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

<ul class = "pager" > 
  <li><a href="#"> Roimhe Seo </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:

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

Staid díchumasaithe roghnach

Úsáideann naisc ghlaoire freisin an .disabledrang fóntais ghinearálta ón leathanach.

<ul class = "pager" > 
  <li class = "míchumas roimhe seo" > 
    <a href="#"> & larr ; _ Níos sine </a> 
  </li>
  ...
</ul>

Lipéid

Suaitheantais

Go héasca collapsible

Ar mhaithe le cur i bhfeidhm éasca, ní bheidh ach lipéid agus suaitheantais in olcas (trí :emptyroghnóir CSS) nuair nach bhfuil aon ábhar istigh ann.

Aonad laoch

Comhpháirt éadrom, solúbtha chun príomhinneachar a thaispeáint ar do shuíomh. Oibríonn sé go maith ar mhargaíocht agus ar shuímh atá trom le hábhar.

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

Ceanntásc leathanaigh

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

<div class = "page-header" > 
  <h1> Sampla de cheanntásc leathanaigh <small> Fothéacs don cheanntásc </small></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.

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

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 = "span4" > 
    < a href = " # " class = " mionsamhail " >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "mionsamhla" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Lipéad mionsamhla </h3>
      <p> Fotheideal mionsamhla... </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.

Foláireamh réamhshocraithe

Wrap aon téacs agus cnaipe dífhostaithe roghnach isteach .alertle haghaidh teachtaireacht foláirimh bhunúsach.

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

Déan cnaipí a dhíbhe

Teastaíonn ó bhrabhsálaithe Soghluaiste Safari agus Opera Mobile, chomh maith leis an data-dismiss="alert"tréith, href="#"chun foláirimh a dhíbhe agus <a>clib in úsáid.

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

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.

<button type = "button" class = "close" data-dismiss = "alert" > &amanna; </cnaipe>   

Ruaig foláirimh trí JavaScript

Bain úsáid as an breiseán foláirimh jQuery chun foláirimh a dhífhostú go tapa agus go héasca.

Roghanna

Le haghaidh teachtaireachtaí níos faide, méadaigh an stuáil ar bharr agus bun an fhillteáin foláirimh trí .alert-block.

<div class = "bloc foláirimh" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &amanna; </cnaipe>   
  <h4> Rabhadh! </h4>
  Is fearr seiceáil leat féin, níl tú ...
</div>

Roghanna comhthéacsúla

Cuir ranganna roghnacha leis chun connotation foláirimh a athrú.

Earráid nó baol

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

Rath

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

Eolas

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

Samplaí agus marcáil

Bunúsach

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

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

Striped

Úsáideann sé grádán chun éifeacht stríocach a chruthú. Níl sé ar fáil in IE7-8.

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

Beoite

Cuir .activeleis .progress-stripedna stríoca a bheochan ó dheas go clé. Níl sé ar fáil i ngach leagan de IE.

<div class = "progress progress-striped gníomhach" > 
  <div class = "bar" style = " leithead : 40 %; " ></div>   
</div>

Cruachta

Cuir barraí iolracha isteach mar an gcéanna .progresschun iad a chruachadh.

<div class = "progress" > 
  <div class = "barra barra-rath" style = " leithead : 35 %; " ></div>   
  <div class = "barra-rabhadh barra" style = " leithead : 20 %; " ></div>   
  <div class = "barra bar-chontúirt" style = " leithead : 10 %; " ></div>   
</div>

Roghanna

Dathanna breise

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " leithead : 20 % " ></div>   
</div>
<div class = "progress progress-rath" > 
  <div class = "bar" style = " leithead : 40 % " ></div>   
</div>
<div class = "rabhadh maidir le dul chun cinn" > 
  <div class = "bar" style = " leithead : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " leithead : 80 % " ></div>   
</div>

Barraí striped

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " leithead : 20 % " ></div>   
</div>
<div class = "dul chun cinn progress-rath dul chun cinn-striped" > 
  <div class = "bar" style = " leithead : 40 % " ></div>   
</div>
<div class = "progress progress-rabhadh progress-striped" > 
  <div class = "bar" style = " leithead : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " leithead : 80 % " ></div>   
</div>

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 leaganacha níos luaithe ná Internet Explorer 10 agus Opera 12 le beochan.

Stíleanna oibiachta teibí chun cineálacha éagsúla comhpháirteanna a thógáil (cosúil le tuairimí blag, Tweets, srl) a bhfuil íomhá ailínithe ar chlé nó ar dheis taobh le hábhar téacsach.

Sampla réamhshocraithe

Ligeann na meáin réamhshocraithe réad meán a bheith ar snámh (íomhánna, físeáin, fuaime) ar chlé nó ar dheis de bhloc inneachair.

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Ceannteideal meáin

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

<div class = "media" > 
  <a class="pull-left" href="#"> _ _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Ceannteideal meán </h4> 
    ...
 
    <!-- Réad meán neadaithe -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Liosta meáin

Le beagán marcála breise, is féidir leat meáin laistigh den liosta a úsáid (úsáideach le haghaidh snáitheanna tuairimí nó liostaí alt).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class="pull-left" href="#"> _ _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Ceannteideal meán </h4> 
      ...
 
      <!-- Réad meán neadaithe -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

toibreacha

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

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

Ranganna roghnacha

Stuáil rialaithe agus coirnéil chothromú le dhá rang mionathraithe roghnacha.

<div class = "well well-large" > 
  ...
</div>

<div class = "well well-small" > 
  ...
</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 imeacht le haghaidh cliceáil ar ghléasanna iOS href="#"más fearr leat ancaire a úsáid.

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

Ranganna cúntóirí

Ranganna simplí, dírithe le haghaidh taispeántais bheaga nó mionathruithe iompair.

.tarraingt-chlé

Snámh eilimint fágtha

aicme = "tarraingt ar chlé"

. tarraingt - chlé {
  snámhán : chlé ;
}

.tarraingt ar dheis

Snámh eilimint ar dheis

aicme = "tarraingt ar dheis"

. tarraingt - ceart {
  snámhphointe : ceart ;
}

.maithe

Athraigh dath eilimint go#999

aicme = "balbhaithe"

. balbhaithe {
  dath : #999; 
}

.soiléir

Glan an floatar aon eilimint

aicme = "clearfix"

. soiléiriú {
  * súmáil : 1 ; 
  &: roimhe ,
  &: tar éis {
    taispeáint : tábla ;
    ábhar : "" ; 
  }
  &: tar éis {
    soiléir : araon ;
  }
}