Mga sangkap

Daghang magamit nga mga sangkap nga gihimo aron mahatagan ang nabigasyon, mga alerto, mga popover, ug uban pa.

Mga pananglitan

Duha ka sukaranan nga mga kapilian, kauban ang duha nga labi ka piho nga mga kalainan.

Usa ka butones nga grupo

I-wrap ang usa ka serye sa mga buton gamit ang .btnin .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Wala </button>
  3. <button class = "btn" > Middle </button>
  4. <button class = "btn" > Tuo </button>
  5. </div>

Daghang mga grupo sa butones

Combine sets sa <div class="btn-group">ngadto sa usa ka <div class="btn-toolbar">alang sa mas komplikado nga mga sangkap.

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

Mga grupo sa vertikal nga butones

Himoa nga ang usa ka hugpong sa mga buton makita nga patindog nga gipatong kay sa pinahigda.

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

Mga lami sa checkbox ug radyo

Ang mga grupo sa buton mahimo usab nga molihok isip mga radyo, diin usa ra ka butones ang mahimong aktibo, o mga checkbox, diin bisan unsang gidaghanon sa mga buton mahimong aktibo. Tan -awa ang JavaScript docs alang niana.

Mga dropdown sa mga grupo sa butones

Taas ang ulo!Ang mga butones nga adunay mga dropdown kinahanglan nga tagsa-tagsa nga giputos sa ilang kaugalingon .btn-groupsulod sa usa .btn-toolbaralang sa husto nga paghubad.

Overview ug mga pananglitan

Gamita ang bisan unsang buton aron ma-trigger ang usa ka dropdown menu pinaagi sa pagbutang niini sa sulod sa usa .btn-groupug paghatag sa tukma nga marka sa menu.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aksyon
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Nagtrabaho sa tanan nga gidak-on sa buton

Ang mga dropdown sa buton molihok sa bisan unsang gidak-on: .btn-large, .btn-small, o .btn-mini.

Nagkinahanglan og JavaScript

Ang mga dropdown sa buton nagkinahanglan sa Bootstrap dropdown plugin aron molihok.

Sa pipila ka mga kaso-sama sa mobile-dropdown nga mga menu molugway sa gawas sa viewport. Kinahanglan nimo nga sulbaron ang pag-align sa mano-mano o gamit ang naandan nga JavaScript.


Split button dropdowns

Pagtukod sa mga estilo sa grupo sa buton ug markup, dali ra kaming makahimo og split button. Ang mga split button adunay standard nga aksyon sa wala ug usa ka dropdown toggle sa tuo nga adunay mga link sa konteksto.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aksyon </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Mga gidak-on

Gamita ang dugang nga butones nga mga klase .btn-mini, .btn-small, o .btn-largepara sa pagsukod.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Aksyon </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Mga dropup nga menu

Ang mga dropdown menu mahimo usab nga i-toggle gikan sa ubos pataas pinaagi sa pagdugang og usa ka klase sa diha-diha nga ginikanan sa .dropdown-menu. I-flip niini ang direksyon sa .caretug i-reposition ang menu mismo aron mobalhin gikan sa ubos pataas imbes sa taas paubos.

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

Standard nga pagination

Yano nga pagination nga giinspirar sa Rdio, maayo alang sa mga app ug mga resulta sa pagpangita. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

  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 = "#" > Sunod </a></li>
  10. </ul>
  11. </div>

Mga kapilian

Baldado ug aktibo nga estado

Ang mga link napasibo alang sa lainlaing mga kahimtang. Gigamit .disabledalang sa dili ma-klik nga mga link ug .activearon ipakita ang kasamtangan nga panid.

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

Mahimo nimo nga opsyonal nga ibaylo ang aktibo o baldado nga mga angkla alang sa mga span aron matangtang ang pag-andar sa pag-klik samtang gipadayon ang gituyo nga mga istilo.

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

Mga gidak-on

Gusto nga mas dako o mas gamay nga pagination? Idugang .pagination-largeang , .pagination-small, o .pagination-minipara sa dugang nga mga gidak-on.

  1. <div class = "pagination pagination-large" >
  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>

Pag-align

Pagdugang og usa sa duha ka opsyonal nga mga klase aron mausab ang pag-align sa mga link sa pagination: .pagination-centeredug .pagination-right.

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

Pager

Dali nga nangagi ug sunod nga mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug mga istilo. Maayo kini alang sa yano nga mga site sama sa mga blog o magasin.

Default nga pananglitan

Sa kasagaran, ang pager nagsentro sa mga link.

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

Nahiangay nga mga link

Sa laing paagi, mahimo nimong i-align ang matag link sa mga kilid:

  1. <ul class = "pager" >
  2. <li class = "kaniadto" >
  3. <a href = "#" > Mas tigulang </a>
  4. </li>
  5. <li class = "sunod" >
  6. <a href = "#" > Mas bag-o → </a>
  7. </li>
  8. </ul>

Opsyonal nga baldado nga estado

Ang mga link sa pager naggamit usab sa kinatibuk-ang .disabledklase sa utility gikan sa pagination.

  1. <ul class = "pager" >
  2. <li class = "kaniadto disabled" >
  3. <a href = "#" > Mas tigulang </a>
  4. </li>
  5. ...
  6. </ul>

Mga label

Mga label Markup
Default <span class="label">Default</span>
Kalampusan <span class="label label-success">Success</span>
Pasidaan <span class="label label-warning">Warning</span>
Importante <span class="label label-important">Important</span>
Impormasyon <span class="label label-info">Info</span>
Baliktad <span class="label label-inverse">Inverse</span>

Mga badge

Ngalan Pananglitan Markup
Default 1 <span class="badge">1</span>
Kalampusan 2 <span class="badge badge-success">2</span>
Pasidaan 4 <span class="badge badge-warning">4</span>
Importante 6 <span class="badge badge-important">6</span>
Impormasyon 8 <span class="badge badge-info">8</span>
Baliktad 10 <span class="badge badge-inverse">10</span>

Dali nga ma-collaps

Alang sa dali nga pagpatuman, ang mga label ug mga badge mahugno lang (pinaagi sa :emptytigpili sa CSS) kung wala’y sulud sa sulod.

Hero unit

Usa ka gaan, flexible nga sangkap aron ipakita ang hinungdanon nga sulud sa imong site. Maayo kini sa pagpamaligya ug mga site nga bug-at sa sulud.

Hello, kalibutan!

Kini usa ka yano nga yunit sa bayani, usa ka yano nga sangkap nga istilo sa jumbotron alang sa pagtawag sa dugang nga atensyon sa gipakita nga sulud o kasayuran.

Pagkat-on pa

  1. <div class = "bayani-yunit" >
  2. <h1> Ulohan </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-dako" >
  6. Pagkat-on pa
  7. </a>
  8. </p>
  9. </div>

Ulohan sa panid

Usa ka yano nga kabhang alang sa usa ka h1tukma nga lugar ug bahin sa mga seksyon sa sulud sa usa ka panid. Mahimong gamiton niini ang h1default small, elemento ingon man ang kadaghanan sa ubang mga sangkap (nga adunay dugang nga mga istilo).

  1. <div class = "panid-ulo" >
  2. <h1> Panig-ingnan nga ulohan sa panid <small> Subtext para sa ulohan </small></h1>
  3. </div>

Default nga mga thumbnail

Sa default, ang mga thumbnail sa Bootstrap gidisenyo aron ipakita ang mga nalambigit nga mga imahe nga adunay gamay nga kinahanglan nga marka.

Napasibo kaayo

Uban sa gamay nga dugang nga marka, posible nga idugang ang bisan unsang klase sa sulud sa HTML sama sa mga ulohan, parapo, o butones sa mga thumbnail.

  • 300x200

    Label sa thumbnail

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

    Aksyon Aksyon

  • 300x200

    Label sa thumbnail

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

    Aksyon Aksyon

  • 300x200

    Label sa thumbnail

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

    Aksyon Aksyon

Nganong mogamit ug thumbnail

Ang mga thumbnail (kaniadto .media-gridhangtod sa v1.4) maayo alang sa mga grid sa mga litrato o video, mga resulta sa pagpangita sa imahe, mga produkto sa tingi, mga portfolio, ug daghan pa. Mahimo kini nga mga link o static nga sulud.

Yano, flexible nga markup

Simple ra ang markup sa thumbnail—nga uladunay bisan unsang gidaghanon sa limga elemento mao ra ang gikinahanglan. Kini usab super flexible, nagtugot alang sa bisan unsa nga matang sa sulod uban sa usa ka gamay nga dugang nga markup sa pagputos sa imong mga sulod.

Gigamit ang mga gidak-on sa kolum sa grid

Katapusan, ang component sa thumbnail naggamit sa kasamtangan nga mga klase sa grid system—sama .span2o .span3—para sa pagkontrolar sa mga dimensyon sa thumbnail.

Markup

Sama sa nahisgotan na, ang gikinahanglan nga markup para sa mga thumbnail gaan ug prangka. Ania ang usa ka pagtan-aw sa default setup alang sa nalambigit nga mga hulagway :

  1. <ul class = "mga thumbnail" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Alang sa naandan nga HTML nga sulod sa mga thumbnail, ang markup nausab gamay. Aron tugutan ang sulud sa lebel sa block bisan asa, gibaylo namo ang <a>sama <div>sa:

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

Dugang nga mga pananglitan

Susihon ang tanan nimong mga kapilian sa lainlaing mga klase sa grid nga magamit nimo. Mahimo usab nimo isagol ug ipares ang lainlaing mga gidak-on.

Default nga alerto

I-wrap ang bisan unsang teksto ug usa ka opsyonal nga dismiss nga buton .alertalang sa usa ka sukaranan nga mensahe sa alerto sa pasidaan.

Pasidaan! Labing maayo nga susihon ang imong kaugalingon, dili ka kaayo maayo.
  1. <div class = "alerto" >
  2. <button type = "button" class = "close" data-dismiss = "alerto" > × </button>
  3. <strong> Pasidaan! </strong> Labing maayo nga susiha ang imong kaugalingon, dili ka kaayo maayo.
  4. </div>

Isalikway ang mga buton

Ang mga browser sa Mobile Safari ug Mobile Opera, dugang sa data-dismiss="alert"hiyas, nanginahanglan og href="#"alang sa pagtangtang sa mga alerto kung mogamit usa ka <a>tag.

  1. <a href = "#" class = "close" data-dismiss = "alerto" > × </a>

Sa laing paagi, mahimo nimong gamiton ang usa ka <button>elemento nga adunay attribute sa datos, nga among gipili nga buhaton para sa among mga doc. Kung gamiton ang <button>, kinahanglan nimong iapil type="button"o ang imong mga porma mahimong dili isumite.

  1. <button type = "button" class = "close" data-dismiss = "alerto" > × </button>

Isalikway ang mga alerto pinaagi sa JavaScript

Gamita ang mga alerto nga jQuery plugin para sa dali ug sayon ​​nga pagtangtang sa mga alerto.


Mga kapilian

Para sa mas taas nga mga mensahe, dugangi ang padding sa ibabaw ug ubos sa alert wrapper pinaagi sa pagdugang .alert-block.

Pasidaan!

Labing maayo nga susihon ang imong kaugalingon, dili ka kaayo maayo. Nulla vitae elit libero, usa ka pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alerto alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alerto" > × </button>
  3. <h4> Pasidaan! </h4>
  4. Labing maayo nga susihon ang imong kaugalingon, dili ka ...
  5. </div>

Mga alternatibo sa konteksto

Idugang ang opsyonal nga mga klase aron mausab ang konotasyon sa alerto.

Sayop o peligro

Oh kalit! Usba ang pipila ka mga butang ug sulayi pagsumite pag-usab.
  1. <div class = "alerto alert-error" >
  2. ...
  3. </div>

Kalampusan

Maayong pagkabuhat! Malampuson nimong nabasa kining importanteng mensahe sa alerto.
  1. <div class = "alerto alert-success" >
  2. ...
  3. </div>

Impormasyon

Taas ang ulo! Kini nga alerto nanginahanglan sa imong atensyon, apan dili kini labi ka hinungdanon.
  1. <div class = "alerto alert-info" >
  2. ...
  3. </div>

Mga pananglitan ug markup

sukaranan

Default nga progress bar nga adunay bertikal nga gradient.

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

Kinudlisan

Naggamit og gradient aron makahimo og striped effect. Dili magamit sa IE7-8.

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

Animated

Idugang .activesa .progress-stripedaron ma-animate ang mga labud gikan sa tuo ngadto sa wala. Dili magamit sa tanang bersyon sa IE.

  1. <div class = "pag-uswag sa pag-uswag-striped aktibo" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

Gipatong

Ibutang ang daghang mga bar sa parehas .progressaron i-stack kini.

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

Mga kapilian

Dugang nga mga kolor

Ang mga progress bar naggamit sa pipila sa parehas nga buton ug alerto nga mga klase alang sa makanunayon nga mga istilo.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "pag-uswag sa pag-uswag-kalampusan" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "pag-uswag-pagpasidaan sa pag-uswag" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "pag-uswag sa pag-uswag-kakuyaw" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Mga striped bar

Sama sa solid nga mga kolor, kami adunay lainlain nga mga striped progress bar.

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

Suporta sa browser

Ang mga progress bar naggamit sa CSS3 gradients, transisyon, ug mga animation aron makab-ot ang tanan nilang mga epekto. Kini nga mga bahin wala gisuportahan sa IE7-9 o mas karaan nga mga bersyon sa Firefox.

Ang mga bersyon nga mas sayo kay sa Internet Explorer 10 ug Opera 12 wala mosuporta sa mga animation.

Abstract nga mga estilo sa butang alang sa pagtukod sa lain-laing mga matang sa mga sangkap (sama sa blog comments, Tweets, etc) nga nagpakita sa usa ka wala-o-tuo-aligned nga larawan uban sa teksto nga sulod.

Default nga pananglitan

Gitugotan sa default nga media nga molutaw ang usa ka butang sa media (mga imahe, video, audio) sa wala o tuo sa usa ka bloke sa sulud.

64x64

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
64x64

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
64x64

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
  1. <div class = "media" >
  2. <a class = "pull-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>

Listahan sa media

Uban sa gamay nga dugang nga markup, mahimo nimong gamiton ang media sa sulod nga lista (mapuslanon alang sa mga thread sa komento o mga lista sa artikulo).

  • 64x64

    Ulohan sa media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.

    64x64

    Nested nga ulohan sa media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
    64x64

    Nested nga ulohan sa media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
    64x64

    Nested nga ulohan sa media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
  • 64x64

    Ulohan sa media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.
  1. <ul class = "lista sa media" >
  2. <li class = "media" >
  3. <a class = "pull-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>

Mga atabay

Gamita ang atabay isip usa ka yano nga epekto sa usa ka elemento aron mahatagan kini og inset nga epekto.

Tan-awa, naa ko sa atabay!
  1. <div class = "maayo" >
  2. ...
  3. </div>

Opsyonal nga mga klase

Kontrola ang padding ug mga rounded corner nga adunay duha ka opsyonal nga mga klase sa modifier.

Tan-awa, naa ko sa atabay!
  1. <div class = "maayo kaayo-dako" >
  2. ...
  3. </div>
Tan-awa, naa ko sa atabay!
  1. <div class = "maayo kaayo-gamay" >
  2. ...
  3. </div>

Close icon

Gamita ang generic close icon para sa pagdismiss sa content sama sa modals ug alerts.

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

Ang mga aparato sa iOS nanginahanglan usa ka href="#"para sa pag-klik nga mga panghitabo kung gusto nimo nga mogamit usa ka angkla.

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

Mga klase sa katabang

Yano, naka-focus nga mga klase alang sa gamay nga pagpakita o pag-tweak sa pamatasan.

.bira-wala

Lutaw ang usa ka elemento sa wala

  1. klase = "pull-left"
  1. . ibira - wala {
  2. lutaw : wala ;
  3. }

.bira-tuo

Paglutaw sa usa ka elemento sa tuo

  1. klase = "pagbira sa tuo"
  1. . ibira - tuo {
  2. lutaw : tuo ;
  3. }

.gihilom

Usba ang kolor sa usa ka elemento ngadto sa#999

  1. klase = "gihilom"
  1. . gipahilom {
  2. kolor : #999;
  3. }

.clearfix

Hawani ang floatbisan unsang elemento

  1. klase = "clearfix"
  1. . klaroha {
  2. * pag- zoom : 1 ;
  3. &: kaniadto ,
  4. &: pagkahuman {
  5. display : lamesa ;
  6. sulod : "" ;
  7. }
  8. &: pagkahuman {
  9. klaro : duha ;
  10. }
  11. }