Amacandelo

Ubuninzi bezinto ezinokusetyenziswa kwakhona zakhelwe kwiBootstrap ukubonelela ngokujonga, izilumkiso, iipopovers, nokunye okuninzi.

Amaqela amaqhosha

Sebenzisa amaqela amaqhosha ukudibanisa amaqhosha amaninzi kunye njengenxalenye enye edibeneyo. Zakhe ngoluhlu <a>okanye <button>izinto.

Iinkqubo ezigqwesileyo

Sicebisa ezi zikhokelo zilandelayo zokusebenzisa amaqela amaqhosha kunye nebar yesixhobo:

  • Soloko usebenzisa into enye kwiqela elinye iqhosha, <a>okanye <button>.
  • Musa ukudibanisa amaqhosha emibala eyahlukeneyo kwiqela elinye lamaqhosha.
  • Sebenzisa ii-icon ukongeza okanye endaweni yombhalo, kodwa qiniseka ukuba uquka ialt nesihloko sombhalo apho kufanelekileyo.

Amaqela amaQhosha azalanayo anokwehla (jonga ngezantsi) kufuneka abizwe ngokwahlukeneyo kwaye asoloko ebandakanya ukhathalelo lokuhla ukubonisa ukuziphatha okucetywayo.

Umzekelo omiselweyo

Nantsi indlela i-HTML ejonga ngayo iqela leqhosha eliqhelekileyo elakhiwe ngamaqhosha ethegi ye-ankile:

  1. <div iklasi = "iqela le-btn" >
  2. < iklasi yeqhosha = "btn" > 1 </iqhosha>
  3. < iklasi yeqhosha = "btn" > 2 </ iqhosha>
  4. < iklasi yeqhosha = "btn" > 3 </iqhosha>
  5. </ div>

Umzekelo webar yesixhobo

Dibanisa iiseti <div class="btn-group">zibe ngu <div class="btn-toolbar">a kumacandelo anzima ngakumbi.

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

Ibhokisi yokukhangela kunye neencasa zerediyo

Amaqela amaqhosha anokusebenza njengonomathotholo, apho iqhosha elinye kuphela elinokuthi lisebenze, okanye iibhokisi zokukhangela, apho naliphi na inani lamaqhosha anokusebenza. Jonga iJavascript amaxwebhu aloo nto.

Fumana i-javascript »

Ukwehla ngokwamaqela amaqhosha

Iintloko phezulu! Amaqhosha anokwehla kufuneka asongelwe ngokwawo ukuze .btn-groupanikezelwe .btn-toolbarngokufanelekileyo.

Amaqhosha okwehla

Isishwankathelo kunye nemizekelo

Sebenzisa naliphi na iqhosha ukuqalisa imenyu eyehlayo ngokuyibeka ngaphakathi .btn-groupkunye nokubonelela ngophawu olufanelekileyo lwemenyu.

Umzekelo wokuphawula

Ngokufana neqela lamaqhosha, uphawu lwethu lusebenzisa uphawu lweqhosha eliqhelekileyo, kodwa kunye nezongezo ezimbalwa zokucokisa isitayile kunye nenkxaso ye-bootstrap yokwehla kweplagi yejQuery.

  1. <div iklasi = "iqela le-btn" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Isenzo
  4. <span class = "caret" > </ span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- amakhonkco emenyu eyehlayo -->
  8. </ul>
  9. </ div>

Isebenza ngazo zonke iisayizi zamaqhosha

Amaqhosha okwehlayo asebenza kuyo nayiphi na isayizi. ubungakanani bakho beqhosha ukuya .btn-large, .btn-small, okanye .btn-mini.

Ifuna i-javascript

Ukuhla kwamaqhosha kufuna iplagin eyehlayo yeBootstrap ukuba isebenze.

Kwezinye iimeko-njengeselfowuni-imenyu eyehlayo iya kwandiswa ngaphandle kwendawo yokujonga. Kufuneka usombulule ulungelelwaniso ngesandla okanye ngejavascript yesiko.


Ukwehliswa kweqhosha lokwahlula

Isishwankathelo kunye nemizekelo

Ukwakha kwizimbo zeqela leqhosha kunye nophawu, sinokwenza lula iqhosha lokuhlula. Amaqhosha okwahlula abonisa isenzo esisezantsi ekhohlo kunye nokwehla kokutshintsha ngasekunene ngamakhonkco omxholo.

Ubukhulu

Sebenzisa iiklasi zeqhosha elongezelelweyo .btn-mini, .btn-smallokanye .btn-largeukwenza ubungakanani.

  1. <div iklasi = "iqela le-btn" >
  2. ...
  3. <ul class = "imenyu eyehlayo tsala-ekunene" >
  4. <!-- amakhonkco emenyu eyehlayo -->
  5. </ul>
  6. </ div>

Umzekelo wokuphawula

Sandisa iqhosha lesiqhelo lokwehla ukuze sinikeze intshukumo yeqhosha lesibini elisebenza njengesiqhumiso esahlukileyo sokwehla.

  1. <div iklasi = "iqela le-btn" >
  2. < iklasi yeqhosha = "btn" > Isenzo </ iqhosha>
  3. < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </ span>
  5. </ iqhosha>
  6. <ul class = "dropdown-menu" >
  7. <!-- amakhonkco emenyu eyehlayo -->
  8. </ul>
  9. </ div>

Iimenyu ezilahliweyo

Iimenu ezithotyiweyo zisenokutshintshwa ukusuka ezantsi ukuya phezulu ngokongeza iklasi enye kumzali okhoyo .dropdown-menu. Iza kuflip isalathiso se .caretkwaye iphinde ibeke imenyu ngokwayo ukusuka ezantsi ukuya phezulu endaweni ephezulu ukuya phezulu.

  1. <div class = "i-btn-group dropup" >
  2. < iklasi yeqhosha = "btn" > Ukulahla </ iqhosha>
  3. < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </ span>
  5. </ iqhosha>
  6. <ul class = "dropdown-menu" >
  7. <!-- amakhonkco emenyu eyehlayo -->
  8. </ul>
  9. </ div>

Multicon-page pagination

Ukusetyenziswa nini

I-Ultra elula kunye ne-styled pagination encinci ephefumlelwe yi-Rdio, ilungile kwii-apps kunye neziphumo zokukhangela. Ibhloko enkulu kunzima ukuyiphosa, kulula ukukala, kwaye ibonelela ngeendawo ezinkulu zokucofa.

Amakhonkco ephepha anengxelo

Amakhonkco anokwenziwa ngokwezifiso kwaye asebenze kwiimeko ezininzi kunye neklasi elungileyo. .disabledamakhonkco angacofayo kunye .activenephepha langoku.

Ulungelelwaniso oluthambileyo

Yongeza nokuba yiyiphi kwiiklasi ezimbini ozikhethelayo ukutshintsha ulungelelwaniso lwamakhonkco epagination: .pagination-centeredkunye .pagination-right.

Imizekelo

Icandelo lepagination elingagqibekanga liyaguquguquka kwaye lisebenza kwinani leenguqu.

IMarkup

Isongelwe kwi- <div>, i-pagination yi- <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Ngaphambili </a> </li>
  4. <li iklasi = "esebenzayo" >
  5. <a href = "#"> 1 </a> _
  6. </ li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#"> Okulandelayo </a> </li>
  11. </ul>
  12. </ div>

I -Pager Ukukhawuleza kwangaphambili kunye nekhonkco elilandelayo

Malunga nepeyija

Icandelo le-pager yiseti yekhonkco lokuphunyezwa kwe-pagination elula kunye nokuphawula ukukhanya kunye nezimbo ezikhaphukhaphu. Ilungile kwiziza ezilula ezifana neeblogi okanye iimagazini.

Ukhetho lwemeko yokukhubazeka

Iikhonkco zePager zikwasebenzisa .disablediklasi ngokubanzi ukusuka kwi-pagination.

Umzekelo omiselweyo

Ngokungagqibekanga, amaziko e-pageja amakhonkco.

  1. <ul iklasi = "pager" >
  2. <li>
  3. <a href = "#"> Ngaphambili </a> _
  4. </ li>
  5. <li>
  6. <a href = "#"> Okulandelayo </a> _
  7. </ li>
  8. </ul>

Amakhonkco alungelelanisiweyo

Kungenjalo, unokulungelelanisa ikhonkco ngalinye emacaleni:

  1. <ul iklasi = "pager" >
  2. <li iklasi = "yangaphambili" >
  3. <a href = "#" > Endala </a>
  4. </ li>
  5. <li iklasi = "elandelayo" >
  6. <a href = "#" > Entsha → </a>
  7. </ li>
  8. </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>

Malunga

Iibheji zincinci, izinto ezilula zokubonisa isalathisi okanye ukubala kohlobo oluthile. Ziqhele ukufunyanwa kubathengi be-imeyile abanje ngeMail.app okanye kwiiapps eziphathwayo zezaziso zokutyhala.

Iiklasi ezikhoyo

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>

Iyunithi yeqhawe

I-Bootstrap ibonelela ngezinto ezilula, eziguquguqukayo ezibizwa ngokuba yiyunithi yeqhawe ukubonisa umxholo kwindawo yakho. Isebenza kakuhle kwiindawo zokuthengisa kunye neziqulatho ezinzima.

IMarkup

Gquba umxholo wakho ngolu divhlobo:

  1. <div class = "iyunithi yeqhawe" >
  2. <h1> Isihloko </ h1>
  3. <p> Umgca wethegi </p>
  4. <p>
  5. <a iklasi = "btn btn-primary btn-large">
  6. Funda nzulu
  7. </a>
  8. </p>
  9. </ div>

Molo Lizwe!

Le yiyunithi yeqhawe elilula, icandelo elilula le-jumbotron lokubiza ingqalelo eyongezelelweyo kumxholo ofakiweyo okanye ulwazi.

Funda nzulu

Iphepha elingasentla kwekhasi

Iqokobhe elilula h1lesithuba esifanelekileyo kunye namacandelo ecandelo lomxholo kwiphepha. Ingasebenzisa h1okungagqibekanga small, isiqalelo kunye namanye amacandelo amaninzi ( ngezimbo ezongezelelweyo).

  1. <div class = "i-header-page" >
  2. <h1> Umzekelo wephepha elingasentla kwekhasi </h1>
  3. </ div>

I-thumbnails ehlala ikho

Ngokungagqibekanga, ii-thumbnails zeBootstrap ziyilelwe ukubonisa imifanekiso edityanisiweyo enophawu oluncinci olufunekayo.

Iyakwazi ukwenzeka kakhulu

Ngophawu olongezelelweyo olongezelelweyo, kuyenzeka ukongeza naluphi na uhlobo lomxholo we-HTML njengezihloko, imihlathi, okanye amaqhosha kwi-thumbnails.

  • Ileyibhile ye-Thumbnail

    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

  • Ileyibhile ye-Thumbnail

    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

Kutheni usebenzisa i-thumbnails

Izithonjana (ngaphambili .media-gridukuya kuthi ga kwi-v1.4) zilungile kwiigridi zeefoto okanye iividiyo, iziphumo zokukhangela umfanekiso, iimveliso zokuthengisa, iipotfoliyo, nokunye okuninzi. Zingaba ngamakhonkco okanye umxholo omileyo.

Uphawu olulula, olubhetyebhetye

I-Thumbnail markup ilula-a ulkunye naliphi na inani lezinto liezifunekayo kuphela. Ikwabhetyebhetye kakhulu, ivumela naluphi na uhlobo lomxholo onokumakishwa okuncinci ukusonga imixholo yakho.

Isebenzisa ubungakanani bekholamu yegridi

Okokugqibela, icandelo le-thumbnails lisebenzisa iiklasi zenkqubo yegridi esele ikhona-njenge .span2okanye .span3-ukulawula imilinganiselo ye-thumbnail.

Imarkup

Njengoko bekutshiwo ngaphambili, imarkup efunekayo ye-thumbnails ilula kwaye ithe ngqo. Nalu ujongo kucwangciso olungagqibekanga lwemifanekiso eqhagamshelweyo :

  1. <ul iklasi = "i-thumbnails" >
  2. <li iklasi = "span3" >
  3. <a href = "#" iklasi = "i-thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </ li>
  7. ...
  8. </ul>

Ngomxholo we-HTML wesiko kwii-thumbnails, uphawu lutshintsha kancinci. Ukuvumela umxholo wenqanaba lebhloko naphi na, sitshintshisa i <a>- <div>enje:

  1. <ul iklasi = "i-thumbnails" >
  2. <li iklasi = "span3" >
  3. <div class = "i-thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Ileyibhile ye-Thumbnail </h5>
  6. <p> I-Thumbnail caption right apha... </p>
  7. </ div>
  8. </ li>
  9. ...
  10. </ul>

Eminye imizekelo

Jonga zonke iinketho zakho ngeeklasi ezahlukeneyo zegridi ezifumanekayo kuwe. Ungaphinda udibanise kwaye utshatise ubungakanani obahlukeneyo.

Ubunzima obungagqibekanga

Iklasi esisiseko ebhalwe ngokutsha

NgeBootstrap 2, siye salula iklasi yesiseko: .alertendaweni ye .alert-message. Siphinde sacutha ubuncinci uphawu olufunekayo—akukho <p>nto ifunwa ngokuzenzekelayo, ngaphandle nje <div>.

Umyalezo omnye wesilumkiso

Kwicandelo elomeleleyo elinekhowudi encinci, sisuse inkangeleko yokwahlula izilumkiso zebhloko, imiyalezo eza nephedi eninzi kunye nemibhalo emininzi. Iclass nayo itshintshile .alert-block.


Ihamba kakuhle ngejavascript

I-Bootstrap iza ne-plugin enkulu ye-jQuery exhasa imiyalezo yesilumkiso, iyenza ukuba bayigxothe ngokukhawuleza kwaye kulula.

Fumana iplagin »

Imizekelo yezilumkiso

Gquba umyalezo wakho kunye ne icon ozikhethelayo yokuvala kwi div ngeklasi elula.

Isilumkiso! Okona kulungileyo uzitshekishe, awubukeki ulunge kakhulu.
  1. <div class = "isilumkiso" >
  2. < iklasi yeqhosha = "vala" idatha-dismiss = "isilumkiso" > × </ iqhosha>
  3. <strong> Isilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu.
  4. </ div>

Iintloko phezulu! Izixhobo ze-iOS zifuna href="#"ukugxothwa kwezilumkiso. Qiniseka ukuba uyayiquka kunye nedatha yoyelelwano lwee-ayikhoni zokuvala iankile. Kungenjalo, unokusebenzisa into <button>enophawu lwedatha, esikhethe ukuyenzela amaxwebhu ethu. Xa usebenzisa <button>, kufuneka ubandakanye type="button"okanye iifomu zakho azinakungeniswa.

Yandisa ngokulula umyalezo wesilumkiso oqhelekileyo ngeeklasi ezimbini ozikhethelayo: .alert-blockukwenzela ukukhuselwa okungaphezulu kunye nolawulo lokubhaliweyo kunye .alert-headingnesihloko esithelekisekayo.

Isilumkiso!

Okona kulungileyo uzitshekishe, awubukeki ulunge kakhulu. I-Nulla vitae elit libero, i-pharetra augue. I-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div iklasi = "i-alert-block block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Isilumkiso! </ h4>
  4. Okona kungcono uzihlole, awukho...
  5. </ div>

Iinketho zomxholo Yongeza iindidi ozikhethelayo ukutshintsha intsingiselo yesivuseleli

Impazamo okanye ingozi

Owu khawuleza! Guqula izinto ezimbalwa kwaye uzame ukuthumela kwakhona.
  1. <div class = "impazamo yesilumkiso sesilumkiso" >
  2. ...
  3. </ div>

Impumelelo

Wenze kakuhle! Ufunde ngempumelelo lo myalezo ubalulekileyo wesilumkiso.
  1. <div class = "isilumkiso-impumelelo yesilumkiso" >
  2. ...
  3. </ div>

Ulwazi

Iintloko phezulu! Esi silumkiso sidinga ukuhoywa kwakho, kodwa asibalulekanga kakhulu.
  1. <div iklasi = "i-alert-alert-info" >
  2. ...
  3. </ div>

Imizekelo kunye nophawu

Isiseko

Ibar yenkqubela phambili ehlala ikho enethareyidi ethe nkqo.

  1. <div class = "inkqubela phambili" >
  2. <div class = "bar"
  3. style = " ububanzi : 60 %; " ></div>
  4. </ div>

Inemigca

Isebenzisa igradient ukwenza isiphumo esinemigca (akukho IE).

  1. <div class = "inkqubela phambili-imigca" >
  2. <div class = "bar"
  3. style = " ububanzi : 20 %; " ></div>
  4. </ div>

Oopopayi

Ithatha umzekelo onemigca kwaye iwuphilise (akukho IE).

  1. <div class = "inkqubela phambili-inemigca
  2. esebenzayo" >
  3. <div class = "bar"
  4. style = " ububanzi : 40 %; " ></div>
  5. </ div>

Iinketho kunye nenkxaso yebhrawuza

Imibala eyongezelelweyo

Imivalo yenkqubela phambili isebenzisa enye iqhosha elifanayo kunye neeklasi zesilumkiso kwizimbo ezihambelanayo.

Imivalo enemigca

Ngokufana nemibala eqinileyo, sinemigca eyohlukeneyo yenkqubela phambili.

Ukuziphatha

Imivalo yenkqubela phambili isebenzisa iinguqu zeCSS3, ke ukuba uhlengahlengisa ububanzi ngejavascript, iya kwenza ubungakanani kwakhona ngokutyibilikayo.

Ukuba usebenzisa .activeiklasi, .progress-stripedimivalo yakho yenkqubela phambili iya kuphilisa imigca ekhohlo ukuya ekunene.

Inkxaso yebhrawuza

Imivalo yenkqubela phambili isebenzisa i-CSS3 gradients, iinguqu, kunye noopopayi ukuphumeza zonke iziphumo zazo. Ezi mpawu azixhaswa kwi-IE7-9 okanye kwiinguqulelo ezindala zeFirefox.

I-Opera kunye ne-IE azixhasi oopopayi ngeli xesha.

Wells

Sebenzisa iqula njengesiphumo esilula kwi-elementi ukuyinika isiphumo sokufakwa.

Jonga, ndisequleni!
  1. <div iklasi = "kakuhle" >
  2. ...
  3. </ div>

Vala i icon

Sebenzisa i-ayikhoni yokuvala eqhelekileyo ukugxotha umxholo onjengeemodyuli kunye nezilumkiso.

  1. < iklasi yeqhosha = "vala" > &amaxesha; </ iqhosha>

Izixhobo ze-iOS zifuna i href="#" yokucofa iminyhadala ukuba ukhetha ukusebenzisa i-ankile.

  1. <a iklasi = "vala" href = "#" > &amaxesha; </a>