Umzekelo

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>

IMarkup

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>

Iinketho

Lungelelanisa iimenyu ekunene kwaye wongeze iquka amanqanaba ongezelelweyo okwehlayo.

Ukulungelelanisa iimenyu

Yongeza .pull-rightku-a .dropdown-menuukuya ekunene lungelelanisa imenyu eyehlayo.

<ul class = "dropdown-menu pull-right" role = "imenyu" aria-labelledby = "dLabel" >   
  ...
</ul>

Iinketho zemenyu ekhubazekileyo

Yongeza .disabledkwi <li>-dropdown ukuvala ikhonkco.

<ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ikhonkco eliqhelekileyo </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Ikhonkco elikhubazekileyo </a></li>   
  <li><a tabindex = "-1" href = "#" > Enye ikhonkco </a></li>  
</ul>

Iimenyu eziphantsi kokwehla

Yongeza inqanaba elongezelelweyo lemenyu eyehlayo, evela kwi-hover efana neye-OS X, kunye nezongezo ezilula zophawulo. Yongeza .dropdown-submenunakweyiphi na likwimenu 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>

Imizekelo

Iinketho ezimbini ezisisiseko, kunye neenguqulelo ezimbini ezithe ngqo.

Iqela leqhosha elinye

Gquba uthotho lwamaqhosha .btnnge- .btn-group.

<div iklasi = "iqela le-btn" > 
  < iklasi yeqhosha = "btn" > Ekhohlo </ iqhosha> 
  < iklasi yeqhosha = "btn" > Embindini </ iqhosha> 
  < iklasi yeqhosha = "btn" > Ekunene </ iqhosha> 
</ div>

Amaqela amaqhosha amaninzi

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>

Amaqela amaqhosha nkqo

Yenza isethi yamaqhosha abonakale epakishwe ngokuthe nkqo kunokuba uthe tye.

<div class = "btn-group btn-group-vertical" > 
  ...
</ 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.

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.

<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 okwehla asebenza nakuwuphi na ubungakanani: .btn-large, .btn-small, okanye .btn-mini.

Ifuna iJavaScript

Ukuhla kwamaqhosha kufuna iplagin eyehlayo yeBootstrap ukuba isebenze.

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

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.

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

Ubukhulu

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

<div iklasi = "iqela le-btn" > 
  < iklasi yeqhosha = "btn btn-mini" > Isenzo </ iqhosha> 
  < iklasi yeqhosha = "btn btn-mini 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>

Ukungagqibeki okukhaphukhaphu Uphawu olufanayo, iindidi ezahlukeneyo

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

Iithebhu ezisisiseko

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

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

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

Ilizwe labakhubazekileyo

Kulo naliphi na icandelo le-nav (iithebhu, iipilisi, okanye uluhlu), yongeza amakhonkco angwevu kwaye akukho ziphumo .disabledze - hover . Amakhonkco aya kuhlala ecofa, nangona kunjalo, ngaphandle kokuba ususa hrefuphawu. Kungenjalo, unokusebenzisa iJavaScript yesiko ukunqanda olo nqakrazo.

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

Ulungelelwaniso lwamacandelo

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

Iyabekeka

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

Iithebhu ezipakishweyo

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

Iipilisi ezipakishiweyo

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

Ukwehla

Yongeza iimenu ezihlayo nge-HTML encinci eyongezelelweyo kunye neplagi ye- JavaScript eyehlayo .

Iithebhu ezinokwehla

<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

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

Izintlu zeNav

Indlela elula nelula yokwakha amaqela amakhonkco e-nav anezihloko ozikhethelayo. Ziye zisetyenziswe ngcono kwiibar ezisecaleni njengeFinder kwi-OS X.

Umzekelo nav uluhlu

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

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

PhawulaKuba indlwane ngaphakathi kuluhlu nav, bandakanya class="nav nav-list"kuyo nayiphi na indlwane <ul>.

Izahluli ezithe tyaba

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

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

Itafile nav

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

Umzekelo wetafile

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

<div class = "tabble" > <!-- Ifuneka kuphela kwiithebhu zasekhohlo/ekunene -->  
  <ul class = "nav 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>

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 .

Itafile kulo naliphi na icala

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 esisiseko

Ukuqala, ii-navbars zimile (azigxininisi phezulu) kwaye zibandakanya inkxaso yegama leprojekthi kunye nokuhamba okusisiseko. Beka enye naphi na ngaphakathi .containerkwe-, ebeka ububanzi besayithi lakho kunye nomxholo.

<div class = "navbar" > 
  <div class = "i-navbar-yangaphakathi" > 
    <a iklasi = "brand" href = "#"> Isihloko </a> _  
    <ul iklasi = "nav" > 
      <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
      <li><a href = "#"> Ikhonkco </a> </li> 
      <li><a href = "#"> Ikhonkco </a> </li> 
    </ul>
  </ div>
</ div>

Amacandelo eNavbar

Uphawu

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

<a iklasi = "brand" href = "#"> Igama leprojekthi </a>  

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>

Iifom

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" >  
  < uhlobo lweqhosha = "submit " class = "btn" > Ngenisa </ iqhosha>  
</ ifom>

Khangela ifomu

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>

Ulungelelwaniso lwamacandelo

Lungelelanisa amakhonkco e-nav, ifom yophendlo, okanye umbhalo, sebenzisa i .pull-leftokanye .pull-rightiiklasi eziluncedo. Zombini iiklasi ziya kongeza i-CSS edadayo kwicala elichaziweyo.

Ukusebenzisa iidrophu

Yongeza i-dropdowns kunye ne-drop-ups kwi-nav kunye ne-markup bit kunye ne- plagin ye-JavaScript eyehlayo .

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

Ndwendwela uxwebhu lweJavaScript eyehlayo ukuze ufumane uphawu olungakumbi kunye nolwazi lokufowuna kokwehla.

Isicatshulwa

Songa imitya yokubhaliweyo ngento nge .navbar-text, ngokuqhelekileyo <p>kwithegi yokukhokela nombala ofanelekileyo.

Ukhetho lokubonisa umahluko

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

Zilungiswe phezulu

Yongeza .navbar-fixed-topkwaye ukhumbule ukwenza ingxelo yendawo efihliweyo engaphantsi kwayo ngokongeza ubuncinci 40px paddingkwi <body>. Qinisekisa ukuba ukongeza oku emva kwe-CSS ye-Bootstrap engundoqo naphambi kwe-CSS ekhethiweyo ephendulayo.

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

Ilungisiwe ukuya emazantsi

Yongeza .navbar-fixed-bottomendaweni yoko.

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

I-navbar ephezulu engatshintshiyo

Yenza i navbar enobubanzi obugcweleyo eskrola kude nephepha ngokongeza .navbar-static-top. Ngokungafaniyo .navbar-fixed-topneklasi, awudingi ukutshintsha nayiphi na i-padding kwi- body.

<div class = "navbar navbar-static-top" > 
  ...
</ div>

I-navbar ephendulayo

Ukuphumeza i navbar ephendulayo, songela umxholo wakho webar ye navbar kwi div equlathe, .nav-collapse.collapse, kwaye wongeze i navbar iqhosha lokuguqula, .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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, njalo njalo -->
      </ div>
 
    </ div>
  </ div>
</ div>

Umahluko oguqulweyo

Guqula inkangeleko ye navbar ngokongeza .navbar-inverse.

<div class = "i-navbar ye-navbar-inverse" > 
  ...
</ div>

Imizekelo

Umzekelo omnye obonisiwe njengoko unokuboniswa kumaphepha amaninzi.

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

Uluhlu olusemgangathweni

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 = "#"> 5 </a> </li> 
    <li><a href = "#"> Okulandelayo </a> </li> 
  </ul>
</ div>

Iinketho

Iimeko ezikhubazekileyo nezisebenzayo

Unxulumano luyakwazi ukwenzeka kwiimeko ezahlukeneyo. Sebenzisa .disabledamakhonkco angenakucofa kunye .activenokubonisa iphepha langoku.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </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 iklasi = "ikhubazekileyo" ><span> « </ span> </ li> 
    <li iklasi = "esebenzayo" ><span> 1 </span></li> 
    ...
  </ul>
</ div>

Ubukhulu

Ngaba ufuna ukwenza i-pagination enkulu okanye encinci? Yongeza .pagination-large, .pagination-small, okanye .pagination-miniiisayizi ezongezelelweyo.

<div class = "pagination-large" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination-small" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</ div>

Ulungelelwaniso

Yongeza enye yeeklasi ezimbini ozikhethelayo ukutshintsha ulungelelwaniso lwamakhonkco epagination: .pagination-centeredkunye .pagination-right.

<div class = "i-pagination-centered" > 
  ...
</ div>

<div class = "pagination-right" > 
  ...
</ div>

Ipheyija

Iikhonkco ezikhawulezayo zangaphambili kunye nezilandelayo zophumezo olulula lwe-pagination ngophawu olukhanyayo kunye nezitayile. Ilungile kwiziza ezilula ezifana neeblogi okanye iimagazini.

Umzekelo omiselweyo

Ngokungagqibekanga, amaziko e-pageja amakhonkco.

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

Amakhonkco alungelelanisiweyo

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>

Ukhetho lwemeko yokukhubazeka

Iikhonkco zePager zikwasebenzisa .disablediklasi eluncedo ngokubanzi ukusuka kwipagination.

<ul iklasi = "pager" > 
  <li iklasi = "yangaphambili ikhubazekile" > 
    <a href = "#" > ← Endala </a> 
  </ li>
  ...
</ul>

Iileyibhile

Iibheji

Iqengqeleka ngokulula

Ukuze kuphunyezwe lula, iilebhile kunye neebheji ziyakuwa ngokulula (ngokusebenzisa :emptyumkhethi weCSS) xa kungekho mxholo ukhoyo ngaphakathi.

Iyunithi yeqhawe

Into ekhaphukhaphu, eguquguqukayo yokubonisa umxholo ophambili kwindawo yakho. Isebenza kakuhle kwiindawo zokuthengisa kunye neziqulatho ezinzima.

<div class = "iyunithi yeqhawe" > 
  <h1> Isihloko </ h1>
  <p> Umgca wethegi </p>
  <p>
    <a iklasi = "btn btn-primary btn-large"> 
      Funda nzulu
    </a>
  </p>
</ div>

Iphepha elingasentla kwekhasi

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 <small> Umxholo ophantsi weheader </small></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.

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 = "span4" > 
    <a href = "#" iklasi = "i-thumbnail"> _  
      <img data-src = "holder.js/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 data-src = "holder.js/300x200" alt = "" >  
      <h3> Ileyibhile ye-Thumbnail </h3>
      <p> I-Thumbnail caption... </p>
    </ div>
  </ li>
  ...
</ul>

Eminye imizekelo

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

Isilumkiso esihlala sihleli

Vala nasiphi na isicatshulwa kunye neqhosha lokukhupha elikhethiweyo .alertkumyalezo wesilumkiso osisiseko.

<div class = "isilumkiso" > 
  < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "alert" > &amaxesha; </ iqhosha>   
  <strong> Isilumkiso! </strong> Eyona nto ibhetele ukuba ujonge wena ngokwakho, awukhange ulunge kakhulu.
</ div>

Cima amaqhosha

I-Mobile Safari kunye neebrowser ze-Mobile Opera, ukongeza data-dismiss="alert"kuphawu, zifuna href="#"ukugxothwa kwezilumkiso xa usebenzisa <a>ithegi.

<a href = "#" class = "close" data-dismiss = "alert" > &amaxesha; </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" class = "close" data-dismiss = "alert" > &amaxesha; </ iqhosha>   

Cima izilumkiso ngeJavaScript

Sebenzisa iplagin yezaziso zejQuery ukugxotha ngokukhawuleza nezilumkiso.

Iinketho

Kwimiyalezo emide, nyusa ukhuko phezulu nasezantsi kwesisongelo sesilumkiso ngokongeza .alert-block.

<div iklasi = "i-alert-block block" > 
  < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "alert" > &amaxesha; </ iqhosha>   
  <h4> Isilumkiso! </ h4>
  Okona kungcono uzihlole, awukho...
</ div>

Iindlela ezizezinye zomxholo

Yongeza iiklasi ozikhethelayo ukutshintsha intsingiselo yesivuseleli.

Impazamo okanye ingozi

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

Impumelelo

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

Ulwazi

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

Imizekelo kunye nophawu

Isiseko

Ibar yenkqubela phambili ehlala ikho enethareyidi ethe nkqo.

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

Inemigca

Isebenzisa igradient ukwenza isiphumo esinemigca. Ayifumaneki kwi-IE7-8.

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

Oopopayi

Yongeza ukuphilisa imivumbo ekunene ukuya ekhohlo .active. .progress-stripedAyifumaneki kuzo zonke iinguqulelo ze-IE.

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

Ipakishwe

Beka iibar ezininzi kwindawo enye .progressukuze 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>

Iinketho

Imibala eyongezelelweyo

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>

Imivalo enemigca

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>

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.

Iinguqulelo ezingaphambi kwe-Internet Explorer 10 kunye ne-Opera 12 azixhasi oopopayi.

Izitayile zento engabonakaliyo yokwakha iindidi ezahlukeneyo zamacandelo (njengamagqabantshintshi eblogi, iiTweets, njalo njalo) ezibonisa umfanekiso osekhohlo okanye olungelelaniswe ekunene ecaleni komxholo wombhalo.

Umzekelo omiselweyo

Imidiya engagqibekanga ivumela ukudada into yemidiya (imifanekiso, ividiyo, iaudio) ukuya ngasekhohlo okanye ngasekunene kwebhloko yomxholo.

Isihloko semidiya

Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis kwi-faucibus.

Isihloko semidiya

Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis kwi-faucibus.

Isihloko semidiya

Cras sit amet nibh libero, in gravida nulla. I-Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. I-Donec lacinia congue felis kwi-faucibus.

<div class = "media" > 
  < iklasi = "tsala-ekhohlo" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Isihloko semidiya </h4> 
    ...
 
    <!-- Into yemidiya ebekwe kwindlwana -->
    <div class = "media" > 
      ...
    </ div>
  </ div>
</ div>

Uluhlu lwemidiya

Ngophawu olongezelelweyo, ungasebenzisa imidiya engaphakathi kuluhlu (iluncedo kwimisonto yezimvo okanye uludwe lwamanqaku).

<ul iklasi = "uluhlu lwemidiya" > 
  <li iklasi = "imidiya" > 
    < iklasi = "tsala-ekhohlo" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Isihloko semidiya </h4> 
      ...
 
      <!-- Into yemidiya ebekwe kwindlwana -->
      <div class = "media" > 
        ...
     </ div>
    </ div>
  </ li>
</ul>

Wells

Sebenzisa iqula njengesiphumo esilula kwi-elementi ukuyinika isiphumo sokufakwa.

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

Iiklasi ozikhethelayo

Lawula ukukhuselwa kunye neekona ezingqukuva ngeeklasi ezimbini ozikhethelayo zesilungisi.

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

<div class = "kakuhle-ncinci" > 
  ...
</ div>

Vala i icon

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

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

Izixhobo ze-iOS zifuna isiganeko href="#"sokucofa ukuba ungathanda ukusebenzisa i-ankile.

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

Iiklasi zabancedisi

Iiklasi ezilula, ezigxininisiweyo zokubonisa okuncinci okanye ukulungiswa kokuziphatha.

.tsala-ngasekhohlo

Ncanda into ekhohlo

iklasi = "tsala-ngasekhohlo"

. tsala - ekhohlo {
  dada : ekhohlo ;
}

.tsala-ekunene

Ncanda into ekunene

iklasi = "tsalela ekunene"

. tsala - ekunene {
  dada : ekunene ;
}

.ithulisiwe

Guqula umbala wesiqalelo ube#999

iklasi = "ithulisiwe"

. Thulisiwe {
  umbala : #999; 
}

.clearfix

Coca iqhosha floatnakweyiphi na into

iklasi = "clearfix"

. lungisa {
  sondeza : 1 ; _ 
  &: ngaphambili ,
  &: emva {
    bonisa : itafile ;
    umxholo : "" ; 
  }
  &: emva {
    icacile : zombini ;
  }
}