Butɔn kuluw

Baara kɛ ni butɔni kuluw ye walasa ka butɔni caman fara ɲɔgɔn kan i n’a fɔ yɔrɔ kelen. Aw bɛ u jɔ ni fɛnw <a>walima <button>fɛnw ye minnu bɛ tugu ɲɔgɔn na.

Fɛɛrɛ ɲumanw

An bɛ nin laadilikan ninnu laadi walasa ka baara kɛ ni butɔni kuluw ni baarakɛminɛnw ye:

• Aw bɛ baara kɛ ni o fɛn kelen ye tuma bɛɛ butɔni kulu kelen kɔnɔ, <a>walima <button>.
• Aw kana butɔni minnu kulɛri tɛ kelen ye, olu ɲagami butɔni kulu kelen kɔnɔ.
• Baara kɛ ni taamasiyɛnw ye ka fara sɛbɛnniw kan walima u nɔ na, ​​nka i jija ka alt ni title sɛbɛnniw don a la yɔrɔ minnu na a bɛnnen don.

Butɔn kulu minnu bɛ tali kɛ ɲɔgɔn na ni fɛnw ye minnu bɛ bɔ ɲɔgɔn na (aw ye sɛbɛn ɲɛ jukɔrɔla lajɛ) olu ka kan ka wele u danma ani ka fɛn dɔ bila u la tuma bɛɛ walasa ka kɛwale laɲinitaw jira.

Misali dafalen

HTML bɛ butɔni kulu jɔnjɔn ɲini cogo min na, o filɛ nin ye min jɔlen bɛ ni ankɔri taamasiyɛn butɔni ye:

<div kalasi = "btn-kulu" > 
  <butɔni kalasi = "btn" > 1 </button> 
  <butɔni kalasi = "btn" > 2 </button> 
  <butɔni kalasi = "btn" > 3 </button> 
</div> ye

Baarakɛminɛnw misali

Aw bɛ setiw fara ɲɔgɔn kan ka <div class="btn-group">kɛ a ye <div class="btn-toolbar">walasa ka yɔrɔw labɛn minnu ka gɛlɛn kosɛbɛ.

<div kalasi = "btn-baarakɛminɛnw" > 
  <div kalasi = "btn-kulu" > 
    ...
  </div> ye
</div> ye

Checkbox ani arajo dafalenw

Butɔn kuluw fana bɛ se ka baara kɛ i n’a fɔ arajow, butɔni kelen dɔrɔn de bɛ se ka baara kɛ yɔrɔ minnu na, walima jatebɔyɔrɔw, butɔni hakɛ o hakɛ bɛ se ka baara kɛ yɔrɔ minnu na. Javascript sɛbɛnw lajɛ o kama.

Aw ye javascript sɔrɔ »

Dropdowns bɛ butɔni kuluw kɔnɔ

Kungolow bɛ wuli! Butɔn minnu bɛ ni fɛnw ye minnu bɛ jigin, olu ka kan ka siri kelen-kelen u yɛrɛ .btn-groupla a kɔnɔ walasa u ka se ka baara .btn-toolbarkɛ ka ɲɛ.

Kunnafoni kunbabaw ani misaliw

Baara kɛ ni butɔni o butɔni ye walasa ka menu (yɔrɔ) dɔ daminɛ i kɛtɔ k’a bila a kɔnɔ .btn-groupani ka menu taamasiyɛn ɲuman di.

Misali la, taamasiyɛn kɛli

I n’a fɔ butɔni kulu, an ka taamasiyɛn bɛ baara Kɛ ni butɔni taamaʃyɛn ye min bɛ Kɛ tuma bɛɛ, nka ni bolomafara dɔw bɛ Fàra ɲɔgɔn kan walasa ka cogoya nɔgɔya ani ka Bootstrap ka jQuery fɛnsɛbɛnni Dɛmɛ.

<div kalasi = "btn-kulu" > 
  <a class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" href = "#" >   
    Wale
    <span kalasi = "karɛti" </span> 
  </a>
  <ul kalasi = "dakun-yɔrɔ" > 
    <!-- 'kɔnɔ 'fɛnw 'kɔnɔ -->
  </ul>
</div> ye

A bɛ baara kɛ ni butɔni hakɛ bɛɛ ye

Butɔnw bɛ baara kɛ ni hakɛ o hakɛ ye. aw ka butɔni hakɛw ka se .btn-large, .btn-small, walima .btn-mini.

A bɛ javascript de wajibiya

Butɔnw bɛ Bootstrap jiralanw de wajibiya walasa a ka baara kɛ.

Tuma dɔw la—i n’a fɔ mobili—menu minnu bɛ jira, olu bɛna bonya ka bɔ filɛlikɛyɔrɔ kɔkan. Aw ka kan ka alignment ɲɛnabɔ ni aw bolo ye walima ni javascript custom ye.

Kunnafoni kunbabaw ani misaliw

Ka da butɔni kulu cogoyaw ni taamasiyɛnw kan, an bɛ se ka butɔni tilalen dɔ Dabɔ nɔgɔya la. Butɔnw tilatilali bɛ wale jɔnjɔn dɔ jira kinin fɛ ani fɛn dɔ bɛ yen min bɛ wuli ka bɔ kinin fɛ ni fɛnw ye minnu bɛ fɛnw kɔnɔ.

Bonyaw

Baara kɛ ni butɔni kalansen wɛrɛw ye .btn-mini, .btn-small, walima .btn-largeka bonya.

<div kalasi = "btn-kulu" > 
  ...
  <ul class = "jigin-minɛnw sama-niman fɛ" > 
    <!-- 'kɔnɔ 'fɛnw 'kɔnɔ -->
  </ul>
</div> ye

Misali la, taamasiyɛn kɛli

An bɛ dɔ Fàra butɔni nɔrɔlenw kan walasa ka butɔni wale filanan Di min bɛ baara Kɛ i n’a fɔ bɔgɔdaga-yɔrɔ danfaralen.

<div kalasi = "btn-kulu" > 
  <butɔni kalasi = "btn" > Waleya </button> 
  <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >  
    <span kalasi = "karɛti" </span> 
  </button> ye
  <ul kalasi = "dakun-yɔrɔ" > 
    <!-- 'kɔnɔ 'fɛnw 'kɔnɔ -->
  </ul>
</div> ye

Meniw minnu bɛ bɔ

menu minnu bɛ jigin , olu fana bɛ se ka wuli ka bɔ duguma ka taa sanfɛ ni kalan kelen farali ye bangebaga teliya la .dropdown-menu. A bɛna a ɲɛsin a ma .caretani ka menu yɛrɛ bila a jɔyɔrɔ la kokura walasa ka bɔ duguma ka taa sanfɛ sanni ka taa sanfɛ ka jigin.

<div kalasi = "btn-kulu ka bɔli" > 
  <butɔni kalasi = "btn" > Jiginni </button> 
  <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >  
    <span kalasi = "karɛti" </span> 
  </button> ye
  <ul kalasi = "dakun-yɔrɔ" > 
    <!-- 'kɔnɔ 'fɛnw 'kɔnɔ -->
  </ul>
</div> ye

Base classe barikama

Nav yɔrɔw bɛɛ bɛ yan—tabuw, furakisɛw, ani lisiw— bɛ basigi taamasiyɛn ni cogoya kelenw tila ɲɔgɔn na kalan .navfɛ.

A ka kan ka baara kɛ waati min na

Tablow ni furakisɛw ka ɲi kosɛbɛ kɔnɔkow yɔrɔw la walima ka kunnafoniw ɲɛw cɛ minnu bɛ tali kɛ ɲɔgɔn na.

Componentw ka ɲɔgɔndan

Walasa ka nav jɛgɛnw labɛn ɲɔgɔn fɛ, baara kɛ ni .pull-leftwalima .pull-rightutility classes ye. Kalanso fila bɛɛ bɛna CSS float dɔ fara a kan sira kofɔlen na.

Tablo basigilenw

Aw ye regular <ul>of links ta ka fara a kan .nav-tabs:

• So
• Porofili
• Cikanw

<ul kalasi = "nav nav-tabs" > 
  <li kalasi = "baarakɛla" > 
    <a href = "#" > So </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Furakisɛ basigilenw

Aw bɛ o HTML kelen in ta, nka aw bɛ baara kɛ n’a .nav-pillsnɔ na:

• So
• Porofili
• Cikanw

<ul kalasi = "nav nav-furakisɛw" > 
  <li kalasi = "baarakɛla" > 
    <a href = "#" > So </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Cogo min na ka stack 'em

I n’a fɔ tablo ni furakisɛw bɛ jɛgɛn cogo min na, aw bɛ kalasi filanan fara dɔrɔn, .nav-stacked, walasa u ka kɛ i n’a fɔ u bɛ ɲɔgɔn kan.

Tablo minnu bɛ ɲɔgɔn kan

• So
• Porofili
• Cikanw

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

Furakisɛw minnu bɛ ɲɔgɔn kan

• So
• Porofili
• Cikanw

<ul class = "nav nav-furakisɛw nav-stacked" > 
  ...
</ul>

Meniw nafamaw kɛra nɔgɔya la

Meniw minnu bɛ Bootstrap tabw ni furakisɛw kɔnɔ, olu ye super easy ye wa u bɛ HTML dɔɔnin dɔrɔn de wajibiya ani jQuery plugin nɔgɔman dɔ.

Aw bɛ aw ɲɛsin Javascript ɲɛ ma walasa ka sɛbɛnw kalan Bootstrap kɔnɔ fɛnw daminɛcogo kan.

Tablo minnu bɛ ni fɛnw ye minnu bɛ jigin

• So
• Dɛmɛ
• Dropdown (Donkilidala).
  • Action
  • Another action
  • Something else here
  • Separated link

<ul kalasi = "nav nav-tabs" > 
  <li kalasi = "dɔgɔtɔrɔso" > 
    <a kalasi = "jigin-ka-bɔ". 
       data-toggle = "dafalen" .
       href = "#" > ye
        Dropdown (Donkilidala).
        <b kalasi = "karɛti" </b> 
      </a>
    <ul kalasi = "dakun-yɔrɔ" > 
      <!-- ɲɔgɔndanw -->
    </ul>
  </li>
</ul>

Furakisɛw ni furakisɛw

• So
• Dɛmɛ
• Dropdown (Donkilidala).
  • Action
  • Another action
  • Something else here
  • Separated link

<ul kalasi = "nav nav-furakisɛw" > 
  <li kalasi = "dɔgɔtɔrɔso" > 
    <a kalasi = "jigin-ka-bɔ". 
       data-toggle = "dafalen" .
       href = "#" > ye
        Dropdown (Donkilidala).
        <b kalasi = "karɛti" </b> 
      </a>
    <ul kalasi = "dakun-yɔrɔ" > 
      <!-- ɲɔgɔndanw -->
    </ul>
  </li>
</ul>

Navigasiyɔn min bɛ kɛ i n’a fɔ application

Nav lists bɛ fɛɛrɛ nɔgɔman ni nɔgɔn di ka nav jɛgɛnsira kuluw jɔ ni kuncɛlanw ye minnu bɛ se ka sugandi. U bɛ baara Kɛ kosɛbɛ kɛrɛfɛ-yɔrɔw la i n'a fɔ Finder min bɛ OS X kɔnɔ.

Jatebla la, u jɔlen bɛ core nav styles kelenw kan ni tabs ni pills ye, o la baarakɛcogo ni customization bɛ tilennen.

Ni taamasiyɛnw ye

Nav listw fana ka nɔgɔn ka kɛ ni taamasiyɛnw ye. A' ye tag bɛnnen fara a <i>kan ni kalasi ye ani i bɛ sigi.

Divisions horizontales (jatebɔlanw).

Aw bɛ tilayɔrɔba dɔ fara a kan ni lisi fɛn lankolon dɔ dabɔli ye ni kalasi ye .divider, i n’a fɔ nin cogo la:

<ul kalasi = "nav nav-list" > 
  ...
  <li kalasi = "jatebɔlan" </li> 
  ...
</ul>

Misali la nav list

Aw ye lisi dɔ ta ka ɲɛsin lisi kan ka fara a kan class="nav nav-list":

<ul kalasi = "nav nav-list" > 
  <li kalasi = "nav-kunnafoni" > 
    Lisiti kuncɛlan
  </li>
  <li kalasi = "baarakɛla" > 
    <a href = "#" > So </a> 
  </li>
  <li>
    <a href = "#" > gafemarayɔrɔ </a> 
  </li>
  ...
</ul>

Misali ni taamasiyɛnw

Misali kelen, nka ni <i>taamasiyɛnw ye taamasiyɛnw kama.

<ul kalasi = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > ye 
      <i kalasi = " taamasiyɛn-gafe" </i> 
      Gafekalanyɔrɔ
    </a>
  </li>
  ...
</ul>

Min bɛ a kɔnɔ

Aw ye aw ka tabw lase ɲɛnamaya la ni plugin nɔgɔman ye walasa ka kɔnɔkow ɲɔgɔn falen-falen tabw fɛ. Bootstrap bɛ tabable tabw fara ɲɔgɔn kan cogo naani na: sanfɛ (default), kinin fɛ, duguma, ani numan fɛ.

Yɛlɛma min bɛ u ni ɲɔgɔn cɛ, o ka nɔgɔn wa a bɛ taamasiyɛn dɔɔnin dɔrɔn de wajibiya.

Fade ka tabw kɔnɔ

Walisa ka tablow ka fade in kɛ, i ka dɔ fara .fadeu kelen-kelen bɛɛ .tab-panekan .

A bɛ jQuery plugin de wajibiya

Tabbable tabw bɛɛ bɛ baara Kɛ ni an ka jQuery plugin nɔgɔman ye. aw ye kunnafoni wɛrɛw kalan tabable tabs lasecogo kan javascript docs ɲɛ kan .

Aw ye javascript sɔrɔ →

Tablo misali

Walasa ka tablow kɛ tabablew ye, i ka .tab-paneID kɛrɛnkɛrɛnnen dɔ da tab kelen-kelen bɛɛ kama ani k’u siri .tab-content.

Ni aw bɛ tablow labɛn minnu bɛ kinin fɛ walima numan fɛ, aw bɛ .nav-tabsani .tab-contentka siri .tabbable.

Marka tilennen

Baara kɛli ni tabable tabs ye, o bɛ wrapping div, tabs set, ani tabbable panes of content set de wajibiya.

<div class = "tabbable" > <!-- A bɛ ɲini dɔrɔn numanbolo/numanbolo tablow la -->  
  <ul kalasi = "nav nav-tabs" > 
    <li kalasi = "baarakɛ" ><a href = "#tab1" data-toggle = "tab" > Sigida 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sigida 2 </a></li>  
  </ul>
  <div kalasi = "tablo-kɔnɔkow" > 
    <div kalasi = "tab-pane active" id = "tab1" >  
      <p> n bɛ Sigida 1 kɔnɔ </p>
    </div> ye
    <div kalasi = "tab-pane" id = "tab2" >  
      <p> Howdy , n bɛ Sigida 2nan na </p>
    </div> ye
  </div> ye
</div> ye

Tablo minnu bɛ duguma

HTML sigicogo wuli ka kalan dɔ fara a kan walasa ka tabw bila duguma.

<div class = "tablo-tablo-jukɔrɔ" > 
  <div kalasi = "tablo-kɔnɔkow" > 
    ...
  </div> ye
  <ul kalasi = "nav nav-tabs" > 
    ...
  </ul>
</div> ye

Tablo minnu bɛ kinin fɛ

Kalanso ɲɔgɔn falen-falen walasa ka tabw bila kinin fɛ.

<div class = "tablo-tablo-nɛgɛjuru" > 
  <ul kalasi = "nav nav-tabs" > 
    ...
  </ul>
  <div kalasi = "tablo-kɔnɔkow" > 
    ...
  </div> ye
</div> ye

Tablo minnu bɛ kinin fɛ

Kalanso ɲɔgɔn falen-falen walasa ka tabw bila kinin fɛ.

<div class = "tablo-tablo-niman" > 
  <ul kalasi = "nav nav-tabs" > 
    ...
  </ul>
  <div kalasi = "tablo-kɔnɔkow" > 
    ...
  </div> ye
</div> ye

Navbar ka échafaudage

Navbar bɛ divs damadɔ dɔrɔn de wajibiya walasa k’a labɛn ka ɲɛ walasa ka jiracogo jɔlen walima jiracogo jɔ.

<div kalasi = "navbar" > 
  <div kalasi = "navbar-kɔnɔna" > 
    <div kalasi = "minɛn" > 
      ...
    </div> ye
  </div> ye
</div> ye

Navbar labɛnna

Navbar labɛn ka taa viewport sanfɛ walima duguma ni kalasi wɛrɛ ye div kɛnɛma kan, .navbar.

<div kalasi = "navbar navbar-fixed-top" > 
  ...
</div> ye

<div class = "navbar navbar-dakun-sigilen" > 
  ...
</div> ye

Ni aw bɛ navbar (navbar) nɔrɔ a la, aw hakili to a la ka jatebɔ kɛ yɔrɔ dogolen na min bɛ a jukɔrɔ. Aw bɛ 40px walima ka tɛmɛ o kan padding fara a kan <body>. Aw ye aw jija ka nin fara Bootstrap CSS koloma kɔfɛ ani ka kɔn CSS jaabi sugandilen ɲɛ.

Marka tɔgɔ

Lien nɔgɔman min bɛ se k’i ka marka walima i ka porozɛ tɔgɔ jira, o bɛ anchor tag dɔrɔn de wajibiya.

<a kalasi = "maraka" href = "#" >  
  Porozɛ tɔgɔ
</a>

Foroko bɛ navbar kɔnɔ

Walasa ka sɛbɛn dɔ cogoya ka ɲɛ ani k’a bila yɔrɔ la navbar kɔnɔ, i ka kalansen bɛnnenw fara a kan i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ. Walasa ka sɛbɛnfura dafalen sɔrɔ, aw bɛ a don a kɔnɔ .navbar-formani a dɔ la kelen .pull-leftwalima .pull-rightwalasa k’a labɛn ka ɲɛ.

<form class = "navbar-form ka sama-nɛgɛjuru" > 
  <doncogo suguya = "sɛbɛn" kalasi = "span2" >  
</form>

Walasa ka ɲinini sɛbɛn dɔ sɔrɔ min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, i .navbar-searchka fara formani .search-queryka fara dontaw kan cogoya kɛrɛnkɛrɛnnenw kama navbar kɔnɔ.

<form class = "navbar-ɲini sama-nɛgɛjuru" > 
  <donna suguya = "sɛbɛn" kalasi = "ɲini-ɲininkali" yɔrɔ = "Ɲini" >   
</form>

Yɛlɛma min bɛ jaabi dicogo sugandi

Ka kɛɲɛ ni kunnafoni hakɛ ye min bɛ i ka sanfɛyɔrɔ la, i bɛ se ka jaabi suganditaw waleya. Walasa k’o kɛ, i ka i ka nav kɔnɔkow siri div, .nav-collapse.collapse, kɔnɔ min kɔnɔ, ka navbar toggle button fara a kan, .btn-navbar.

<div kalasi = "navbar" > 
  <div kalasi = "navbar-kɔnɔna" > 
    <div kalasi = "minɛn" > 
 
      <!-- .btn-navbar bɛ kɛ toggle ye navbar kɔnɔkow sɔgɔlenw na -->
      <a kalasi = "btn btn-navbar" data-toggle = "dafalen" kunnafoni-laɲini = ".nav-dafalen" >   
        <span kalasi = " taamasiyɛn-baara" </span> 
        <span kalasi = " taamasiyɛn-baara" </span> 
        <span kalasi = " taamasiyɛn-baara" </span> 
      </a>
 
      <!-- Aw ye aw jija ka marka to yen ni aw b'a fɛ a ka jira -->
      < kalanso dɔ  = "maraka" href = "#" > Porozɛ tɔgɔ </a> 
 
      <!-- I b'a fɛ fɛn o fɛn ka dogo 940px walima a dɔgɔyalen na, i k'o bila yan kɔnɔ -->
      <div kalasi = "nav-kalan" > 
        <!-- .nav, .navbar-ɲini, .navbar-fɔcogo, wdfl -->
      </div> ye
 
    </div> ye
  </div> ye
</div> ye

Nav jɛgɛnw

Nav fɛnw ka nɔgɔn ka fara u kan lisiw fɛ minnu ma labɛn.

<ul kalasi = "nav" >
  <li kalasi = "baarakɛla" >
    <a href = "#" > So </a>
  </li>
  <li><a href = "#" .  > Jɛɲɔgɔnya </a></li>
  <li><a href =  "#" > Jɛɲɔgɔnya </a></li>
</ul>

Aw bɛ se ka tilayɔrɔbaw fara aw ka nav jɛgɛnw kan nɔgɔya la ni lisi fɛn lankolon ye ani kalan nɔgɔman ye. Aw bɛ nin fara dɔrɔn jɛgɛnsira ni ɲɔgɔn cɛ:

<ul kalasi = "nav" >
  ...
  <li kalasi =  "jatebɔ-jɔlen" </li>
  ...
</ul>

Componentw ka ɲɔgɔndan

Walasa ka nav, ɲinini sɛbɛn walima sɛbɛnni dɔ labɛn ɲɔgɔn fɛ, baara kɛ ni .pull-leftor ye.pull-right utility classes ye. Kalanso fila bɛɛ bɛna CSS float dɔ fara a kan sira kofɔlen na.

Meniw minnu bɛ jigin, olu farali a kan

Ka fɛn dɔw fara a kan ani ka fɛn dɔw fara nav kan, o ye super simple ye, nka a bɛ an ka javascript plugin baara de wajibiya .

<ul kalasi = "nav" > 
  <li kalasi = "dɔgɔtɔrɔso" > 
    <a href = "#" ye . 
          class = "dɔgɔtɔrɔ-toggle".
          data-toggle = "dafalen" >
          Jate
          <b kalasi = "karɛti" </b> 
    </a>
    <ul kalasi = "dakun-yɔrɔ" > 
      ...
    </ul>
  </li>
</ul>

Aw ye javascript sɔrɔ →

Sɛbɛnniw bɛ navbar kɔnɔ

Aw bɛ sɛbɛnniw siri ni a ye <.navbar-text>, a ka c’a la, aw bɛ <p>taamasiyɛn dɔ kan walasa ka ɲɛminɛcogo ɲuman ni u kulɛri sɔrɔ.

Mun na baara kɛ n’u ye

Breadcrumb navigation bɛ kɛ sababu ye k’a jira baarakɛlaw la u bɛ yɔrɔ min na appli walima site dɔ kɔnɔ, nka a tɛ kɛ navigation fɔlɔ kama. Aw bɛ u tali kɛ ka caya ani ka u kɛ ka surunya walasa u ka se ka baara kɛ kosɛbɛ.

Misaliw

Misali kelen min jiralen bɛ i n’a fɔ a bɛ se ka jira cogo min na ɲɛ caman kan.

• So

• So / Bamako .
• Gafekalanyɔrɔ

• So / Bamako .
• Kitabumaraso / .
• Kunnafoniw

Markup (Marka) ye

HTML ye i ka lisi jɔnjɔn ye min ma labɛn ni jɛgɛnsira ye.

<ul kalasi = "buruburu" > 
  <li>
    <a href = "#" > So </a> <span kalasi = "jatebɔlan" > / </span>   
  </li>
  <li>
    <a href = "#" > gafemarayɔrɔ </a> <span kalasi = "jatebɔlan" > / </span>   
  </li>
  <li kalasi = "baarakɛla" > Donanw </li> 
</ul>

A ka kan ka baara kɛ waati min na

Ultra simplistic and minimally styled pagination inspired by Rdio, a ka ɲi kosɛbɛ porogaramuw ni ɲinini jaabiw ma. Bloki belebele in ka gɛlɛn ka tɛmɛn, a bɛ se ka sɛgɛsɛgɛ nɔgɔya la, wa a bɛ digi yɔrɔbaw di.

Jamana ɲɛw ladɛrɛsiw

Lienw bɛ se ka ladilan ani u bɛ baara kɛ cogo damadɔ la ni kalasi ɲuman ye. .disabledka ɲɛsin jɛgɛnsiraw ma minnu tɛ se ka digi ani .activeɲɛ min bɛ sen na sisan.

A bɛ se ka wuli ka bɔ ɲɔgɔn na

Kalanso fila minnu bɛ se ka sugandi, olu dɔ la kelen fara a kan walasa ka ɲɛw ladɛrɛsiw labɛncogo Changer: .pagination-centeredani .pagination-right.

Misaliw

Ɲɛjirali yɔrɔ min bɛ Kɛ fɔlɔ, o bɛ Se ka Yɛlɛma-yɛlɛma wa a bɛ baara Kɛ fɛn caman na.

Markup (Marka) ye

A sirilen bɛ a la <div>, ɲɛɲini ye <ul>.

<div kalasi = "ɲɛnajɛ" > 
  <ul>
    <li><a href = "#" > Kɔrɔlen </a></li> 
    <li kalasi = "baarakɛla" > 
      <a href = "#" > 1 ye </a> ye 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > nata </a></li> 
  </ul>
</div> ye

Pager ko la

Pager yɔrɔ ye jὲkulu ye min bɛ Kɛ ɲɛ-sɛbɛnni waleyali nɔgɔmanw ye ni taamasiyɛn yeelenma ye ani hali cogoya nɔgɔmanw. A ka ɲi kosɛbɛ siti nɔgɔmanw ma i n’a fɔ bulɔguw walima zurunali.

Optional disabled state

Pager links fana bɛ baara Kɛ ni general .disabledclass ye ka Bɔ pagination na.

Misali dafalen

Ka da a kan, pager (pager) bɛ jɛgɛnw cɛmancɛ la.

• Tɛmɛnen
• Nata

<ul kalasi = "pager" > 
  <li>
    <a href = "#" > Tɛmɛnen </a> 
  </li>
  <li>
    <a href = "#" > nata </a> 
  </li>
</ul>

Jɛɲɔgɔnya minnu bɛ ɲɔgɔn kan

Ni o tɛ, i bɛ se ka jɛgɛnsira kelen-kelen bɛɛ labɛn ka kɛɲɛ ni kɛrɛw ye:

• ← Kɔrɔlen
• Kuru →

<ul kalasi = "pager" > 
  <li kalasi = "kɔrɔlen" > 
    <a href = "#" > ← Kɔrɔlen </a> 
  </li>
  <li kalasi = "nata" > 
    <a href = "#" > Kuru kura → </a> 
  </li>
</ul>

Kan

Badgew ye fɛn misɛnninw ye minnu ka nɔgɔn walasa ka taamasiyɛn walima jatebɔ sugu dɔ jira. U bɛ sɔrɔ tuma caman na imɛri kliyanw na i n’a fɔ Mail.app walima mobili porogaramuw kan push notifications kama.

Kalanso minnu bɛ sɔrɔ

Bootstrap bɛ fɛn dɔ Di min ka nɔgɔn, min bɛ Se ka Yɛlɛma, n’o bɛ Weele ko hero unit walasa ka kɔnɔkow jira i ka yɔrɔ kan. A bɛ baara kɛ koɲuman jagokɛyɔrɔw kan ani kunnafonidilanw kan minnu kɔnɔkow ka ca.

Markup (Marka) ye

Aw ye aw ka kɔnɔkow siri ni divlike so ye:

<div kalasi = "jatigɛwale-jɛkulu" > 
  <h1> Kunkanko </h1>
  <p> Tagabolo </p>
  <p> ye
    <a kalasi = "btn btn-fɔlɔ btn-ba" > 
      Aw ye kunnafoni wɛrɛw sɔrɔ
    </a>
  </p> , o ye
</div> ye

A simple shell for an h1ka yɔrɔ bɛnnenw Bɔ ani k’u tila-tila yɔrɔ dɔw la ɲɛ dɔ kan. A bɛ Se ka baara Kɛ ni h1's default small, element ye ka Fàra a yɔrɔ tɔw fanba kan (ni cogoya wɛrɛw ye).

<div class = "ɲɛ-kunnafoni" > 
  <h1> Misali ɲɛ ɲɛ </h1>
</div> ye

Jaa fitininw default (daɲɛ fitininw).

Ka da a kan, Bootstrap ka ja fitininw dabɔra walasa ka ja minnu bɛ ɲɔgɔn kan, olu jira ni taamasiyɛn fitinin wajibiyalenw ye.

A bɛ se ka kɛ ka kɛɲɛ ni mɔgɔw sago ye kosɛbɛ

Ni taamaʃyɛn dɔ Fàrala o kan, a bɛ Se ka HTML kɔnɔko sugu bɛɛ Fàra ɲɔgɔn kan i n’a fɔ dakunw, dakunw, walima butɔni minnu bɛ Kɛ ja fitininw na.

• 

  Label min bɛ kɛ ni ja fitininw ye

  Cras justo odio, dapibus ac facilisis in, a ka baara ye ka mɔgɔw kalan. Donec id elit non mi porta gravida ye eget metus ye. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

  Wale Wale

• 

  Label min bɛ kɛ ni ja fitininw ye

  Cras justo odio, dapibus ac facilisis in, a ka baara ye ka mɔgɔw kalan. Donec id elit non mi porta gravida ye eget metus ye. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

  Wale Wale

Mun na aw bɛ baara kɛ ni ja fitininw ye

Ja fitininw (kɔrɔlen .media-gridfo ka se v1.4 ma) ka ɲi kosɛbɛ fotow walima wideyow gridw la, ja ɲinini jaabiw, feerefɛnw, portfoliow, ani fɛn caman wɛrɛw. U bɛ se ka kɛ jɛgɛnsira ye walima kɔnɔkow jɔlenw ye.

Markup nɔgɔman, min bɛ se ka wuli ka bɔ a nɔ na

Ja fitininw taamasiyɛnni ka nɔgɔn—a ulni fɛn hakɛ o hakɛ bɛ liyen, o de ye fɛn bɛɛ ye min ka kan ka kɛ. A fana ye super flexible ye, min bɛ sira Di kunnafoni suguya bɛɛ ma ni markup dɔɔnin dɔrɔn ye ka i ka kɔnɔkow siri.

A bɛ baara kɛ ni jatebɔlanw hakɛw ye

A laban na, ja fitininw yɔrɔ bɛ baara kɛ ni grid system classes ye minnu bɛ yen—i n’a fɔ .span2walima .span3—ja fitininw hakɛw kɔlɔsili kama.

O taamasiyɛn ye

I n’a fɔ a fɔra cogo min na ka tɛmɛ, taamasiyɛn min wajibiyalen don ja fitininw na, o ka nɔgɔn ani a bɛ tilennen. Nin ye ja minnu bɛ ɲɔgɔn kan, olu sigicogo dafalen lajɛ :

<ul kalasi = "jaabi fitininw" > 
  <li kalasi = "span3" > 
    <a href = "#" kalasi = "jaabi fitinin" >  
      <img src = "https://www.facebook.com/260x180" alt = "" >. Bamako, Mali  
    </a>
  </li>
  ...
</ul>

HTML kɔnɔkow ladamulenw kama ja fitininw kɔnɔ, taamasiyɛn bɛ Changé dɔɔnin. Walasa ka sira Di bloki nivo kɔnɔkow ma yɔrɔ o yɔrɔ, an bɛ swap the <a>for a <div>like so:

<ul kalasi = "jaabi fitininw" > 
  <li kalasi = "span3" > 
    <div class = "jaabi fitinin" > 
      <img src = "https://www.facebook.com/260x180" alt = "" >. Bamako, Mali  
      <h5> fɛn fitininw labeli </h5>
      <p> ja fitininw ɲɛfɔli yan yɛrɛ... </p>
    </div> ye
  </li>
  ...
</ul>

Misali wɛrɛw

Aw ye aw ka sugandiliw bɛɛ sɛgɛsɛgɛ ni grid kalan suguya caman ye minnu bɛ aw bolo. Aw bɛ se fana ka hakɛw ɲagami ani ka u bɛn ɲɔgɔn ma.

Base kalansen sɛbɛnnen kura

Ni Bootstrap 2 ye, an ye basigi kalasi nɔgɔya: .alertsanni ka kɛ .alert-message. An ye dɔ bɔ fana taamasiyɛn fitinin wajibiyalen na—ayi <p>wajibiyalen don ka da a kan, kɛnɛma dɔrɔn <div>.

Lakɔlɔsili cikan kelen

Walasa ka yɔrɔ dɔ sɔrɔ min bɛ mɛn kosɛbɛ ni kode caman ye, an ye danfara filɛli bɔ bloki lasɔminiw la, cikan minnu bɛ na ni padding caman ye ani a ka c’a la sɛbɛnni caman. Kalanso fana Changé ka kɛ .alert-block.

A bɛ taa koɲuman ni javascript ye

Bootstrap bɛ na ni jQuery plugin ɲuman ye min bɛ lasɔmini cikanw dɛmɛ, k’u bilali teliya ani ka nɔgɔya.

Aw ye plugin sɔrɔ »

Misali lasɔminiw

Aw ye aw ka cikan ni taamasiyɛn dafalen dɔ siri div kɔnɔ ni kalan nɔgɔman ye.

<div kalasi = "kɔlɔsili" > 
  <button class = "dadon" data-dismiss = "kɔlɔsili" > × </button>  
  <strong> Lakɔlɔsili ! </strong> Best check yo yɛrɛ , i tɛ ɲɛ kojugu .
</div> ye

Kungolow bɛ wuli! iOS minɛnw bɛ ɲini an href="#"fɛ ka ɲɛsin lasɔminiw bɔli ma. Aw ye aw jija k’a ni data attribute don anchor close icons la. O cogo kelen na, i bɛ se ka baara kɛ ni <button>fɛn dɔ ye min bɛ ni data attribute ye, an ye min sugandi ka kɛ an ka docs ye. Ni i bɛ baara kɛ ni <button>, i ka kan ka a fara a kan type="button"walima i ka sɛbɛnw tɛ se ka ci.

Aw bɛ lasɔmini cikan jɔnjɔn janya nɔgɔya la ni kalasi fila ye minnu bɛ se ka sugandi: .alert-blockwalasa ka padding ni sɛbɛnniw kunnafoni caman sɔrɔ ani .alert-headingka ɲɛsin barokun ma min bɛ bɛn.

<div class = "lasɔmini-kɔlɔsili-blɔki" > 
  <a kalasi = "dadon" data-dismiss = "kɔlɔsili" href = "#" > × </a>   
  <h4 kalasi = "kɔlɔsili-kunnafoni" > Ladilikan ! </h4> ye 
  Best check yo self, i ka...
</div> ye

Misali walima farati

<div class = "lasɔmini-kɔlɔsili-fili" > 
  ...
</div> ye

Sanga

<div class = "lasɔmini-kɔlɔsili-ɲɛtaa" > 
  ...
</div> ye

Kunnafoni

<div class = "lasɔmini-kɔlɔsili-kunnafoni" > 
  ...
</div> ye

Kunfɔlɔ

Progress bar default ni gradient vertical ye.

<div kalasi = "ɲɛtaa" > 
  <div kalasi = "baro" . 
       style = " bonya : 60 %; " ></div> 
</div> ye

A bɛ kɛ ni sɛrɛkiliw ye

A bɛ baara kɛ ni gradient ye walasa ka striped effect (IE tɛ yen).

<div class = "ɲɛtaa ɲɛtaa-sira" > 
  <div kalasi = "baro" . 
       style = " bonya : 20 %; " ></div> 
</div> ye

Animatɛri ye

A bɛ misali sɛrɛkili ta k’a ɲɛnamaya (IE tɛ).

<div class = "ɲɛtaa ɲɛtaa-sira." 
     baarakɛta" >
  <div kalasi = "baro" . 
       style = " bonya : 40 %; " ></div> 
</div> ye

Kulɛri wɛrɛw

Progress bars bɛ baara kɛ ni butɔni kelen dɔw ye ani lasɔmini kalanw walasa ka cogoyaw kɛ minnu bɛ bɛn ɲɔgɔn ma.

Baro minnu bɛ ni jiriw ye

I n’a fɔ kulɛri jɛlenw, an ye ɲɛtaa barajuru sɛrɛkili caman sɔrɔ.

Jogo

Progress bars bɛ baara Kɛ ni CSS3 transitions ye, o la n’i ye dynamique (dɛmɛ) bonya ladilan javascript fɛ, a bɛna a bonya caman Yɛlɛma ka ɲɛ.

N’i ​​bɛ baara kɛ ni .activekalan ye, i ka .progress-stripedɲɛtaa jiralanw bɛna sɛrɛw ɲɛnamaya ka taa kinin fɛ.

Navigatɛri dɛmɛni

Progress bars bɛ baara kɛ ni CSS3 gradients, transitions ani animations ye walasa k’u nɔ bɛɛ sɔrɔ. O baarakɛminɛnw tɛ dɛmɛ sɔrɔ IE7-9 walima Firefox kɔrɔlenw kɔnɔ.

Opera ni IE tɛ animationw dɛmɛ nin waati in na.

Kɔlɔnw

Baara kɛ ni kɔlɔn ye i n’a fɔ nɔ nɔgɔman min bɛ kɛ fɛn dɔ kan walasa ka nɔ bila a la.

<div kalasi = "kɛnɛ" > 
  ...
</div> ye

Ikɔni dadon

Baara kɛ ni generic close icon ye walasa ka kunnafoniw bɔ kɛnɛ kan i n’a fɔ modals ani alerts.

×

<butɔni kalasi = "dadon" > × </button> ye 

iOS minɛnw bɛ href="#" de wajibiya digi ko kɛlenw kama n'i b'a fɛ ka baara kɛ ni ankɔri ye.

<a kalasi = "dadon" href = "#" > &waatiw; </a>