Likaroloana

Likarolo tse ngata tse ka sebelisoang hape tse etselitsoeng ho fana ka litsamaiso, litemoso, li-popovers, le tse ling.

Mehlala

Likhetho tse peli tsa mantlha, hammoho le mefuta e 'meli e ikhethang.

Sehlopha sa konopo e le 'ngoe

Koahela letoto la likonopo ka .btnin .btn-group.

  1. <div class = "btn-group" >
  2. < sehlopha sa konopo = "btn" > Ka ho le letšehali </button>
  3. < sehlopha sa konopo = "btn" > Bohareng </button>
  4. < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo>
  5. </ div>

Lihlopha tse ngata tsa likonopo

Kopanya lihlopha tsa <div class="btn-group">ho ba a <div class="btn-toolbar">bakeng sa likarolo tse rarahaneng haholoanyane.

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

Lihlopha tsa konopo tse otlolohileng

Etsa hore likonopo tse 'maloa li hlahe li theohile ho fapana le tse tšekaletseng.

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

Li-checkbox le litlolo tsa radio

Lihlopha tsa likonopo le tsona li ka sebetsa joalo ka liea-le-moea, moo konopo e le 'ngoe feela e ka bang teng, kapa mabokose a hlahlobang, moo palo efe kapa efe ea likonopo e ka bang teng. Sheba litokomane tsa JavaScript bakeng sa seo.

Litheolelo ka lihlopha tsa likonopo

Hlokomela!Likonopo tse nang le li-dropdown li tlameha ho phutheloa ka botsona .btn-groupka botsona ba tsona .btn-toolbarbakeng sa phetolelo e nepahetseng.

Kakaretso le mehlala

Sebelisa konopo efe kapa efe ho qala menu e theoha ka ho e beha ka har'a a .btn-grouple ho fana ka letšoao le nepahetseng la menu.

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

E sebetsa ka boholo ba likonopo

Likonopo tse theohang li sebetsa ka boholo bofe kapa bofe: .btn-large, .btn-small, kapa .btn-mini.

E hloka JavaScript

Likonopo tse theohang li hloka hore plugin e theohang ea Bootstrap e sebetse.

Maemong a mang - joalo ka li-menu tse theohang tsa mobile li tla atoloha ka ntle ho boema-kepe. U hloka ho rarolla litlhophiso ka letsoho kapa ka JavaScript e tloaelehileng.


Li-dropdown tsa konopo ea Arohane

Ho aha holim'a li-styles tsa lihlopha tsa konopo le li-markup, re ka theha konopo ea ho arohana habonolo. Likonopo tse arohaneng li na le ketso e tloaelehileng ka ho le letšehali le toggle ea ho theoha ka ho le letona ka lihokelo tsa maemo.

  1. <div class = "btn-group" >
  2. < sehlopha sa konopo = "btn" > Ketso </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ konopo>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ div>

Boholo

Sebelisa li-buttons tse eketsehileng .btn-mini, .btn-smallkapa .btn-largeho etsa boholo.

  1. <div class = "btn-group" >
  2. < sehlopha sa konopo = "btn btn-mini" > Ketso </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ konopo>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ div>

Menu ea ho tlohela

Manane a theohang le ona a ka fetoloa ho tloha tlase ho ea holimo ka ho kenyelletsa sehlopha se le seng ho motsoali ea haufi oa .dropdown-menu. E tla fetola tsela ea ' .caretme e behe menu ka boeona hore e tsamaee ho tloha tlaase ho ea holimo ho e-na le ho ea holimo.

  1. <div class = "btn-group dropup" >
  2. < sehlopha sa konopo = "btn" > Tloha </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ konopo>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ div>

Pagination e tloaelehileng

Papali e bonolo e bululetsoeng ke Rdio, e ntle bakeng sa lits'ebetso le liphetho tsa lipatlisiso. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

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

Dikgetho

Libaka tse holofetseng le tse sebetsang

Lihokelo li ka khonahala bakeng sa maemo a fapaneng. Sebelisa .disabledbakeng sa lihokelo tse sa tolokong le .activeho supa leqephe la hajoale.

  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>

U ka khona ho fapanyetsana li-ankora tse sebetsang kapa tse holofetseng bakeng sa li-spans ho tlosa ts'ebetso ea ho tobetsa ha u ntse u boloka mekhoa e reriloeng.

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

Boholo

U batla ho etsa pagination e kholoanyane kapa e nyane? Kenya .pagination-large, .pagination-small, kapa .pagination-minibakeng sa boholo bo eketsehileng.

  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>

Ho tsamaisana

Eketsa e 'ngoe ea lihlopha tse peli tseo u ka li khethang ho fetola lihokelo tsa pagination: .pagination-centeredle .pagination-right.

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

Pager

Lihokelo tsa pejana le tse latelang bakeng sa ts'ebetso e bonolo ea bohetene ka li-markup tse bobebe le mekhoa. E ntle bakeng sa libaka tse bonolo joalo ka li-blog kapa limakasine.

Mohlala oa kamehla

Ka ho sa feleng, li-pager centers li hokahanya.

  1. <ul class = "pager" >
  2. <li><a href = "#"> E fetileng </a></li>
  3. <li><a href = "#"> E latelang </a></li>
  4. </ul>

Lihokelo tse tsamaellanang

Ntle le moo, o ka hokahanya sehokelo se seng le se seng mahlakoreng:

  1. <ul class = "pager" >
  2. <li class = "e fetileng" >
  3. <a href = "#" > Khale </a>
  4. </li>
  5. <li class = "e latelang" >
  6. <a href = "#"> > Ntjhanyana → </a>
  7. </li>
  8. </ul>

Boemo ba ho holofala ha boikhethelo

Lihokelo tsa li-Pager li boetse li sebelisa sehlopha sa .disabledlisebelisoa tse akaretsang ho tloha boheteneng.

  1. <ul class = "pager" >
  2. <li class = "ho holofetse nakong e fetileng" >
  3. <a href = "#" > Khale </a>
  4. </li>
  5. ...
  6. </ul>

Labels

Labels Markup
Ea kamehla <span class="label">Default</span>
Katleho <span class="label label-success">Success</span>
Tlhokomediso <span class="label label-warning">Warning</span>
Bohlokoa <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
E fapaneng <span class="label label-inverse">Inverse</span>

Libeche

Lebitso Mohlala Markup
Ea kamehla 1 <span class="badge">1</span>
Katleho 2 <span class="badge badge-success">2</span>
Tlhokomediso 4 <span class="badge badge-warning">4</span>
Bohlokoa 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
E fapaneng 10 <span class="badge badge-inverse">10</span>

E phuthoa ha bonolo

Bakeng sa ts'ebetsong e bonolo, lileibole le libeche li tla putlama feela (ka :emptykhetho ea CSS) ha ho se na litaba ka hare.

Sehlopha sa mohale

Karolo e bobebe, e feto-fetohang ho bonts'a litaba tsa bohlokoa sebakeng sa hau sa marang-rang. E sebetsa hantle ho mebaraka le liwebsaete tse boima ba litaba.

Lefatše Lumela!

Ena ke yuniti e bonolo ea mohale, karolo e bonolo ea mokhoa oa jumbotron bakeng sa ho lebisa tlhokomelo e eketsehileng ho litaba tse hlahang kapa lintlha.

Ithute haholoanyane

  1. <div class = "hero-unit" >
  2. <h1> Sehlooho </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Ithute haholoanyane
  7. </a>
  8. </p>
  9. </ div>

Sehlooho sa leqephe

Khetla e bonolo bakeng sa h1ho beha sebaka ka nepo le ho arola likarolo tsa litaba leqepheng. E ka sebelisa h1's default small, element hammoho le likarolo tse ling tse ngata (ka mekhoa e meng).

  1. <div class = "leqephe-hlooho" >
  2. <h1> Sehlooho sa leqephe la mohlala <small> Subtext bakeng sa hlooho </small></h1>
  3. </ div>

Lits'oants'o tsa kamehla

Ka nako e sa lekanyetsoang, linepe tsa Bootstrap li etselitsoe ho bonts'a litšoantšo tse hokahaneng tse nang le matšoao a fokolang a hlokahalang.

Haholo customisable

Ka li-markup tse ling, hoa khoneha ho kenya mofuta ofe kapa ofe oa litaba tsa HTML joalo ka lihlooho, lirapa, kapa likonopo ho li-thumbnails.

  • 300x200

    Leibole ea setšoantšo

    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.

    Ketso Ketso

  • 300x200

    Leibole ea setšoantšo

    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.

    Ketso Ketso

  • 300x200

    Leibole ea setšoantšo

    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.

    Ketso Ketso

Hobaneng u sebelisa li-thumbnails

Li -thumbnails (pele .media-gridho fihlela v1.4) li ntle bakeng sa marang-rang a lifoto kapa livideo, liphetho tsa lipatlisiso tsa litšoantšo, lihlahisoa tsa mabenkele, li-portfolio, le tse ling tse ngata. E ka ba lihokelo kapa litaba tse sa fetoheng.

Mokhoa o bonolo, o tenyetsehang

Letšoao la li-thumbnail le bonolo - ho ulna le palo efe kapa efe ea lilikarolo ke sona se hlokahalang. E boetse e tenyetseha haholo, e lumella mofuta ofe kapa ofe oa litaba tse nang le li-markups tse ngatanyana ho thatela litaba tsa hau.

E sebelisa boholo ba kholomo ea grid

Qetellong, karolo ea li-thumbnail e sebelisa lihlopha tse seng li ntse li le teng tsa tsamaiso ea grid-joaloka .span2kapa .span3- bakeng sa ho laola boholo ba li-thumbnail.

Markup

Joalokaha ho boletsoe pejana, letšoao le hlokahalang bakeng sa li-thumbnails le bobebe ebile le hlakile. Mona ke ho sheba litlhophiso tsa kamehla tsa litšoantšo tse hokahantsoeng :

  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>

Bakeng sa litaba tsa tloaelo tsa HTML ho li-thumbnails, markup e fetoha hanyane. Ho lumella litaba tsa boemo ba block kae kapa kae, re fapanyetsana <a>le <div>tse ling tse joalo:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Leibole ya manane < /h3>
  6. <p> Mongolo o monyane... </p>
  7. </ div>
  8. </li>
  9. ...
  10. </ul>

Mehlala e meng

Lekola likhetho tsohle tsa hau ka lihlopha tse fapaneng tsa grid tse fumanehang ho uena. U ka boela ua kopanya le ho bapisa boholo bo fapaneng.

Tlhokomeliso ea kamehla

Qetella mongolo ofe kapa ofe le konopo ea boikhethelo ea ho hlakola .alertbakeng sa molaetsa oa tlhokomeliso.

Tlhokomeliso! Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo.
  1. <div class = "temoso" >
  2. < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>
  3. <strong> Temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo.
  4. </ div>

Hlakola likonopo

Libatli tsa Mobile Safari le Mobile Opera, ntle le data-dismiss="alert"tšobotsi, li hloka tlhokomeliso href="#"bakeng sa ho lelekoa ha litemoso ha u sebelisa <a>tag.

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

Ntle le moo, o ka sebelisa <button>ntho e nang le tšobotsi ea data, eo re khethileng ho e etsa bakeng sa litokomane tsa rona. Ha u sebelisa <button>, u tlameha ho kenyelletsa type="button"kapa liforomo tsa hau li ka 'na tsa se ke tsa fana ka tsona.

  1. < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>

Tlosa litlhokomeliso ka JavaScript

Sebelisa plugin ea tlhokomeliso ea jQuery bakeng sa ho tlosa litlhokomeliso kapele le ha bonolo.


Dikgetho

Bakeng sa melaetsa e melelele, eketsa padding ka holimo le tlase ho sephutheloana sa tlhokomeliso ka ho eketsa .alert-block.

Tlhokomeliso!

Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "temoso ea tlhokomeliso-block" >
  2. < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>
  3. <h4> Tlhokomeliso! </h4>
  4. Ho molemo hore u itlhahlobe, ha u...
  5. </ div>

Mekhoa e meng ea maemo

Kenya litlelase tsa boikhethelo ho fetola moelelo oa tlhokomeliso.

Phoso kapa kotsi

Oho hang! Fetola lintho tse 'maloa 'me u leke ho romella hape.
  1. <div class = "temoso-phoso ea tlhokomeliso" >
  2. ...
  3. </ div>

Katleho

Mosebetsi o motle! U atlehile ho bala molaetsa ona oa bohlokoa oa tlhokomeliso.
  1. <div class = "temoso-katleho ea tlhokomeliso" >
  2. ...
  3. </ div>

Boitsebiso

Hlokomela! Tlhokomeliso ena e hloka tlhokomelo ea hau, empa ha e bohlokoa haholo.
  1. <div class = "temoso ea tlhokomeliso-litaba" >
  2. ...
  3. </ div>

Mehlala le markup

Motheo

Sebaka sa kamehla sa tsoelo-pele se nang le gradient e otlolohileng.

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

E methalo

E sebelisa gradient ho theha sephetho sa melato. Ha e fumanehe ho IE7-8.

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

Animated

Eketsa .activeho .progress-stripedho phelisa melato ka ho le letona ho ea ho le letšehali. Ha e fumanehe liphetolelong tsohle tsa IE.

  1. <div class = "tswelopele-tswelopele e sebetsang" >
  2. <div class = "bar" style = " wide : 40 %; " ></div>
  3. </ div>

E phuthetsoe

Beha li-bar tse ngata ka ho lekana .progressho li beha.

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

Dikgetho

Mebala e eketsehileng

Libaka tsa tsoelo-pele li sebelisa likonopo tse tšoanang le lihlopha tsa tlhokomeliso bakeng sa mekhoa e tsitsitseng.

  1. <div class = "boitsebiso ba tsoelo-pele" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </ div>
  4. <div class = "tsoelopele-katleho" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </ div>
  7. <div class = "temoso ea tsoelo-pele ea tsoelo-pele" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </ div>
  10. <div class = "tsoelopele-kotsi" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </ div>

Mehala e methalo

Ho tšoana le mebala e tiileng, re na le mekoallo ea tsoelo-pele e fapaneng.

  1. <div class = "tsoelopele-boitsebiso ba tsoelo-pele-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </ div>
  4. <div class = "tsoelopele-tsoelopele-katleho e nang le methapo" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </ div>
  7. <div class = "tsoelopele-temoso ea tsoelo-pele-tse-telo-pele" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </ div>
  10. <div class = "tswelopele-tswelopele e kotsi-e nang le methapo" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </ div>

Tšehetso ea sebatli

Libaka tsa tsoelo-pele li sebelisa li-gradients tsa CSS3, liphetoho, le litšoantšo ho finyella liphello tsohle tsa tsona. Likarolo tsena ha li tšehetsoe ho IE7-9 kapa mefuta ea khale ea Firefox.

Liphetolelo tsa pejana ho Internet Explorer 10 le Opera 12 ha li tšehetse lipopae.

Mefuta e sa bonahaleng ea lintho bakeng sa ho aha mefuta e fapaneng ea likarolo (joalo ka maikutlo a blog, li-Tweets, joalo-joalo) tse nang le sets'oants'o se leqeleng kapa le letona le litaba tsa mongolo.

Mohlala oa kamehla

Mecha ea litaba ea kamehla e lumella ho phaphamala ntho ea media (litšoantšo, video, audio) ka ho le letšehali kapa ka ho le letona la block ea litaba.

64x64

Sehlooho sa litaba

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

Sehlooho sa litaba

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

Sehlooho sa litaba

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a sehlopha = "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" > Sehlooho sa litaba </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </ div>
  13. </ div>
  14. </ div>

Lenane la mecha ea litaba

Ka li-markup tse eketsehileng, u ka sebelisa mecha ea litaba ka har'a lethathamo (e molemo bakeng sa likhoele tsa maikutlo kapa lethathamo la lingoliloeng).

  • 64x64

    Sehlooho sa litaba

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

    64x64

    Sehloho sa media se fumanehang

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

    Sehloho sa media se fumanehang

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

    Sehloho sa media se fumanehang

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

    Sehlooho sa litaba

    Cras sit amet nibh libero, in gravida nulla. 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 sehlopha = "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" > Sehlooho sa litaba </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </ div>
  14. </ div>
  15. </li>
  16. </ul>

Liliba

Sebelisa seliba e le phello e bonolo holim'a element ho e fa phello ea inset.

Bona, ke ka sedibeng!
  1. <div class = "hantle" >
  2. ...
  3. </ div>

Lihlopha tsa boikhethelo

Laola padding le likhutlo tse chitja ka lihlopha tse peli tseo u ka li khethang tsa ho fetola.

Bona, ke ka sedibeng!
  1. <div class = "hantle-kholo hantle" >
  2. ...
  3. </ div>
Bona, ke ka sedibeng!
  1. <div class = "hantle-ntle" >
  2. ...
  3. </ div>

Koala letšoao

Sebelisa lets'oao le akaretsang la ho koala ho qhelela litaba tse kang mekhoa le litlhokomeliso.

  1. < sehlopha sa konopo = "koala" > &nako; </ konopo>

Lisebelisoa tsa iOS li hloka href="#"bakeng sa liketsahalo tsa ho tobetsa haeba u ka rata ho sebelisa ankora.

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

Lihlopha tsa bathusi

Litlelase tse bonolo, tse tsepamisitsoeng maikutlo bakeng sa pontšo e nyane kapa li-tweaks tsa boitšoaro.

. hula-ka ho le letshehadi

Phaphamisa ntho e ka ho le letšehali

  1. sehlopha = "hula-ka ho le letšehali"
  1. . hula - ka ho le letšehali {
  2. phaphamala : le letšehali ;
  3. }

. hula-ho le letona

Phaphamisa ntho ka ho le letona

  1. sehlopha = "hula-ho le letona"
  1. . hula - ka ho le letona {
  2. phaphamala : ka ho le letona ;
  3. }

.e khutsisitsoe

Fetola 'mala oa element ho#999

  1. sehlopha = "ho khutsitsoe"
  1. . khutsisitsoe {
  2. mmala : #999;
  3. }

.hlakisa

Hlakola floatntho efe kapa efe

  1. sehlopha = "clearfix"
  1. . clearfix {
  2. * atometsa : 1 ;
  3. &: pele ,
  4. &: ka mor'a {
  5. pontšo : tafole ;
  6. dikahare : "" ;
  7. }
  8. &: ka mor'a {
  9. hlakileng : ka bobeli ;
  10. }
  11. }