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" > 
  <a kalasi = "btn" href = "#" > 1 </a>  
  <a kalasi = "btn" href = "#" > 2 </a>  
  <a kalasi = "btn" href = "#" > 3 </a>  
</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ɔ »

Kungolow bɛ wuli

CSS min bɛ butɔni kuluw kama, o bɛ filen wɛrɛ kɔnɔ, button-groups.less.

Butɔnw bɛ jigin

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.

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

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

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

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" > 
  <a kalasi = "btn" href = "#" > wale </a>  
  <a class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" href = "#" >   
    <span kalasi = "karɛti" </span> 
  </a>
  <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
• Porofili
• Dropdown (Donkilidala).
  • Wale
  • Waleya wɛrɛ
  • Fɛn wɛrɛ bɛ yan
  • Lien faralen ɲɔgɔn kan

<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
• Porofili
• Dropdown (Donkilidala).
  • Wale
  • Waleya wɛrɛ
  • Fɛn wɛrɛ bɛ yan
  • Lien faralen ɲɔgɔn kan

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

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.

Tablo misali

Walasa ka tabw kɛ tabbable ye, i ka .nav-tabsdiv wɛrɛ siri ni class ye .tabbable.

jQuery ka fɛn dilannenw

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

Aw ye javascript sɔrɔ →

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

Walasa ka navbar kɛ ka jɔ viewport sanfɛ, i bɛ fara .navbar-fixed-topdiv kɛnɛma kan, .navbar.

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

I ka CSS kɔnɔ, i bɛna a ɲini fana ka jatebɔ kɛ a bɛ min sɔrɔ ni i ye 40px walima ka tɛmɛ o kan padding fara i ka <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>

Ɲini sɛbɛn

Ɲini sɛbɛnw bɛ ladamu cogoyaw sɔrɔ navbar kɔnɔ ni .navbar-searchkalan ye. A bɛ don a kɔnɔ .pull-leftwalima .pull-righta kan formwalasa k’a labɛ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 -->
      <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 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-leftwalima .pull-rightutility classes ye. Kalanso fila bɛɛ bɛna CSS float dɔ fara a kan sira kofɔlen na.

A bɛ fɛnw fara a kan minnu bɛ bɔ fɛnw kan

Ka dropdowns 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ɔ →

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" > 
    <a href = "#" > Donanw </a> 
  </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.

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>

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 appropratiely space out ani segment sections kɔnɔkow kan ɲɛ 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 kalasi = "ɲɛ-haeder" > 
  <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" > 
  <a kalasi = "dadon" data-dismiss = "kɔlɔsili" > × </a>  
  <strong> Lakɔlɔsili ! </strong> Best check yo yɛrɛ , i tɛ ɲɛ kojugu .
</div> ye

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" > × </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 (gradient) ye walasa ka striped effect (fɔcogo sɛrɛkili) Dabɔ.

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

Animatɛri ye

A bɛ misali sɛrɛkili ta k’a ɲɛnamaya.

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

Kulɛri wɛrɛw

Progress bars bɛ baara Kɛ ni kala tɔgɔ kelen dɔw ye i n’a fɔ butɔni ni lasɔminiw cogoya kelen na.

• .progress-info
• .progress-success
• .progress-danger

Ni o tɛ, i bɛ se ka LESS filew ladilan ani ka i yɛrɛ ka kulɛriw ni u bonyaw wuli.

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-8 walima Firefox kɔrɔlenw kɔnɔ.

Opera 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

Badgew (Badges).

Use a badge on an element for an unread count or as a simple indicator.

<span class="badge">3</div>

Ikɔni dadon

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

×

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