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:

<div iklasi = "iqela le-btn" > 
  <a iklasi = "btn" href = "#"> 1 </a> _  
  <a iklasi = "btn" href = "#"> 2 </a> _  
  <a iklasi = "btn" href = "#"> 3 </a> _  
</ div>

Umzekelo webar yesixhobo

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

<div class = "btn-toolbar" > 
  <div iklasi = "iqela le-btn" > 
    ...
  </ div>
</ 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 »

Iintloko phezulu

I-CSS yamaqela amaqhosha ikwifayile eyahlukileyo, iqhosha-amaqela.less.

Amaqhosha okwehla

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

Iintloko phezulu! Ukuhla kwamaqhosha kufuna iplagin eyehlayo yeBootstrap ukuba isebenze.

Umzekelo wokuphawula

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

<div iklasi = "iqela le-btn" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Isenzo
    <span class = "caret" > </ span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- amakhonkco emenyu eyehlayo -->
  </ul>
</ div>

Ukwehliswa kweqhosha lokwahlula

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

Umzekelo wokuphawula

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

<div iklasi = "iqela le-btn" > 
  <a iklasi = "btn" href = "#"> Isenzo </a> _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    <span class = "caret" > </ span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- amakhonkco emenyu eyehlayo -->
  </ul>
</ div>

Iklasi yesiseko esinamandla

Onke amacandelo e-nav apha-iithebhu, iipilisi, kunye noluhlu- ukwabelana ngesiseko esifanayo sokuphawula kunye nezimbo kwiklasi .nav.

Ukusetyenziswa nini

Iithebhu kunye neepilisi zilungile kumacandelo omxholo okanye ukuhamba phakathi kwamaphepha omxholo ohambelanayo.

Ulungelelwaniso lwamacandelo

Ukulungelelanisa amakhonkco e-nav, sebenzisa i .pull-leftokanye .pull-rightiiklasi eziluncedo. Zombini iiklasi ziya kongeza i-CSS edadayo kwicala elichaziweyo.

Iithebhu ezisisiseko

Thatha rhoqo <ul>amakhonkco kwaye wongeze .nav-tabs:

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo

<ul class = "nav nav-tabs" > 
  <li iklasi = "esebenzayo" > 
    <a href = "#" > Ekhaya </a> 
  </ li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Iipilisi ezisisiseko

Thatha kwaloo HTML inye, kodwa sebenzisa .nav-pillsendaweni yoko:

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo

<ul class = "nav nav-pills" > 
  <li iklasi = "esebenzayo" > 
    <a href = "#" > Ekhaya </a> 
  </ li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Uzipakisha njani

Njengoko iithebhu kunye neepilisi zithe tye ngokungagqibekanga, yongeza nje udidi lwesibini, .nav-stackedukuzenza zibonakale zipakishwe ngokuthe nkqo.

Iithebhu ezipakishweyo

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo

<ul class = "nav-tabs nav-stacked" > 
  ...
</ul>

Iipilisi ezipakishiweyo

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Iimenyu ezityebileyo zenziwe zalula

Iimenu zokwehla kwiithebhu zeBootstrap kunye neepilisi zilula kakhulu kwaye zifuna kuphela i-HTML encinci eyongezelelweyo kunye neplagi ye-jQuery ekhaphukhaphu.

Yiya ngaphaya kwiphepha leJavascript ukufunda amaxwebhu ekuqaliseni ukuhla kwiBootstrap.

Iithebhu ezinokwehla

• Ekhaya
• Inkangeleko yesimo
• Lahla phantsi
  • Isenzo
  • Esinye isenzo
  • Enye into apha
  • Ikhonkco elahluliweyo

<ul class = "nav nav-tabs" > 
  <li iklasi = "ehlayo" > 
    < iklasi = "i-dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Lahla phantsi
        <b iklasi = "inkathalo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- amakhonkco -->
    </ul>
  </ li>
</ul>

Iipilisi ezine dropdowns

• Ekhaya
• Inkangeleko yesimo
• Lahla phantsi
  • Isenzo
  • Esinye isenzo
  • Enye into apha
  • Ikhonkco elahluliweyo

<ul class = "nav nav-pills" > 
  <li iklasi = "ehlayo" > 
    < iklasi = "i-dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Lahla phantsi
        <b iklasi = "inkathalo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- amakhonkco -->
    </ul>
  </ li>
</ul>

Isicelo-style navigation

Uluhlu lwe-Nav lubonelela ngendlela elula nelula yokwakha amaqela ekhonkco le-nav ngezihloko ozikhethelayo. Ziye zisetyenziswe ngcono kwiibar ezisecaleni njengeFinder kwi-OS X.

Ngokwesakhiwo, zakhelwe kwizitayile ezingundoqo ze-nav njengeethebhu kunye neepilisi, ke ukusetyenziswa kunye nokwenza ngokwezifiso kuthe ngqo.

Ngee-icon

Uluhlu lwe-Nav lukwalula ukuxhobisa ngee-icon. Yongeza <i>ithegi efanelekileyo kunye neklasi kwaye usetwe.

Umzekelo nav uluhlu

Thatha uluhlu lwamakhonkco kwaye wongeze class="nav nav-list":

<ul class = "nav nav-list" > 
  <li iklasi = "nav-header" > 
    Dwelisa isihloko
  </ li>
  <li iklasi = "esebenzayo" > 
    <a href = "#" > Ekhaya </a> 
  </ li>
  <li>
    <a href = "#"> Ithala leencwadi </a> 
  </ li>
  ...
</ul>

Umzekelo nge icons

Umzekelo ofanayo, kodwa <i>ngeethegi zee-icon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i iklasi = "incwadi yomfanekiso" > </i> 
      Ithala leencwadi
    </a>
  </ li>
  ...
</ul>

Yintoni ebandakanyiweyo

Zisa iithebhu zakho ebomini nge-plugin elula yokuguqula phakathi komxholo usebenzisa iithebhu. I-Bootstrap idibanisa iithebhu ezinokubakho kwiindlela ezine: phezulu (okungagqibekanga), ekunene, ezantsi, nasekhohlo.

Ukutshintsha phakathi kwabo kulula kwaye kufuna kuphela ukutshintsha uphawu oluncinci kakhulu.

Umzekelo wetafile

Ukwenza iithebhu zibonakale, songela .nav-tabsenye idiv ngeklasi .tabbable.

I-plugin ye-jQuery yesiko

Zonke iithebhu ezinokubonwa zinikwe amandla yi-plugin yethu ye-jQuery ekhaphukhaphu. Funda ngakumbi malunga nendlela yokuzisa iithebhu ezinokuthi ziphile kwiphepha le-javascript docs.

Fumana i-javascript →

Iithebhu ngezantsi

Flip iodolo yeHTML kwaye wongeze iklasi ukubeka iithebhu ezantsi.

<div iklasi = "ithebhu ye-tabble-ngezantsi" > 
  <div class = "ithebhu-umxholo" > 
    ...
  </ div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</ div>

Iithebhu ekhohlo

Tshintsha iklasi ukubeka iithebhu ngasekhohlo.

<div iklasi = "ithebhu yetafile-ekhohlo" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ithebhu-umxholo" > 
    ...
  </ div>
</ div>

Iithebhu ngasekunene

Tshintsha iklasi ubeke iithebhu ngasekunene.

<div class = "ithebhu yetafile-ekunene" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ithebhu-umxholo" > 
    ...
  </ div>
</ div>

Navbar scaffolding

I-navbar ifuna kuphela ii-div ezimbalwa ukuyimisa kakuhle kumboniso omileyo okanye osisigxina.

<div class = "navbar" > 
  <div class = "i-navbar-yangaphakathi" > 
    <div class = "container" > 
      ...
    </ div>
  </ div>
</ div>

I-navbar ezinzileyo

Ukwenza i-navbar ilungiswe phezulu kwindawo yokujonga, yongeza .navbar-fixed-topkwi-div yangaphandle, .navbar.

<div class = "i-navbar-fixed-top" > 
  ...
</ div>

Kwi-CSS yakho, kuya kufuneka uphendule ngokudibana okubangelayo ngokongeza i-40px okanye ngaphezulu kwe-padding kwifayile yakho <body>. Qinisekisa ukuba ukongeza oku emva kwe-CSS ye-Bootstrap engundoqo naphambi kwe-CSS ekhethiweyo ephendulayo.

Igama lebrand

Ikhonkco elilula lokubonisa ibhrendi yakho okanye igama leprojekthi lifuna kuphela ithegi yeankile.

<a class = "brand" href = "#"> _  
  Igama leprojekthi
</a>

Khangela ifomu

Iifom zokukhangela zifumana izimbo zesiko kwi-navbar kunye .navbar-searchneklasi. Bandakanya .pull-leftokanye .pull-rightkwi formukulungelelanisa.

< iklasi yefom = "i-navbar-search tsala-ekhohlo" > 
  <input type = "text" class = "search-query" placeholder = "Khangela" >   
</ ifom>

Umahluko wokuphendula ngokuzikhethela

Ngokuxhomekeke kumthamo womxholo kwibar yakho ephezulu, unokufuna ukuphumeza iinketho zokuphendula. Ukwenza njalo, songela umxholo wakho we-nav kwi-div equlethe, .nav-collapse.collapsekwaye yongeza iqhosha lokuguqula ibar ye-navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "i-navbar-yangaphakathi" > 
    <div class = "container" > 
 
      <!-- .btn-navbar isetyenziswa njengoguqulelo lomxholo wenavbar ewileyo -->
      < iklasi = "btn btn-navbar" data- toggle = "collapse" data-target = ".nav -collapse " >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Qiniseka ukuba uyayishiya ibhrendi phaya ukuba ufuna iboniswe -->
      <a iklasi = "brand" href = "#"> Igama leprojekthi </a>  
 
      <!-- Yonke into oyifunayo ifihlwe ngo-940px okanye ngaphantsi, yibeke apha -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, njalo njalo -->
      </ div>
 
    </ div>
  </ div>
</ div>

Nav amakhonkco

Izinto ze-Nav zilula ukuzongeza ngoluhlu olungacwangciswanga.

<ul iklasi = "nav" > 
  <li iklasi = "esebenzayo" > 
    <a href = "#" > Ekhaya </a> 
  </ li>
  <li><a href = "#"> Ikhonkco </a> </li> 
  <li><a href = "#"> Ikhonkco </a> </li> 
</ul>

Unokongeza ngokulula abahluli kwiikhonkco zakho ze-nav kunye nento yoluhlu olungenanto kunye neklasi elula. Yongeza nje oku phakathi kwamakhonkco:

<ul iklasi = "nav" > 
  ...
  <li iklasi = "umhluli-othe nkqo" > </li> 
  ...
</ul>

Ulungelelwaniso lwamacandelo

Ukulungelelanisa i-nav, ifom yokukhangela, okanye umbhalo, sebenzisa .pull-leftokanye .pull-rightiiklasi eziluncedo. Zombini iiklasi ziya kongeza i-CSS edadayo kwicala elichaziweyo.

Ukongeza idrophu

Ukongeza ukwehla kwi-nav kulula kakhulu, kodwa kufuna ukusetyenziswa kwe- javascript plugin yethu .

<ul iklasi = "nav" > 
  <li iklasi = "ehlayo" > 
    <a href = "#" 
          iklasi = "i-dropdown-toggle"
          data-toggle = "dropdown" >
          Iakhawunti
          <b iklasi = "inkathalo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ li>
</ul>

Fumana i-javascript →

Kutheni uzisebenzise

I-Breadcrumb navigation isetyenziswa njengendlela yokubonisa abasebenzisi apho bangaphakathi kwi-app okanye isayithi, kodwa kungekhona kwi-primary navigation. Gcina ukusetyenziswa kwazo kuncinci kwaye kuncinci ukuze kusebenze kakhulu.

Imizekelo

Umzekelo omnye obonisiwe njengoko unokuboniswa kumaphepha amaninzi.

• Ekhaya

• Ikhaya /
• Ithala leencwadi

• Ikhaya /
• Ithala leencwadi /
• Idatha

IMarkup

I-HTML luluhlu lwakho olungacwangciswanga olusemgangathweni olunamakhonkco.

<ul iklasi = "i-breadcrumb" > 
  <li>
    <a href = "#" > Ekhaya </a> <span class = "isahluli" > / </span>   
  </ li>
  <li>
    <a href = "#" > Ithala leencwadi </a> < iklasi yespan = "isahluli" > / </span>   
  </ li>
  <li iklasi = "esebenzayo" > 
    <a href = "#" > Idatha </a> 
  </ li>
</ul>

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>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Ngaphambili </a> </li> 
    <li iklasi = "esebenzayo" > 
      <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>

Malunga nepeyija

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

Umzekelo omiselweyo

Ngokungagqibekanga, amaziko e-pageja amakhonkco.

• Ngaphambili
• Okulandelayo

<ul iklasi = "pager" > 
  <li>
    <a href = "#"> Ngaphambili </a> _ 
  </ li>
  <li>
    <a href = "#"> Okulandelayo </a> _ 
  </ li>
</ul>

Amakhonkco alungelelanisiweyo

Kungenjalo, unokulungelelanisa ikhonkco ngalinye emacaleni:

• ← Endala
• Intsha ngakumbi →

<ul iklasi = "pager" > 
  <li iklasi = "yangaphambili" > 
    <a href = "#" > ← Endala </a> 
  </ li>
  <li iklasi = "elandelayo" > 
    <a href = "#" > Entsha → </a> 
  </ li>
</ul>

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:

<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 h1elilula lesithuba esifanelekileyo kunye namacandelo ecandelo lomxholo kwiphepha. Ingasebenzisa h1okungagqibekanga small, isiqalelo kunye namanye amacandelo amaninzi ( ngezimbo ezongezelelweyo).

<div class = "page-haeder" > 
  <h1> Umzekelo wephepha elingasentla kwekhasi </h1>
</ 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 :

<ul iklasi = "i-thumbnails" > 
  <li iklasi = "span3" > 
    <a href = "#" iklasi = "i-thumbnail"> _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "i-thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Ileyibhile ye-Thumbnail </h5>
      <p> I-Thumbnail caption right apha... </p>
    </ div>
  </ li>
  ...
</ul>

Eminye imizekelo

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

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.

<div class = "isilumkiso" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <strong> Isilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu.
</ div>

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

<div iklasi = "i-alert-block block" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <h4 class = "alert-heading" > Isilumkiso! </ h4> 
  Okona kungcono uzihlole, awukho...
</ div>

Impazamo okanye ingozi

<div class = "impazamo yesilumkiso sesilumkiso" > 
  ...
</ div>

Impumelelo

<div class = "isilumkiso-impumelelo yesilumkiso" > 
  ...
</ div>

Ulwazi

<div iklasi = "i-alert-alert-info" > 
  ...
</ div>

Isiseko

Ibar yenkqubela phambili ehlala ikho enethareyidi ethe nkqo.

<div class = "inkqubela phambili" > 
  <div class = "bar" 
       style = " ububanzi : 60 %; " ></div> 
</ div>

Inemigca

Isebenzisa igradient ukwenza isiphumo esinemigca.

<div class = "ulwazi lwenkqubela phambili 
     inkqubela-phambili >
  <div class = "bar" 
       style = " ububanzi : 20 %; " ></div> 
</ div>

Oopopayi

Uthatha umzekelo onemigca kwaye awuphilise.

<div class = "inkqubela phambili-ingozi 
     inkqubela-phambili iyasebenza" >
  <div class = "bar" 
       style = " ububanzi : 40 %; " ></div> 
</ div>

Imibala eyongezelelweyo

Imivalo yenkqubela-phambili isebenzisa amanye amagama eklasi afanayo njengamaqhosha kunye nezilumkiso zesitayile esifanayo.

• .progress-info
• .progress-success
• .progress-danger

Kungenjalo, unokwenza ngokwezifiso iifayile ze-LESS kwaye uqengqe imibala yakho kunye nobukhulu.

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-8 okanye kwiinguqulelo ezindala zeFirefox.

I-Opera ayixhasi oopopayi ngeli xesha.

Wells

Sebenzisa iqula njengesiphumo esilula kwi-elementi ukuyinika isiphumo sokufakwa.

<div iklasi = "kakuhle" > 
  ...
</ div>

Iibheji

Sebenzisa ibheji kwinto yokubala okungafundwanga okanye njengesalathisi esilula.

<span class = "ibheji" > 3 </div> 

Vala i icon

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

×

<a iklasi = "vala" > &amaxesha; </a>