Likarolo tse ngata tse ka sebelisoang hape tse etselitsoeng ho fana ka litsamaiso, litemoso, li-popovers, le tse ling.
Lenane la maemo a feto-fetohang bakeng sa ho hlahisa manane a lihokelo. E entsoe hore e sebelisane le plugin ea javascript e theoha .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#"> Ketso </a></li >
- <li><a tabindex = "-1" href = "#"> Ketso e nngwe </a></li>
- <li><a tabindex = "-1" href = "#" > Ntho e nngwe mona </a></li>
- <li class = "divider" > </li>
- <li><a tabindex = "-1" href = "#"> Sehokelo se arohaneng </a></li>
- </ul>
Ha u sheba feela lethathamo la litheolelo, HTML e hlokahalang ke ena. U hloka ho phuthela "trigger" le menu e theoha ka har'a .dropdown
, kapa ntho e 'ngoe e phatlalatsang position: relative;
. Ebe u theha menu feela.
- <div class = "dropdown" >
- <!-- Link kapa konopo ho toggle dropdown -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#"> Ketso </a></li >
- <li><a tabindex = "-1" href = "#"> Ketso e nngwe </a></li>
- <li><a tabindex = "-1" href = "#" > Ntho e nngwe mona </a></li>
- <li class = "divider" > </li>
- <li><a tabindex = "-1" href = "#"> Sehokelo se arohaneng </a></li>
- </ul>
- </ div>
Lokisetsa li-menu ka ho le letona 'me u li kenye, u kenyelletse maemo a mang a litheohelang.
Eketsa .pull-right
ho a .dropdown-menu
ho le letona lokisetsa menu e theoha.
- <ul class = "menu e theoha-ho hula-ka ho le letona" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Kenya boemo bo eketsehileng ba li-menu tse theohang, tse hlahang hover joalo ka tsa OS X, ka litlatsetso tse bonolo tsa markup. Eketsa .dropdown-submenu
ho efe kapa efe li
ho menu e theohang e teng bakeng sa ho iketsetsa setaele.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#"> Likgetho tse ling </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
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.
- <div class = "pagination" >
- <ul>
- <li><a href = "#"> E fetileng </a></li>
- <li><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 = "#"> E latelang </a></li>
- </ul>
- </ div>
Lihokelo li ka khonahala bakeng sa maemo a fapaneng. Sebelisa .disabled
bakeng sa lihokelo tse sa tolokong le .active
ho supa leqephe la hajoale.
- <div class = "pagination" >
- <ul>
- <li class = "disabled" ><a href = "#"> E fetileng </a></li >
- <li class = "active" ><a href = "#"> 1 </a></li >
- ...
- </ul>
- </ 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.
- <div class = "pagination" >
- <ul>
- <li class = "e holofetse" ><span> E fetileng </span></li>
- <li class = "active" ><span> 1 </span></li>
- ...
- </ul>
- </ div>
Eketsa e 'ngoe ea lihlopha tse peli tseo u ka li khethang ho fetola lihokelo tsa pagination: .pagination-centered
le .pagination-right
.
- <div class = "pagination-centered" >
- ...
- </ div>
- <div class = "pagination pagination-right" >
- ...
- </ div>
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.
Ka ho sa feleng, li-pager centers li hokahanya.
- <ul class = "pager" >
- <li><a href = "#"> E fetileng </a></li>
- <li><a href = "#"> E latelang </a></li>
- </ul>
Ntle le moo, o ka hokahanya sehokelo se seng le se seng mahlakoreng:
- <ul class = "pager" >
- <li class = "e fetileng" >
- <a href = "#" > ← Khale </a>
- </li>
- <li class = "e latelang" >
- <a href = "#"> > Ntjhanyana → </a>
- </li>
- </ul>
Lihokelo tsa li-Pager li boetse li sebelisa sehlopha sa .disabled
lisebelisoa tse akaretsang ho tloha boheteneng.
- <ul class = "pager" >
- <li class = "ho holofetse nakong e fetileng" >
- <a href = "#" > ← Khale </a>
- </li>
- ...
- </ul>
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> |
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> |
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.
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.
- <div class = "hero-unit" >
- <h1> Sehlooho </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-primary btn-large">
- Ithute haholoanyane
- </a>
- </p>
- </ div>
Khetla e bonolo bakeng sa h1
ho 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).
- <div class = "leqephe-hlooho" >
- <h1> Sehlooho sa leqephe la mohlala <small> Subtext bakeng sa hlooho </small></h1>
- </ div>
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.
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.
Li -thumbnails (pele .media-grid
ho 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.
Letšoao la li-thumbnail le bonolo - ho ul
na le palo efe kapa efe ea li
likarolo 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.
Qetellong, karolo ea li-thumbnail e sebelisa lihlopha tse seng li ntse li le teng tsa grid - joalo ka .span2
kapa .span3
- bakeng sa taolo ea litekanyo tsa li-thumbnail.
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 :
- <ul class = "thumbnails" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "thumbnails" >
- <li class = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Leibole ya manane < /h3>
- <p> Mongolo o monyane... </p>
- </ div>
- </li>
- ...
- </ul>
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.
Qetella mongolo ofe kapa ofe le konopo ea boikhethelo ea ho hlakola .alert
bakeng sa molaetsa oa tlhokomeliso.
- <div class = "temoso" >
- < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </button>
- <strong> Temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo.
- </ div>
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.
- <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.
- < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </button>
Sebelisa plugin ea tlhokomeliso ea jQuery bakeng sa ho tlosa litlhokomeliso kapele le ha bonolo.
Bakeng sa melaetsa e melelele, eketsa padding ka holimo le tlase ho sephutheloana sa tlhokomeliso ka ho eketsa .alert-block
.
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.
- <div class = "temoso ea tlhokomeliso-block" >
- < mofuta oa konopo = "button" class = "close" data-dismiss = "temoso" > × </button>
- <h4> Tlhokomeliso! </h4>
- Ho molemo hore u itlhahlobe, ha u...
- </ div>
Kenya litlelase tsa boikhethelo ho fetola moelelo oa tlhokomeliso.
- <div class = "temoso-phoso ea tlhokomeliso" >
- ...
- </ div>
- <div class = "temoso-katleho ea tlhokomeliso" >
- ...
- </ div>
- <div class = "temoso ea tlhokomeliso-litaba" >
- ...
- </ div>
Sebaka sa kamehla sa tsoelo-pele se nang le gradient e otlolohileng.
- <div class = "tsoelopele" >
- <div class = "bar" style = " wide : 60 %; " ></div>
- </ div>
E sebelisa gradient ho theha sephetho sa melato. Ha e fumanehe ho IE7-8.
- <div class = "tsoelopele-tsoelopele" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </ div>
Eketsa .active
ho .progress-striped
ho phelisa melata ka ho le letona ho ea ho le letšehali. Ha e fumanehe liphetolelong tsohle tsa IE.
- <div class = "tswelopele-tswelopele e sebetsang" >
- <div class = "bar" style = " wide : 40 %; " ></div>
- </ div>
Beha li-bar tse ngata ka ho lekana .progress
ho li beha.
- <div class = "tsoelopele" >
- <div class = "bar-success" style = " width : 35 %; " ></div>
- <div class = "bar-warning" style = " bophara : 20 %; " ></div>
- <div class = "bar-danger" style = " width : 10 %; " ></div>
- </ div>
Libaka tsa tsoelo-pele li sebelisa likonopo tse tšoanang le lihlopha tsa tlhokomeliso bakeng sa mekhoa e tsitsitseng.
- <div class = "boitsebiso ba tsoelo-pele" >
- <div class = "bar" style = " width : 20 % " ></div>
- </ div>
- <div class = "tsoelopele-katleho" >
- <div class = "bar" style = " width : 40 % " ></div>
- </ div>
- <div class = "temoso ea tsoelo-pele ea tsoelo-pele" >
- <div class = "bar" style = " width : 60 % " ></div>
- </ div>
- <div class = "tsoelopele-kotsi" >
- <div class = "bar" style = " width : 80 % " ></div>
- </ div>
Ho tšoana le mebala e tiileng, re na le mekoallo ea tsoelo-pele e fapaneng.
- <div class = "tsoelopele-boitsebiso ba tsoelo-pele-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </ div>
- <div class = "tsoelopele-tsoelopele-katleho e nang le methapo" >
- <div class = "bar" style = " width : 40 % " ></div>
- </ div>
- <div class = "tsoelopele-temoso ea tsoelo-pele-tse-telo-pele" >
- <div class = "bar" style = " width : 60 % " ></div>
- </ div>
- <div class = "tsoelopele-tsoelo-pele-e kotsi" >
- <div class = "bar" style = " width : 80 % " ></div>
- </ div>
Libaka tsa tsoelo-pele li sebelisa li-gradients tsa CSS3, liphetoho, le li-animation ho finyella liphello tsohle tsa tsona. Likarolo tsena ha li tšehetsoe ho IE7-9 kapa liphetolelong tsa khale tsa Firefox.
Liphetolelo tsa pejana ho Internet Explorer 10 le Opera 12 ha li tšehetse lipopae.
Sebelisa seliba e le phello e bonolo holim'a element ho e fa phello ea inset.
- <div class = "hantle" >
- ...
- </ div>
Laola padding le likhutlo tse chitja ka lihlopha tse peli tseo u ka khethang ho li fetola.
- <div class = "hantle-kholo hantle" >
- ...
- </ div>
- <div class = "hantle-ntle" >
- ...
- </ div>
Sebelisa lets'oao le akaretsang la ho koala ho qhelela litaba tse kang mekhoa le litlhokomeliso.
- < sehlopha sa konopo = "koala" > &nako; </ konopo>
Lisebelisoa tsa iOS li hloka href="#" bakeng sa liketsahalo tsa ho tobetsa haeba u khetha ho sebelisa ankora.
- <a class = "close" href = "#" > × </a>
Litlelase tse bonolo, tse tsepamisitsoeng maikutlo bakeng sa pontšo e nyane kapa li-tweaks tsa boitšoaro.
Phaphamisa ntho e ka ho le letšehali
- sehlopha = "hula-ka ho le letšehali"
- . hula - ka ho le letšehali {
- phaphamala : le letšehali ;
- }
Phaphamisa ntho ka ho le letona
- sehlopha = "hula-ho le letona"
- . hula - ka ho le letona {
- phaphamala : ka ho le letona ;
- }
Fetola 'mala oa element ho#999
- sehlopha = "ho khutsitsoe"
- . khutsisitsoe {
- mmala : #999;
- }
Hlakola float
ntho efe kapa efe
- sehlopha = "clearfix"
- . clearfix {
- * atometsa : 1 ;
- &: pele ,
- &: ka mor'a {
- pontšo : tafole ;
- dikahare : "" ;
- }
- &: ka mor'a {
- hlakileng : ka bobeli ;
- }
- }