Izingxenye

Inqwaba yezingxenye ezingasebenziseka kabusha ezakhelwe ukuhlinzeka ngokuzulazula, izexwayiso, ama-popovers, nokuningi.

Izibonelo

Izinketho ezimbili eziyisisekelo, kanye nokuhluka okuqondile okubili.

Iqembu lenkinobho eyodwa

Goqa uchungechunge lwezinkinobho ngo- .btnin .btn-group.

  1. <div class = "btn-group" >
  2. < isigaba senkinobho = "btn" > Kwesokunxele </inkinobho>
  3. <inkinobho yekilasi = "btn" > Phakathi </inkinobho>
  4. <inkinobho yekilasi = "btn" > Kwesokudla </inkinobho>
  5. </div>

Amaqembu wezinkinobho eziningi

Hlanganisa amasethi we <div class="btn-group">-a <div class="btn-toolbar">ukuze uthole izingxenye eziyinkimbinkimbi.

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

Amaqembu ezinkinobho eziqondile

Yenza isethi yezinkinobho zibonakale zistakwe ziqondile kunokuba zivundlile.

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

Ibhokisi lokuhlola nama-flavour omsakazo

Amaqembu ezinkinobho angaphinda asebenze njengemisakazo, lapho inkinobho eyodwa kuphela engase isebenze, noma amabhokisi okuhlola, lapho noma iyiphi inombolo yezinkinobho ingase isebenze. Buka amadokhumenti e-JavaScript alokho .

Okwehliswayo emaqenjini ezinkinobho

Amakhanda phezulu!Izinkinobho ezinokwehliswayo kufanele zigoqwe ngokwazo .btn-groupngaphakathi kwe-a .btn-toolbarukuze zinikezwe okulungile.

Uhlolojikelele nezibonelo

Sebenzisa noma iyiphi inkinobho ukuze uqalise imenyu eyehlayo ngokuyibeka ngaphakathi .btn-groupfuthi unikeze umaki wemenyu ofanele.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Isenzo
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "imenyu eyehlayo" >
  7. <!-- izixhumanisi zemenyu eyehlayo -->
  8. </ul>
  9. </div>

Isebenza nabo bonke osayizi bezinkinobho

Okwehliswayo kwezinkinobho kusebenza kunoma imuphi usayizi: .btn-large, .btn-small, noma .btn-mini.

Idinga i-JavaScript

Ukwehliswa kwezinkinobho kudinga i- plugin eyehlayo ye-Bootstrap ukuthi isebenze.

Kwezinye izimo—njengamamenyu okwehlayo eselula azonwebeka ngaphandle kwendawo yokubuka. Udinga ukuxazulula ukuqondanisa mathupha noma nge-JavaScript yangokwezifiso.


Okwehliswayo kwenkinobho yokuhlukanisa

Ukwakhela phezu kwezitayela zeqembu lezinkinobho kanye nemakhaphu, singakha kalula inkinobho yokuhlukanisa. Izinkinobho zokuhlukanisa zifaka isenzo esijwayelekile kwesokunxele kanye nokuguqula okwehlayo kwesokudla ngezixhumanisi zomongo.

  1. <div class = "btn-group" >
  2. <inkinobho yekilasi = "btn" > Isenzo </inkinobho>
  3. <button class = "btn dropdown-toggle" data-toggle = "okwehlayo" >
  4. <span class = "caret" ></span>
  5. </inkinobho>
  6. <ul class = "imenyu eyehlayo" >
  7. <!-- izixhumanisi zemenyu eyehlayo -->
  8. </ul>
  9. </div>

Osayizi

Sebenzisa amakilasi enkinobho eyengeziwe .btn-mini, .btn-small, noma .btn-largeukwenza usayizi.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Isenzo </inkinobho>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "okwehlayo" >
  4. <span class = "caret" ></span>
  5. </inkinobho>
  6. <ul class = "imenyu eyehlayo" >
  7. <!-- izixhumanisi zemenyu eyehlayo -->
  8. </ul>
  9. </div>

Amamenyu okwehlisa

Amamenyu okudonsela phansi nawo angashintshwa kusukela phansi kuye phezulu ngokwengeza iklasi elilodwa kumzali oseduze we- .dropdown-menu. Izophenya isiqondiso se .caretbese ibeka kabusha imenyu ngokwayo ukuze isuke phansi iye phezulu esikhundleni sokusuka phezulu iye phansi.

  1. <div class = "i-btn-group dropup" >
  2. <inkinobho yekilasi = "btn" > Drop </inkinobho>
  3. <button class = "btn dropdown-toggle" data-toggle = "okwehlayo" >
  4. <span class = "caret" ></span>
  5. </inkinobho>
  6. <ul class = "imenyu eyehlayo" >
  7. <!-- izixhumanisi zemenyu eyehlayo -->
  8. </ul>
  9. </div>

Ukuqanjwa okujwayelekile

Ukuqanjwa okulula okukhuthazwe yi-Rdio, kulungele izinhlelo zokusebenza nemiphumela yosesho. Ibhulokhi enkulu kunzima ukuyigeja, ingakala kalula, futhi ihlinzeka ngezindawo ezinkulu zokuchofoza.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Okwedlule </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 = "#" > Okulandelayo </a></li>
  10. </ul>
  11. </div>

Izinketho

Izimo ezikhubazekile nezisebenzayo

Izixhumanisi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabledizixhumanisi ezingachofozwayo kanye .activenokukhombisa ikhasi lamanje.

  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>

Ungashintsha ngokuzithandela amahange asebenzayo noma akhutshaziwe ukuze uthole izikhala ukuze ususe ukusebenza kokuchofoza kuyilapho ugcina izitayela ezihlosiwe.

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

Osayizi

Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-large, .pagination-small, noma .pagination-miniosayizi abengeziwe.

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

Ukuqondanisa

Engeza izigaba ezimbili ozikhethela ukuze uguqule ukuqondanisa kwezixhumanisi zamakhasi: .pagination-centeredkanye .pagination-right.

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

Ipheyija

Izixhumanisi ezisheshayo zangaphambilini nezilandelayo zokusetshenziswa okulula kokwakheka kwamagama okunophawu olukhanyayo nezitayela. Ilungele amasayithi alula njengamabhulogi noma omagazini.

Isibonelo esizenzakalelayo

Ngokuzenzakalela, izixhumanisi ze-pager.

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

Izixhumanisi eziqondanisiwe

Kungenjalo, ungakwazi ukuqondanisa isixhumanisi ngasinye emaceleni:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Okudadlana </a>
  4. </li>
  5. <li class = "okulandelayo" >
  6. <a href = "#" > Okusha → </a>
  7. </li>
  8. </ul>

Isimo sokukhubazeka ongakukhetha

Izixhumanisi zama-pager nazo zisebenzisa okuvamile.disabled kusuka ephepheni.

  1. <ul class = "pager" >
  2. <li class = "kukhutshazwe kwangaphambilini" >
  3. <a href = "#" > Omdala </a>
  4. </li>
  5. ...
  6. </ul>

Amalebula

Amalebula Imakhaphu
Okuzenzakalelayo <span class="label">Default</span>
Impumelelo <span class="label label-success">Success</span>
Isexwayiso <span class="label label-warning">Warning</span>
Okubalulekile <span class="label label-important">Important</span>
Ulwazi <span class="label label-info">Info</span>
Okuphambene <span class="label label-inverse">Inverse</span>

Amabheji

Igama Isibonelo Imakhaphu
Okuzenzakalelayo 1 <span class="badge">1</span>
Impumelelo 2 <span class="badge badge-success">2</span>
Isexwayiso 4 <span class="badge badge-warning">4</span>
Okubalulekile 6 <span class="badge badge-important">6</span>
Ulwazi 8 <span class="badge badge-info">8</span>
Okuphambene 10 <span class="badge badge-inverse">10</span>

Igoqeka kalula

Ukuze kusetshenziswe kalula, amalebula namabheji azovele agoqe (ngesikhethi se-CSS :empty) uma kungekho okuqukethwe ngaphakathi.

Iqembu lamaqhawe

Ingxenye engasindi, evumelana nezimo ukuze ubonise okuqukethwe okuyinhloko kusayithi lakho. Isebenza kahle kumasayithi okuthengisa kanye nokuqukethwe okusindayo.

Sawubona Mhlaba!

Leli iyunithi yeqhawe elilula, ingxenye elula yesitayela se-jumbotron yokubiza ukunaka okwengeziwe kokuqukethwe okufakiwe noma ulwazi.

Funda kabanzi

  1. <div class = "hero-unit" >
  2. <h1> Isihloko </h1>
  3. <p> Ulayini wethegi </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Funda kabanzi
  7. </a>
  8. </p>
  9. </div>

Unhlokweni wekhasi

Igobolondo elilula h1lendawo yokukhipha ngokufanelekile futhi uhlukanise izingxenye zokuqukethwe ekhasini. Ingasebenzisa h1okumisiwe small, ingxenye kanye nezinye izingxenye eziningi (ngezitayela ezengeziwe).

  1. <div class = "isihloko sekhasi" >
  2. <h1> Iheda yekhasi eliyisibonelo <small> Umbhalo ongezansi weheda </small></h1>
  3. </div>

Izithonjana ezizenzakalelayo

Ngokuzenzakalelayo, izithonjana ze-Bootstrap ziklanyelwe ukubonisa izithombe ezixhunyiwe ezinomakhaphu omncane odingekayo.

Yenza ngokwezifiso kakhulu

Ngophawu oluthe xaxa, ungakwazi ukwengeza noma yiluphi uhlobo lokuqukethwe kwe-HTML njengezihloko, izigaba, noma izinkinobho ezithonjaneni.

  • 300x200

    Ilebula yesithonjana

    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.

    Isenzo Isenzo

  • 300x200

    Ilebula yesithonjana

    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.

    Isenzo Isenzo

  • 300x200

    Ilebula yesithonjana

    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.

    Isenzo Isenzo

Kungani usebenzise izithonjana

Izithonjana (ngaphambilini .media-gridkuze kufike ku-v1.4) zinhle kumagridi ezithombe noma amavidiyo, imiphumela yosesho lwezithombe, imikhiqizo yokudayisa, amaphothifoliyo, nokunye okuningi. Kungaba izixhumanisi noma okuqukethwe okumile.

Imakhaphu elula, evumelana nezimo

Umaki wezithonjana ulula—okunanoma uliyiphi inombolo liyezinto yikho kuphela okudingekayo. Futhi iguquguquka kakhulu, ivumela noma iluphi uhlobo lokuqukethwe olunomakhaphu owengeziwe wokugoqa okuqukethwe kwakho.

Isebenzisa osayizi bekholomu yegridi

Okokugcina, ingxenye yezithonjana isebenzisa amakilasi esistimu yegridi ekhona— .span2njenganoma.span3 ubukhulu bezithonjana.

Imakhaphu

Njengoba kushiwo ngaphambili, umaka odingekayo wezithonjana ulula futhi uqondile. Nakhu ukubheka ukusethwa okuzenzakalelayo kwezithombe ezixhunyiwe :

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

Ngokuqukethwe kwe-HTML yangokwezifiso ezithonjaneni, umaki uyashintsha kancane. Ukuvumela okuqukethwe kweleveli yebhulokhi noma yikuphi, sishintshanisa <a>okufana <div>nalokhu:

  1. <ul class = "izithonjana" >
  2. <li class = "span4" >
  3. <div class = "isithonjana" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Ilebula yesithonjana </h3>
  6. <p> Amazwibela esithonjana... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Izibonelo ezengeziwe

Hlola zonke izinketho zakho ngamakilasi egridi ahlukahlukene atholakalayo kuwe. Ungaphinda uhlanganise futhi ufanise osayizi abahlukene.

Isexwayiso esizenzakalelayo

Goqa noma yimuphi umbhalo kanye nenkinobho yokuchitha ngokuzithandela .alertukuze uthole umlayezo oyisisekelo wesexwayiso.

Isexwayiso! Kungcono uzihlole kahle, awubukeki umuhle kakhulu.
  1. <div class = "isaziso" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </inkinobho>
  3. <strong> Isexwayiso! I </strong> Zihlole kahle, awubukeki umuhle kakhulu.
  4. </div>

Cashisa izinkinobho

Iziphequluli ze-Mobile Safari ne-Mobile Opera, ngaphezu data-dismiss="alert"kwesibaluli, zidinga href="#"ukuchithwa kwezixwayiso uma usebenzisa <a>ithegi.

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

Kungenjalo, ungasebenzisa i- <button>elementi enesibaluli sedatha, esikhethe ukuyenzela amadokhumenti ethu. Uma usebenzisa <button>, kufanele ufake type="button"noma amafomu akho angase angawahambisi.

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

Cashisa izexwayiso nge-JavaScript

Sebenzisa i- plugin yezaziso ye-jQuery ukuze ukhiphe izaziso ngokushesha futhi kalula.


Izinketho

Ngemilayezo emide, khulisa ukupheda phezulu nangaphansi kwesisonga sesexwayiso ngokungeza .alert-block.

Isexwayiso!

Kungcono uzihlole kahle, awubukeki umuhle kakhulu. I-Nulla vitae elit libero, i-pharetra augue. I-Preesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "i-alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </inkinobho>
  3. <h4> Isexwayiso! </h4>
  4. Okungcono uzihlole wena, awu...
  5. </div>

Ezinye izindlela zomongo

Engeza amakilasi ongawakhetha ukuze uguqule incazelo yesexwayiso.

Iphutha noma ingozi

Hawu! Shintsha izinto ezimbalwa bese uzama ukuthumela futhi.
  1. <div class = "iphutha lesaziso" >
  2. ...
  3. </div>

Impumelelo

Wenze kahle! Ufunde ngempumelelo lo mlayezo obalulekile wesexwayiso.
  1. <div class = "impumelelo yesixwayiso" >
  2. ...
  3. </div>

Ulwazi

Amakhanda phezulu! Lesi sexwayiso sidinga ukunakwa kwakho, kodwa asibalulekile kakhulu.
  1. <div class = "ulwazi lwesixwayiso" >
  2. ...
  3. </div>

Izibonelo kanye nemakhaphu

Okuyisisekelo

Ibha yokuqhubeka ezenzakalelayo enegradient eqondile.

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

Inemithende

Isebenzisa i-gradient ukuze idale umphumela onemigqa. Ayitholakali ku-IE7-8.

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

Okugqwayizayo

Engeza .activeukuze .progress-stripeduphilise imithende kwesokudla ukuya kwesokunxele. Ayitholakali kuzo zonke izinguqulo ze-IE.

  1. <div class = "inqubekelaphambili-imigqa esebenzayo" >
  2. <div class = "bar" style = " wide : 40 %; " ></div>
  3. </div>

Kustakiwe

Beka amabha amaningi okufanayo .progressukuze uwabeke.

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

Izinketho

Imibala eyengeziwe

Amabha okuqhubeka asebenzisa inkinobho efanayo namakilasi okuxwayisa ngezitayela ezingaguquki.

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

Imigoqo enemigqa

Ngokufana nemibala eqinile, sinemigoqo yenqubekelaphambili enemigqa ehlukahlukene.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "inqubekelaphambili-impumelelo inqubekelaphambili-imigqa" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "inqubekelaphambili-isixwayiso senqubekelaphambili-imigqa" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "inqubekelaphambili-inqubekela phambili-ingozi-imigqa" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Usekelo lwesiphequluli

Amabha wokuqhubeka asebenzisa ama-gradient e-CSS3, ukuguqulwa, nokugqwayiza ukuze kuzuzwe yonke imiphumela yakhona. Lezi zici azisekelwa kuzinguqulo ze-IE7-9 noma ezindala zeFirefox.

Izinguqulo zangaphambi kwe-Internet Explorer 10 ne-Opera 12 azikusekeli ukugqwayiza.

Izitayela zento engabonakali zokwakha izinhlobo ezihlukahlukene zezingxenye (njengamazwana ebhulogi, ama-Tweets, njll) anesithombe esiqondaniswe kwesokunxele noma kwesokudla eceleni kokuqukethwe kombhalo.

Isibonelo esizenzakalelayo

Imidiya ezenzakalelayo ivumela ukuntanta into yemidiya (izithombe, ividiyo, umsindo) iye kwesokunxele noma kwesokudla sebhulokhi yokuqukethwe.

64x64

Isihloko semidiya

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

Isihloko semidiya

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

Isihloko semidiya

Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. I-Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis in faucibus.
  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" > Isihloko semidiya </h4>
  7. ...
  8.  
  9. <!-- Into yemidiya efakwe esidlekeni -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Uhlu lwemidiya

Ngemakhaphu eyengeziwe, ungasebenzisa imidiya engaphakathi kohlu (iwusizo ochungechungeni lwamazwana noma uhlu lwama-athikili).

  • 64x64

    Isihloko semidiya

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

    64x64

    Isihloko semidiya esisidleke

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

    Isihloko semidiya esisidleke

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

    Isihloko semidiya esisidleke

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

    Isihloko semidiya

    Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  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 ikilasi = "media-heading" > Isihloko semidiya </h4>
  8. ...
  9.  
  10. <!-- Into yemidiya efakwe esidlekeni -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Imithombo

Sebenzisa umthombo njengomphumela olula ku-elementi ukuze uyinikeze umphumela wokufakwayo.

Bheka, ngisemthonjeni!
  1. <div class = "kahle" >
  2. ...
  3. </div>

Amakilasi okuzikhethela

Lawula ama-padding namakhona ayindilinga ngamakilasi amabili okushintsha ozikhethela wona.

Bheka, ngisemthonjeni!
  1. <div class = "kuhle-kuhle" >
  2. ...
  3. </div>
Bheka, ngisemthonjeni!
  1. <div class = "kahle-small" >
  2. ...
  3. </div>

Vala isithonjana

Sebenzisa isithonjana sokuvala esijwayelekile ukuze uchithe okuqukethwe okufana namamodeli nezixwayiso.

  1. <inkinobho yekilasi = "vala" > &izikhathi; </inkinobho>

Amadivayisi we-iOS adinga href="#"ukuchofoza imicimbi uma ungathanda ukusebenzisa ihange.

  1. <a class = "close" href = "#" > &izikhathi; </a>

Amakilasi omsizi

Amakilasi alula, agxilile okubonisa okuncane noma ama-tweaks wokuziphatha.

.donsela kwesokunxele

Ntanta i-elementi kwesokunxele

  1. class = "donsa-kwesokunxele"
  1. . donsa - kwesokunxele {
  2. ntanta : kwesobunxele ;
  3. }

.donsela kwesokudla

Gcoba i-elementi kwesokudla

  1. class = "donsa-kwesokudla"
  1. . donsa - kwesokudla {
  2. ukuntanta : kwesokudla ;
  3. }

.ithulisiwe

Shintsha umbala we-elementi ube#999

  1. class = "thulisiwe"
  1. . uthulisiwe {
  2. umbala : #999;
  3. }

.clearfix

Sula floatkunoma iyiphi i-elementi

  1. class = "clearfix"
  1. . clearfix {
  2. sondeza : 1 ; _
  3. &: ngaphambili ,
  4. &: ngemva {
  5. isibonisi : ithebula ;
  6. okuqukethwe : "" ;
  7. }
  8. &: ngemva {
  9. cacile : kokubili ;
  10. }
  11. }