Gareewwan buttooni

Gareewwan qaree fayyadamii qaree hedduu akka qaama walmakaa tokkootti walitti makuuf. 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" > 
  <a gita = "btn" href = "#" > 1 </a>  
  <a gita = "btn" href = "#" > 2 </a>  
  <a gita = "btn" href = "#" > 3 </a>  
</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 »

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 menu sirrii ta'e kennuudhaan sajoo tarree kakaasuuf.

Mataa ol qaba! Tarreewwan qaree akka hojjetuuf ifteessaan tarree Bootstrap barbaadu .

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 gadi bu'aa mirga irratti 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

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:

• Mana
• Ibsama
• Ergaawwan

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

• Mana
• Ibsama
• Ergaawwan

<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

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

• Mana
• Ibsama
• Ergaawwan

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

Kiniinii walitti tuulame

• Mana
• Ibsama
• Ergaawwan

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

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

• Mana
• Ibsama
• Gadi bu'aa
  • Gocha
  • Tarkaanfii biraa
  • Waan biraa asitti
  • Link adda baafame

<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

• Mana
• Ibsama
• Gadi bu'aa
  • Gocha
  • Tarkaanfii biraa
  • Waan biraa asitti
  • Link adda baafame

<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

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

Waan dabalame

Qabiyyee gidduutti karaa caancalaa jijjiiruuf ifteessituu salphaa ta'een caancalaa kee jireenyatti fidi. Bootstrap caancala caancala 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.

Ijaarsa jQuery amala

Caancaloota gabatee qaban hundinuu pilaaginii jQuery salphaa keenyaan humna argatu. Waa'ee akkaataa caancalaa caancalaa jireenyatti fiduu fuula javascript docs irratti bal'inaan dubbisi.

Javascript argachuu →

Caancaloota jala jiran

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

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

<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

Caancalawwan gara mirgaa jiran

Caancala gara mirgaa kaa'uuf gita jijjiiri.

<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

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 gubbaa mul'ataa irratti akka dhaabbataa gochuuf, .navbar-fixed-topgara div isa alaatti dabali, .navbar.

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

CSS kee keessatti, akkasumas wal-irra bu'iinsa inni fidu herrega 40px fi isaa ol padding kee irratti dabaluudhaan si barbaachisa <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 gita = "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

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, ykn .pull-leftfayyadami.pull-right gitaaleeGitoonni lamaan kallattii ifteessame irratti CSS float ni dabalu.

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.

• Mana

• Home / 1. .
• Mana kitaabaa

• Home / 1. .
• Mana kitaabaa / .
• Odeeffannoo funaaname

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

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

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.

Fakkeenya durtii

Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.

• Kan duraa
• Kan itti aanu

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

• ← Dulloome
• Haaraa →

<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

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

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 = "fuula-haeder" > 
  <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.

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>akka durtiitti barbaachisaadha, kan 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.

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

<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

Dogoggora ykn balaa

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

Milkaa'ina

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

Odeeffannoo

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

Bu'uura

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect.

<div class="progress progress-info
     progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animated

Takes the striped example and animates it.

<div class="progress progress-danger
     progress-striped active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

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

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

Baajiiwwan

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

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

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