Egzanp

Baskile, meni kontèks pou montre lis lyen yo. Fè entèaktif ak dropdown JavaScript Plugin la .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > Yon lòt aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > Yon lòt bagay isit la </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Lyen separe </a></li>  
</ul>

Marke

Gade jis nan meni an deroulant, isit la nan HTML obligatwa a. Ou bezwen vlope deklanche dropdown la ak meni deroulant nan nan .dropdown, oswa yon lòt eleman ki deklare position: relative;. Lè sa a, jis kreye meni an.

<div class = "dropdown" > 
  <!-- Lyen oswa bouton pou aktive deroule -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > Yon lòt aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > Yon lòt bagay isit la </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Lyen separe </a></li>  
  </ul>
</div>

Opsyon

Aliman meni yo sou bò dwat la epi ajoute enkli nivo adisyonèl nan dropdowns.

Aliman meni yo

Ajoute .pull-rightyon .dropdown-menua dwat aliman meni an deroulant.

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

Opsyon meni ki andikape

Ajoute .disabledyon <li>nan deroule a pou enfim lyen an.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Lyen regilye </a></li>  
  <li class = "enfim" ><a tabindex = "-1" href = "#" > Lyen ki andikape </a></li>   
  <li><a tabindex = "-1" href = "#" > Yon lòt lyen </a></li>  
</ul>

Sou-meni sou dropdowns

Ajoute yon nivo siplemantè nan meni deroulan, ki parèt sou hover tankou sa yo ki nan OS X, ak kèk adisyon maketing senp. Ajoute .dropdown-submenunan nenpòt ki linan yon meni ki deja egziste pou manier otomatik.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "menu-menu" > 
    <a tabindex = "-1" href = "#" > Plis opsyon </a>  
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </li>
</ul>

Egzanp yo

De opsyon debaz, ansanm ak de varyasyon plis espesifik.

Gwoup bouton sèl

Vlope yon seri bouton ak .btnnan .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Goch </button> 
  <button class = "btn" > Mwayen </button> 
  <button class = "btn" > Dwa </button> 
</div>

Gwoup bouton miltip

Konbine ansanm <div class="btn-group">nan yon <div class="btn-toolbar">pou konpozan pi konplèks.

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

Gwoup bouton vètikal

Fè yon seri bouton parèt vètikal anpile olye ke orizontal.

<div class = "btn-group btn-group-vètical" > 
  ...
</div>

Checkbox ak gou radyo

Gwoup bouton yo ka fonksyone tou kòm radyo, kote yon sèl bouton ka aktif, oswa kaz, kote nenpòt ki kantite bouton ka aktif. Gade dokiman JavaScript yo pou sa.

Dropdowns nan gwoup bouton

Tèt leve!Bouton ak dropdowns yo dwe vlope endividyèlman nan pwòp yo .btn-groupnan yon .btn-toolbarpou rann apwopriye.

Apèsi ak egzanp

Sèvi ak nenpòt bouton pou deklanche yon meni deroulant lè w mete l nan yon .btn-groupepi bay meni apwopriye maketing la.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aksyon
    <span class = "caret" ></span> 
  </a>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Travay ak tout gwosè bouton

Bouton dropdowns travay nan nenpòt gwosè: .btn-large, .btn-small, oswa .btn-mini.

Mande JavaScript

Bouton dropdowns mande plugin Bootstrap dropdown pou fonksyone.

Nan kèk ka—tankou mobil—meni déroulant yo ap pwolonje deyò pòtay la. Ou bezwen rezoud aliyman an manyèlman oswa avèk JavaScript koutim.

Split bouton dropdowns

Bati sou estil gwoup bouton yo ak maketing, nou ka fasilman kreye yon bouton fann. Bouton fann yo prezante yon aksyon estanda sou bò gòch la ak yon baskile dropdown sou bò dwat la ak lyen kontèks.

<div class = "btn-group" > 
  <button class = "btn" > Aksyon </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </boutton>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Gwosè

Sèvi ak klas bouton siplemantè .btn-mini, .btn-small, oswa .btn-largepou gwosè.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Aksyon </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </boutton>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Dropup meni

Meni dewoulman yo kapab tou deklanche depi anba a lè yo ajoute yon sèl klas nan paran imedya a .dropdown-menu. Li pral baskile direksyon an nan .caretepi repositione meni an tèt li pou avanse pou pi anba a moute olye pou yo tèt desann.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </boutton>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Parfo ki lejè Menm mak, diferan klas

Tout konpozan nav isit la—onglè, grenn, ak lis— pataje menm mak ak estil de baz atravè .navklas la.

Onglet debaz yo

Pran yon regilye <ul>nan lyen epi ajoute .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Grenn debaz yo

Pran menm HTML sa a, men sèvi ak .nav-pillspito:

<ul class = "nav nav-pills" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Eta andikape

Pou nenpòt eleman navigasyon (onglè, grenn, oswa lis), ajoute .disabledpou lyen gri epi pa gen efè hover . Lyen yo ap rete klike sou, sepandan, sof si ou retire hrefatribi a. Altènativman, ou ta ka aplike JavaScript koutim pou anpeche klik sa yo.

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

Aliyman eleman

Pou fè aliman lyen navigasyon, sèvi ak .pull-leftklas .pull-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a.

Stackable

Kòm onglè ak grenn yo orizontal pa default, jis ajoute yon dezyèm klas, .nav-stacked, pou fè yo parèt vètikal anpile.

Onglets anpile

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

Anpile grenn

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

Dropdowns

Ajoute meni déroulants ak yon ti HTML anplis ak plugin JavaScript deroulans yo .

Onglet ak dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    < a class = "dropdown-toggle" 
       done-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meni dewoulman" > 
      <!-- lyen -->
    </ul>
  </li>
</ul>

Grenn ak dropdowns

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    < a class = "dropdown-toggle" 
       done-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meni dewoulman" > 
      <!-- lyen -->
    </ul>
  </li>
</ul>

Nav lis

Yon fason ki senp epi fasil pou konstwi gwoup lyen navigasyon ak tèt si ou vle. Yo pi byen itilize nan kad tankou Finder nan OS X.

Egzanp lis nav

Pran yon lis lyen epi ajoute class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Lis header </li> 
  <li class = "active" ><a href = "#" > Kay </a></li>  
  <li><a href = "#" > Bibliyotèk </a></li> 
  ...
</ul>

RemakPou fè nidifikasyon nan yon lis nav, mete class="nav nav-list"sou nenpòt ki nidifikasyon <ul>.

Divizeur orizontal

Ajoute yon divizyon orizontal pa kreye yon atik lis vid ak klas la .divider, tankou sa a:

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

Tablab nav

Bay onglè ou yo nan lavi ak yon senp plugin pou chanje ant kontni atravè onglet. Bootstrap entegre onglè tabbable nan kat estil: tèt (default), dwa, anba, ak agoch.

Egzanp tabtab

Pou fè onglet tabtab, kreye yon .tab-paneID inik pou chak tab epi vlope yo nan .tab-content.

<div class = "tabbable" > <!-- Se sèlman obligatwa pou onglè gòch/dwat -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Seksyon 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksyon 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Mwen nan Seksyon 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bonjou, mwen nan Seksyon 2. </p>
    </div>
  </div>
</div>

Fennen nan onglet

Pou fè onglet fennen nan, ajoute .fadenan chak .tab-pane.

Egzije plugin jQuery

Tout onglè tabbable yo mache ak plugin jQuery ki lejè nou an. Li plis sou fason pou pote onglet tabtab nan lavi sou paj JavaScript docs la .

Tabab nan nenpòt direksyon

Tabs sou anba a

Flip lòd HTML la epi ajoute yon klas pou mete onglè sou anba a.

<div class = "onglet tab-anba a" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Onglet sou bò gòch la

Boukante klas la pou mete onglè sou bò gòch la.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Onglet sou bò dwat la

Boukante klas la pou mete onglè sou bò dwat la.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar debaz

Pou kòmanse, navbars yo estatik (pa fiks sou tèt la) epi yo enkli sipò pou yon non pwojè ak navigasyon debaz. Mete youn nenpòt kote nan yon .container, ki fikse lajè sit ou a ak kontni an.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Tit </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Kay </a></li>  
      <li><a href = "#" > Lyen </a></li> 
      <li><a href = "#" > Lyen </a></li> 
    </ul>
  </div>
</div>

Konpozan Navbar

Mak

Yon lyen senp pou montre mak ou oswa non pwojè ou sèlman mande pou yon tag anchor.

<a class = "brand" href = "#" > Non pwojè </a>  

Lyen navigasyon yo

Atik Nav yo senp pou ajoute atravè lis ki pa òdone.

<ul class = "nav" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > Lyen </a></li> 
  <li><a href = "#" > Lyen </a></li> 
</ul>

Ou ka fasilman ajoute divizeur nan lyen navigasyon ou yo ak yon atik lis vid ak yon klas ki senp. Jis ajoute sa a ant lyen:

<ul class = "nav" > 
  ...
  <li class = "divider-vètical" ></li> 
  ...
</ul>

Fòm

Pou byen style ak pozisyon yon fòm nan navbar la, ajoute klas ki apwopriye yo jan yo montre anba a. Pou yon fòm default, enkli .navbar-formak swa .pull-leftoswa .pull-rightbyen aliman li.

<form class = "navbar-form pull-left" > 
  < type input = "tèks" klas = "span2" >  
  <button type = "submit" class = "btn" > Soumèt </button>  
</form>

Fòm rechèch

Pou yon fòm rechèch plis Customized, ajoute .navbar-searchnan formak .search-querynan opinyon an pou estil espesyalize nan navbar la.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Rechèch" >   
</form>

Aliyman eleman

Aliman lyen navigasyon, fòm rechèch, oswa tèks, sèvi ak .pull-leftklas .pull-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a.

Sèvi ak dropdowns

Ajoute dropdowns ak dropups nan navigasyon an ak yon ti kras nan maketing ak dropdowns JavaScript plugin yo .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Kont
      <b class = "caret" ></b> 
    </a>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </li>
</ul>

Vizite dokiman déroulant JavaScript yo pou plis maketing ak enfòmasyon sou apèl dropdowns.

Tèks

Anvlope fisèl tèks nan yon eleman ak .navbar-text, anjeneral sou yon <p>tag pou bon dirijan ak koulè.

Varyasyon ekspozisyon opsyonèl

Ranje navbar la nan tèt oswa anba vi a ak yon klas adisyonèl sou div ki pi eksteryè a, .navbar.

Fiks sou tèt

Ajoute .navbar-fixed-topepi sonje pou konsidere zòn ki kache anba li lè w ajoute omwen 40px paddingnan <body>. Asire w ou ajoute sa a apre debaz Bootstrap CSS la ak anvan si ou vle reponn CSS la.

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

Fiks anba

Ajoute .navbar-fixed-bottompito.

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

Estatik navbar anlè

Kreye yon navbar plen lajè ki defile ak paj la lè w ajoute .navbar-static-top. Kontrèman ak .navbar-fixed-topklas la, ou pa bezwen chanje okenn padding sou body.

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

Navbar ki reponn

Pou aplike yon navbar ki reponn efondre, vlope kontni navbar ou a nan yon div ki genyen, .nav-collapse.collapse, epi ajoute bouton baskile navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenè" > 
 
      <!-- Yo itilize .btn-navbar kòm baskil pou kontni navbar ki tonbe -->
      <a class = "btn btn-navbar" data-toggle = "effondreman" data-target = ".nav-effondreman" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Asire w ou kite mak la deyò si ou vle li montre -->
      <a class = "brand" href = "#" > Non pwojè </a>  
 
      <!-- Tout sa ou vle kache nan 940px oswa mwens, mete nan isit la -->
      <div class = "nav-effondreman" > 
        <!-- .nav, .navbar-search, .navbar-form, elatriye -->
      </div>
 
    </div>
  </div>
</div>

Varyasyon Envèse

Modifye aparans nan navbar la lè w ajoute .navbar-inverse.

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

Egzanp yo

Yon sèl egzanp montre jan li ta ka parèt sou plizyè paj.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kay </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bibliyotèk </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Done </li> 
</ul>

Pajinasyon estanda

Senp paginasyon enspire pa Rdio, bon pou apps ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </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 = "#" > Next </a></li> 
  </ul>
</div>

Opsyon

Eta andikape ak aktif

Lyen yo customizable pou diferan sikonstans. Itilize .disabledpou lyen ki pa klike ak .activepou endike paj aktyèl la.

<div class = "pagination" > 
  <ul>
    <li class = "enfim" ><a href = "#" > « </a></li>  
    <li class = "aktif" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Si ou vle, ou ka chanje lankr aktif oswa andikape pou span pou retire fonksyon klike sou pandan w ap kenbe estil entansyon yo.

<div class = "pagination" > 
  <ul>
    <li class = "enfim" ><span> « </span></li> 
    <li class = "aktif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Gwosè

Anpenpan pi gwo oswa pi piti paginasyon? Ajoute .pagination-large, .pagination-small, oswa .pagination-minipou gwosè adisyonèl.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Aliyman

Ajoute youn nan de klas opsyonèl pou chanje aliyman lyen paginasyon: .pagination-centeredak .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-dwat" > 
  ...
</div>

Pager

Lyen rapid anvan ak pwochen pou enplemantasyon paginasyon senp ak mak ak estil limyè. Li bon pou sit senp tankou blog oswa magazin.

Default egzanp

Pa default, pager la santre lyen.

<ul class = "pager" > 
  <li><a href = "#" > Previous </a></li> 
  <li><a href = "#" > Next </a></li> 
</ul>

Lyen ki aliyen

Altènativman, ou ka aliman chak lyen sou kote sa yo:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Pi gran </a> 
  </li>
  <li klas = "pwochen" > 
    <a href = "#" > Nouvo → </a> 
  </li>
</ul>

Si ou vle eta andikape

Lyen pager yo itilize tou klas itilite jeneral .disabledki soti nan paginasyon an.

<ul class = "pager" > 
  <li class = "anvan enfim" > 
    <a href = "#" > ← Pi gran </a> 
  </li>
  ...
</ul>

Etikèt

Badj

Fasil pliable

Pou aplikasyon fasil, etikèt ak badj yo pral tou senpleman tonbe (atravè seleksyon CSS a :empty) lè pa gen okenn kontni ki egziste nan.

Inite ewo

Yon eleman ki lejè, fleksib pou montre kontni kle sou sit ou a. Li travay byen sou sit maketing ak kontni-lou.

<div class = "ewo-inite" > 
  <h1> Tit </h1>
  <p> Eslogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Aprann plis
    </a>
  </p>
</div>

Tèt paj

Yon kokiy senp pou yon h1espas apwopriye epi segman seksyon kontni sou yon paj. Li ka itilize eleman h1default smallla ak pifò lòt konpozan (ak estil adisyonèl).

<div class = "page-header" > 
  <h1> Egzanp header paj <small> Soutèks pou header </small></h1>
</div>

Miniatures par défaut

Pa default, ti miniatures Bootstrap yo fèt pou montre imaj ki lye yo ak maketing minimòm obligatwa.

Trè personnalisable

Avèk yon ti mak siplemantè, li posib pou ajoute nenpòt kalite kontni HTML tankou tit, paragraf, oswa bouton nan miniatures.

Poukisa itilize miniatures

Miniatures (anvan .media-gridjiska v1.4) yo bon pou kadriyaj foto oswa videyo, rezilta rechèch imaj, pwodwi Yo Vann an Detay, pòtfolyo, ak plis ankò. Yo ka lyen oswa kontni estatik.

Senp, fleksib maketing

Markage miniatures se senp — yon ulak nenpòt kantite lieleman se tout sa ki nesesè. Li la tou super fleksib, sa ki pèmèt pou nenpòt kalite kontni ak jis yon ti jan plis maketing vlope sa ou yo.

Itilize gwosè kolòn kadriyaj

Anfen, eleman miniature yo sèvi ak klas sistèm kadriyaj ki deja egziste-tankou .span2oswa .span3-pou kontwòl dimansyon miniature.

Marke

Kòm mansyone deja, maketing ki nesesè pou ti miniatures se lejè ak senp. Men yon gade nan konfigirasyon default pou imaj ki lye yo :

<ul class = "miniature" > 
  <li class = "span4" > 
    <a href = "#" class = "miniature" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Pou kontni HTML koutim nan miniatures, maketing la chanje yon ti kras. Pou pèmèt kontni nivo blòk nenpòt kote, nou chanje a <a>pou yon <div>tankou konsa:

<ul class = "miniature" > 
  <li class = "span4" > 
    <div class = "miniature" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etikèt miniature </h3>
      <p> Titre miniature... </p>
    </div>
  </li>
  ...
</ul>

Plis egzanp

Eksplore tout opsyon ou yo ak plizyè klas gri ki disponib pou ou. Ou kapab tou melanje ak matche ak diferan gwosè.

Default alèt

Anvlope nenpòt tèks ak yon bouton anile opsyonèl .alertpou yon mesaj avètisman debaz.

<div class = "alèt" > 
  <button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>   
  <strong> Avètisman! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon.
</div>

Bouton ranvwaye

Mobile Safari ak Mobile Opera navigatè, anplis de data-dismiss="alert"atribi a, mande href="#"pou yon ranvwa alèt lè w ap itilize yon <a>tag.

<a href = "#" class = "close" data-dismiss = "alèt" > × </a>   

Altènativman, ou ka itilize yon <button>eleman ki gen atribi done a, sa nou te chwazi fè pou dokiman nou yo. Lè w ap itilize <button>, ou dwe mete type="button"oswa fòm ou yo pa ka soumèt.

<button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>   

Rejte alèt yo atravè JavaScript

Sèvi ak alèt jQuery plugin pou ranvwaye alèt rapid ak fasil.

Opsyon

Pou mesaj ki pi long, ogmante ansman twal gaz la sou tèt ak anba nan anbalaj alèt la lè w ajoute .alert-block.

<div class = "alèt alèt-blòk" > 
  <button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>   
  <h4> Avètisman! </h4>
  Pi bon tcheke tèt ou, ou pa...
</div>

Altènativ kontèks

Ajoute klas si ou vle chanje konotasyon yon alèt.

Erè oswa danje

<div class = "alèt alèt-erè" > 
  ...
</div>

Siksè

<div class = "alèt alèt-siksè" > 
  ...
</div>

Enfòmasyon

<div class = "alèt alèt-info" > 
  ...
</div>

Egzanp ak maketing

Debaz

Default ba pwogrè ak yon gradyan vètikal.

<div class = "pwogrè" > 
  <div class = "bar" style = " lajè : 60 %; " ></div>   
</div>

Raye

Sèvi ak yon gradyan pou kreye yon efè trase. Pa disponib nan IE7-8.

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

Anime

Ajoute .activenan .progress-stripedpou anime bann yo dwat a goch. Pa disponib nan tout vèsyon IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " lajè : 40 %; " ></div>   
</div>

Anpile

Mete plizyè ba nan menm bagay la .progresspou anpile yo.

<div class = "pwogrè" > 
  <div class = "bar bar-siksè" style = " lajè : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " lajè : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " lajè : 10 %; " ></div>   
</div>

Opsyon

Koulè adisyonèl

Ba pwogrè sèvi ak kèk nan menm bouton ak klas alèt pou estil ki konsistan.

<div class = "pwogrè pwogrè-info" > 
  <div class = "bar" style = " lajè : 20 % " ></div>   
</div>
<div class = "pwogrè pwogrè-siksè" > 
  <div class = "bar" style = " lajè : 40 % " ></div>   
</div>
<div class = "pwogrè pwogrè-avètisman" > 
  <div class = "bar" style = " lajè : 60 % " ></div>   
</div>
<div class = "pwogrè pwogrè-danger" > 
  <div class = "bar" style = " lajè : 80 % " ></div>   
</div>

Ba tras

Menm jan ak koulè solid yo, nou gen varye ba pwogrè trase.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " lajè : 20 % " ></div>   
</div>
<div class = "pwogrè pwogrè-siksè pwogrè-ray" > 
  <div class = "bar" style = " lajè : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " lajè : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " lajè : 80 % " ></div>   
</div>

Sipò navigatè

Ba pwogrè yo sèvi ak gradyan CSS3, tranzisyon, ak animasyon pou reyalize tout efè yo. Karakteristik sa yo pa sipòte nan IE7-9 oswa ansyen vèsyon Firefox.

Vèsyon ki pi bonè pase Internet Explorer 10 ak Opera 12 pa sipòte animasyon yo.

Estil objè abstrè pou bati divès kalite konpozan (tankou kòmantè blog, Tweet, elatriye) ki prezante yon imaj ki aliye sou bò gòch oswa dwa ansanm ak kontni tèks.

Default egzanp

Medya default yo pèmèt flote yon objè medya (imaj, videyo, odyo) sou bò gòch oswa adwat yon blòk kontni.

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.

<div class = "medya" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "medya-kò" > 
    <h4 class = "media-heading" > Medya tit </h4> 
    ...
 
    <!-- Need media object -->
    <div class = "medya" > 
      ...
    </div>
  </div>
</div>

Lis medya yo

Avèk yon ti mak siplemantè, ou ka itilize medya andedan lis (itil pou fil kòmantè oswa lis atik).

<ul class = "lis medya" > 
  <li class = "medya" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "medya-kò" > 
      <h4 class = "media-heading" > Medya tit </h4> 
      ...
 
      <!-- Need media object -->
      <div class = "medya" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Sèvi ak pi a kòm yon efè senp sou yon eleman bay li yon efè ensèkle.

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

Klas opsyonèl

Kontwòl padding ak kwen awondi ak de klas modifye opsyonèl.

<div class = "byen byen-gwo" > 
  ...
</div>

<div class = "byen byen-ti" > 
  ...
</div>

Fèmen icon

Sèvi ak jenerik ikòn fèmen pou ranvwaye kontni tankou modal ak alèt.

<button class = "fèmen" > × </boutton> 

Aparèy iOS mande pou yon href="#"evènman klike sou si ou ta pito itilize yon jete lank.

<a class = "close" href = "#" > × </a>  

Klas asistan yo

Senp, klas konsantre pou ti ekspozisyon oswa ajisteman konpòtman.

.rale-gòch

Flote yon eleman kite

klas = "rale-gòch"

. rale - gòch {
  flote : gòch ;
}

.rale-dwat

Flote yon eleman dwat

klas = "rale-dwa"

. rale - dwat {
  flote : dwa ;
}

.mute

Chanje koulè yon eleman an#999

klas = "moute"

. muet {
  koulè : #999; 
}

.clearfix

Klè floatsou nenpòt eleman

klas = "clearfix"

. clearfix {
  * rale : 1 ; 
  &: anvan ,
  &: apre {
    ekspozisyon : tab ;
    kontni : "" ; 
  }
  &: apre {
    klè : tou de ;
  }
}