Cheebtsam

Kaum ob ntawm cov khoom siv rov siv tau tsim los muab kev taw qhia, ceeb toom, popovers, thiab ntau dua.

Piv txwv

Ob txoj kev xaiv yooj yim, nrog rau ob qho kev hloov pauv tshwj xeeb.

Ib pawg khawm

Qhwv ib cov nyees khawm nrog .btnrau hauv .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > laug </button>
  3. <button class = "btn" > nruab nrab </button>
  4. <button class = "btn" > Txoj Cai </button>
  5. </div>

Ntau pawg khawm

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Vertical khawm pawg

Ua ib txheej ntawm cov nyees khawm tshwm vertically stacked es horizontally.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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 cov ntaub ntawv JavaScript rau qhov ntawd.

Dropdowns hauv pawg khawm

Tau taub hau!Cov nyees khawm nrog dropdowns yuav tsum tau muab qhwv rau hauv lawv tus kheej .btn-grouphauv ib qho .btn-toolbarkev ua kom zoo.

Txheej txheem cej luam thiab piv txwv

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Kev ua
  4. <span dir = "ltr" >Tswv Yim Vaj</span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Ua haujlwm nrog txhua qhov ntau thiab tsawg khawm

Khawm dropdowns ua haujlwm ntawm txhua qhov loj: .btn-large, .btn-small, lossis .btn-mini.

Yuav tsum muaj JavaScript

Khawm dropdowns xav tau Bootstrap dropdown plugin ua haujlwm.

Qee qhov xwm txheej - zoo li lub xov tooj ntawm tes - cov ntawv qhia zaub mov poob yuav nthuav tawm sab nraum qhov chaw saib. Koj yuav tsum tau daws qhov kev sib tw manually lossis nrog kev cai JavaScript.


Split khawm dropdowns

Lub tsev nyob rau hauv cov khawm pab pawg neeg style thiab markup, peb muaj peev xwm yooj yim tsim ib tug phua khawm. 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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span dir = "ltr" >Tswv Yim Vaj</span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Qhov ntau thiab tsawg

Siv cov chav kawm khawm ntxiv .btn-mini, .btn-small, lossis .btn-largerau qhov loj me.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Ua </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span dir = "ltr" >Tswv Yim Vaj</span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Dropup menus

Dropdown menus kuj tuaj yeem toggled los ntawm hauv qab los ntawm kev ntxiv ib chav kawm rau niam txiv tam sim ntawm .dropdown-menu. Nws yuav tig cov kev taw qhia ntawm .caretthiab reposition cov ntawv qhia zaub mov nws tus kheej kom txav los ntawm hauv qab mus rau saum toj.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span dir = "ltr" >Tswv Yim Vaj</span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Standard pagination

Yooj yim 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.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Next </a></li>
  10. </ul>
  11. </div>

Kev xaiv

Disabled thiab active xeev

Cov ntawv txuas yog customizable rau ntau qhov xwm txheej. Siv .disabledrau unclickable links thiab .activeqhia cov nplooj ntawv tam sim no.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Koj tuaj yeem xaiv hloov pauv cov khoom siv lossis cov neeg xiam oob khab rau spans kom tshem tawm cov haujlwm nyem thaum tuav cov hom phiaj xav.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Qhov ntau thiab tsawg

Xav kom loj dua lossis me dua pagination? Ntxiv .pagination-large, .pagination-small, lossis .pagination-minirau qhov ntau thiab tsawg.

  1. <div class = "pagination pagination-loj" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Kev sib tw

Ntxiv ib qho ntawm ob chav kawm xaiv los hloov cov kev sib raug zoo ntawm kev sib txuas ntawm pagination: .pagination-centeredthiab .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Kev sib txuas ceev dhau los thiab tom ntej rau kev siv pagination yooj yim nrog lub teeb cim thiab cov qauv. 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.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Previous </a></li>
  3. <li><a href = "#" > Next </a></li>
  4. </ul>

Aligned links

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

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href="#"> & larr ; _ Laus </a>
  4. </li>
  5. <li class = "next" >
  6. <a href="#"> Tshiab & rarr ; </a>
  7. </li>
  8. </ul>

Xaiv lub xeev tsis taus

Pager txuas kuj tseem siv cov .disabledchav kawm siv hluav taws xob dav dav los ntawm pagination.

  1. <ul class = "pager" >
  2. <li class = "previous disabled" >
  3. <a href="#"> & larr ; _ Laus </a>
  4. </li>
  5. ...
  6. </ul>

Daim ntawv lo

Daim ntawv lo Markup
Default <span class="label">Default</span>
Kev vam meej <span class="label label-success">Success</span>
Ceeb toom <span class="label label-warning">Warning</span>
Tseem ceeb <span class="label label-important">Important</span>
Cov ntaub ntawv <span class="label label-info">Info</span>
Rov qab <span class="label label-inverse">Inverse</span>

Daim paib

Lub npe Piv txwv Markup
Default 1 <span class="badge">1</span>
Kev vam meej 2 <span class="badge badge-success">2</span>
Ceeb toom 4 <span class="badge badge-warning">4</span>
Tseem ceeb 6 <span class="badge badge-important">6</span>
Cov ntaub ntawv 8 <span class="badge badge-info">8</span>
Rov qab 10 <span class="badge badge-inverse">10</span>

Yooj yim collapsible

Rau kev siv tau yooj yim, cov ntawv sau thiab cov ntawv cim yuav tsuas vau (ntawm CSS tus :emptyxaiv) thaum tsis muaj cov ntsiab lus nyob hauv.

Hero unit

Lub teeb yuag, hloov tau yooj yim los qhia cov ntsiab lus tseem ceeb ntawm koj lub xaib. Nws ua haujlwm zoo ntawm kev lag luam thiab cov ntsiab lus-hnyav qhov chaw.

Nyob zoo, ntiaj teb!

Qhov no yog ib qho yooj yim hero unit, ib qho yooj yim jumbotron-style tivthaiv rau kev hu xov tooj ntxiv rau cov ntsiab lus tshwj xeeb lossis cov ntaub ntawv.

Kawm ntxiv

  1. <div class = "hero-unit" >
  2. <h1> Lub taub hau </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Kawm ntxiv
  7. </a>
  8. </p>
  9. </div>

Nplooj ntawv

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

  1. <div class = "page-header" >
  2. <h1> Piv txwv nplooj ntawv header <small> Subtext rau header </small></h1>
  3. </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.

  • 300 x 200

    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

  • 300 x 200

    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

  • 300 x 200

    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-xws li .span2lossis.span3 - rau kev tswj cov duab me me.

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 :

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href="#" class = "thumbnail"> _ _ _
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Thumbnail label </h3>
  6. <p> Daim duab duab... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Piv txwv ntxiv

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

Default ceeb toom

Qhwv cov ntawv nyeem thiab xaiv lub khawm tso tawm rau hauv .alertcov lus ceeb toom ceeb toom.

Ceeb toom! Qhov zoo tshaj plaws xyuas koj tus kheej, koj tsis zoo heev.
  1. <div class = "alert" >
  2. <button type = "button" class = "kaw" data-dismiss = "alert" > × </button>
  3. <strong> Ceeb toom! </strong> Zoo tshaj koj tus kheej, koj tsis saib zoo heev.
  4. </div>

Tshem cov nyees khawm

Mobile Safari thiab Mobile Opera browsers, ntxiv rau tus data-dismiss="alert"cwj pwm, yuav tsum muaj href="#"rau kev tshem tawm ntawm kev ceeb toom thaum siv ib qho <a>.

  1. <a href="#" class = "kaw" data-dismiss = "alert"> & times ; _ </a>

Xwb, koj tuaj yeem siv lub <button>caij nrog cov ntaub ntawv tus cwj pwm, uas peb tau xaiv ua rau peb cov ntaub ntawv. Thaum siv <button>, koj yuav tsum suav nrog type="button"lossis koj cov ntawv yuav tsis xa tuaj.

  1. <button type = "button" class = "kaw" data-dismiss = "alert" > × </button>

Tshem tawm cov lus ceeb toom ntawm JavaScript

Siv cov lus ceeb toom jQuery plugin kom tshem tawm cov lus ceeb toom sai thiab yooj yim.


Kev xaiv

Rau cov lus ntev dua, ua kom cov padding nyob rau sab saum toj thiab hauv qab ntawm daim ntawv ceeb toom wrapper los ntawm kev ntxiv .alert-block.

Ceeb toom!

Qhov zoo tshaj plaws xyuas koj tus kheej, koj tsis zoo heev. Nulla vitae elit libero, pharetra auggue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert-block" >
  2. <button type = "button" class = "kaw" data-dismiss = "alert" > × </button>
  3. <h4> Ceeb toom! </h4>
  4. Best check koj tus kheej, koj tsis yog ...
  5. </div>

Cov ntsiab lus sib txawv

Ntxiv cov chav kawm xaiv tau los hloov qhov kev ceeb toom lub ntsiab lus.

yuam kev los yog txaus ntshai

Aw snap! Hloov ob peb yam thiab sim xa rov qab.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Kev vam meej

Ua tau zoo! Koj ua tiav nyeem cov lus ceeb toom tseem ceeb no.
  1. <div class = "alert-success" >
  2. ...
  3. </div>

Cov ntaub ntawv

Tau taub hau! Qhov kev ceeb toom no xav tau koj cov xim, tab sis nws tsis yog qhov tseem ceeb heev.
  1. <div class = "alert-info" >
  2. ...
  3. </div>

Piv txwv thiab markup

Basic

Default kev nce qib bar nrog ntsug gradient.

  1. <div class = "progress" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

striped

Siv cov gradient los tsim cov nyhuv striped. Tsis muaj nyob hauv IE7-8.

  1. <div class = "progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

Animated

Ntxiv .activerau .progress-stripedanimate cov kab txaij sab xis mus rau sab laug. Tsis muaj nyob rau hauv tag nrho cov versions ntawm IE.

  1. > _ _ _ _
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

stacked

Muab ntau qhov bar rau hauv ib yam .progresslos muab lawv tso.

  1. <div class = "progress" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Kev xaiv

Cov xim ntxiv

Cov kab kev nce qib siv qee qhov tib lub pob thiab ceeb toom cov chav kawm rau cov qauv zoo ib yam.

  1. <div class = "progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Cov kab txaij

Zoo ib yam li cov xim xim, peb muaj cov kab txaij sib txawv.

  1. <div class = "progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. > _ _ _ _
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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-9 lossis cov laus dua ntawm Firefox.

Versions ua ntej Internet Explorer 10 thiab Opera 12 tsis txhawb cov animations.

Abstract object styles rau tsim ntau hom ntawm cov khoom (xws li blog lus, Tweets, thiab lwm yam) uas feature ib sab laug-los yog txoj cai-tsim duab nrog rau cov ntawv nyeem.

Piv txwv li

Lub neej ntawd xov xwm tso cai rau ntab ib yam khoom tawm (duab, yees duab, suab) mus rau sab laug lossis sab xis ntawm cov ntsiab lus thaiv.

6 4x64

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.
6 4x64

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.
6 4x64

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.
  1. <div class = "media" >
  2. <a class = "rub-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Media lis

Nrog me ntsis ntawm cov cim ntxiv, koj tuaj yeem siv xov xwm hauv daim ntawv teev npe (tseem ceeb rau cov lus tawm tswv yim lossis cov npe kab lus).

  • 6 4x64

    Media taub hau

    Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.

    6 4x64

    Nested media heading

    Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.
    6 4x64

    Nested media heading

    Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.
    6 4x64

    Nested media heading

    Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.
  • 6 4x64

    Media taub hau

    Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "rub-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

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

Saib, kuv nyob hauv lub qhov dej!
  1. <div class = "zoo" >
  2. ...
  3. </div>

Xaiv cov chav kawm

Tswj padding thiab rounded ces kaum nrog ob qho kev xaiv hloov cov chav kawm.

Saib, kuv nyob hauv lub qhov dej!
  1. <div class = "zoo-loj" >
  2. ...
  3. </div>
Saib, kuv nyob hauv lub qhov dej!
  1. <div class = "zoo-me" >
  2. ...
  3. </div>

Kaw lub cim

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

  1. <button class = "kaw" > × </button>

iOS pab kiag li lawm yuav tsum tau ib tug href="#"nias txheej xwm yog tias koj xav siv lub thauj tog rau nkoj.

  1. <a class = "kaw" href = "#" > × </a>

Cov chav kawm pab

Cov chav kawm yooj yim, tsom rau cov khoom me me lossis kev coj cwj pwm tweaks.

.rub-sab laug

ntab ib yam sab laug

  1. class = "rub-left"
  1. . rub - laug {
  2. ntab : sab laug ;
  3. }

.rub-txoj cai

Float ib lub ntsiab cai

  1. class = "rub-right"
  1. . rub - txoj cai {
  2. float : yog ;
  3. }

.tug

Hloov cov xim xim rau#999

  1. class = "muted"
  1. . muted {
  2. xim : #999;
  3. }

. clearfix

Tshem tawm floatntawm tej yam

  1. class = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: ua ntej ,
  4. &: tom qab {
  5. zaub : rooj ;
  6. cov ntsiab lus : "" ;
  7. }
  8. &: tom qab {
  9. meej : ob leeg ;
  10. }
  11. }