Qaamolee

Qaamonni irra deebiin itti fayyadamuu danda'an kudhanootaan lakkaa'aman Bootstrap keessatti ijaaramanii navigeeshinii, akeekkachiisa, popovers, fi waan baay'ee kennuudhaaf.

Gareewwan buttooni

Qabduulee hedduu akka qaama walmakaa tokkootti walitti makuuf gareewwan qaree fayyadami. Isaanis tartiiba <a>ykn <button>elementoota waliin ijaari.

Muuxannoo gaarii

Gareewwan qaree fi barruulee meeshaalee fayyadamuuf qajeelfama armaan gadii ni gorsina:

Yeroo hunda qaama walfakkaataa garee qaree tokko keessatti fayyadami, <a>ykn <button>.
Garee qaree tokko keessatti qaree halluu adda addaa hin makiin.
Mallattoolee barruu dabalataa ykn bakka barruu fayyadami, garuu bakka barbaachisaa ta'etti barruu alt fi mata duree hammachuu mirkaneessi.

Gareen Qabduu walqabatan kanneen gadi bu'iinsa qaban (armaan gaditti ilaali) addaan waamamuu qabu fi yeroo hunda amala yaadame agarsiisuuf caret gadi bu'aa of keessaa qabaachuu qabu.

Fakkeenya durtii

Kunoo akkaataa HTML garee qaree istaandaardii qaree mallattoo anchor wajjin ijaarame barbaadu:

<div gita = "btn-garee" > 
  <qabduu gita = "btn" > 1 </button> 
  <qabduu gita = "btn" > 2 </button> 
  <buttooni gita = "btn" > 3 </button> 
</div> jechuun ni danda’ama

Fakkeenya barruu meeshaa

Tuutawwan of <div class="btn-group">gara <div class="btn-toolbar">atti qaamolee walxaxaa ta'aniif walitti makuu.

<div class = "btn-barruu meeshaa" > 
  <div gita = "btn-garee" > 
    ...
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Sanduuqa filannoo fi mi'aawwan raadiyoo

Gareen qaree akka raadiyoottis hojjechuu danda'u, bakka qaree tokko qofti socho'uu danda'u, ykn sanduuqawwan filannoo, bakka qaree lakkoofsi kamiyyuu socho'uu danda'u. Sanaaf docs Javascript ilaali .

Javascript argadhaa »

Garee qaree keessatti gadi bu'aa

Mataa ol qaba! Qabduulee gadi bu'oo qaban dhuunfaan kan isaanii .btn-groupkeessatti a keessaa marfamuu qabu .btn-toolbarsirriitti agarsiisuuf.

Qabduu kan gadi bu'u

Haala waliigalaa fi fakkeenyota

Qabduu kamiyyuu fayyadamii a keessa kaa'uu .btn-groupfi mallattoo sajoo sirrii kennuudhaan sajoo tarree kakaasuuf.

Fakkeenya mallattoo

Garee qaree wajjin wal fakkaata, mallattoon keenya mallattoo qaree idilee fayyadama, garuu dabalata muraasaan akkaataa fooyyessuu fi Bootstrap's dropdown jQuery plugin deeggaruuf.

<div gita = "btn-garee" > 
  <a class = "btn gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara-bu'aa" href = "#" >   
    Gocha
    <span gita = "kareettii" </span> 
  </a> jechuun ni danda’ama
  <ul class = "tarree-gadi-bu'aa" > 
    <!-- hidhamtoota menu gadi bu'aa -->
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Safara buttooni hunda waliin hojjeta

Button dropdowns guddina kamiinuu hojjetu. safara qaree kee gara .btn-large, .btn-small, ykn .btn-mini.

Javascript barbaada

Tarreewwan qaree akka hojjetuuf ifteessaan tarree Bootstrap barbaadu .

Haala tokko tokko keessatti—akkuma mobaayilaa—menuuwwan gadi bu'an balbala ilaalchaatiin ala ni babal'atu. Hiriirsa harkaan ykn javascript amalaatiin furuu qabda.

Tarreewwan qaree addaan qoodi

Haala waliigalaa fi fakkeenyota

Akkaataa garee qaree fi mallattoo irratti ijaaruun, salphaatti qaree qoqqoodinsaa uumuu dandeenya. Qabduulee qoqqoodinsaa gocha istaandaardii bitaa fi jijjiirraa tarree gara mirgaatti hidhannoowwan haalata waliin agarsiisu.

Saayiziiwwan

Gitaa qaree dabalataa .btn-mini, .btn-small, ykn safaraaf fayyadami .btn-large.

<div gita = "btn-garee" > 
  ...
  <ul class = "tarree-gadi-bu'aa harkisaa-mirga" > 
    <!-- hidhamtoota menu gadi bu'aa -->
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Fakkeenya mallattoo

Tarkaanfii qaree lammaffaa kan akka kaka'umsaa adda ta'ee hojjetu kennuudhaaf tarreewwan qaree idilee irratti bal'isna.

<div gita = "btn-garee" > 
  <button class = "btn" > Tarkaanfii </button> 
  <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >  
    <span gita = "kareettii" </span> 
  </button> jedhu qaba
  <ul class = "tarree-gadi-bu'aa" > 
    <!-- hidhamtoota menu gadi bu'aa -->
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Menuuwwan gadi bu'an

Akkasumas, sajoo gadi bu'aa gita tokko gara warra battalumatti dabaluudhaan jalaa gara oliitti jijjiiruun ni danda'ama .dropdown-menu. Kallattii kan garagalchee .caretfi menu ofii isaa irra deebi'ee bakka gubbaa gadi osoo hin taane jalaa gara oliitti socho'a.

<div class = "btn-garee gadi bu'uu" > 
  <button class = "btn" > Gadi bu'uu </button> 
  <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >  
    <span gita = "kareettii" </span> 
  </button> jedhu qaba
  <ul class = "tarree-gadi-bu'aa" > 
    <!-- hidhamtoota menu gadi bu'aa -->
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Durtii salphaa Mallattoo walfakkaataa, gita adda addaa

Gitaa bu'uuraa humna guddaa qabu

Qaamonni nav hundi asitti—caancala, kiniinii, fi tarreewwan— mallattoo bu'uuraa fi akkaataa walfakkaataa karaa .navgitaa qooddatu.

Yoom akka itti fayyadamnu

Tabs fi kiniinii kutaalee qabiyyee ykn fuula qabiyyee walqabatee jiru gidduutti naanna'uuf baay'ee gaarii dha.

Hiriirsa qaamolee

Hidhamtoota nav qindeessuuf, gitaalee .pull-leftykn faayidaa fayyadami. .pull-rightGitoonni lamaan kallattii ifteessame irratti CSS float ni dabalu.

Caancaloota bu'uuraa

Links regular fudhadhaatii <ul>itti dabalaa .nav-tabs:

<ul gita = "nav nav-tabs" > 
  <li gita = "socho'aa" > 
    <a href = "#" > Mana </a> 
  </li> jechuun ni danda’ama
  < li ><a href = "#" > ... Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
  < li ><a href = "#" > ... Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
</ul> jechuun ni danda’ama

Kiniinii bu'uuraa

HTML walfakkaataa sana fudhadhu, garuu .nav-pillsbakka isaa fayyadami:

<ul class = "nav nav-kiniinii" > 
  <li gita = "socho'aa" > 
    <a href = "#" > Mana </a> 
  </li> jechuun ni danda’ama
  < li ><a href = "#" > ... Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
  < li ><a href = "#" > ... Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
</ul> jechuun ni danda’ama

Tuulamaa Taaboota ykn kiniinii dhaabbataa taasisuu

Akkaataa 'em itti tuultan

Akkuma caancalaa fi kiniinii durtiidhaan qajeelaa ta'an, gita lammaffaa qofa dabali, .nav-stacked, akka isaan dhaabbataadhaan tuulaman akka mul'atan gochuuf.

Caancaloota walitti tuulaman

<ul class = "nav nav-tabs nav-tuulame" > 
  ...
</ul> jechuun ni danda’ama

Kiniinii walitti tuulame

<ul class = "nav nav-kiniinii nav-tuulame" > 
  ...
</ul> jechuun ni danda’ama

Dropdowns Qaamolee nav sadarkaa olaanaa qabaniif

Menuuwwan badhaadhaa salphaa ta'an

Menuuwwan gadi bu'an caancalaa fi kiniinii Bootstrap keessatti super salphaa fi HTML dabalataa xiqqoo fi jQuery plugin salphaa qofa barbaadu.

Bootstrap keessatti galmeewwan jalqabsiisuu irratti barreeffamoota dubbisuuf gara fuula Jaavascript qajeeli .

Caancaloota kanneen gadi bu'an qaban

<ul gita = "nav nav-tabs" > 
  <li class = "gadi bu'aa" > 
    <a class = "gadi-bu'aa-jijjiirraa". 
       data-toggle = "gadi bu'aa".
       href = "#" > jedhu
        Gadi bu'aa
        <b gita = "kaartaa" ></b> 
      </a> jechuun ni danda’ama
    <ul class = "tarree-gadi-bu'aa" > 
      <!-- walitti hidhamiinsa -->
    </ul> jechuun ni danda’ama
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Kiniinii kan dropdown qabu

<ul class = "nav nav-kiniinii" > 
  <li class = "gadi bu'aa" > 
    <a class = "gadi-bu'aa-jijjiirraa". 
       data-toggle = "gadi bu'aa".
       href = "#" > jedhu
        Gadi bu'aa
        <b gita = "kaartaa" ></b> 
      </a> jechuun ni danda’ama
    <ul class = "tarree-gadi-bu'aa" > 
      <!-- walitti hidhamiinsa -->
    </ul> jechuun ni danda’ama
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Tarreewwan Nav Navwwan salphaa tuulaman ijaari, barruulee cinaadhaaf baay'ee gaarii dha

Navigeeshinii akkaataa application

Tarreewwan Nav gareewwan hidhannoo nav mataduree filannoo waliin ijaaruuf karaa salphaa fi salphaa ta'e ni kennu. Isaanis sidebars akka Finder OS X keessatti fayyadamuun gaarii dha.

Caasaadhaan, isaan akkaataa nav hundee walfakkaataa kan caancalaa fi kiniinii irratti ijaaramaniiru, kanaaf itti fayyadamni fi dhuunfachiisuun qajeelaa dha.

Mallattoolee wajjin

Tarreewwan Nav akkasumas mallattoolee hidhachiisuun salphaadha. <i>Mallattoo sirrii gita waliin dabaliiti saagamteetta.

Qoqqoodduu horizontaalaa

Qabduu tarree duwwaa gita waliin uumuudhaan qooda qajeelaa dabali .divider, akkas:

<ul gita = "tarree-nav nav" > 
  ...
  <li gita = "qoqqoodduu" </li> 
  ...
</ul> jechuun ni danda’ama

Fakkeenya tarree nav

Tarree hidhannoo fudhadhaatii itti dabalaa class="nav nav-list":

<ul gita = "tarree-nav nav" > 
  <li gita = "nav-mataduree" > 
    Mataduree tarree
  </li> jechuun ni danda’ama
  <li gita = "socho'aa" > 
    <a href = "#" > Mana </a> 
  </li> jechuun ni danda’ama
  <li> jedhu
    <a href = "#" > Mana kitaabaa </a> 
  </li> jechuun ni danda’ama
  ...
</ul> jechuun ni danda’ama

Fakkeenya mallattoolee wajjin

Fakkeenya walfakkaataa, garuu <i>mallattooleedhaaf mallattoolee wajjin.

<ul gita = "tarree-nav nav" > 
  ...
  <li> jedhu
    <a href = "#" > jedhu 
      <i class = "kitaaba-mallattoo" </i> 
      Mana kitaabaa
    </a> jechuun ni danda’ama
  </li> jechuun ni danda’ama
  ...
</ul> jechuun ni danda’ama

Tabbable nav Caancaloota karaa javascript jireenyatti fidi

Waan dabalame

Qabiyyee gidduutti karaa caancalaa jijjiiruuf ifteessituu salphaa ta'een caancalaa kee jireenyatti fidi. Bootstrap caancala caancalaa akkaataa afuriin walitti fida: gubbaa (durtii), mirga, jalaa, fi bitaa.

Isaan gidduutti jijjiiruun salphaa fi markup baayyee xiqqaa jijjiiruu qofa barbaada.

Fakkeenya gabatee

Caancaloota caancala ta'an gochuuf, .nav-tabsin div biraa keessatti gita waliin marsi .tabbable.

Kutaa 1ffaa keessa jira.

Howdy, ani kutaa 2ffaa keessa jira.

What up girl, kun Kutaa 3ffaadha.

Ijaarsa jQuery amala

Caancaloota gabatee qaban hundinuu kan humna argatan jQuery plugin keenya salphaadha. Waa'ee akkaataa caancalaa caancalaa jireenyatti fiduu fuula javascript docs irratti bal'inaan dubbisi.

Javascript argachuu →

Mallattoo qajeelaa

Caancalawwan caancalaa fayyadamuun div marfataa, tuuta caancalaa, fi tuuta foddaa qabiyyee caancalaa barbaada.

<div class = "caancala" > 
  <ul gita = "nav nav-tabs" > 
    <li class = "socho'aa" ><a href = "#1" data-toggle = "caancala" > Kutaa 1 </a></li>   
    <li><a href = "#2" data-toggle = "caancala" > Kutaa 2ffaa </a></li>  
  </ul> jechuun ni danda’ama
  <div class = "qabiyyee-caancala" > 
    <div class = "caancala-qaree socho'aa" id = "1" >  
      <p> Kutaa 1ffaa keessa jira. </p>
    </div> jechuun ni danda’ama
    <div gita = "caancala-qaaqa" id = "2" >  
      <p> Howdy, ani kutaa 2ffaa keessa jira. </p>
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Kallattii kamiinuu tabbachuu danda'a

Caancaloota jala jiran

Tartiiba HTML garagalchiiti gita itti dabali caancalaa jala kaa'uuf.

Kutaa A keessa jira.

Howdy, ani kutaa B keessa jira.

What up girl, kun Kutaa C dha.

<div class = "caancalawwan caancala-armaan gadii" > 
  <div class = "qabiyyee-caancala" > 
    ...
  </div> jechuun ni danda’ama
  <ul gita = "nav nav-tabs" > 
    ...
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Caancala bitaa irratti argamu

Caancala bitaa irratti kaa'uuf gita jijjiiri.

Kutaa A keessa jira.

Howdy, ani kutaa B keessa jira.

What up girl, kun Kutaa C dha.

<div class = "caancalawwan caancala-bitaa" > 
  <ul gita = "nav nav-tabs" > 
    ...
  </ul> jechuun ni danda’ama
  <div class = "qabiyyee-caancala" > 
    ...
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Caancaloota gara mirgaa jiran

Caancala gara mirgaa kaa'uuf gita jijjiiri.

Kutaa A keessa jira.

Howdy, ani kutaa B keessa jira.

What up girl, kun Kutaa C dha.

<div class = "caancalawwan caancala-mirga" > 
  <ul gita = "nav nav-tabs" > 
    ...
  </ul> jechuun ni danda’ama
  <div class = "qabiyyee-caancala" > 
    ...
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Fakkeenya navbar static

Fakkeenya navbar istaatiksii (gubbaatti hin dhaabbanne) maqaa piroojektii, qajeelcha, fi unka barbaacha waliin.

Navbar iskaafooldii

Navbar agarsiisa static ykn dhaabbataadhaaf akka gaariitti caaseffachuuf divs muraasa qofa barbaada.

<div gita = "navbar" > 
  <div class = "navbar-keessaa" > 
    <div class = "qabduu" > 
      ...
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Navbar dhaabbataa ta'e

Navbar gara gubbaa ykn jala mul'ataa gita dabalataa div isa alaa irratti sirreessii, .navbar.

<div class = "navbar navbar-gubbaa-dhaabbataa" > 
  ...
</div> jechuun ni danda’ama

<div class = "navbar navbar-dhaabbataa-gadi" > 
  ...
</div> jechuun ni danda’ama

Yeroo navbar maxxansitu, naannoo dhokataa jala jiruuf herrega gochuu hin dagatin. 40px fi isaa ol apdding gara <body>. Kana booda Bootstrap CSS hundee booda fi CSS deebii filannoo dura dabaluu kee mirkaneessi.

Maqaa maqaa daldalaa

Link salphaa maqaa maqaa ykn pirojektii kee agarsiisuuf anchor tag qofa barbaada.

<a class = "maqaa" href = "#" >  
  Maqaa pirojektii
</a> jechuun ni danda’ama

Unkaalee navbar keessatti

Unkaa navbar keessaa sirritti akkaataa fi kaa'uuf, gitawwan barbaachisoo akka armaan gadiitti dabali. Unka durtiidhaaf, hammachuu .navbar-formfi yookaan yookaan .pull-leftsirriitti .pull-rightqindeessuuf.

< gita unkaa = "navbar-unkaa harkisaa-bitaa" > 
  < gosa galtee = "barruu" gita = "span2" >  
</form> jedhu

Unka barbaacha caalaatti dhuunfatameef, .navbar-searchakkaataa addaa navbar keessatti fudhachuuf gita dabali.

<form class = "navbar-barbaacha harkisaa-bitaa" > 
  < gosa galtee = "barruu" gita = "barbaadi-gaaffii" iddooqa = "Barbaadi" >   
</form> jedhu

Jijjiirama deebii filannoo

Hamma qabiyyee barruu gubbaa kee keessa jiru irratti hundaa'uun, filannoowwan deebii kennan hojiirra oolchuu barbaadda ta'a. Kana gochuuf, qabiyyee nav kee div of keessaa qabuun marsi, .nav-collapse.collapse, fi qaree jijjiirraa navbar itti dabali, .btn-navbar.

<div gita = "navbar" > 
  <div class = "navbar-keessaa" > 
    <div class = "qabduu" > 
 
      <!-- .btn-navbar akka jijjiirraa qabiyyee navbar kufeef fayyadama -->
      <a class = "btn btn-navbar" deetaa-jijjiirraa = "kufaatii" deetaa-galma = ".nav-kufaatii" >   
        <span class = "mallattoo-barruu" </span> 
        <span class = "mallattoo-barruu" </span> 
        <span class = "mallattoo-barruu" </span> 
      </a> jechuun ni danda’ama
 
      <!-- Yoo akka agarsiifamu barbaadde maqaa sana achi keessaa dhiisuu kee mirkaneessi -->
      <a class = "brand" href = "#" > Maqaa pirojektii </a>  
 
      <!-- Wanti barbaaddu hunda 940px fi isaa gadi dhoksuu, as keessa kaa'i -->
      <div class = "nav-kufaatii" > 
        <!-- .nav, .navbar-barbaacha, .navbar-unkaa fi kkf -->
      </div> jechuun ni danda’ama
 
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Mataa ol qaba! Navbar deebii kennu plugin kufaatii barbaada .

Nav hidhaa

Wantoonni Nav karaa tarreewwan hin tartiibamin dabaluudhaaf salphaadha.

<ul gita = "nav" > 
  <li gita = "socho'aa" > 
    <a href = "#" > Mana </a> 
  </li> jechuun ni danda’ama
  <li><a href = "#" > Hidhaa </a></li> 
  <li><a href = "#" > Hidhaa </a></li> 
</ul> jechuun ni danda’ama

Wanti tarree duwwaa fi gita salphaa ta'een salphaatti hiriyoota nav kee irratti qooddattoota dabaluu dandeessa. Kana hidhaa gidduutti dabaluu qofa:

<ul gita = "nav" > 
  ...
  <li class = "qoqqoodduu-dhaabbataa" </li> 
  ...
</ul> jechuun ni danda’ama

Hiriirsa qaamolee

Nav, unka barbaadi, ykn barruu qindeessuuf, gitaalee .pull-leftykn faayidaa fayyadami. .pull-rightGitoonni lamaan kallattii ifteessame irratti CSS float ni dabalu.

Menuuwwan gadi bu'an dabaluu

Nav irratti dropdowns fi dropups dabaluun super simple dha, garuu fayyadama javascript plugin keenyaa barbaada .

<ul gita = "nav" > 
  <li class = "gadi bu'aa" > 
    <a href = "#" jedhu. 
          class = "gadi-bu'aa-jijjiirraa".
          data-toggle = "gadi bu'aa" >
          Herrega
          <b gita = "kaartaa" ></b> 
    </a> jechuun ni danda’ama
    <ul class = "tarree-gadi-bu'aa" > 
      ...
    </ul> jechuun ni danda’ama
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Javascript argachuu →

Barruu navbar keessa jiru

Tarreewwan barruu mallattoo keessatti marsi, <p>dursaa fi halluu sirrii ta'eef.

Maaliif itti fayyadamna

Breadcrumb navigation akka karaa fayyadamtoonni bakka isaan appii ykn marsariitii keessa jiran agarsiisuutti fayyadama, garuu navigeeshinii jalqabaaf miti. Fayyadamni isaanii baay’ee bu’a qabeessa akka ta’uuf baay’ee xiqqaa fi gabaabaa taasisuu.

Fakkeenyaaf

Fakkeenyi tokko akka fuula hedduu irratti agarsiifamuu danda'utti agarsiifame.

Markup gochuu

HTML tarree tartiiba hin qabne istaandaardii kee kan hidhannoo qabudha.

<ul class = "daabboo" > 
  <li> jedhu
    <a href = "#" > Mana </a> <span gita = "qoqqoodduu" > / </span>   
  </li> jechuun ni danda’ama
  <li> jedhu
    <a href = "#" > Mana kitaabaa </a> <span gita = "qoqqoodduu" > / </span>   
  </li> jechuun ni danda’ama
  <li class = "socho'aa" > Deetaa </li> 
</ul> jechuun ni danda’ama

Fuula fuula baay'ee qabu

Yoom akka itti fayyadamnu

Ultra salphaa fi xiqqaa styled pagination Rdio irraa kaka'umsa, apps fi bu'aa barbaachaaf gaarii dha. Blookiin guddaan darbuun rakkisaadha, salphaatti kan guddatu, fi naannoo cuqaasuu gurguddoo kenna.

Hidhamtoota fuula haalaa

Hidhamtoonni haala barbaadamuun kan hojjetaman yoo ta'u, gita sirrii ta'een haalawwan baay'ee keessatti hojjetu. .disabledhidhannoowwan hin cuqaafneef akkasumas .activefuula ammaatiif.

Hiriirsa jijjiiramaa

Hiriirsa hidhannoo fuula jijjiiruuf gita filannoo lama keessaa tokko dabali: .pagination-centeredfi .pagination-right.

Fakkeenyaaf

Qaamni fuula durtii jijjiiramaa fi jijjiirama baay'ee keessatti hojjeta.

Markup gochuu

A keessatti marfamee <div>, fuula baasuun <ul>.

<div class = "fuula" > 
  <ul> jedhamuun beekama
    <li><a href = "#" > Duraa </a></li> 
    <li gita = "socho'aa" > 
      <a href = "#" > 1 </a> jedhu 
    </li> jechuun ni danda’ama
    < li ><a href = "#" > 2 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    < li ><a href = "#" > 3 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    < li ><a href = "#" > 4 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    <li><a href = "#" > Itti aanu </a></li> 
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Pager Linkii saffisaa duraa fi itti aanuuf

Waa'ee pager

Qaamni fuulaa tuuta hidhannoowwan hojiirra oolmaa fuula salphaa mallattoo ifaa fi akkaataawwan salphaa ta'an daran qabaniif. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.

Haalata hanqifame filannoo

Hidhamtoonni fuulaa .disabledgita waliigalaa fuula irraas fayyadamu.

Fakkeenya durtii

Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.

<ul gita = "pager" > 
  <li> jedhu
    <a href = "#" > Duraa </a> 
  </li> jechuun ni danda’ama
  <li> jedhu
    <a href = "#" > Itti aanu </a> 
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Hidhamtoota qindaa'an

Akka filannootti, tokkoon tokkoon hidhaa gara cinaachaatti qindeessuu dandeessa:

<ul gita = "pager" > 
  <li class = "duraa" > 
    <a href = "#" > Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo; Dullooman </a> 
  </li> jechuun ni danda’ama
  <li class = "itti aanu" > 
    <a href = "#" > Haaraa → </a> jechuun ni danda’ama 
  </li> jechuun ni danda’ama
</ul> jechuun ni danda’ama

Asxaalee	Markup gochuu
Durtii dha	`<span class="label">Default</span>`
Milkaa'ina	`<span class="label label-success">Success</span>`
Akeekkachiisa	`<span class="label label-warning">Warning</span>`
Barbaachisaa	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Faallaa	`<span class="label label-inverse">Inverse</span>`

Waa'ee

Baajiiwwan qaamolee xixiqqoo, salphaa agarsiisaa ykn lakkoofsa gosa tokkoo agarsiisuuf gargaarani dha. Isaanis maamiltoota email akka Mail.app ykn appii mobaayilaa irratti beeksisa dhiibuuf baay'inaan argamu.

Kutaawwan jiran

Maqaa	Fakkeenya	Markup gochuu
Durtii dha	1. 1.	`<span class="badge">1</span>`
Milkaa'ina	2. 2.	`<span class="badge badge-success">2</span>`
Akeekkachiisa	4.	`<span class="badge badge-warning">4</span>`
Dogoggora	6. 6.	`<span class="badge badge-error">6</span>`
Info	8.	`<span class="badge badge-info">8</span>`
Faallaa	10.	`<span class="badge badge-inverse">10</span>`

Goota kutaa

Bootstrap qabiyyee marsariitii keessan irratti agarsiisuuf qaama salphaa, socho'aa yuunitii goota jedhamu kenna. Marsariitiiwwan gabaa fi qabiyyee baay’atan irratti akka gaariitti hojjeta.

Markup gochuu

Qabiyyee keessan divakka like jedhutti marsi:

<div class = "kutaa-goota" > 
  <h1> Mata duree </h1>
  <p> Sarara mallattoo </p>
  <p> jedhu
    <a gita = "btn btn-duraa duubaa btn-guddaa" > 
      Caalaatti baradhaa
    </a> jechuun ni danda’ama
  </p> jechuun ni danda’ama
</div> jechuun ni danda’ama

Akkam jirtu addunyaa!

Kun yuunitii goota salphaadha, qabiyyee ykn odeeffannoo mul'ateef xiyyeeffannoo dabalataa waamuuf qaama salphaa akkaataa jumbotron-style dha.

Caalaatti baradhaa

Mata duree fuula

Qola salphaa kan h1to appropratiely space out fi kutaalee qabiyyee fuula tokko irratti qooduuf. Inni h1's durtii small, elementii akkasumas irra caalaan qaamolee biroo (akkaataa dabalataa wajjin) fayyadamuu danda'a.

<div class = "mata duree-fuula" > 
  <h1> Fakkeenya mataduree fuula </h1>
</div> jechuun ni danda’ama

Fakkiiwwan xiqqaa durtii

Akka durtiitti, fakkiiwwan xiqqaa Bootstrap fakkiiwwan walqabsiisan mallattoo xiqqaa barbaachisuun agarsiisuuf qophaa'aniiru.

Baay'ee kan ofii barbaade

Xiqqoo mallattoo dabalataatiin, qabiyyee HTML gosa kamiyyuu kan akka mata duree, keewwata, ykn qaree gara suuraa xiqqaatti dabaluun ni danda'ama.

Asxaa suuraa xiqqaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Gocha Gocha
Asxaa suuraa xiqqaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Gocha Gocha

Maaliif suuraa xiqqaa fayyadamna

Suuraaleen xiqqaan (duraan .media-gridhanga v1.4tti) giiridii suuraa ykn viidiyoo, bu'aa barbaacha suuraa, oomishaalee daldalaa, portfolio, fi kkf baay'ee gaarii dha. Isaanis hidhaa ykn qabiyyee static ta’uu danda’u.

Mallattoo salphaa, jijjiiramaa

Mallattoon suuraa xiqqaa salphaadha-a ullakkoofsa lielementoota kamiyyuu waliin waan barbaachisu qofa. Akkasumas super flexible dha, qabiyyee kee marsuuf gosa qabiyyee kamiyyuu mallattoo xiqqoo dabalataa qofaan hayyama.

Hammangaawwan tarjaa tarjaa fayyadama

Dhumarratti, qaamni suuraa xiqqaa gita sirna tarjaa jiran fayyadama—akka .span2ykn .span3—to'annoo dimenshinii suuraa xiqqaadhaaf.

Mallattoon isaa

Akkuma kanaan dura jedhame, mallattoo xiqqaadhaaf barbaachisu salphaa fi qajeelaa dha. Fakkiiwwan walqabsiifamaniif qindeessaa durtii kunooti :

<ul class = "fakkiiwwan xiqqaa" > 
  <li gita = "span3" > 
    <a href = "#" class = "fakkii xiqqaa" >  
      <img src = "https://www.bakka/bakka/260x180" alt = "" >  
    </a> jechuun ni danda’ama
  </li> jechuun ni danda’ama
  ...
</ul> jechuun ni danda’ama

Qabiyyee HTML amala suuraa xiqqaa keessatti, mallattoon xiqqoo jijjiirama. <a>Qabiyyee sadarkaa ugguraa bakka kamittiyyuu hayyamuuf, kan <div>akka akkasitti jijjiirra :

<ul class = "fakkiiwwan xiqqaa" > 
  <li gita = "span3" > 
    <div class = "fakkii xiqqaa" > 
      <img src = "https://www.bakka/bakka/260x180" alt = "" >  
      <h5> Asxaa suuraa xiqqaa </h5>
      <p> Barreeffama suuraa xiqqaa asitti... </p>
    </div> jechuun ni danda’ama
  </li> jechuun ni danda’ama
  ...
</ul> jechuun ni danda’ama

Fakkeenya dabalataa

Filannoowwan kee hunda gita tarjaa adda addaa siif jiran waliin qoradhu. Akkasumas safara adda addaa walitti makuu fi walsimsiisuu dandeessa.

Durtii salphaa

Kutaa bu'uuraa irra deebi'amee barreeffame

Bootstrap 2 waliin, gita bu'uuraa salphifneerra: .alertbakka .alert-message. Akkasumas mallattoo xiqqaa barbaachisu hir'isneerra-lakki <p>durtii barbaadamu, alaa qofa <div>.

Ergaa akeekkachiisaa tokko

Qaama koodii xiqqaa qabuuf yeroo dheeraa turuuf, ilaalcha adda baasuu akeekkachiisa ugguraa, ergaawwan padding baay'ee fi akkaataa idileetti barreeffama baay'ee wajjin dhufan haqneerra. Kutaan kunis gara .alert-block.

Javascript waliin baayyee gaarii deema

Bootstrap jQuery plugin guddaa ergaawwan akeekkachiisaa deeggaru waliin dhufa, isaan kuffisuu saffisaa fi salphaa taasisa.

Ijaarsa kana argadhu »

Fakkeenya akeekkachiisa

Ergaa kee fi mallattoo cufi filannoo div keessatti gita salphaa waliin marsi.

× Akeekkachiisa! Best check yo self, ati baayyee gaarii hin fakkaattu.

<div class = "akeekkachiisa" > 
  <a class = "cufi" data-dismiss = "akeekkachiisa" > × </a>  
  <strong> Akeekkachiisa! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu.
</div> jechuun ni danda’ama

Ergaa akeekkachiisaa istaandaardii gita filannoo lamaatiin salphaatti dheeressi: .alert-blocktoo'annoowwan guutuu fi barruu dabalataa fi .alert-headingmata duree walsimsiisuuf.

Akeekkachiisa!

Best check yo self, ati baayyee gaarii hin fakkaattu. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka.

<div class = "akeekkachiisa-uggura" > 
  <a class = "cufi" data-dismiss = "akeekkachiisa" > × </a>  
  <h4 class = "mata duree-akeekkachiisaa" > Akeekkachiisa! </h4> jechuun ni danda’ama 
  Best check yo self, ati hin jirtu...
</div> jechuun ni danda’ama

Filannoowwan yaadannoo Hiika akeekkachiisaa jijjiiruuf gita filannoo dabali

Dogoggora ykn balaa

× Yaa snap! Wantoota muraasa ol jijjiirii irra deebi'ii galchuu yaali.

<div class = "dogongora-akeekkachiisa akeekkachiisaa" > 
  ...
</div> jechuun ni danda’ama

Milkaa'ina

× Gaarii goote! Ergaa akeekkachiisaa barbaachisaa ta'e kana milkaa'inaan dubbisteetta.

<div class = "milkaa'ina-akeekkachiisa akeekkachiisaa" > 
  ...
</div> jechuun ni danda’ama

Odeeffannoo

× Mataa ol qaba! Alert kun xiyyeeffannoo keessan barbaada, garuu super important miti.

<div class = "odeeffannoo-akeekkachiisa akeekkachiisaa" > 
  ...
</div> jechuun ni danda’ama

Fakkeenyaafi mallattoo

Bu'uura

Sajoo adeemsa durtii kan garagalcha dhaabbataa qabu.

<div class = "adeemsa" > 
  <div gita = "barruu". 
       akkaataa = " bal'ina : 60 %; " ></div> 
</div> jechuun ni danda’ama

Sarara kan qabu

Bu'aa sarara qabu uumuuf garagalcha fayyadama (IE hin qabu).

<div class = "adeemsa adeemsa-sarara" > 
  <div gita = "barruu". 
       akkaataa = " bal'ina : 20 %; " ></div> 
</div> jechuun ni danda’ama

Animeeshinii kan qabu

Fakkeenya sarara qabu fudhatee ni jiraachisa (IE hin qabu).

<div class = "adeemsa adeemsa-sarara." 
     sochiirra jira" >
  <div gita = "barruu". 
       akkaataa = " bal'ina : 40 %; " ></div> 
</div> jechuun ni danda’ama

Filannoo fi deeggarsa biraawzari

Halluuwwan dabalataa

Sajoo adeemsaa qaree walfakkaataa tokko tokko fi gita akeekkachiisaa akkaataa walfakkaataaf fayyadamu.

Barruulee sarara qaban

Halluuwwan jajjaboo wajjin wal fakkaatuun, barruulee adeemsaa sarara adda addaa qaban qabna.

Amala

Barruulee adeemsaa ce'umsa CSS3 fayyadamu, kanaafuu yoo bal'ina karaa javascript daayinamiikiin sirreessite, haala salphaan guddina ni jijjiira.

Yoo .activegita fayyadamte, .progress-stripedbarruulee adeemsa kee sararoota bitaa gara mirgaatti ni sochoosu.

Deeggarsa biraawzari

Sajoo adeemsaa bu'aa isaanii hunda galmaan ga'uuf garaagarummaa CSS3, ce'umsaa, fi sochiiwwan fayyadamu. Amaloonni kun IE7-9 ykn gosoota Firefox durii keessatti hin deeggaraman.

Opera fi IE yeroo kanatti animation hin deeggaran.

Wells jedhama

Boolla akka bu'aa salphaa elementii tokko irratti fayyadamii bu'aa galtee kennuudhaaf.

Ilaa ani boolla bishaanii keessa jira!

<div gita = "tole" > 
  ...
</div> jechuun ni danda’ama

Mallattoo cufi

Qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf mallattoo cufiinsa waliigalaa fayyadami.

<a class = "cufi" > &yeroo; </a> jechuun ni danda’ama

Gareewwan qaree Dalagaa barruu meeshaa fakkaatu dabalataaf qaree walitti makami

Gareewwan buttooni

Muuxannoo gaarii

Fakkeenya durtii

Fakkeenya barruu meeshaa

Sanduuqa filannoo fi mi'aawwan raadiyoo

Garee qaree keessatti gadi bu'aa

Menuuwwan tarree qaree Gareewwan qaree irratti ijaaraman menuwwan haalata kennuudhaaf

Qabduu kan gadi bu'u

Haala waliigalaa fi fakkeenyota

Fakkeenya mallattoo

Safara buttooni hunda waliin hojjeta

Javascript barbaada

Tarreewwan qaree addaan qoodi

Haala waliigalaa fi fakkeenyota

Saayiziiwwan

Fakkeenya mallattoo

Menuuwwan gadi bu'an

Nav, tabs, fi kiniinii Navigeeshinii akkaataa tarree baay'ee dhuunfamuu danda'u

Durtii salphaa Mallattoo walfakkaataa, gita adda addaa

Gitaa bu'uuraa humna guddaa qabu

Yoom akka itti fayyadamnu

Hiriirsa qaamolee

Caancaloota bu'uuraa

Kiniinii bu'uuraa

Tuulamaa Taaboota ykn kiniinii dhaabbataa taasisuu

Akkaataa 'em itti tuultan

Caancaloota walitti tuulaman

Kiniinii walitti tuulame

Dropdowns Qaamolee nav sadarkaa olaanaa qabaniif

Menuuwwan badhaadhaa salphaa ta'an

Caancaloota kanneen gadi bu'an qaban

Kiniinii kan dropdown qabu

Tarreewwan Nav Navwwan salphaa tuulaman ijaari, barruulee cinaadhaaf baay'ee gaarii dha

Navigeeshinii akkaataa application

Mallattoolee wajjin

Qoqqoodduu horizontaalaa

Fakkeenya tarree nav

Fakkeenya mallattoolee wajjin

Tabbable nav Caancaloota karaa javascript jireenyatti fidi

Waan dabalame

Fakkeenya gabatee

Ijaarsa jQuery amala

Mallattoo qajeelaa

Kallattii kamiinuu tabbachuu danda'a

Caancaloota jala jiran

Caancala bitaa irratti argamu

Caancaloota gara mirgaa jiran

Navbar jedhama

Fakkeenya navbar static

Navbar iskaafooldii

Navbar dhaabbataa ta'e

Maqaa maqaa daldalaa

Unkaalee navbar keessatti

Jijjiirama deebii filannoo

Nav hidhaa

Hiriirsa qaamolee

Menuuwwan gadi bu'an dabaluu

Barruu navbar keessa jiru

Daabboo

Maaliif itti fayyadamna

Fakkeenyaaf

Markup gochuu

Fuula Filannoo lama qabiyyee keessaa fuula baasuuf

Fuula fuula baay'ee qabu

Yoom akka itti fayyadamnu

Hidhamtoota fuula haalaa

Hiriirsa jijjiiramaa

Fakkeenyaaf

Markup gochuu

Pager Linkii saffisaa duraa fi itti aanuuf

Waa'ee pager

Haalata hanqifame filannoo

Fakkeenya durtii

Hidhamtoota qindaa'an

Asxaalee sarara keessaa Barruu asxaa fi ibsi

Baajiiwwan Agarsiistota fi lakkoofsa hin dubbifamne

Waa'ee

Kutaawwan jiran

Qaamolee maxxansaa Mataduree fuulaa fi kutaa goota qabiyyee qoqqooduuf