Xikombiso

Menyu leyi cinca-cincaka, leyi nga ni mongo yo kombisa minxaxamelo ya swihlanganisi. Yi endliwe yi tirhisana hi xiengetelo xa JavaScript lexi nga ehansi .

<ul class = "menyu yo rhelela" role = "menyu" aria-labelledby = "Menyu yo rhelela" >   
  <li><a tabindex = "-1" href = "#" > Xiendlo </a></li>  
  <li><a tabindex = "-1" href = "#" > Xiendlo xin'wana </a></li>  
  <li><a tabindex = "-1" href = "#" > Xin'wana laha </a></li>  
  <li tlilasi = "xihambanisi" </li> 
  <li><a tabindex = "-1" href = "#" > Xihlanganisi lexi hambanisiweke </a></li>  
</ul>

Ku fungha swilo

Loko hi languta ntsena menyu leyi nga ehansi, hi leyi HTML leyi lavekaka. U fanele ku phutsela xihlohloteri xa dropdown na menyu ya dropdown endzeni ka .dropdown, kumbe elemente yin’wana leyi tivisa position: relative;. Kutani u endla ntsena menyu.

<div class = "xirhendzevutani xa le hansi" > 
  <!-- Link kumbe button ku cinca-cinca dropdown -->
  <ul class = "menyu leyi nga ehansi" role = "menyu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Xiendlo </a></li>  
    <li><a tabindex = "-1" href = "#" > Xiendlo xin'wana </a></li>  
    <li><a tabindex = "-1" href = "#" > Xin'wana laha </a></li>  
    <li tlilasi = "xihambanisi" </li> 
    <li><a tabindex = "-1" href = "#" > Xihlanganisi lexi hambanisiweke </a></li>  
  </ul>
</div>

Swihlawulekisi

Lulamisa timenyu hi tlhelo ra xinene ivi u engetela ku katsa swiyimo leswi engetelekeke swa swilo leswi nga ehansi.

Ku ringanisa timenyu

Engetela .pull-righteka a .dropdown-menuku ya exineneni ringanisa menyu leyi nga ehansi.

<ul class = "menyu leyi nga ehansi yi koka-exineneni" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Swihlawulekisi swa menyu leswi nga tirhiki

Engetela .disabledeka a <li>eka dropdown ku tshikisa xihlanganisi.

<ul class = "menyu yo rhelela" role = "menyu" aria-labelledby = "Menyu yo rhelela" >   
  <li><a tabindex = "-1" href = "#" > Xihlanganisi xa nkarhi na nkarhi </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Xihlanganisi lexi nga tirhiki </a></li>   
  <li><a tabindex = "-1" href = "#" > Xihlanganisi xin'wana </a></li>  
</ul>

Sub menus eka swilo leswi nga ehansi

Engetelani mpimo lowu engetelekeke wa timenyu leti nga ehansi, leti humelelaka eka hover ku fana ni ta OS X, hi ku engeteriwa kun’wana ko olova ka ku fungha. Engetelani .dropdown-submenueka yin’wana na yin’wana lieka menyu leyi nga kona leyi nga ehansi ya ku endla xitayili hi ku tisungulela.

<ul class = "menyu leyi nga ehansi" role = "menyu" aria-labelledby = "dLabel" >   
  ...
  <li class = "menyu ya le hansi-ya-tshama" > 
    <a tabindex = "-1" href = "#" > Swihlawulekisi swin'wana </a>  
    <ul class = "menyu leyi nga ehansi" > 
      ...
    </ul>
  </li>
</ul>

Swikombiso

Swihlawulekisi swimbirhi swa xisekelo, swin’we ni ku hambana kun’wana kambirhi loku kongomeke.

Ntlawa wa button yin’we

Pfuxeta nxaxamelo wa swikomba-nkarhi hi .btnin .btn-group.

<div class = "ntlawa wa btn" > 
  <button class = "btn" > Ximatsi </button> 
  <button class = "btn" > Xikarhi </button> 
  <button class = "btn" > Xinene </button> 
</div>

Mintlawa yo tala ya swikomba-nkarhi

Hlanganisa tisethi ta <div class="btn-group">eka a <div class="btn-toolbar">for swiphemu leswi rharhanganeke swinene.

<div class = "btn-barha ya switirhisiwa" > 
  <div class = "ntlawa wa btn" > 
    ...
  </div>
</div>

Mintlawa ya swikomba-nkarhi leswi yimisiweke

Endla leswaku sete ya swikomba-nkarhi yi vonaka yi hlanganisiwe hi ndlela yo olova ematshan’weni yo rhendzeleka.

<div class = "ntlawa wa btn wa ntlawa wa btn lowu yimisiweke" > 
  ...
</div>

Bokisi ro kambela na nantswo wa xiya-ni-moya

Mintlawa ya swikomba-nkarhi yi nga tlhela yi tirha tanihi swiya-ni-moya, laha ku nga ha tirhaka buti yin’we ntsena, kumbe mabokisi yo kambela, laha nhlayo yihi na yihi ya swikomba-nkarhi yi nga ha tirhaka. Languta ti docs ta JavaScript ta sweswo.

Swilo leswi nga ehansi eka mintlawa ya swikomba-nkarhi

Tinhloko ti tlakukile!Tiboto leti nga ni swilo leswi nga ehansi ti fanele ti phutseriwe hi toxe hi toxe .btn-groupendzeni ka a .btn-toolbarleswaku ti ta hundzuluxeriwa kahle.

Nkatsakanyo na swikombiso

Tirhisa buti yihi na yihi ku pfuxa menyu leyi nga ehansi hi ku yi veka endzeni ka a .btn-groupni ku nyika mfungho lowu faneleke wa menyu.

<div class = "ntlawa wa btn" > 
  <a class = "btn ku cinca-cinca" data-ku cinca-cinca = "ku rhelela" href = "#" >   
    Goza
    <span class = "xihlayiselo" ></span> 
  </a>
  <ul class = "menyu leyi nga ehansi" > 
    <!-- swihlanganisi swa menyu leyi nga ehansi -->
  </ul>
</div>

Yi tirha na tisayizi hinkwato ta swikomba-nkarhi

Swilo leswi nga ehansi ka swikomba-nkarhi swi tirha hi sayizi yihi na yihi: .btn-large, .btn-small, kumbe .btn-mini.

Swi lava JavaScript

Swilo leswi nga ehansi ka swikomba-nkarhi swi lava leswaku xiengetelo xa Bootstrap xi tirha.

Eka swiyimo swin’wana—ku fana ni tiselfoni—ti timenyu leti nga ehansi ti ta anama ehandle ka ndhawu yo languta eka yona. U fanele ku lulamisa ku ringanisa hi voko kumbe hi JavaScript ya ntolovelo.

Ku avanyisa swilo leswi nga ehansi ka swikomba-nkarhi

Hi ku aka eka switayele swa ntlawa wa swikomba-nkarhi na ku fungha, hi nga endla buti yo avanyisa hi ku olova. Tiboto leti avaneke ti kombisa xiendlo xa ntolovelo etlhelo ra ximatsi ni ku cinca-cinca loku nga ehansi exineneni hi swihlanganisi swa mongo.

<div class = "ntlawa wa btn" > 
  <button class = "btn" > Xiendlo </button> 
  <button class = "btn ku rhelela-ku cinca" data-ku cinca = "ku rhelela" >  
    <span class = "xihlayiselo" ></span> 
  </button>
  <ul class = "menyu leyi nga ehansi" > 
    <!-- swihlanganisi swa menyu leyi nga ehansi -->
  </ul>
</div>

Tisayizi

Tirhisa titlilasi ta swikomba-nkarhi leswi engetelekeke .btn-mini, .btn-small, kumbe .btn-largeku pima mpimo.

<div class = "ntlawa wa btn" > 
  < tlilasi ya buti = "btn btn-mini" > Xiendlo </button> 
  <button class = "btn btn-mini ku cinca-cinca-ku-tluka" ku cinca-cinca ka data = "ku- tlhelela ehansi" >  
    <span class = "xihlayiselo" ></span> 
  </button>
  <ul class = "menyu leyi nga ehansi" > 
    <!-- swihlanganisi swa menyu leyi nga ehansi -->
  </ul>
</div>

Timenyu leti nga ta hoxa

Timenyu leti nga ehansi ti nga tlhela ti cinciwa ku suka ehansi ku ya ehenhla hi ku engetela tlilasi yin’we eka mutswari wa le kusuhi wa .dropdown-menu. Yi ta flip direction ya .caretand reposition menu hi yoxe leswaku yi suka ehansi yi ya ehenhla ematshan’wini ya le henhla yi ya ehansi.

<div class = "ku wa ka ntlawa wa btn" > 
  <button class = "btn" > Ku wisa </button> 
  <button class = "btn ku rhelela-ku cinca" data-ku cinca = "ku rhelela" >  
    <span class = "xihlayiselo" ></span> 
  </button>
  <ul class = "menyu leyi nga ehansi" > 
    <!-- swihlanganisi swa menyu leyi nga ehansi -->
  </ul>
</div>

Swihlawulekisi swo olova Ku fungha loku fanaka, titlilasi to hambana

Swiphemu hinkwaswo swa nav laha—tithebhu, tiphilisi, na minxaxamelo— swi avelana mfungho wa xisekelo lowu fanaka ni switayele hi ku tirhisa .navtlilasi.

Tithebhu ta xisekelo

Teka regular <ul>ya ti links u engetela .nav-tabs:

<ul tlilasi = "nav nav-tithebhu" > 
  <li tlilasi = "ntirho" > 
    <a href = "#" > Ekaya </a> 
  </li>
  <li><a href = "#" > ... Xihlamusela -marito xa Xitsonga 
  <li><a href = "#" > ... Xihlamusela -marito xa Xitsonga 
</ul>

Tiphilisi ta xisekelo

Teka HTML yoleyo leyi fanaka, kambe tirhisa .nav-pillsematshan’weni ya sweswo:

<ul class = "nav nav-tiphilisi" > 
  <li tlilasi = "ntirho" > 
    <a href = "#" > Ekaya </a> 
  </li>
  <li><a href = "#" > ... Xihlamusela -marito xa Xitsonga 
  <li><a href = "#" > ... Xihlamusela -marito xa Xitsonga 
</ul>

Xiyimo xa vulema

Eka xiphemu xihi na xihi xa nav (tithebhu, tiphilisi, kumbe nxaxamelo), engetela .disabledeka swihlanganisi swa grey naswona ku nga ri na switandzhaku swa hover . Swihlanganisi swi ta tshama swi ri karhi swi tsindziyela, hambiswiritano, handle ka loko u susa hrefxihlawulekisi. Handle ka sweswo, u nga tirhisa JavaScript leyi endleriweke ku sivela ku tsindziyela koloko.

<ul class = "nav nav-tiphilisi" > 
  ...
  <li class = "ku tsandzeka" ><a href = "#" > Ekaya </a></li>  
  ...
</ul>

Ku ringanisiwa ka swiphemu

Ku ringanisa swihlanganisi swa nav, tirhisa titlilasi ta .pull-leftkumbe .pull-rightta vukorhokeri. Titlilasi leti hatimbirhi ti ta engetela ku papamala ka CSS eka tlhelo leri boxiweke.

Swi nga hlanganisiwa

Tanihi leswi tithebhu ni tiphilisi swi nga horizontal hi ku tiyimisela, engetela ntsena tlilasi ya vumbirhi, .nav-stacked, ku endla leswaku swi vonaka swi hlanganisiwe hi ndlela yo rhendzeleka.

Tithebhu leti hlanganisiweke

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

Tiphilisi leti hlanganisiweke

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

Swilo leswi nga ehansi

Engetela timenyu leti nga ehansi hi HTML leyi engetelekekenyana ni xiengetelo xa JavaScript lexi nga ehansi .

Tithebhu leti nga ni swilo leswi nga ehansi

<ul tlilasi = "nav nav-tithebhu" > 
  <li class = "xirhendzevutani xa le hansi" > 
    <a class = "ku cinca-cinca loku nga ehansi". 
       data-toggle = "xihlamusela-marito".
       href = "#" >
        Ku rhelela ehansi
        <b tlilasi = "caret" ></b> 
      </a>
    <ul class = "menyu leyi nga ehansi" > 
      <!-- swihlanganisi -->
    </ul>
  </li>
</ul>

Tiphilisi leti nga ni swilo leswi nga ehansi

<ul class = "nav nav-tiphilisi" > 
  <li class = "xirhendzevutani xa le hansi" > 
    <a class = "ku cinca-cinca loku nga ehansi". 
       data-toggle = "xihlamusela-marito".
       href = "#" >
        Ku rhelela ehansi
        <b tlilasi = "caret" ></b> 
      </a>
    <ul class = "menyu leyi nga ehansi" > 
      <!-- swihlanganisi -->
    </ul>
  </li>
</ul>

Nav swixaxamelo

Ndlela yo olova no olova yo aka mintlawa ya swihlanganisi swa nav hi tinhlokomhaka leti nga hlawuriwa. Ti tirhisiwa kahle eka ti sidebar to fana na Finder eka OS X.

Xikombiso xa nxaxamelo wa nav

Teka nxaxamelo wa swihlanganisi ivi u engetela class="nav nav-list":

<ul tlilasi = "nav nav-nxaxamelo" > 
  <li class = "nav-header" > Nhlokomhaka ya nxaxamelo </li> 
  <li class = "ntirho" ><a href = "#" > Ekaya </a></li>  
  <li><a href = "#" > Layiburari </a></li> 
  ...
</ul>

LemukaKu endla nesting endzeni ka nxaxamelo wa nav, katsa class="nav nav-list"eka nested yihi na yihi <ul>.

Swihambanisi leswi nga etlhelo

Engetela xihambanisi xa horizontal hi ku tumbuluxa nchumu wa nxaxamelo lowu nga riki na nchumu na tlilasi .divider, ku fana na sweswo:

<ul tlilasi = "nav nav-nxaxamelo" > 
  ...
  <li tlilasi = "xihambanisi" </li> 
  ...
</ul>

Xiphepherhele xa nav

Tisa tithebhu ta wena evuton’wini hi plugin yo olova ku cinca-cinca exikarhi ka swilo hi ku tirhisa tithebhu. Bootstrap yi hlanganisa tithebhu ta tithebhu hi switayele swa mune: ehenhla (ya ntolovelo), exineneni, ehansi, na ximatsi.

Xikombiso xa tabba

Ku endla leswaku tithebhu ti va tithebhu, endla .tab-panena ID yo hlawuleka ya thebhu yin’wana na yin’wana ivi u ti phutsela eka .tab-content.

<div class = "tabbable" > <!-- Swi laveka ntsena eka tithebhu ta ximatsi/xinene -->  
  <ul tlilasi = "nav nav-tithebhu" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "thebhu" > Xiyenge xa ​​1 </a></li>   
    <li><a href = "#tab2" data-toggle = "thebhu" > Xiyenge xa ​​2 </a></li>  
  </ul>
  <div class = "nhundzu ya thebhu" > 
    <div class = "thebhu-pheni leyi tirhaka" id = "thebhu1" >  
      <p> Ndzi le ka Xiyenge xa ​​1. </p>
    </div>
    <div class = "thebhu-xiphemu" id = "thebhu2" >  
      <p> Howdy, ndzi le ka Xiyenge xa ​​2. </p>
    </div>
  </div>
</div>

Fade eka tithebhu

Ku endla leswaku tithebhu ti nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane.

Swi lava xiengetelo xa jQuery

Tithebhu hinkwato ta tithebhu ti fambisiwa hi plugin ya hina yo vevuka ya jQuery. Hlaya swo tala hi ndlela yo tisa tithebhu ta tithebhu evuton'wini eka tluka ra matsalwa ya JavaScript .

Tabbable eka tlhelo rihi na rihi

Tithebhu leti nga ehansi

Flip order ya HTML u engetela class ku veka ti tabs ehansi.

<div class = "tithebhu ta tithebhu-laha hansi" > 
  <div class = "nhundzu ya thebhu" > 
    ...
  </div>
  <ul tlilasi = "nav nav-tithebhu" > 
    ...
  </ul>
</div>

Tithebhu leti nga etlhelo ra ximatsi

Cincana tlilasi ku veka tithebhu etlhelo ra ximatsi.

<div class = "tithebhu ta tithebhu-ximatsi" > 
  <ul tlilasi = "nav nav-tithebhu" > 
    ...
  </ul>
  <div class = "nhundzu ya thebhu" > 
    ...
  </div>
</div>

Tithebhu leti nga etlhelo ra xinene

Cincana tlilasi ku veka tithebhu hi tlhelo ra xinene.

<div class = "tithebhu ta tithebhu-xinene" > 
  <ul tlilasi = "nav nav-tithebhu" > 
    ...
  </ul>
  <div class = "nhundzu ya thebhu" > 
    ...
  </div>
</div>

Navbar ya xisekelo

Ku sungula, ti-navbar ti nga cinci (a ti nga tshamisekanga ehenhla) naswona ti katsa nseketelo wa vito ra phurojeke na ku famba-famba ka xisekelo. Veka yin’we kun’wana ni kun’wana endzeni ka .container, leyi vekaka ku anama ka sayiti ya wena ni leswi nga endzeni.

<div tlilasi = "navbar" > 
  <div class = "navbar-ya le ndzeni" > 
    <a class = "brand" href = "#" > Nhlokomhaka </a>  
    <ul tlilasi = "nav" > 
      <li class = "ntirho" ><a href = "#" > Ekaya </a></li>  
      <li><a href = "#" > Xihlanganisi </a></li> 
      <li><a href = "#" > Xihlanganisi </a></li> 
    </ul>
  </div>
</div>

Swiphemu swa Navbar

Muxaka

Link yo olova yo kombisa vito ra brand kumbe project ya wena yi lava ntsena anchor tag.

<a class = "brand" href = "#" > Vito ra phurojeke </a>  

Nav swihlanganisi

Swilo swa Nav swa olova ku swi engetela hi ku tirhisa minxaxamelo leyi nga odawangiki.

<ul tlilasi = "nav" > 
  <li tlilasi = "ntirho" > 
    <a href = "#" > Ekaya </a> 
  </li>
  <li><a href = "#" > Xihlanganisi </a></li> 
  <li><a href = "#" > Xihlanganisi </a></li> 
</ul>

U nga engetela swihambanisi hi ku olova eka swihlanganisi swa wena swa nav hi nchumu wa nxaxamelo lowu nga riki na nchumu ni tlilasi yo olova. Ntsena engetela leswi exikarhi ka swihlanganisi:

<ul tlilasi = "nav" > 
  ...
  <li class = "xihambanisi-xi yimile" </li> 
  ...
</ul>

Swivumbeko

Ku xitayili kahle no veka fomo endzeni ka navbar, engetela titlilasi leti faneleke tanihilaha swi kombisiweke hakona laha hansi. Eka fomo ya ntolovelo, katsa .navbar-formna kumbe .pull-leftkumbe .pull-rightku yi ringanisa kahle.

<xivumbeko xa tlilasi = "navbar-xivumbeko xo koka-ximatsi" > 
  < muxaka wa ngheniso = "tsalwa" tlilasi = "span2" >  
  < muxaka wa buti = "rhumela" class = "btn" > Rhumela </button>  
</form>

Fomo yo lavisisa

Ku kuma fomo yo lavisisa leyi endleriweke ngopfu, engetela .navbar-searcheka formna .search-queryeka ku nghenisa ka switayele swo hlawuleka eka navbar.

<form class = "navbar-ku lavisisa ku koka-ximatsi" > 
  < muxaka wa ngheniso = "tsalwa" tlilasi = "ku lavisisa-xivutiso" xikhomela-ndhawu = "Ku lavisisa" >   
</form>

Ku ringanisiwa ka swiphemu

Lulamisa swihlanganisi swa nav, fomo yo lavisisa, kumbe tsalwa, tirhisa titlilasi ta .pull-leftkumbe .pull-rightta vukorhokeri. Titlilasi leti hatimbirhi ti ta engetela ku papamala ka CSS eka tlhelo leri boxiweke.

Ku tirhisa swilo leswi nga ehansi

Engetelani swilo leswi nga ehansi ni leswi nga ehansi eka nav hi ku tirhisa nyana markup ni swilo leswi nga ehansi JavaScript plugin .

<ul tlilasi = "nav" > 
  <li class = "xirhendzevutani xa le hansi" > 
    <a href = "#" class = "xirhendzevutani-xi cinca-cinca" data-toggle = "xirhendzevutana" >   
      Akhawunti
      <b tlilasi = "caret" ></b> 
    </a>
    <ul class = "menyu leyi nga ehansi" > 
      ...
    </ul>
  </li>
</ul>

Endzela matsalwa ya swikoweto swa JavaScript ku kuma swikoweto swo tala na vuxokoxoko bya ku bela riqingho.

Tsalwa

Pfuxeta tintambhu ta tsalwa eka elemente hi .navbar-text, hi ntolovelo eka <p>thegi ku kuma ku rhangela loku faneleke na muvala.

Ku hambana ka nkombiso lowu nga hlawuriwa

Lulamisa navbar ehenhla kumbe ehansi ka xivono hi tlilasi yo engetela eka div ya le handle swinene, .navbar.

Ku lulamisiwile ku ya ehenhla

Engetelani .navbar-fixed-topnaswona tsundzuka ku hlamusela ndhawu leyi fihliweke ehansi ka yona hi ku engetela kwalomu ka 40px paddingeka <body>. Tiyisisa leswaku u engetela leswi endzhaku ka core Bootstrap CSS na le mahlweni ka CSS leyi hlamulaka leyi nga hlawuriwa.

<div class = "navbar navbar-leyi nga cinciki-ehenhla" > 
  ...
</div>

Ku lulamisiwile ku ya ehansi

Engetelani .navbar-fixed-bottomematshan’weni ya sweswo.

<div class = "navbar navbar-xiyimo xa le hansi" > 
  ...
</div>

Navbar ya le henhla leyi nga cinciki

Endla navbar yo anama hinkwayo leyi famba-fambaka ni tluka hi ku engetela .navbar-static-top. Ku hambana ni .navbar-fixed-toptlilasi, a swi bohi leswaku u cinca xifunengeto xihi na xihi eka body.

<div class = "navbar navbar-xiyimo xa le henhla" > 
  ...
</div>

Navbar leyi hlamulaka

Ku tirhisa navbar leyi hlamulaka leyi tshovekaka, phutsela nhundzu ya wena ya navbar eka div leyi nga ni, .nav-collapse.collapse, ivi u engetela buti yo cinca-cinca ya navbar, .btn-navbar.

<div tlilasi = "navbar" > 
  <div class = "navbar-ya le ndzeni" > 
    <div class = "xigwitsirisi" > 
 
      <!-- .btn-navbar yi tirhisiwa tanihi ku cinca-cinca ka nhundzu ya navbar leyi tshovekeke -->
      <a tlilasi = "btn btn-navbar" data-toggle = "ku wisa" data-xikongomiso = ".nav-ku wisa" >   
        <span class = "xifaniso-barha" ></span> 
        <span class = "xifaniso-barha" ></span> 
        <span class = "xifaniso-barha" ></span> 
      </a>
 
      <!-- Tiyisisa leswaku u siya brand ehandle loko u lava leswaku yi kombisiwa -->
      <a class = "brand" href = "#" > Vito ra phurojeke </a>  
 
      <!-- Hinkwaswo leswi u swi lavaka swi fihliwile eka 940px kumbe ehansi, veka endzeni laha -->
      <div class = "nav-ku wisa" > 
        <!-- .nav, .navbar-ku lavisisa, .navbar-fomo, na swin'wana -->
      </div>
 
    </div>
  </div>
</div>

Ku cinca-cinca loku hundzuriweke

Cinca ku languteka ka navbar hi ku engetela .navbar-inverse.

<div class = "navbar navbar-ku hundzuka" > 
  ...
</div>

Swikombiso

Xikombiso xin’we lexi kombisiweke tanihi leswi xi nga ha kombisiwaka eka matluka yo tala.

<ul class = "xiphepherhele xa xinkwa" > 
  <li><a href = "#" > Ekaya </a> < tlilasi ya span = "xihambanisi" > / </span></li>   
  <li><a href = "#" > Layiburari </a> < tlilasi ya span = "xihambanisi" > / </span></li>   
  <li class = "ntirho" > Data </li> 
</ul>

Ku vekiwa ka mapheji loku tolovelekeke

Ku olova ka mapheji loku hlohloteriweke hi Rdio, lokunene eka ti-app na mimbuyelo ya ku lavisisa. Xibokisana lexikulu xa tika ku xi hundza, xi olova ku xi ringanisiwa naswona xi nyika tindhawu letikulu to tsindziyela.

<div class = "xiphemu xa mapheji" > 
  <ul>
    <li><a href = "#" > Xifaniso xa le mahlweni </a></li> 
    <li><a href = "#" > 1 Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 2 Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 3 Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 4 ​​Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 5 </a></li> Xihlamusela-marito xa Xitsonga 
    <li><a href = "#" > Lexi landzelaka </a></li> 
  </ul>
</div>

Swihlawulekisi

Swiyimo leswi lamaleke na leswi tirhaka

Swihlanganisi swi nga cinciwa hi ku ya hi swiyimo swo hambana-hambana. Tirhisa .disabledeka swihlanganisi leswi nga tsindziyelangiki ni .activeku kombisa tluka ra sweswi.

<div class = "xiphemu xa mapheji" > 
  <ul>
    <li class = "ku tsandzeka ku tirha" ><a href = "#" > « </a></li>  
    <li tlilasi = "ntirho" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

U nga ha cincana hi ku hlawula eka ti-anchor leti tirhaka kumbe leti nga tirhiki hi swipano ku susa ntirho wa ku tikhoma loko u ri karhi u hlayisa switayele leswi kunguhatiweke.

<div class = "xiphemu xa mapheji" > 
  <ul>
    <li class = "ku tsandzeka ku tirha" ><span> « </span></li> 
    <li tlilasi = "ntirho" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tisayizi

Xana u lava ku endla mapheji lamakulu kumbe lamatsongo? Engetela .pagination-large, .pagination-small, kumbe .pagination-miniku kuma tisayizi leti engetelekeke.

<div class = "xiphemu xa pheji-xikulu" > 
  <ul>
    ...
  </ul>
</div>
<div class = "xiphemu xa mapheji" > 
  <ul>
    ...
  </ul>
</div>
<div class = "xiphemu xa pheji-xitsongo" > 
  <ul>
    ...
  </ul>
</div>
<div class = "xiphepherhele xa pheji-mini" > 
  <ul>
    ...
  </ul>
</div>

Ku ringanisa

Engetela yin’wana ya titlilasi timbirhi leti nga hlawuriwa ku cinca ku ringanisiwa ka swihlanganisi swa mapheji: .pagination-centeredna .pagination-right.

<div class = "xiphemu xa mapheji lexi nga exikarhi ka mapheji" > 
  ...
</div>

<div class = "xiphemu xa pheji-xinene" > 
  ...
</div>

Pager

Swihlanganisi swa xihatla swa le mahlweni na leswi landzelaka swa ku tirhisiwa ko olova ka mapheji hi ku fungha ku fungha na switayele. Swi kahle eka tisayiti to olova to fana na ti-blog kumbe timagazini.

Xikombiso xa xiviri

Hi ku tiyimisela, pager yi hlanganisa swihlanganisi.

<ul tlilasi = "pager" > 
  <li><a href = "#" > Leswi hundzeke </a></li> 
  <li><a href = "#" > Lexi landzelaka </a></li> 
</ul>

Swihlanganisi leswi ringanisiweke

Handle ka sweswo, u nga ha ringanisa xihlanganisi xin’wana ni xin’wana ematlhelo:

<ul tlilasi = "pager" > 
  <li class = "ya khale" > 
    <a href = "#" > Xihlamusela-marito xa Xitsonga; Vakulu </a> 
  </li>
  <li class = "leyi landzelaka" > 
    <a href = "#" > Swintshwa → </a> 
  </li>
</ul>

Xiyimo xa vulema xa ku hlawula

Swihlanganisi swa Pager swi tlhela swi tirhisa .disabledtlilasi ya vukorhokeri byo angarhela ku suka eka pheji.

<ul tlilasi = "pager" > 
  <li class = "xilemo xa khale" > 
    <a href = "#" > Xihlamusela-marito xa Xitsonga; Vakulu </a> 
  </li>
  ...
</ul>

Tilebhele

Tibeji

Swi nga tshoveka hi ku olova

Ku olova ku tirhisiwa, malebvu na tibeji swi ta wa ntsena (hi ku tirhisa :emptyxihlawulekisi xa CSS) loko ku nga ri na nhundzu leyi nga kona endzeni.

Yuniti ya nhenha

Xiphemu xo olova, lexi cinca-cincaka ku kombisa swilo swa nkoka eka sayiti ya wena. Yi tirha kahle eka tisayiti to xavisa na leti nga ni swilo swo tala.

<div class = "nhenha-yuniti" > 
  <h1> Nhlokomhaka </h1>
  <p> Nxaxamelo wa swifaniso </p>
  <p>
    <a tlilasi = "btn btn-btn-nkulu ya le henhla" > 
      Dyondza swo tala
    </a>
  </p>
</div>

Nhlokomhaka ya tluka

Xikhegelo xo olova xa h1ku veka swiphemu leswi faneleke swa nhundzu eka tluka. Yi nga tirhisa h1's default small, element xikan'we na swiphemu swin'wana swo tala (na switayele swo engetela).

<div class = "nhlokomhaka ya pheji" > 
  <h1> Xikombiso xa nhlokomhaka ya tluka <small> Tsalwa-ntsongo ra nhlokomhaka </small></h1>
</div>

Swifaniso leswitsongo swa ntolovelo

Hi ku tiyimisela, swifaniso leswitsongo swa Bootstrap swi endleriwe ku kombisa swifaniso leswi hlanganisiweke hi ku fungha lokutsongo loku lavekaka.

Swi nga cinciwa swinene

Hi ku markup nyana yo engetela, swa koteka ku engetela muxaka wihi na wihi wa swilo swa HTML ku fana na tinhlokomhaka, tindzimana, kumbe swikomba-nkarhi eka swifaniso leswitsongo.

Ha yini u tirhisa swifaniso leswitsongo

Swifaniso leswitsongo (khale .media-gridku fikela eka v1.4) swi kahle swinene eka tigridi ta swifaniso kumbe tivhidiyo, mimbuyelo ya ku lavisisa swifaniso, swilo swa vuxavisi, tiphotifoliyo ni swin’wana swo tala. Swi nga va swihlanganisi kumbe swilo leswi nga cinciki.

Ku fungha ko olova, loku cinca-cincaka

Ku fungha swifaniso leswitsongo swa olova—a leyi ulnga ni nhlayo yihi na yihi ya liswiaki hi swona ntsena leswi lavekaka. Yitlhela yiva super flexible, yi pfumelela muxaka wihi na wihi wa swilo leswingana ntsena markup nyana ku phutsela swilo swa wena.

U tirhisa vukulu bya tikholomu ta gridi

Xo hetelela, xiphemu xa swifaniso leswitsongo xi tirhisa titlilasi ta sisiteme ya gridi leti nga kona—ku fana na .span2kumbe .span3—ku lawula swipimelo swa swifaniso leswitsongo.

Ku fungha swilo

Hilaha swi boxiweke hakona eku sunguleni, xikombiso lexi lavekaka xa swifaniso leswitsongo xa olova naswona xi kongomile. Hi lowu ku languta eka xiyimiso xa xiviri xa swifaniso leswi hlanganisiweke :

<ul class = "swifaniso leswitsongo" > 
  <li tlilasi = "span4" > 
    <a href = "#" class = "xifaniso lexitsongo" >  
      <img data-src = "mukhomi.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Eka nhundzu ya HTML ya ntolovelo eka swifaniso leswitsongo, ku fungha ku cinca katsongo. Ku pfumelela block level content kun’wana na kun’wana, hi cincana the <a>for a <div>like so:

<ul class = "swifaniso leswitsongo" > 
  <li tlilasi = "span4" > 
    <div class = "xifaniso lexitsongo" > 
      <img data-src = "mukhomi.js/300x200" alt = "" >  
      <h3> Lebula ya xifaniso lexitsongo </h3>
      <p> Xifaniso xa xifaniso lexitsongo... </p>
    </div>
  </li>
  ...
</ul>

Swikombiso leswi engetelekeke

Hlawula hinkwaswo leswi u nga swi hlawulaka hi titlilasi to hambana ta gridi leti nga kona eka wena. U nga ha tlhela u hlanganisa ni ku fambisana ni tisayizi to hambana-hambana.

Xitsundzuxo xa xiviri

Pfuxeta tsalwa rihi na rihi na buti yo hlongola leyi nga hlawuriki eka .alertrungula ra xitsundzuxo xa xisekelo.

<div class = "xitsundzuxo" > 
  < muxaka wa buti = "button" class = "pfala" data-dismiss = "xitsundzuxo" > × </button>   
  <strong> Xitsundzuxo! </strong> Best check yo self, a wu languteki kahle ngopfu.
</div>

Hlongola swikomba-nkarhi

Swihlamusela-marito swa Mobile Safari na Mobile Opera, ku engetela eka data-dismiss="alert"xihlawulekisi, swi lava href="#"ku hlongoriwa ka switsundzuxo loko ku tirhisiwa <a>thegi.

<a href = "#" class = "pfala" data-dismiss = "xitsundzuxo" > &minkarhi; </a>   

Hi ndlela yin’wana, u nga tirhisa <button>elemente leyi nga na xihlawulekisi xa data, lexi hi hlawuleke ku xi endla eka tidokisi ta hina. Loko u tirhisa <button>, u fanele ku katsa type="button"kutani tifomo ta wena ti nga ha rhumeli.

< muxaka wa buti = "button" class = "pfala" data-dismiss = "xitsundzuxo" > × </button>   

Hlongola switsundzuxo hi ku tirhisa JavaScript

Tirhisa switsundzuxo swa jQuery plugin ku hatlisa no olova ku hlongola switsundzuxo.

Swihlawulekisi

Eka marungula yo leha, engetela padding ehenhla na le hansi ka xifunengeto xa xitsundzuxo hi ku engetela .alert-block.

<div class = "xitsundzuxo-xitiviso xa xitsundzuxo" > 
  < muxaka wa buti = "button" class = "pfala" data-dismiss = "xitsundzuxo" > × </button>   
  <h4> Xitsundzuxo! </h4>
  Best check yo self, a wu...
</div>

Swilo swin’wana swa mongo

Engetelani titlilasi to hlawula ku cinca nhlamuselo ya xitsundzuxo.

Xihoxo kumbe khombo

<div class = "xitsundzuxo xa xitsundzuxo-xihoxo" > 
  ...
</div>

Humelela

<div class = "xitsundzuxo-ku humelela" > 
  ...
</div>

Marungula

<div class = "xitsundzuxo-xitsundzuxo-xitiviso" > 
  ...
</div>

Swikombiso na ku fungha

Ntolovelo

Bar ya nhluvuko ya ntolovelo leyi nga ni xirhendzevutana lexi yimisiweke.

<div class = "nhluvuko" > 
  <div class = "bar" xitayili = " ku anama : 60 %; " ></div>   
</div>

Swirhendzevutana

Tirhisa gradient ku endla mbuyelo wa mitila. A swi kumeki eka IE7-8.

<div class = "nhluvuko wa nhluvuko-striped" > 
  <div class = "bar" xitayili = " ku anama : 20 %; " ></div>   
</div>

Swifaniso leswi hanyaka

Engetela .activeeka .progress-stripedku endla leswaku swirhendzevutana swi hanya hi xinene ku ya eximatsini. A swi kumeki eka tivhidiyo hinkwato ta IE.

<div class = "nhluvuko wa nhluvuko-striped active" > 
  <div class = "bar" xitayili = " ku anama : 40 %; " ></div>   
</div>

Ku hlanganisiwa

Veka tibara to tala eka yin’we .progressleswaku u ti hlanganisa.

<div class = "nhluvuko" > 
  <div class = "bar bar-ku humelela" xitayili = " ku anama : 35 %; " ></div>   
  <div class = "bar bar-xitsundzuxo" xitayili = " ku anama : 20 %; " ></div>   
  <div class = "bar bar-khombo" xitayili = " ku anama : 10 %; " ></div>   
</div>

Swihlawulekisi

Mihlovo leyi engetelekeke

Tibara ta nhluvuko ti tirhisa tin’wana ta titlilasi ta buti leti fanaka ni ta xitsundzuxo eka switayele leswi nga cincekiki.

<div class = "vuxokoxoko bya nhluvuko wa nhluvuko" > 
  <div tlilasi = "bar" xitayili = " ku anama : 20 % " ></div>   
</div>
<div class = "nhluvuko wa nhluvuko-ku humelela" > 
  <div tlilasi = "bar" xitayili = " ku anama : 40 % " ></div>   
</div>
<div class = "xitsundzuxo xa nhluvuko wa nhluvuko" > 
  <div tlilasi = "bar" xitayili = " ku anama : 60 % " ></div>   
</div>
<div class = "nhluvuko wa nhluvuko-khombo" > 
  <div tlilasi = "bar" xitayili = " ku anama : 80 % " ></div>   
</div>

Tibara leti nga ni mitila

Ku fana ni mihlovo leyi tiyeke, hi ni swiphepherhele swo hambana-hambana swa nhluvuko leswi nga ni mitila.

<div class = "nhluvuko nhluvuko-vuxokoxoko nhluvuko-striped" > 
  <div tlilasi = "bar" xitayili = " ku anama : 20 % " ></div>   
</div>
<div class = "nhluvuko wa nhluvuko-ku humelela nhluvuko-striped" > 
  <div tlilasi = "bar" xitayili = " ku anama : 40 % " ></div>   
</div>
<div class = "nhluvuko wa nhluvuko-xitsundzuxo xa nhluvuko-striped" > 
  <div tlilasi = "bar" xitayili = " ku anama : 60 % " ></div>   
</div>
<div class = "nhluvuko wa nhluvuko-khombo nhluvuko-striped" > 
  <div tlilasi = "bar" xitayili = " ku anama : 80 % " ></div>   
</div>

Nseketelo wa xihlamusela-marito

Tibara ta nhluvuko ti tirhisa ti-gradient ta CSS3, ku cinca, na swifaniso leswi hanyaka ku fikelela switandzhaku swa swona hinkwaswo. Switirhisiwa leswi a swi seketeriwi eka IE7-9 kumbe vuhundzuluxeri bya khale bya Firefox.

Tivhidiyo ta khale ku tlula Internet Explorer 10 na Opera 12 a ti seketeli swifaniso leswi hanyaka.

Switayili swa swilo leswi nga twisisekiki swo aka tinxaka to hambana ta swiphemu (ku fana na mavonelo ya blog, Ti-Tweet, na swin’wana) leswi kombisaka xifaniso lexi ringanisiweke hi tlhelo ra ximatsi kumbe ra xinene etlhelo ka nhundzu ya matsalwa.

Xikombiso xa xiviri

Midiya ya ntolovelo yi pfumelela ku papamala nchumu wa midiya (swifaniso, vhidiyo, mpfumawulo) eximatsini kumbe exineneni xa xibokisana xa nhundzu.

Nhlokomhaka ya swihangalasamahungu

Cras tshama amet nibh libero, eka gravida nulla. Nulla vel metus scelerisque ya le mahlweni ka xitsonga. Cras purus odio, vestibulum eka vulputate eka, xihlahla xa xirhendzevutani. Fusce condimentum nunc ac nisi xitombo xa xirhendzevutani xa xirhendzevutani. Donec lacinia congue felis eka xitsongwatsongwana xa faucibus.

Nhlokomhaka ya swihangalasamahungu

Cras tshama amet nibh libero, eka gravida nulla. Nulla vel metus scelerisque ya le mahlweni ka xitsonga. Cras purus odio, vestibulum eka vulputate eka, xihlahla xa xirhendzevutani. Fusce condimentum nunc ac nisi xitombo xa xirhendzevutani xa xirhendzevutani. Donec lacinia congue felis eka xitsongwatsongwana xa faucibus.

Nhlokomhaka ya swihangalasamahungu

Cras tshama amet nibh libero, eka gravida nulla. Nulla vel metus scelerisque ya le mahlweni ka xitsonga. Cras purus odio, vestibulum eka vulputate eka, xihlahla xa xirhendzevutani. Fusce condimentum nunc ac nisi xitombo xa xirhendzevutani xa xirhendzevutani. Donec lacinia congue felis eka xitsongwatsongwana xa faucibus.

<div class = "swihangalasamahungu" > 
  <a class = "koka-ximatsi" href = "#" >  
    <img class = "nchumu-wa-mahungu" data-src = "mukhomi.js/64x64" >  
  </a>
  <div class = "miri wa vuhangalasi bya mahungu" > 
    <h4 class = "media-heading" > Nhlokomhaka ya vuhangalasi bya mahungu </h4> 
    ...
 
    <!-- Nchumu wa midiya lowu pfanganisiweke -->
    <div class = "swihangalasamahungu" > 
      ...
    </div>
  </div>
</div>

Nxaxamelo wa swihangalasamahungu

Hi ku markup nyana yo engetela, u nga tirhisa media endzeni ka nxaxamelo (leswi pfunaka eka tithread ta mavonelo kumbe minxaxamelo ya swihloko).

<ul class = "nxaxamelo wa swihangalasamahungu" > 
  <li tlilasi = "swihangalasamahungu" > 
    <a class = "koka-ximatsi" href = "#" >  
      <img class = "nchumu-wa-mahungu" data-src = "mukhomi.js/64x64" >  
    </a>
    <div class = "miri wa vuhangalasi bya mahungu" > 
      <h4 class = "media-heading" > Nhlokomhaka ya vuhangalasi bya mahungu </h4> 
      ...
 
      <!-- Nchumu wa midiya lowu pfanganisiweke -->
      <div class = "swihangalasamahungu" > 
        ...
     </div>
    </div>
  </li>
</ul>

Swihlovo

Tirhisa xihlovo tani hi mbuyelo wo olova eka elemente ku yi nyika mbuyelo wa inset.

<div tlilasi = "kahle" > 
  ...
</div>

Titlilasi leti nga hlawuriwa

Lawula padding na tikhoneni ta xirhendzevutani na titlilasi timbirhi ta modifier leti nga hlawuriwa.

<div class = "kahle kahle-nkulu" > 
  ...
</div>

<div class = "kahle kahle-switsongo" > 
  ...
</div>

Pfala xifaniso

Tirhisa xifaniso xa ku pfala xa generic ku bakanya swilo swo fana na ti modals na switsundzuxo.

<button class = "pfala" > &minkarhi; </button> 

Switirhisiwa swa iOS swi lava href="#"swiendlakalo swa for click loko u tsakela ku tirhisa anchor.

<a tlilasi = "pfala" href = "#" > &minkarhi; </a>  

Titlilasi ta vapfuni

Titlilasi to olova, leti kongomisiweke ta nkombiso lowutsongo kumbe ku cinca-cinca ka mahanyelo.

.koka-ximatsi

Float element leyi nga eximatsini

class = "koka-ximatsi".

. koka - ximatsi { .
  float : ximatsi ;
} .

.koka-exineneni

Phaphama elemente hi xinene

class = "ku koka-exineneni".

. koka - xinene { .
  float : xinene ;
} .

.ku miyeteriwa

Cinca muvala wa elemente ku ya eka#999

class = "ku miyetiwa".

. muted { .
  muvala : #999; 
} .

.ku lulamisa

Hlawula the floateka elemente yihi na yihi

class = "xihlamusela-marito".

. ku lulamisa ku basisa { .
  * ku kurisa : 1 ; 
  &: emahlweni ka , .
  &: endzhaku ka { .
    nkombiso : tafula ;
    leswi nga endzeni : "" ; 
  } .
  &: endzhaku ka { .
    erivaleni : havumbirhi bya swona ;
  } .
} .