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.

Akkasumas tuutawwan <div class="btn-group">gara a <div class="btn-toolbar">pirojektoota walxaxaa ta'aniif walitti makuu dandeessa.

Fakkeenya mallattoo

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

<div gita = "btn-garee" > 
  <a gita = "btn" href = "#" > 1 </a>  
  <a gita = "btn" href = "#" > 2 </a>  
  <a gita = "btn" href = "#" > 3 </a>  
</div> jechuun ni danda’ama

Akkasumas barruu meeshaa gareewwan hedduudhaaf:

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

Mataa ol qabata

CSS gareewwan qaree faayilii addaa keessa jira, button-groups.less.

Qabduu kan gadi bu'u

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

Tarreewwan qaree addaan qoodi

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.

Fakkeenya mallattoo

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

<div gita = "btn-garee" > 
  <a class = "btn" href = "#" > Tarkaanfii </a>  
  <a class = "btn gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara-bu'aa" href = "#" >   
    <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

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.

Maaliif tabs fi kiniinii

<ul>Caancaloota fi kiniinii Bootstrap keessatti a HTML hundee walfakkaataa qabu irratti ijaaramaniiru , tarree hidhannoowwanii. Taaboota ykn kiniinii gita qofa qaban gidduutti jijjiiri.

Filannoon lamaan kutaalee xiqqaa qabiyyee ykn fuula qabiyyee walqabatee jiru gidduutti naanna'uuf baay'ee gaarii dha.

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.

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 gubbaa mul'ataa irratti akka dhaabbataa gochuuf, .navbar-fixed-topgara div isa alaatti dabali, .navbar. CSS kee keessatti, akkasumas wal-irra bu'iinsa inni padding-top: 40px;fiduu kee irratti dabaluudhaan herrega baasuu si barbaachisa <body>.

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

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

Unka barbaadi

Unkaaleen barbaacha akkaataa amala navbar keessatti .navbar-searchgita waliin fudhatu. Itti hiriirsuuf .pull-leftykn .pull-rightirratti dabali .form

<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

Tarreewwan gadi bu'an dabaluu

Nav irratti dropdowns dabaluun super salphaadha, 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 →

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 gita = "socho'aa" > 
    <a href = "#" > Deetaa </a> 
  </li> jechuun ni danda’ama
</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 akkaataa salphaa daran qabaniif. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.

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>`
Haaraa	`<span class="label label-success">New</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>`

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, outter 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 gita = "cufi" > × </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 gita = "cufi" > × </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.

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

Animeeshinii kan qabu

Fakkeenya sarara qabu fudhatee ni jiraachisa.

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

Filannoo fi deeggarsa biraawzari

Halluuwwan dabalataa

Sajoo adeemsaa maqaa gitaa walfakkaataa tokko tokko akka qaree fi akeekkachiisa akkaataa walfakkaataaf fayyadamu.

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

Akka filannootti, faayilii LESS dhuunfachuu fi halluuwwanii fi hammangaa mataa keetii garagalchuu dandeessa.

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-8 ykn gosoota Firefox durii keessatti hin deeggaraman.

Opera yeroo kanatti animations hin deeggaru.

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

Baajiiwwan

Baajii elementii irratti lakkoofsa hin dubbifamneef ykn akka agarsiiftuu salphaatti fayyadami.

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

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

Fakkeenya mallattoo

Sanduuqa filannoo fi mi'aawwan raadiyoo

Mataa ol qabata

Tarreewwan qaree Sajoo kamshaa haalata gareewwan qaree irratti ijaaraman

Qabduu kan gadi bu'u

Fakkeenya mallattoo

Tarreewwan qaree addaan qoodi

Fakkeenya mallattoo

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

Maaliif tabs fi kiniinii

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

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

Maqaa maqaa daldalaa

Unka barbaadi

Jijjiirama deebii filannoo

Nav hidhaa

Tarreewwan gadi bu'an dabaluu

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

Fakkeenya durtii

Hidhamtoota qindaa'an

Asxaalee sarara keessaa Barruu asxaa fi ibsi

Suuraalee Xiqqaa Giriidota fakkiiwwanii, viidiyoo, barruu fi kkf

Fakkiiwwan xiqqaa durtii

Baay'ee kan ofii barbaade

Asxaa suuraa xiqqaa

Asxaa suuraa xiqqaa

Maaliif suuraa xiqqaa fayyadamna

Mallattoo salphaa, jijjiiramaa

Hammangaawwan tarjaa tarjaa fayyadama

Mallattoon isaa

Fakkeenya dabalataa

Akeekkachiisa Akkaataa milkaa'ina, akeekkachiisa, fi ergaawwan dogongoraa

Durtii salphaa

Kutaa bu'uuraa irra deebi'amee barreeffame

Ergaa akeekkachiisaa tokko

Javascript waliin baayyee gaarii deema

Fakkeenya akeekkachiisa

Akeekkachiisa!

Filannoowwan yaadannoo Hiika akeekkachiisaa jijjiiruuf gita filannoo dabali