Misaliya

Menu min bɛ se ka wuli ka bɔ a nɔ na, ​​min bɛ se ka wuli ka bɔ a nɔ na, ​​walasa ka jɛgɛnsira lisi jira. A kɛra ɲɔgɔndan ye ni JavaScript sɛgɛsɛgɛlikɛlan ye .

<ul class = "menu-jigin" jɔyɔrɔ = "menu" aria-labelledby = "Menu-jigin" >   
  <li><a tabindex = "-1" href = "#" > wale </a></li>  
  <li><a tabindex = "-1" href = "#" > wale wɛrɛ </a></li>  
  <li><a tabindex = "-1" href = "#" > fɛn wɛrɛ bɛ yan </a></li>  
  <li kalasi = "jatebɔlan" </li> 
  <li><a tabindex = "-1" href = "#" > Jɛɲɔgɔnya faralen ɲɔgɔn kan </a></li>  
</ul>

Markup (Marka) ye

Ni an ye 'yɔrɔ dɔrɔn lajɛ, HTML wajibiyalen filɛ nin ye. Aw ka kan ka 'sènfɛ-sɛbɛnni-minɛn ni 'sènfɛ-sɛbɛnni-minɛnw siri .dropdown, walima fɛn wɛrɛ min bɛ 'fɔli Kɛ position: relative;. O kɔ, menu (menu) dabɔ dɔrɔn.

<div kalasi = "dɔnkilida" > 
  <!-- Jɛɲɔgɔnya walima butɔni ka toggle dropdown -->
  <ul kalasi = "dugukolo-yɔrɔ" jɔyɔrɔ = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > wale </a></li>  
    <li><a tabindex = "-1" href = "#" > wale wɛrɛ </a></li>  
    <li><a tabindex = "-1" href = "#" > fɛn wɛrɛ bɛ yan </a></li>  
    <li kalasi = "jatebɔlan" </li> 
    <li><a tabindex = "-1" href = "#" > Jɛɲɔgɔnya faralen ɲɔgɔn kan </a></li>  
  </ul>
</div> ye

Sugandili minnu bɛ kɛ

Meniw labɛn ka taa kinin fɛ ani ka fara a kan ni nivo wɛrɛw ye minnu bɛ jigin.

Meniw (menuw) labɛncogo ɲɔgɔn fɛ

A fara a kan .pull-rightka .dropdown-menutaa kinin fɛ, i ka menu (yɔrɔ) labɛn.

<ul kalasi = "jigin-menu sama-niman" jɔyɔrɔ = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Meniw suganditaw balilen don

A bɛ fara a .disabledkan <li>yɔrɔ la walasa ka jɛgɛnsira bali.

<ul class = "menu-jigin" jɔyɔrɔ = "menu" aria-labelledby = "Menu-jigin" >   
  <li><a tabindex = "-1" href = "#" > Jɛɲɔgɔnya sabatili </a></li>  
  <li class = "baarakɛbali" ><a tabindex = "-1" href = "#" > Jɛɲɔgɔnya baarakɛbali </a></li>   
  <li><a tabindex = "-1" href = "#" > Jɛɲɔgɔnya wɛrɛ </a></li>  
</ul>

Sub menus (menuw fitininw) bɛ sɔrɔ fɛnw kan minnu bɛ jigin

Meniw dɔw fara a kan, minnu bɛ bɔ hover kan i n’a fɔ OS X ta, ni taamasiyɛn nɔgɔman dɔw faralen ye ɲɔgɔn kan. Aw bɛ dɔ fara .dropdown-submenufɛn o fɛn likan min bɛ menu dɔ kɔnɔ min bɛ yen walasa ka automatique styling kɛ.

<ul kalasi = "dugukolo-yɔrɔ" jɔyɔrɔ = "menu" aria-labelledby = "dLabel" >   
  ...
  <li kalasi = "dakun-kɔnɔ-fɛnw" > 
    <a tabindex = "-1" href = "#" > Sugandili wɛrɛw </a>  
    <ul kalasi = "dakun-yɔrɔ" > 
      ...
    </ul>
  </li>
</ul>

Misaliw

Sugandili jɔnjɔn fila, ka fara fɛn kɛrɛnkɛrɛnnen fila wɛrɛw kan minnu bɛ ɲɔgɔn falen-falen.

Butɔn kelen kulu

Aw bɛ butɔni dɔw siri ni .btnin ye .btn-group.

<div kalasi = "btn-kulu" > 
  <butɔni kalasi = "btn" > Nɛgɛbere </button> 
  <butɔni kalasi = "btn" > Cɛmancɛ </button> 
  <butɔni kalasi = "btn" > Kiɲɛ </button> 
</div> ye

Butɔn caman kuluw

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

Butɔn jɔlenw kuluw

Aw bɛ butɔni kulu dɔ kɛ i n’a fɔ u bɛ ɲɔgɔn kan cogo tilennen na sanni u ka kɛ tilennen ye.

<div kalasi = "btn-kulu btn-kulu-jɔlen" > 
  ...
</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.

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.

<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: .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 ɲɔgɔndan ɲɛnabɔ ni aw bolo ye walima ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni aw sago ye.

Butɔnw tila-tila

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

<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

Bonyaw

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

<div kalasi = "btn-kulu" > 
  <butɔni kalasi = "btn btn-mini" > wale </button> 
  <button class = "btn btn-mini jigin-yɔrɔ-ko" 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

Defaults lightweight Markup kelen, kalasi danfaralenw

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

Tablo basigilenw

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

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

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

Hakilila-jɔ-cogo

Ni nav yɔrɔ o yɔrɔ (tabs, pills, walima list), fara a kan .disabledwalasa ka links gris sɔrɔ ani no hover effects . Lienw bɛna to ka digi, nka, fo n’i ye o fɛn in bɔ yen href. O cogo kelen na, i bɛ se ka JavaScript ladamulen waleya walasa k’o digiliw bali.

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

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.

A bɛ se ka kɛ ɲɔgɔn kan

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

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

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

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

Dropdowns (Donkiliw).

menu dɔw fara a kan ni HTML dɔ faralen ye ɲɔgɔn kan ani JavaScript plugin min bɛ jigin .

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

<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

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

Nav lisiw

Fɛɛrɛ nɔgɔman ni nɔgɔn min bɛ se ka nav jɛgɛnw 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ɔ.

Misali la nav list

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

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

NɔtiWalasa ka nesting kɛ nav list kɔnɔ, a bɛ class="nav nav-list"don nested o nested <ul>kan .

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>

Tabable nav

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

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.

<div class = "tabbable" > <!-- A wajibiyalen don dɔrɔn numanbolo/numanbolo tablow de kama -->  
  <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

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 tablow lasecogo kan JavaScript sɛbɛnw ɲɛ kan .

Tabbable sira o fan fɛ

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 basigilen

Walasa ka daminɛ, navbarw bɛ jɔ (u tɛ jɔ sanfɛ) wa u bɛ dɛmɛ don porozɛ tɔgɔ ni navigatiɔn jɔnjɔn na. Aw bɛ kelen bila yɔrɔ o yɔrɔ a kɔnɔ .container, o min bɛ i ka siti ni a kɔnɔkow bonya sigi sen kan.

<div kalasi = "navbar" > 
  <div kalasi = "navbar-kɔnɔna" > 
    <a kalasi = "maraka" href = "#" > Title </a>  
    <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>
  </div> ye
</div> ye

Navbar kɔnɔfɛnw

Mariki

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>  

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>

Sɛbɛnw

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" >  
  <butɔni suguya = "ci" kalasi = "btn" > Lase </button>  
</form>

Ɲini sɛbɛn

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>

Componentw ka ɲɔgɔndan

Nav ladɛrɛsiw, ɲinini sɛbɛn, walima sɛbɛnniw labɛn, ka baara kɛ ni .pull-leftwalima .pull-rightutility classes ye. Kalanso fila bɛɛ bɛna CSS float dɔ fara a kan sira kofɔlen na.

Baara kɛ ni fɛnw ye minnu bɛ jigin

fɛnw ni fɛnw fara ɲɔgɔn kan nav kɔnɔ ni taamasiyɛn dɔɔnin ye ani fɛnw JavaScript plugin .

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

Aw ye taa JavaScript sɛbɛnw lajɛ walasa ka taamasiyɛn wɛrɛw sɔrɔ ani kunnafoni wɛrɛw weleli kan.

Masalabolo

Aw bɛ sɛbɛnniw sɛrɛw siri fɛn dɔ kɔnɔ ni .navbar-text, a ka c’a la, <p>taamasiyɛn dɔ kan walasa ka ɲɛmɔgɔya ni kulɛri ɲuman sɔrɔ.

Ɲɛjirali caman ɲɔgɔnna minnu bɛ se ka kɛ

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

Fixe ka taa sanfɛ

fara a kan .navbar-fixed-topani ka aw hakili to a la ka jatebɔ kɛ yɔrɔ dogolen na a jukɔrɔ ni 40px farali ye a dɔgɔyalenba paddingkan <body>. Aw ye aw jija ka nin fara Bootstrap CSS koloma kɔfɛ ani ka kɔn CSS jaabi sugandilen ɲɛ.

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

A bɛ labɛn ka taa duguma

Aw bɛ fara a kan .navbar-fixed-bottomo nɔ na.

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

Navbar sanfɛla statiki

Navbar dafalen dɔ da min bɛ taa ni ɲɛ ye ni farali .navbar-static-topye . A tɛ i n’a fɔ .navbar-fixed-topkalan, i man kan ka padding si Changer sur la body.

<div kalasi = "navbar navbar-statiki-sanfɛ" > 
  ...
</div> ye

Navbar min bɛ jaabi di

Walasa ka navbar jaabilen dɔ waleya, i ka navbar kɔnɔkow siri div kɔnɔ min kɔnɔ, .nav-collapse.collapse, ani 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 -->
      <a kalasi = "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 class = "nav-kalansenw dabɔli" > 
        <!-- .nav, .navbar-ɲini, .navbar-fɔcogo, wdfl -->
      </div> ye
 
    </div> ye
  </div> ye
</div> ye

Yɛlɛma inversé (Yɛlɛma inversé).

Navbar cogoya sɛmɛntiya ni farali .navbar-inverseye .

<div kalasi = "navbar navbar-inverse" > 
  ...
</div> ye

Misaliw

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

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

Ɲɛjirali minnu bɛ kɛ ka kɛɲɛ ni sariya ye

Pagenation simple inspiré par Rdio, a ka ɲi kosɛbɛ apps ani ɲinini jaabiw kama. 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.

<div kalasi = "ɲɛnajɛ" > 
  <ul> ye
    <li><a href = "#" > Kɔrɔlen </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 = "#" > nata </a></li> 
  </ul>
</div> ye

Sugandili minnu bɛ kɛ

Jamana minnu ye fiyentɔw ye ani minnu bɛ baara la

Lienw bɛ se ka ladilan ka kɛɲɛ ni cogoya wɛrɛw ye. Baara kɛ ni yɔrɔw ye minnu tɛ se .disabledka digi ani .activeka ɲɛ min bɛ yen sisan, o jira.

<div kalasi = "ɲɛnajɛ" > 
  <ul> ye
    <li kalasi = "baarakɛbali" ><a href = "#" > « </a></li> , o ye  
    <li kalasi = "baarakɛla" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div> ye

Aw bɛ se ka ankɔri minnu bɛ baara kɛ walima minnu tɛ baara kɛ, aw bɛ se ka olu sɛgɛsɛgɛ ni spanw ye walasa ka klikɛli baarakɛcogo bɔ yen k’a sɔrɔ aw bɛ cogoya laɲinitaw mara.

<div kalasi = "ɲɛnajɛ" > 
  <ul> ye
    <li kalasi = "baarakɛbali" ><span> « </span></li> ye 
    <li kalasi = "baarakɛla" ><span> 1 </span></li> 
    ...
  </ul>
</div> ye

Bonyaw

Aw b’a fɛ ka ɲɛ minnu ka bon walima minnu ka dɔgɔ? Aw bɛ .pagination-large, .pagination-small, walima .pagination-minifara a kan walasa ka bonya wɛrɛw sɔrɔ.

<div class = "ɲɛnajɛ ɲɛ-ba" > 
  <ul> ye
    ...
  </ul>
</div> ye
<div kalasi = "ɲɛnajɛ" > 
  <ul> ye
    ...
  </ul>
</div> ye
<div class = "ɲɛnajɛ ɲɛ-fitini" > 
  <ul> ye
    ...
  </ul>
</div> ye
<div class = "ɲɛnajɛ ɲɛ-mini" > 
  <ul> ye
    ...
  </ul>
</div> ye

Alignment (labɛnni).

Aw bɛ kalansen fila dɔ fara a kan minnu bɛ se ka sugandi walasa ka ɲɛw ladɛrɛsiw labɛncogo Changer: .pagination-centeredani .pagination-right.

<div class = "ɲɛnajɛ ɲɛɲini-cɛmancɛ" > 
  ...
</div> ye

<div class = "ɲɛnajɛ ɲɛ-niman" > 
  ...
</div> ye

Pager ye

Jɛɲɔgɔnya teliyalenw ni nataw ɲɛw waleyali nɔgɔmanw kama ni taamasiyɛn yeelenma ani cogoyaw ye. A ka ɲi kosɛbɛ siti nɔgɔmanw ma i n’a fɔ bulɔguw walima zurunali.

Misali dafalen

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

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

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

Optional disabled state

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

<ul kalasi = "pager" > 
  <li kalasi = "kɔrɔlen bololabaarakɛlaw" > 
    <a href = "#" > ← Kɔrɔlen </a> 
  </li>
  ...
</ul>

Labels (Labɛnw).

Badgew (Badges).

A bɛ se ka bin nɔgɔya la

Walasa ka waleyali nɔgɔya, labeliw ni badgew bɛna bin dɔrɔn (CSS ka :emptysugandilikɛlan fɛ) ni kɔnɔko si tɛ yen.

Unité de héros

Fɛn min ka nɔgɔn, min bɛ se ka wuli ka bɔ a nɔ na walasa ka kunnafoni jɔnjɔnw jira i ka siti kan. A bɛ baara kɛ koɲuman jagokɛyɔrɔw kan ani kunnafonidilanw kan minnu kɔnɔkow ka ca.

<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

Ɲɛw kuncɛcogo

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 ɲɛ ɲɛ kunkanko <small> Subtext for header </small></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ɔniw ka Kɛ ja fitininw ye.

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.

Markup (Marka) 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 = "span4" > 
    <a href = "#" kalasi = "jaabi fitinin" >  
      <img data-src = "bololanɛgɛ.js/300x200" alt = "" >  
    </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 = "span4" > 
    <div class = "jaabi fitinin" > 
      <img data-src = "bololanɛgɛ.js/300x200" alt = "" >  
      <h3> fɛn fitininw labeli </h3>
      <p> ja fitininw ɲɛfɔli... </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.

Kɔlɔsili kɛcogo kɔrɔ

Sɛbɛn o sɛbɛn ani butɔni min bɛ se ka bɔ a la, i k’o siri .alertwalasa ka lasɔmini cikan jɔnjɔn sɔrɔ.

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

Butɔnw bɔ baara la

Mobile Safari ani Mobile Opera navigatɔrɔw, ka fara data-dismiss="alert"attribut kan, u bɛ ɲini an href="#"fɛ ka lasɔminiw bila ka taa ni u bɛ baara kɛ ni <a>tag ye.

<a href = "#" kalasi = "dadon" data-dismiss = "lasɔmini" > &waatiw; </a>   

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.

<butɔni suguya = "butɔni" kalasi = "dadon" data-dismiss = "kɔlɔsili" > × </button> ye   

Aw ye lasɔminiw bila sen kan JavaScript fɛ

Baara kɛ ni lasɔminiw jQuery plugin ye walasa ka lasɔminiw bila teliya la ani nɔgɔya la.

Sugandili minnu bɛ kɛ

Walasa ka cikan janw sɔrɔ, aw bɛ dɔ fara padding kan min bɛ lasɔmini sɛbɛnfura sanfɛ ani duguma ni aw .alert-blockye .

<div class = "lasɔmini-kɔlɔsili-blɔki" > 
  <butɔni suguya = "butɔni" kalasi = "dadon" data-dismiss = "kɔlɔsili" > × </button> ye   
  <h4> Lasɔmini ! </h4> ye
  Best check yo self, i ka...
</div> ye

Fɛn wɛrɛw minnu bɛ kɛ ka ɲɛsin sigida ma

Kalanso sugandilenw fara a kan walasa ka lasɔmini dɔ kɔrɔ Changer.

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

Misaliw ani taamasiyɛnw

Kunfɔlɔ

Progress bar default ni gradient vertical ye.

<div kalasi = "ɲɛtaa" > 
  <div kalasi = "bara" cogoya = " bonya : 60 %; " ></div>   
</div> ye

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

A bɛ baara Kɛ ni gradient (gradient) ye walasa ka striped effect (fɔcogo sɛrɛkili) Dabɔ. A tɛ sɔrɔ IE7-8 kɔnɔ.

<div class = "ɲɛtaa ɲɛtaa-sira" > 
  <div kalasi = "bara" cogoya = " bonya : 20 %; " ></div>   
</div> ye

Animatɛri ye

A fara a kan .activewalasa .progress-stripedka jiriw ɲɛnamaya kinin fɛ ka taa numan fɛ. A tɛ sɔrɔ IE bɔko bɛɛ la.

<div class = "ɲɛtaa ɲɛtaa-sira-baarakɛla" > 
  <div kalasi = "bara" cogoya = " bonya : 40 %; " ></div>   
</div> ye

A bɛ dalajɛ

Aw bɛ bara caman bila kelen na .progresswalasa k’u fara ɲɔgɔn kan.

<div kalasi = "ɲɛtaa" > 
  <div kalasi = "bar bar-success" cogoya = " bonya : 35 %; " ></div>   
  <div kalasi = "bara bara-lasɔmini" cogoya = " bonya : 20 %; " ></div>   
  <div kalasi = "bara bara-fara" cogoya = " bonya : 10 %; " ></div>   
</div> ye

Sugandili minnu bɛ kɛ

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.

<div class = "ɲɛtaa ɲɛtaa-kunnafoni" > 
  <div kalasi = "bara" cogoya = " bonya : 20 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-ɲɛtaa" > 
  <div kalasi = "bara" cogoya = " bonya : 40 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-lasɔmini" > 
  <div kalasi = "bara" cogoya = " bonya : 60 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-farati" > 
  <div kalasi = "bara" cogoya = " bonya : 80 % " ></div>   
</div> ye

Baro minnu bɛ ni jiriw ye

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

<div class = "ɲɛtaa ɲɛtaa-kunnafoni ɲɛtaa-sira" > 
  <div kalasi = "bara" cogoya = " bonya : 20 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-ɲɛtaa ɲɛtaa-sira" > 
  <div kalasi = "bara" cogoya = " bonya : 40 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-lasɔmini ɲɛtaa-sira" > 
  <div kalasi = "bara" cogoya = " bonya : 60 % " ></div>   
</div> ye
<div class = "ɲɛtaa ɲɛtaa-farati ɲɛtaa-sira" > 
  <div kalasi = "bara" cogoya = " bonya : 80 % " ></div>   
</div> ye

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

Version minnu tun ka kɔrɔ ni Internet Explorer 10 ani Opera 12 ye, olu tɛ animationw dɛmɛ.

Fɛnɲɛnɛma cogoya minnu bɛ kɛ ka fɛn suguya caman jɔ (i n’a fɔ bulɔgu fɔtaw, Tweetw, a ɲɔgɔnnaw) minnu bɛ ja dɔ jira min bɛ tali kɛ kinin fɛ walima kinin fɛ sɛbɛnni kɔnɔkow kɛrɛfɛ.

Misali dafalen

Media default bɛ sira Di ka media fɛn dɔ (jaw, wideyow, lamɛntaw) wuli ka taa kɔnɔkow bloki kinin fɛ walima kinin fɛ.

Kunnafonidila kuncɛ

Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ka sɔrɔ ka fɛnw ɲini. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.

Kunnafonidila kuncɛ

Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ka sɔrɔ ka fɛnw ɲini. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.

Kunnafonidila kuncɛ

Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ka sɔrɔ ka fɛnw ɲini. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.

<div kalasi = " kunnafonidilanw" > 
  <a kalasi = "sama-nɛgɛjuru" href = "#" >  
    <img kalasi = "mɛdiya-fɛn" data-src = "holder.js/64x64" >  
  </a>
  <div kalasi = "kunnafoni-farikolo" > 
    <h4 kalasi = " kunnafonidi-kunnafoni" > kunnafonidi-kunnafoni </h4> 
    ...
 
    <!-- Nested media fɛn -->
    <div kalasi = " kunnafonidilanw" > 
      ...
    </div> ye
  </div> ye
</div> ye

Kunnafonidila lisi

Ni markup dɔ farala a kan, i bɛ se ka baara kɛ ni media inside list ye (nafa bɛ sɔrɔ commentaires threads walima articles lists la).

<ul kalasi = "kunnafoni-sɛbɛn" > 
  <li kalasi = "kunnafoni" > 
    <a kalasi = "sama-nɛgɛjuru" href = "#" >  
      <img kalasi = "mɛdiya-fɛn" data-src = "holder.js/64x64" >  
    </a>
    <div kalasi = "kunnafoni-farikolo" > 
      <h4 kalasi = " kunnafonidi-kunnafoni" > kunnafonidi-kunnafoni </h4> 
      ...
 
      <!-- Nested media fɛn -->
      <div kalasi = " kunnafonidilanw" > 
        ...
     </div> ye
    </div> ye
  </li>
</ul>

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

Kalanso minnu bɛ kɛ ni i yɛrɛ sago ye

Kontrɔli padding ani rounded corners ni fila optionnel modifier classes.

<div class = "kɛnɛ ɲuman-ba" > 
  ...
</div> ye

<div class = "kɛnɛ koɲuman-misɛnnin" > 
  ...
</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ɛ ɲini ni href="#"for click events ye n’i b’a fɛ ka baara kɛ ni anchor ye.

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

Dɛmɛbagaw ka kalanw

Kalanso nɔgɔmanw, minnu sinsinnen bɛ jirali misɛnninw kan walima kɛwalew sɛgɛsɛgɛli kama.

.sama-nɛgɛbere

Float dɔ element (fɛn dɔ) kinin fɛ

kalasi = "sama-nɛgɛjuru".

. sama - kinin fɛ { .
  flot : kinin fɛ ;
} ye .

.sama-niman fɛ

Float dɔ element kinin fɛ

kalasi = "sama-niman" .

. sama - kinin fɛ { .
  flot : kinin fɛ ;
} ye .

.muted ye

Eleman dɔ ka kulɛri Changer ka kɛ#999

kalasi = "muted" .

. muted { .
  kulɛri : #999 ; 
} ye .

.ka jɛya

Clear the floatkan element o element

kalasi = "kɛrɛnkɛrɛnnenya la".

. ɲɛfɔli jɛlen { .
  * zoom : 1 ye ; 
  &: ka kɔn , .
  &: kɔfɛ { .
    jirali : tabali ;
    kɔnɔkow : "" ; 
  } ye .
  &: kɔfɛ { .
    jɛlen : u fila bɛɛ ;
  } ye .
} ye .