Uninzi lwezixhobo ezinokusetyenziswa kwakhona ezakhelwe ukubonelela ngokujonga, izilumkiso, iipopovers, kunye nokunye.
I-Toggable, imenyu yomxholo yokubonisa uluhlu lwamakhonkco. Yenziwe yasebenzisane kunye neplagi ye- javascript eyehlayo .
- <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#"> Isenzo </a> < /li>
- <li><a tabindex = "-1" href = "#" > Esinye isenzo </a></li>
- <li><a tabindex = "-1" href = "#" > Enye into apha </a></li>
- <li iklasi = "isahluli" > </ li>
- <li><a tabindex = "-1" href = "#"> Ikhonkco elahluliweyo </a></li>
- </ul>
Ukujonga nje imenyu eyehlayo, nantsi iHTML efunekayo. Kufuneka usonge isiqhumiso sokwehla kunye nemenyu eyehlayo ngaphakathi .dropdown
, okanye enye into ebhengeza position: relative;
. Emva koko yenza nje imenyu.
- <div iklasi = "ukwehla" >
- <!-- Ikhonkco okanye iqhosha lokuguqula ukwehla -->
- <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#"> Isenzo </a> < /li>
- <li><a tabindex = "-1" href = "#" > Esinye isenzo </a></li>
- <li><a tabindex = "-1" href = "#" > Enye into apha </a></li>
- <li iklasi = "isahluli" > </ li>
- <li><a tabindex = "-1" href = "#"> Ikhonkco elahluliweyo </a></li>
- </ul>
- </ div>
Lungelelanisa iimenyu ekunene kwaye wongeze iquka amanqanaba ongezelelweyo okwehlayo.
Yongeza .pull-right
ku-a .dropdown-menu
ukuya ekunene lungelelanisa imenyu eyehlayo.
- <ul class = "dropdown-menu pull-right" role = "imenyu" aria-labelledby = "dLabel" >
- ...
- </ul>
Yongeza inqanaba elongezelelweyo lemenyu eyehlayo, evela kwi-hover efana neye-OS X, kunye nezongezo ezilula zophawulo. Yongeza .dropdown-submenu
nakweyiphi na li
kwimenu eyehlayo ekhoyo ukwenza isimbo esizenzekelayo.
- <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#"> Olunye ukhetho </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </ li>
- </ul>
I-pagination elula ephefumlelwe yi-Rdio, ilungile kwii-apps kunye neziphumo zokukhangela. Ibhloko enkulu kunzima ukuyiphosa, kulula ukukala, kwaye ibonelela ngeendawo ezinkulu zokucofa.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Ngaphambili </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 = "#"> Okulandelayo </a> </li>
- </ul>
- </ div>
Unxulumano luyakwazi ukwenzeka kwiimeko ezahlukeneyo. Sebenzisa .disabled
amakhonkco angenakucofa kunye .active
nokubonisa iphepha langoku.
- <div class = "pagination" >
- <ul>
- <li class = "disabled" > <a href = "#"> Edlulileyo </a></li>
- <li iklasi = "esebenzayo" > <a href = "#"> 1 </a></li>
- ...
- </ul>
- </ div>
Ungatshintsha ngokukhetha iiankile ezisebenzayo okanye ezikhubazekileyo zespans ukususa umsebenzi wokucofa ngelixa ugcina izimbo ezicetyiweyo.
- <div class = "pagination" >
- <ul>
- <li class = "disabled" ><span> Prev </span></li>
- <li iklasi = "esebenzayo" ><span> 1 </span></li>
- ...
- </ul>
- </ div>
Yongeza enye yeeklasi ezimbini ozikhethelayo ukutshintsha ulungelelwaniso lwamakhonkco epagination: .pagination-centered
kunye .pagination-right
.
- <div class = "i-pagination-centered" >
- ...
- </ div>
- <div class = "pagination-right" >
- ...
- </ div>
Iikhonkco ezikhawulezayo zangaphambili kunye nezilandelayo zophumezo olulula lwe-pagination ngophawu olukhanyayo kunye nezitayile. Ilungile kwiziza ezilula ezifana neeblogi okanye iimagazini.
Ngokungagqibekanga, amaziko e-pageja amakhonkco.
- <ul iklasi = "pager" >
- <li><a href = "#"> Ngaphambili </a> </li>
- <li><a href = "#"> Okulandelayo </a> </li>
- </ul>
Kungenjalo, unokulungelelanisa ikhonkco ngalinye emacaleni:
- <ul iklasi = "pager" >
- <li iklasi = "yangaphambili" >
- <a href = "#" > ← Endala </a>
- </ li>
- <li iklasi = "elandelayo" >
- <a href = "#" > Entsha → </a>
- </ li>
- </ul>
Iikhonkco zePager zikwasebenzisa .disabled
iklasi eluncedo ngokubanzi ukusuka kwipagination.
- <ul iklasi = "pager" >
- <li iklasi = "yangaphambili ikhubazekile" >
- <a href = "#" > ← Endala </a>
- </ li>
- ...
- </ul>
Iileyibhile | IMarkup |
---|---|
Ukuhlala kukho | <span class="label">Default</span> |
Impumelelo | <span class="label label-success">Success</span> |
Isilumkiso | <span class="label label-warning">Warning</span> |
Kubalulekile | <span class="label label-important">Important</span> |
Ulwazi | <span class="label label-info">Info</span> |
Inverse | <span class="label label-inverse">Inverse</span> |
Igama | Umzekelo | IMarkup |
---|---|---|
Ukuhlala kukho | 1 | <span class="badge">1</span> |
Impumelelo | 2 | <span class="badge badge-success">2</span> |
Isilumkiso | 4 | <span class="badge badge-warning">4</span> |
Kubalulekile | 6 | <span class="badge badge-important">6</span> |
Ulwazi | 8 | <span class="badge badge-info">8</span> |
Inverse | 10 | <span class="badge badge-inverse">10</span> |
Into ekhaphukhaphu, eguquguqukayo yokubonisa umxholo ophambili kwindawo yakho. Isebenza kakuhle kwiindawo zokuthengisa kunye neziqulatho ezinzima.
Le yiyunithi yeqhawe elilula, icandelo elilula le-jumbotron lokubiza ingqalelo eyongezelelweyo kumxholo ofakiweyo okanye ulwazi.
- <div class = "iyunithi yeqhawe" >
- <h1> Isihloko </ h1>
- <p> Umgca wethegi </p>
- <p>
- <a iklasi = "btn btn-primary btn-large">
- Funda nzulu
- </a>
- </p>
- </ div>
Iqokobhe elilula h1
lesithuba esifanelekileyo kunye namacandelo ecandelo lomxholo kwiphepha. Ingasebenzisa h1
okungagqibekanga small
, isiqalelo kunye namanye amacandelo amaninzi ( ngezimbo ezongezelelweyo).
- <div class = "i-header-page" >
- <h1> Umzekelo wephepha elingasentla kwekhasi <small> Umxholo ophantsi weheader </small></h1>
- </ div>
Ngokungagqibekanga, ii-thumbnails zeBootstrap ziyilelwe ukubonisa imifanekiso edityanisiweyo enophawu oluncinci olufunekayo.
Ngophawu olongezelelweyo olongezelelweyo, kuyenzeka ukongeza naluphi na uhlobo lomxholo we-HTML njengezihloko, imihlathi, okanye amaqhosha kwi-thumbnails.
Izithonjana (ngaphambili .media-grid
ukuya kuthi ga kwi-v1.4) zilungile kwiigridi zeefoto okanye iividiyo, iziphumo zokukhangela umfanekiso, iimveliso zokuthengisa, iipotfoliyo, nokunye okuninzi. Zingaba ngamakhonkco okanye umxholo omileyo.
I-Thumbnail markup ilula-a ul
kunye naliphi na inani lezinto li
ezifunekayo kuphela. Ikwabhetyebhetye kakhulu, ivumela naluphi na uhlobo lomxholo onokumakishwa okuncinci ukusonga imixholo yakho.
Okokugqibela, icandelo le-thumbnails lisebenzisa iiklasi zenkqubo yegridi esele ikhona-njenge .span2
okanye .span3
-ukulawula imilinganiselo ye-thumbnail.
Njengoko bekutshiwo ngaphambili, imarkup efunekayo ye-thumbnails ilula kwaye ithe ngqo. Nalu ujongo kucwangciso olungagqibekanga lwemifanekiso eqhagamshelweyo :
- <ul iklasi = "i-thumbnails" >
- <li iklasi = "span4" >
- <a href = "#" iklasi = "i-thumbnail"> _
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </ li>
- ...
- </ul>
Ngomxholo we-HTML wesiko kwii-thumbnails, uphawu lutshintsha kancinci. Ukuvumela umxholo wenqanaba lebhloko naphi na, sitshintshisa i <a>
- <div>
enje:
- <ul iklasi = "i-thumbnails" >
- <li iklasi = "span4" >
- <div class = "i-thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Ileyibhile ye-Thumbnail </h3>
- <p> I-Thumbnail caption... </p>
- </ div>
- </ li>
- ...
- </ul>
Jonga zonke iinketho zakho ngeeklasi ezahlukeneyo zegridi ezifumanekayo kuwe. Ungaphinda udibanise kwaye utshatise ubungakanani obahlukeneyo.
Vala nasiphi na isicatshulwa kunye neqhosha lokukhupha elikhethiweyo .alert
kumyalezo wesilumkiso osisiseko.
- <div class = "isilumkiso" >
- < uhlobo lweqhosha = "iqhosha" iklasi = "vala" idatha-dismiss = "isilumkiso" > × </ iqhosha>
- <strong> Isilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu.
- </ div>
I-Mobile Safari kunye neebrowser ze-Mobile Opera, ukongeza data-dismiss="alert"
kuphawu, zifuna href="#"
ukugxothwa kwezilumkiso xa usebenzisa <a>
ithegi.
- <a href = "#" iklasi = "vala" idatha-dismiss = "isilumkiso"> × </a> _
Kungenjalo, unokusebenzisa into <button>
enophawu lwedatha, esikhethe ukuyenzela amaxwebhu ethu. Xa usebenzisa <button>
, kufuneka ubandakanye type="button"
okanye iifomu zakho azinakungeniswa.
- < uhlobo lweqhosha = "iqhosha" iklasi = "vala" idatha-dismiss = "isilumkiso" > × </ iqhosha>
Sebenzisa iplagin yezaziso zejQuery ukugxotha ngokukhawuleza nezilumkiso.
Kwimiyalezo emide, nyusa ukhuko phezulu nasezantsi kwesisongelo sesilumkiso ngokongeza .alert-block
.
Okona kulungileyo uzitshekishe, awubukeki ulunge kakhulu. I-Nulla vitae elit libero, i-pharetra augue. I-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div iklasi = "i-alert-block block" >
- < uhlobo lweqhosha = "iqhosha" iklasi = "vala" idatha-dismiss = "isilumkiso" > × </ iqhosha>
- <h4> Isilumkiso! </ h4>
- Okona kungcono uzihlole, awukho...
- </ div>
Yongeza iiklasi ozikhethelayo ukutshintsha intsingiselo yesivuseleli.
- <div class = "impazamo yesilumkiso sesilumkiso" >
- ...
- </ div>
- <div class = "isilumkiso-impumelelo yesilumkiso" >
- ...
- </ div>
- <div iklasi = "i-alert-alert-info" >
- ...
- </ div>
Ibar yenkqubela phambili ehlala ikho enethareyidi ethe nkqo.
- <div class = "inkqubela phambili" >
- <div class = "bar" style = " wide : 60 %; " ></div>
- </ div>
Isebenzisa igradient ukwenza isiphumo esinemigca. Ayifumaneki kwi-IE7-8.
- <div class = "inkqubela phambili-imigca" >
- <div class = "bar" style = " wide : 20 %; " ></div>
- </ div>
Yongeza ukuphilisa imivumbo ekunene ukuya ekhohlo .active
. .progress-striped
Ayifumaneki kuzo zonke iinguqulelo ze-IE.
- <div class = "inkqubela phambili-imigca esebenzayo" >
- <div class = "bar" style = " wide : 40 %; " ></div>
- </ div>
Beka iibar ezininzi kwindawo enye .progress
ukuze uzipakishe.
- <div class = "inkqubela phambili" >
- <div class = "bar-success" style = " wide : 35 %; " ></div>
- <div class = "bar-warning" style = " wide : 20 %; " ></div>
- <div class = "bar-danger" style = " wide : 10 %; " ></div>
- </ div>
Imivalo yenkqubela phambili isebenzisa enye iqhosha elifanayo kunye neeklasi zesilumkiso kwizimbo ezihambelanayo.
- <div class = "inkqubela phambili-ulwazi" >
- <div class = "bar" style = " width : 20 % " ></div>
- </ div>
- <div class = "inkqubela phambili-impumelelo" >
- <div class = "bar" style = " width : 40 % " ></div>
- </ div>
- <div class = "inkqubela phambili-isilumkiso" >
- <div class = "bar" style = " width : 60 % " ></div>
- </ div>
- <div class = "inkqubela phambili-ingozi" >
- <div class = "bar" style = " width : 80 % " ></div>
- </ div>
Ngokufana nemibala eqinileyo, sinemigca eyohlukeneyo yenkqubela phambili.
- <div class = "inkqubela phambili-ulwazi lwenkqubela-phambili" >
- <div class = "bar" style = " width : 20 % " ></div>
- </ div>
- <div class = "inkqubela phambili-impumelelo yenkqubela phambili-umtya" >
- <div class = "bar" style = " width : 40 % " ></div>
- </ div>
- <div class = "inkqubela-phambili-isilumkiso senkqubela-phambili enemigca" >
- <div class = "bar" style = " width : 60 % " ></div>
- </ div>
- <div class = "inkqubela phambili-inkqubela phambili-ingozi-imigca" >
- <div class = "bar" style = " width : 80 % " ></div>
- </ div>
Imivalo yenkqubela phambili isebenzisa i-CSS3 gradients, iinguqu, kunye noopopayi ukuphumeza zonke iziphumo zazo. Ezi mpawu azixhaswa kwi-IE7-9 okanye kwiinguqulelo ezindala zeFirefox.
Iinguqulelo ezingaphambi kwe-Internet Explorer 10 kunye ne-Opera 12 azixhasi oopopayi.
Sebenzisa iqula njengesiphumo esilula kwi-elementi ukuyinika isiphumo sokufakwa.
- <div iklasi = "kakuhle" >
- ...
- </ div>
Lawula ukukhuselwa kunye neekona ezingqukuva ngeeklasi ezimbini ozikhethelayo zesilungisi.
- <div iklasi = "inkulu kakuhle" >
- ...
- </ div>
- <div class = "kakuhle-ncinci" >
- ...
- </ div>
Sebenzisa i-ayikhoni yokuvala eqhelekileyo ukugxotha umxholo onjengeemodyuli kunye nezilumkiso.
- < iklasi yeqhosha = "vala" > &amaxesha; </ iqhosha>
Izixhobo ze-iOS zifuna i href="#" yokucofa iminyhadala ukuba ukhetha ukusebenzisa i-ankile.
- <a iklasi = "vala" href = "#" > &amaxesha; </a>
Iiklasi ezilula, ezigxininisiweyo zokubonisa okuncinci okanye ukulungiswa kokuziphatha.
Ncanda into ekhohlo
- iklasi = "tsala-ngasekhohlo"
- . tsala - ekhohlo {
- dada : ekhohlo ;
- }
Ncanda into ekunene
- iklasi = "tsalela ekunene"
- . tsala - ekunene {
- dada : ekunene ;
- }
Guqula umbala wesiqalelo ube#999
- iklasi = "ithulisiwe"
- . Thulisiwe {
- umbala : #999;
- }
Coca iqhosha float
nakweyiphi na into
- iklasi = "clearfix"
- . lungisa {
- sondeza : 1 ; _
- &: ngaphambili ,
- &: emva {
- bonisa : itafile ;
- umxholo : "" ;
- }
- &: emva {
- icacile : zombini ;
- }
- }