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" > 
  < iklasi yeqhosha = "btn" > 1 </iqhosha> 
  < iklasi yeqhosha = "btn" > 2 </ iqhosha> 
  < iklasi yeqhosha = "btn" > 3 </iqhosha> 
</ 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 »

Ukwehla ngokwamaqela amaqhosha

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

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.

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

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.

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.

Ubungakanani

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

<div iklasi = "iqela le-btn" > 
  ...
  <ul class = "imenyu eyehlayo tsala-ekunene" > 
    <!-- amakhonkco emenyu eyehlayo -->
  </ul>
</ div>

Umzekelo wokuphawula

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

<div iklasi = "iqela le-btn" > 
  < iklasi yeqhosha = "btn" > Isenzo </ iqhosha> 
  < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </ span> 
  </ iqhosha>
  <ul class = "dropdown-menu" > 
    <!-- amakhonkco emenyu eyehlayo -->
  </ul>
</ 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.

<div class = "i-btn-group dropup" > 
  < iklasi yeqhosha = "btn" > Ukulahla </ iqhosha> 
  < iklasi yeqhosha = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </ span> 
  </ iqhosha>
  <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 ziyakongeza i-CSS ukudada kwicala elichaziweyo.

Iithebhu ezisisiseko

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

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo

<ul iklasi = "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 tyaba 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
• Nceda
• Lahla phantsi
  • Isenzo
  • Esinye isenzo
  • Enye into apha
  • Ikhonkco elahluliweyo

<ul iklasi = "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
• Nceda
• 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.

Izahluli ezithe tyaba

Yongeza umahluli othe tyaba ngokwenza into yoluhlu olungenanto ngodidi .divider, njengokuba njalo:

<ul class = "nav nav-list" > 
  ...
  <li iklasi = "umahluli" > </ li> 
  ...
</ul>

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.

Ukucima kwiithebhu

Ukwenza iithebhu ziphelelwe, yongeza .fadekuyo nganye .tab-pane.

Ifuna iplagi yejQuery

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

Fumana i-javascript →

Umzekelo wetafile

Ukwenza iithebhu zibambeke, yenza i- .tab-paneID ene-ID eyodwa kuyo yonke ithebhu kwaye uyisongele kwi .tab-content.

Kwiithebhu ezilungelelaniswe ekunene okanye ekhohlo, songela i .nav-tabskunye .tab-contentno .tabbable.

Uphawulo oluthe ngqo

Ukusebenzisa i-tabable tabs kufuna i-div yokusonga, isethi yeethebhu, kunye neseti yeepaneli ze-tableable zomxholo.

<div iklasi = "itafile" > <-- Ifuneka kuphela kwiithebhu zasekhohlo/ekunene --> 
  <ul iklasi = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Icandelo 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Icandelo lesi- 2 </a></li>  
  </ul>
  <div class = "ithebhu-umxholo" > 
    <div class = "i-tab-pane esebenzayo" id = "tab1" >  
      <p> NdikwiCandelo 1. </p>
    </ div>
    <div class = "i-tab-pane" id = "tab2" >  
      <p> Molo, ndikwiCandelo lesi-2. </p>
    </ div>
  </ div>
</ div>

Iithebhu ngezantsi

Flip iodolo yeHTML kwaye wongeze iklasi ukubeka iithebhu ezantsi.

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

Iithebhu ekhohlo

Tshintsha iklasi ukubeka iithebhu ngasekhohlo.

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

Iithebhu ngasekunene

Tshintsha iklasi ukubeka iithebhu ngasekunene.

<div class = "ithebhu yetafile-ekunene" > 
  <ul iklasi = "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

Lungisa i-navbar phezulu okanye ezantsi kwendawo yokujonga kunye neklasi eyongezelelweyo kwi-div engaphandle .navbar,.

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

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

Xa uncamathelisa i-navbar, khumbula ukwenza ingxelo yendawo efihliweyo engaphantsi. Yongeza i-40px okanye ngaphezulu ye-padding kwi- <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>

Iifom kwi-navbar

Ukwenza isimbo ngokufanelekileyo kunye nokubeka ifom ngaphakathi kwe-navbar, yongeza iiklasi ezifanelekileyo njengoko kubonisiwe ngezantsi. Kwifomu emiselweyo, bandakanya .navbar-formkunye nokuba .pull-leftokanye .pull-rightukuyilungelelanisa ngokufanelekileyo.

< iklasi yefom = "i-navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</ ifom>

Ukufumana ifom yokukhangela elungiselelwe ngakumbi, yongeza nakwigalelo kwizimbo ezikhethekileyo .navbar-searchkwi -navbar.form.search-query

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

Umahluko wokuphendula ngokuzikhethela

Ngokuxhomekeke kwisixa somxholo 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 odilikayo -->
      < 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 yophendlo, okanye umbhalo, sebenzisa .pull-leftokanye .pull-rightiiklasi eziluncedo. Zombini iiklasi ziyakongeza i-CSS ukudada kwicala elichaziweyo.

Ukongeza iimenu ezihlayo

Ukongeza ukwehla kunye nokuhla 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 →

Okubhaliweyo kwi-navbar

Songa imitya yokubhaliweyo kwi- <.navbar-text>, ngesiqhelo <p>kwithegi yokukhokela nombala ofanelekileyo.

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" > Idatha </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 engagqibekanga 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 nepheyija

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.

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

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

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

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

I-thumbnails ehlala ikho

Ngokungagqibekanga, iithumbnails 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 womgangatho webhloko 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 nokhupho olungaphezulu 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" > 
  < iklasi yeqhosha = "vala" idatha-dismiss = "isilumkiso" > × </ iqhosha>  
  <strong> Isilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu.
</ div>

Iintloko phezulu! Izixhobo ze-iOS zifuna href="#"ukugxothwa kwezilumkiso. Qiniseka ukuba uyayiquka kunye nedatha yoyelelwano lwee-ayikhoni zokuvala iankile. Kungenjalo, unokusebenzisa into buttonenophawu lwedatha, esikhethe ukuyenzela amaxwebhu ethu.

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

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

Impazamo okanye ingozi

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

Impumelelo

<div iklasi = "i-alert-alert-success" > 
  ...
</ 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 (akukho IE).

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

Oopopayi

Ithatha umzekelo onemigca kwaye iwuphilise (akukho IE).

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

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.

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

Vala i icon

Use the generic close icon for dismissing content like modals and alerts.

×

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>