Khawm pawg

Siv cov pab pawg khawm kom koom nrog ntau lub nyees khawm ua ke ua ib qho kev sib xyaw ua ke. Ua lawv nrog ib tug series ntawm <a>los yog <button>hais.

Cov kev coj ua zoo tshaj plaws

Peb pom zoo cov lus qhia hauv qab no rau kev siv khawm pawg thiab toolbars:

• Ib txwm siv tib lub caij hauv ib pawg khawm, <a>lossis <button>.
• Tsis txhob sib tov cov nyees khawm ntawm cov xim sib txawv hauv tib pawg khawm.
• Siv cov cim ntxiv rau lossis hloov cov ntawv, tab sis nco ntsoov suav nrog alt thiab cov ntawv sau npe yog qhov tsim nyog.

Cov pawg khawm cuam tshuam nrog kev poob qis (saib hauv qab) yuav tsum raug hu tawm nyias thiab ib txwm suav nrog kev saib xyuas kev poob qis los qhia tus cwj pwm xav.

Piv txwv li

Nov yog yuav ua li cas HTML saib rau cov txheej txheem khawm pawg tsim nrog thauj tog rau nkoj tag khawm:

<div class = "btn-group" > 
  <a class="btn" href="#"> 1 </a> _ _ _ _ _  
  <a class="btn" href="#"> 2 </a> _ _ _ _ _  
  <a class="btn" href="#"> 3 </a> _ _ _ _ _  
</div>

Toolbar piv txwv

Muab cov khoom sib xyaw ua ke <div class="btn-group">rau hauv ib qho <div class="btn-toolbar">rau ntau qhov sib txawv.

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

Checkbox thiab xov tooj cua flavors

Cov pab pawg khawm kuj tseem tuaj yeem ua haujlwm raws li xov tooj cua, qhov twg tsuas yog ib lub pob tuaj yeem ua haujlwm, lossis checkboxes, qhov twg cov nyees khawm yuav ua haujlwm. Saib Javascript docs rau qhov ntawd.

Tau txais javascript »

Tau taub hau

CSS rau cov pab pawg khawm yog nyob rau hauv cov ntaub ntawv cais, button-groups.less.

Khawm dropdowns

Siv ib lub pob kom ua rau cov ntawv qhia poob qis los ntawm qhov muab tso rau hauv ib qho .btn-groupthiab muab cov ntawv qhia zaub mov kom raug.

Tau taub hau! Khawm dropdowns xav tau Bootstrap dropdown plugin ua haujlwm.

Piv txwv markup

Zoo ib yam li ib pab pawg khawm, peb cov cim siv lub pob khawm tsis tu ncua, tab sis nrog ib qho ntxiv ntawm cov khoom ntxiv los kho cov qauv thiab txhawb nqa Bootstrap lub dropdown jQuery plugin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Kev ua
    <span dir = "ltr" >Tswv Yim Vaj</span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Split khawm dropdowns

Lub tsev nyob rau hauv cov khawm pab pawg neeg style thiab markup, peb tuaj yeem yooj yim tsim lub pob phua. Split nyees khawm muaj cov txheej txheem ua haujlwm nyob rau sab laug thiab lub dropdown toggle ntawm sab xis nrog cov ntsiab lus txuas.

Piv txwv markup

Peb nthuav dav ntawm qhov ib txwm khawm dropdowns los muab lub khawm thib ob uas ua haujlwm ua ib qho kev sib cais.

<div class = "btn-group" > 
  <a class="btn" href="#"> Ua </a> _ _ _ _ _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span dir = "ltr" >Tswv Yim Vaj</span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Cov chav kawm muaj zog

Tag nrho cov khoom siv ntawm no - tabs, tshuaj, thiab cov npe - qhia tib lub hauv paus cim thiab cov qauv hauv .navchav kawm.

Thaum siv

Tabs thiab cov ntsiav tshuaj yog qhov zoo rau cov ntu ntawm cov ntsiab lus lossis kev taw qhia ntawm nplooj ntawv ntawm cov ntsiab lus ntsig txog.

Kev sib xyaw ua ke

Txhawm rau kho cov kev sib txuas nav, siv cov chav kawm siv .pull-lefthluav .pull-righttaws xob. Ob chav kawm yuav ntxiv CSS ntab hauv cov lus qhia.

Basic tabs

Siv ib qho kev <ul>sib txuas tsis tu ncua thiab ntxiv .nav-tabs:

• Tsev
• Profile
• Cov lus

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

Cov tshuaj yooj yim

Siv tib yam HTML, tab sis siv .nav-pillshloov:

• Tsev
• Profile
• Cov lus

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

Yuav ua li cas stack 'em

Raws li tabs thiab cov tshuaj yog kab rov tav los ntawm lub neej ntawd, tsuas yog ntxiv ib chav kawm thib ob, .nav-stacked, ua kom lawv tshwm vertically stacked.

Stacked tabs

• Tsev
• Profile
• Cov lus

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

Stacked tshuaj

• Tsev
• Profile
• Cov lus

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

Cov zaub mov nplua nuj ua tau yooj yim

Dropdown menus hauv Bootstrap tabs thiab ntsiav tshuaj yog super yooj yim thiab yuav tsum tau tsuas yog me ntsis ntxiv HTML thiab lub teeb jQuery plugin.

Lub taub hau mus rau nplooj ntawv Javascript los nyeem cov ntaub ntawv ntawm kev pib ua cov dropdowns hauv Bootstrap.

Tabs nrog dropdowns

• Tsev
• Profile
• poob
  • Kev ua
  • Lwm qhov kev ua
  • Lwm yam ntawm no
  • Sib cais

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        poob
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Cov tshuaj nrog dropdowns

• Tsev
• Profile
• poob
  • Kev ua
  • Lwm qhov kev ua
  • Lwm yam ntawm no
  • Sib cais

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        poob
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Daim ntawv thov-style navigation

Cov npe Nav muab ib txoj hauv kev yooj yim thiab yooj yim los tsim cov pab pawg ntawm cov kev sib txuas nav nrog cov npe xaiv. Lawv zoo tshaj plaws siv hauv sidebars zoo li Finder hauv OS X.

Raws li txoj cai, lawv tau tsim los ntawm tib lub hauv paus nav cov qauv zoo li tabs thiab tshuaj, yog li kev siv thiab kev kho kom haum yog ncaj nraim.

Nrog icons

Nav cov npe kuj yooj yim rau nruab nrog cov cim. Ntxiv cov ntawv <i>cim npe kom raug nrog cov chav kawm thiab koj tau teeb tsa.

Example nav lis

Siv ib daim ntawv teev cov kev sib txuas thiab ntxiv class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Sau npe
  </li>
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Tsev qiv ntawv </a> _ 
  </li>
  ...
</ul>

Piv txwv nrog cov cim

Ib yam piv txwv, tab sis nrog <i>cov cim npe rau cov cim.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Lub tsev qiv ntawv
    </a>
  </li>
  ...
</ul>

Dab tsi suav nrog

Nqa koj cov tabs mus rau lub neej nrog lub plugin yooj yim los hloov ntawm cov ntsiab lus ntawm tabs. Bootstrap integrates tabbable tabs nyob rau hauv plaub hom: sab saum toj (default), txoj cai, hauv qab, thiab sab laug.

Hloov ntawm lawv yog ib qho yooj yim thiab tsuas yog yuav tsum tau hloov me ntsis markup.

Tabbable piv txwv

Txhawm rau ua tabs tabbable, qhwv lub .nav-tabshauv lwm div nrog chav kawm .tabbable.

Kev cai jQuery plugin

Tag nrho cov tabbable tabs yog siv los ntawm peb lub teeb jQuery plugin. Nyeem ntxiv txog yuav ua li cas coj tabbable tabs rau lub neej ntawm nplooj ntawv javascript docs.

Tau qhov javascript →

Tabs hauv qab

Tig qhov kev txiav txim ntawm HTML thiab ntxiv ib chav kawm los muab tabs rau hauv qab.

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

Tabs ntawm sab laug

Hloov cov chav kawm kom muab tabs ntawm sab laug.

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

Tabs ntawm sab xis

Hloov cov chav kawm kom muab tabs ntawm sab xis.

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

Navbar scaffolding

Lub navbar yuav tsum tsuas yog ob peb divs los tsim nws kom zoo rau cov duab zoo li qub lossis cov duab tas.

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

Tsau navbar

Txhawm rau ua kom lub navbar tsau rau sab saum toj ntawm qhov chaw saib, ntxiv .navbar-fixed-toprau sab nraud div, .navbar.

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

Hauv koj li CSS, koj tseem yuav tau suav rau qhov sib tshooj nws ua los ntawm kev ntxiv 40px lossis ntau dua ntawm padding rau koj <body>. Nco ntsoov ntxiv qhov no tom qab cov tub ntxhais Bootstrap CSS thiab ua ntej qhov kev xaiv teb CSS.

Hom lub npe

Ib qho yooj yim txuas los qhia koj lub hom phiaj lossis lub npe project tsuas yog xav tau ib qho chaw thauj tog rau nkoj.

<a class = "brand" href = "#" >  
  Lub npe qhov project
</a>

Nrhiav daim ntawv

Cov ntawv tshawb fawb tau txais cov qauv kev cai hauv navbar nrog cov .navbar-searchchav kawm. Ntxiv .pull-leftlos yog .pull-rightnyob rau hauv formalign nws.

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

Optional teb variation

Nyob ntawm seb muaj pes tsawg cov ntsiab lus hauv koj lub topbar, tej zaum koj yuav xav siv cov kev xaiv teb. Txhawm rau ua li ntawd, qhwv koj cov ntsiab lus nav hauv qhov muaj div, .nav-collapse.collapse, thiab ntxiv cov khawm navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar yog siv los ua lub toggle rau cov ntsiab lus navbar uas ploj lawm -->
      <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>
 
      <!-- Nco ntsoov tawm lub hom tawm ntawd yog tias koj xav kom nws pom -->
      <a class="brand" href="#" > Project name </a> _ _ _  
 
      <!-- Txhua yam koj xav tau zais ntawm 940px lossis tsawg dua, tso rau hauv no -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, thiab lwm yam -->
      </div>
 
    </div>
  </div>
</div>

Nav links

Nav khoom yog yooj yim ntxiv los ntawm cov npe tsis tau xaj.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> Tsev </a> _ _ _ 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Koj tuaj yeem yooj yim ntxiv cov faib rau koj cov kev sib txuas nav nrog rau cov npe khoob thiab cov chav kawm yooj yim. Tsuas yog ntxiv qhov no ntawm qhov txuas:

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

Kev sib xyaw ua ke

Txhawm rau kho qhov nav, tshawb nrhiav, lossis ntawv nyeem, siv cov chav kawm siv .pull-lefthluav .pull-righttaws xob. Ob chav kawm yuav ntxiv CSS ntab hauv cov lus qhia.

Ntxiv cov dropdowns

Ntxiv dropdowns rau nav yog super yooj yim, tab sis yuav tsum tau siv peb cov javascript plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Tus account
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Tau qhov javascript →

Vim li cas siv lawv

Breadcrumb navigation yog siv los ua ib txoj hauv kev los qhia cov neeg siv qhov twg lawv nyob hauv ib qho app lossis ib qhov chaw, tab sis tsis yog rau thawj qhov kev taw qhia. Khaws lawv cov kev siv me me thiab succinct kom ua tau zoo tshaj plaws.

Piv txwv

Ib qho piv txwv qhia tau hais tias nws tuaj yeem tso tawm thoob plaws ntau nplooj ntawv.

• Tsev

• Tsev /
• Lub tsev qiv ntawv

• Tsev /
• Lub tsev qiv ntawv /
• Cov ntaub ntawv

Markup

HTML yog koj daim ntawv teev npe tsis raug cai nrog cov txuas.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> Tsev </a> < span class = "divider" > / < / span>   
  </li>
  <li>
    <a href="#"> Lub Tsev Qiv Ntawv </a> < span class = "divider" > / < / span>   
  </li>
  <li class = "active" > 
    <a href="#"> Cov ntaub ntawv </a> _ 
  </li>
</ul>

Thaum siv

Ultra simplistic thiab minimally styled pagination tshwm sim los ntawm Rdio, zoo rau cov apps thiab tshawb nrhiav. Qhov loj thaiv yog ib qho nyuaj rau nco, yooj yim scalable, thiab muab loj nias qhov chaw.

Stateful nplooj ntawv links

Kev sib txuas yog customizable thiab ua hauj lwm nyob rau hauv ib tug xov tooj ntawm cov xwm txheej nrog rau cov chav kawm zoo. .disabledrau unclickable links thiab .activerau nplooj ntawv tam sim no.

Hloov kho kom haum

Ntxiv ib qho ntawm ob chav kawm xaiv los hloov qhov kev sib tw ntawm kev sib txuas ntawm pagination: .pagination-centeredthiab .pagination-right.

Piv txwv

Lub default pagination tivthaiv yog hloov tau thiab ua haujlwm nyob rau hauv ib tug xov tooj ntawm variations.

Markup

qhwv hauv ib <div>, pagination tsuas yog ib <ul>.

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

Hais txog pager

Lub pager tivthaiv yog ib txheej ntawm kev sib txuas rau kev siv pagination yooj yim nrog lub teeb cim thiab txawm tias sib dua. Nws yog qhov zoo rau cov chaw yooj yim xws li blogs lossis cov ntawv xov xwm.

Piv txwv li

Los ntawm lub neej ntawd, pager chaw txuas.

• Yav dhau los
• Tom ntej no

<ul class = "pager" > 
  <li>
    <a href="#"> Previous </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Tom ntej </a> _ _ 
  </li>
</ul>

Aligned links

Xwb, koj tuaj yeem kho txhua qhov txuas mus rau sab:

• ← Laus
• Tshiab →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href="#"> & larr ; _ Laus </a> 
  </li>
  <li class = "next" > 
    <a href="#"> Tshiab & rarr ; </a> 
  </li>
</ul>

Bootstrap muab lub teeb yuag, hloov tau yooj yim hu ua chav tsev hero los nthuav qhia cov ntsiab lus ntawm koj qhov chaw. Nws ua haujlwm zoo ntawm kev lag luam thiab cov ntsiab lus-hnyav qhov chaw.

Markup

Qhwv koj cov ntsiab lus hauv ib divyam li ntawd:

<div class = "hero-unit" > 
  <h1> Lub taub hau </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Kawm ntxiv
    </a>
  </p>
</div>

Lub plhaub yooj yim rau qhov h1kom tsim nyog qhov chaw tawm thiab ntu ntu ntawm cov ntsiab lus ntawm nplooj ntawv. Nws tuaj yeem siv lub h1neej ntawd small, lub ntsiab lus thiab feem ntau lwm yam (nrog rau cov qauv ntxiv).

<div class = "page-haeder" > 
  <h1> Piv txwv nplooj ntawv header </h1>
</div>

Default thumbnails

Los ntawm lub neej ntawd, Bootstrap's thumbnails yog tsim los nthuav qhia cov duab txuas nrog tsawg kawg yuav tsum tau kos.

Kho siab heev

Nrog me ntsis ntawm cov cim ntxiv, nws muaj peev xwm ntxiv txhua hom HTML cov ntsiab lus xws li kab lus, kab lus, lossis cov nyees khawm rau hauv cov duab me.

• 

  Thumbnail daim ntawv lo

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

  Kev ua Kev ua

• 

  Thumbnail daim ntawv lo

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

  Kev ua Kev ua

Vim li cas thiaj siv cov duab me

Thumbnails (yav dhau .media-gridlos txog v1.4) yog qhov zoo rau daim phiaj duab lossis cov yeeb yaj kiab, cov duab tshawb nrhiav, cov khoom muag, cov ntaub ntawv, thiab ntau ntxiv. Lawv tuaj yeem yog cov ntawv txuas lossis cov ntsiab lus zoo li qub.

Yooj yim, saj zawg zog markup

Thumbnail markup yog qhov yooj yim - ulnrog ib tus lej ntawm licov ntsiab lus yog txhua yam uas yuav tsum tau ua. Nws kuj tseem hloov tau yooj yim, tso cai rau txhua hom ntsiab lus nrog me ntsis ntxiv cim los qhwv koj cov ntsiab lus.

Siv daim phiaj kab loj

Thaum kawg, cov duab thumbnails siv cov chav kawm kab sib chaws uas twb muaj lawm - zoo li .span2lossis .span3- rau kev tswj cov duab me me.

Lub markup

Raws li tau hais dhau los, qhov yuav tsum tau kos npe rau cov duab me me yog lub teeb thiab ncaj nraim. Nov yog saib ntawm qhov teeb tsa ua ntej rau cov duab txuas :

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

Rau kev cai HTML cov ntsiab lus hauv cov duab me, cov cim hloov me ntsis. Txhawm rau tso cai thaiv cov ntsiab lus nyob txhua qhov chaw, peb sib pauv qhov <a>zoo <div>li:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail label </h5>
      <p> Tub Nuj Nplhaib txoj nkauj no... </p>
    </div>
  </li>
  ...
</ul>

Piv txwv ntxiv

Tshawb nrhiav tag nrho koj cov kev xaiv nrog rau ntau yam kab sib chaws uas muaj rau koj. Koj tseem tuaj yeem sib xyaw thiab sib txawv qhov ntau thiab tsawg.

Rewritten base class

Nrog Bootstrap 2, peb tau simplified lub hauv paus chav kawm: .alerttsis yog .alert-message. Peb kuj tau txo qhov tsawg kawg nkaus uas yuav tsum tau kos npe - tsis <p>yog yuav tsum tau los ntawm lub neej ntawd, tsuas yog sab nrauv <div>.

Cov lus ceeb toom ib leeg

Rau cov khoom siv ruaj khov dua nrog cov lej tsawg, peb tau tshem tawm qhov sib txawv saib rau kev ceeb toom thaiv, cov lus uas tuaj nrog ntau dua padding thiab feem ntau cov ntawv nyeem ntau dua. Cov chav kawm kuj tau hloov mus rau .alert-block.

Mus zoo nrog javascript

Bootstrap los nrog lub zoo jQuery plugin uas txhawb cov lus ceeb toom, ua rau lawv tshem tawm sai thiab yooj yim.

Tau lub plugin »

Piv txwv ceeb toom

Qhwv koj cov lus thiab ib qho kev xaiv kaw icon hauv div nrog chav kawm yooj yim.

<div class = "alert" > 
  <a class = "kaw" data-dismiss = "alert" > × </a>  
  <strong> Ceeb toom! </strong> Zoo tshaj koj tus kheej, koj tsis saib zoo heev.
</div>

Yooj yim txuas ntxiv cov lus ceeb toom tus qauv nrog ob chav kawm xaiv: .alert-blockrau ntau qhov padding thiab cov ntawv nyeem thiab .alert-headingrau cov lus sib xws.

<div class = "alert-block" > 
  <a class = "kaw" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Ceeb toom! </h4> 
  Best check koj tus kheej, koj tsis yog ...
</div>

yuam kev los yog txaus ntshai

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

Kev vam meej

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

Cov ntaub ntawv

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

Basic

Default kev nce qib bar nrog ntsug gradient.

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

striped

Siv cov gradient los tsim cov nyhuv striped.

<div class = "progress-info 
     kev vam meej" >
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

Animated

Siv tus qauv kab txaij thiab ua kom nws ua.

<div class = "progress-danger 
     kev nce qib-stripe active" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Cov xim ntxiv

Cov kab kev nce qib siv qee cov npe tib yam li cov nyees khawm thiab cov lus ceeb toom rau cov qauv zoo sib xws.

• .progress-info
• .progress-success
• .progress-danger

Xwb, koj tuaj yeem kho cov ntaub ntawv LESS thiab yob koj tus kheej xim thiab qhov ntau thiab tsawg.

Cwj pwm

Cov kab nce qib siv CSS3 kev hloov pauv, yog li yog tias koj hloov kho qhov dav ntawm javascript, nws yuav hloov kho kom zoo.

Yog tias koj siv .activechav kawm, koj .progress-stripedqhov kev kawm bar yuav ua rau cov kab txaij sab laug mus rau sab xis.

Kev them nyiaj yug browser

Cov kab nce qib siv CSS3 gradients, kev hloov pauv, thiab cov animations kom ua tiav tag nrho lawv cov teebmeem. Cov yam ntxwv no tsis txaus siab hauv IE7-8 lossis laus dua ntawm Firefox.

Opera tsis txhawb cov animations nyob rau lub sijhawm no.

Wells

Siv lub qhov dej zoo li cov nyhuv yooj yim ntawm ib lub caij los muab nws cov nyhuv inset.

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

Daim paib

Siv ib daim paib ntawm ib lub caij rau kev suav tsis tau nyeem lossis ua qhov taw qhia yooj yim.

<span class = "paj" > 3 </div> 

Kaw lub cim

Siv lub cim ze ze rau kev tso tawm cov ntsiab lus xws li modals thiab ceeb toom.

×

<a class = "kaw"> & times ; </a>