Gwoup bouton

Sèvi ak gwoup bouton pou mete plizyè bouton ansanm kòm yon sèl eleman konpoze. Bati yo ak yon seri de <a>oswa <button>eleman.

Pi bon pratik

Nou rekòmande gid sa yo pou itilize gwoup bouton ak ba zouti:

• Toujou itilize menm eleman nan yon gwoup bouton sèl, <a>oswa <button>.
• Pa melanje bouton ki gen koulè diferan nan menm gwoup bouton an.
• Sèvi ak ikon anplis oswa olye de tèks, men asire w ke w mete alt ak tèks tit kote sa apwopriye.

Gwoup bouton ki gen rapò ak dropdowns (gade pi ba a) ta dwe rele separeman epi toujou gen ladann yon dropdown caret pou endike konpòtman entansyonèl.

Default egzanp

Men ki jan HTML a sanble pou yon gwoup bouton estanda bati ak bouton tag anchor:

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

Egzanp ba zouti

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>

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.

Jwenn javascript la »

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.

Egzanp maketing

Menm jan ak yon gwoup bouton, maketing nou an itilize regilye maketing bouton, men ak yon ti ponyen nan adisyon yo rafine style la ak sipòte Bootstrap a dropdown plugin jQuery.

<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è. gwosè bouton ou yo a .btn-large, .btn-small, oswa .btn-mini.

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

Apèsi ak egzanp

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.

Gwosè

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

<div class = "btn-group" > 
  ...
  <ul class = "meni déroulant rale-dwa" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Egzanp maketing

Nou elaji sou deroulan bouton nòmal yo pou bay yon dezyèm aksyon bouton ki fonksyone kòm yon deklanche dropdown apa.

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

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>

Pwisan klas de baz

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

Lè pou itilize

Tab ak grenn yo bon pou seksyon nan kontni oswa navige ant paj nan kontni ki gen rapò.

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.

Onglet debaz yo

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

• Lakay
• Profile
• Mesaj

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

• Lakay
• Profile
• Mesaj

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

Ki jan yo pile yo

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

• Lakay
• Profile
• Mesaj

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

Anpile grenn

• Lakay
• Profile
• Mesaj

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

Meni rich fè fasil

Meni dropdown nan onglè Bootstrap ak grenn yo trè fasil epi yo mande sèlman yon ti kras HTML siplemantè ak yon plugin jQuery ki lejè.

Ale nan paj Javascript la pou li dokiman sou inisyalize dropdowns nan Bootstrap.

Onglet ak dropdowns

• Lakay
• Ede
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Lakay
• Ede
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

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

Aplikasyon-style navigasyon

Lis Nav bay yon fason ki senp epi fasil pou konstwi gwoup lyen nav ak en-tête si ou vle. Yo pi byen itilize nan kad tankou Finder nan OS X.

Estriktirèl, yo ap bati sou menm estil debaz yo nav kòm tab ak grenn, kidonk itilizasyon ak personnalisation yo senp.

Avèk ikon

Lis Nav yo tou fasil pou ekipe ak ikon. Ajoute apwopriye a<i>Ajoute tag

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>

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 = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li>
    <a href = "#" > Bibliyotèk </a> 
  </li>
  ...
</ul>

Egzanp ak ikon

Menm egzanp, men ak <i>tags pou ikon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klas = "ikon-liv" ></i> 
      Bibliyotèk
    </a>
  </li>
  ...
</ul>

Ki sa ki enkli

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.

Chanje ant yo se fasil epi sèlman mande pou chanje anpil ti mak.

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 tabbable nan lavi sou paj docs javascript la .

Jwenn javascript la →

Egzanp tabtab

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

Pou onglet ki aliye adwat oswa agoch, vlope .nav-tabsak .tab-contentnan .tabbable.

Marke senp

Sèvi ak onglet tabulab mande pou yon div anbalaj, yon seri onglet, ak yon seri onglet tabbable nan kontni.

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

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 echafodaj

Navbar a mande sèlman kèk div pou estrikti li byen pou ekspozisyon estatik oswa fiks.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenè" > 
      ...
    </div>
  </div>
</div>

Navbar fiks

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

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

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

Lè w mete navbar la, sonje pou w konte zòn ki kache anba a. Ajoute 40px oswa plis nan padding nan <body>. Asire w ou ajoute sa a apre debaz Bootstrap CSS la ak anvan si ou vle reponn CSS la.

Non mak

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

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

Fòm nan navbar

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

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>

Si ou vle varyasyon reponn

Tou depan de kantite kontni nan topbar ou a, ou ta ka vle aplike opsyon yo reponn. Pou fè sa, vlope kontni nav ou a nan yon div ki genyen, .nav-collapse.collapse, epi ajoute bouton baskile navbar la, .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>

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>

Aliyman eleman

Pou fè aliman yon navigasyon, yon fòm rechèch oswa yon 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.

Ajoute meni déroulant

Ajoute dropdowns ak dropups nan navigatè a se trè senp, men li mande pou itilize plugin javascript nou an .

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

Jwenn javascript la →

Tèks nan navbar la

Anvlope kòd tèks nan yon <.navbar-text>, anjeneral sou yon <p>tag pou bon dirijan ak koulè.

Poukisa sèvi ak yo

Navigasyon Breadcrumb yo itilize kòm yon fason pou montre itilizatè yo kote yo ye nan yon aplikasyon oswa yon sit, men se pa pou navigasyon prensipal. Kenbe itilizasyon yo rar ak suks pou pi efikas.

Egzanp yo

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

• Lakay

• Kay /
• Bibliyotèk

• Kay /
• Bibliyotèk /
• Done

Marke

HTML se lis estanda ou pa òdone ak lyen.

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

Lè pou itilize

Paginasyon ultra senplist ak minim estile enspire pa Rdio, bon pou aplikasyon pou ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

Lyen paj Stateful

Lyen yo personnalisable ak travay nan yon kantite sikonstans ak bon klas la. .disabledpou lyen ki pa klike ak .activepou paj aktyèl la.

Aliyman fleksib

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

Egzanp yo

Eleman pagination default la fleksib epi li travay nan yon kantite varyasyon.

Marke

Anvlope nan yon <div>, pagination se jis yon <ul>.

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

Konsènan pager

Eleman pager la se yon seri lyen pou enplemantasyon paginasyon senp ak maketing limyè e menm estil pi lejè. Li bon pou sit senp tankou blog oswa magazin.

Si ou vle eta andikape

Lyen pager tou itilize klas jeneral .disabledla nan pagination la.

Default egzanp

Pa default, pager la santre lyen.

• Previous
• Next

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

• ← Pi gran
• Nouvo →

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

Konsènan

Badj yo se ti eleman ki senp pou montre yon endikatè oswa konte nan kèk sòt. Yo souvan jwenn nan kliyan imel tankou Mail.app oswa sou aplikasyon mobil pou notifikasyon pouse.

Klas ki disponib

Bootstrap bay yon eleman ki lejè, fleksib ki rele yon inite ewo pou montre kontni sou sit ou a. Li travay byen sou sit maketing ak kontni-lou.

Marke

Vlope kontni ou nan yon divtankou konsa:

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

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 tèt paj </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.

• 

  Etikèt miniature

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksyon Aksyon

• 

  Etikèt miniature

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksyon Aksyon

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.

Markup la

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 = "span3" > 
    <a href = "#" class = "miniature" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "miniature" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etikèt miniature </h5>
      <p> Titre miniature isit la... </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è.

Reekri klas de baz

Avèk Bootstrap 2, nou te senplifye klas debaz la: .alertolye de .alert-message. Nou te redwi tou minimòm maketing ki nesesè yo—pa gen okenn <p>obligatwa pa default, jis deyò a <div>.

Mesaj alèt sèl

Pou yon eleman ki pi dirab ak mwens kòd, nou te retire gade nan diferansye pou alèt blòk, mesaj ki vini ak plis padding ak tipikman plis tèks. Klas la tou chanje an .alert-block.

Ale gwo ak javascript

Bootstrap vini ak yon gwo plugin jQuery ki sipòte mesaj alèt, sa ki fè ranvwaye yo rapid ak fasil.

Jwenn Plugin la »

Egzanp alèt

Anvlope mesaj ou a ak yon icon fèmen opsyonèl nan yon div ak klas senp.

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

Tèt leve! Aparèy iOS mande href="#"pou yon ranvwa alèt yo. Asire ou ke ou mete li ak atribi done pou jete lank fèmen ikon yo. 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.

Fasil pwolonje mesaj alèt estanda a ak de klas opsyonèl: .alert-blockpou plis padding ak kontwòl tèks ak .alert-headingpou yon tit matche.

<div class = "alèt alèt-blòk" > 
  <a class = "close" data-dismiss = "alèt" href = "#" > × </a>   
  <h4 class = "alert-heading" > Avètisman! </h4> 
  Pi bon tcheke tèt ou, ou pa...
</div>

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>

Debaz

Default ba pwogrè ak yon gradyan vètikal.

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

Raye

Sèvi ak yon gradyan pou kreye yon efè trase (pa gen okenn IE).

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

Anime

Pran egzanp trase a ak anime li (pa gen okenn IE).

<div class = "pwogrè progress-striped 
     aktif" >
  <div class = "ba" 
       style = " lajè : 40 %; " ></div> 
</div>

Koulè adisyonèl

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

Ba tras

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

Konpòtman

Ba pwogrè yo sèvi ak tranzisyon CSS3, kidonk si ou ajiste dinamik lajè a atravè javascript, li pral san pwoblèm redimansyone.

Si ou itilize .activeklas la, .progress-stripedba pwogrè ou yo pral anime bann yo gòch a dwat.

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.

Opera ak IE pa sipòte animasyon nan moman sa a.

Wells

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

<div class = "byen" > 
  ...
</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 yo mande yon href="#" pou evènman klike sou si ou pito itilize yon jete lank.

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