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

Akkaataa HTML garee qaree istaandaardii qaree mallattoo anchor wajjin ijaarame barbaadu kunooti:

<div gita = "btn-garee" > 
  <buttooni gita = "btn" > 1 </button> 
  <qabduu gita = "btn" > 2 </button> 
  <qabduu 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.

Haala waliigalaa fi fakkeenya

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 = "kaartaa" </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.

Haala waliigalaa fi fakkeenya

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.

Saayiziiwwan

Gitoota qaree dabalataa .btn-mini, .btn-small, ykn .btn-largesafaraaf fayyadami.

<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 akka kaka'umsa tarree adda ta'etti 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 = "kaartaa" </span> 
  </button> jedhu
  <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

Menuuwwan gadi bu'aa akkasumas gita tokko warra battalumatti dabaluudhaan jalaa gara oliitti jijjiiruun ni danda'ama .dropdown-menu. Kallattii garagalcha .caretfi menu ofii isaatii 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 = "kaartaa" </span> 
  </button> jedhu
  <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
• Gargaaruu
• Gadi bu'aa
  • Action
  • Another action
  • Something else here
  • Separated link

<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
• Gargaaruu
• Gadi bu'aa
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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.

Caancala keessatti fade

Caancaloota akka keessaa bahan gochuuf, .fadetokkoon tokkoon .tab-pane.

Ijaarsa jQuery barbaada

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 →

Fakkeenya gabatee

.tab-paneCaancalawwan caancala akka ta'an gochuuf, caancala hundaaf ID addaa qabu uumuun .tab-content.

Caancaloota mirgaa ykn bitaa qindaa'aniif, .nav-tabsfi .tab-contentkeessatti marsi .tabbable.

Mallattoo qajeelaa

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

<div class = "tabbable" > <!-- Caancala bitaa/mirgaa qofaaf barbaachisa -->  
  <ul gita = "nav nav-tabs" > 
    <li class = "socho'aa" ><a href = "#tab1" data-toggle = "caancala" > Kutaa 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "caancala" > Kutaa 2ffaa </a></li>  
  </ul> jechuun ni danda’ama
  <div class = "qabiyyee-caancala" > 
    <div class = "caancala-qaree socho'aa" id = "caancala1" >  
      <p> Kutaa 1ffaa keessa jira. </p>
    </div> jechuun ni danda’ama
    <div class = "caancala-qaaqa" id = "caancala2" >  
      <p> Howdy, ani kutaa 2ffaa keessa jira. </p>
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

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

Caancaloota 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 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. Padding 40px fi isaa ol 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, galtee akkaataa addaa navbar keessatti fi .navbar-searchirratti dabali.form.search-query

<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, 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 a keessatti marsi <.navbar-text>, yeroo baay'ee <p>dursaa fi halluu sirrii ta'eef mallattoo irratti.

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 class = "socho'aa" > Deetaa </li> 
</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.

Haalata hanqifame filannoo

Hidhamtoonni fuulaa .disabledgita waliigalaa fuula irraas fayyadamu.

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

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

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-dursaa btn-guddaa" > 
      Caalaatti baradhaa
    </a> jechuun ni danda’ama
  </p> jechuun ni danda’ama
</div> jechuun ni danda’ama

Qaaqa salphaa h1kutaa qabiyyee fuula tokko irratti haala sirrii ta'een addaan baasuu fi 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.

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.

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

Mataa ol qaba! Meeshaaleen iOS href="#"akeekkachiisa kuffisuuf an barbaadu. Isaa fi amalli deetaa mallattoolee cufiinsa anchor tiif hammachuu mirkaneessi. Akka filannootti, elementii amaloota deetaa qabu fayyadamuu dandeessa <button>, kan nuti docs keenyaaf gochuu filanneerra. Yeroo fayyadamtu <button>, dabaluu qabda type="button"ykn unkaawwan kee dhiyeessu dhiisuu danda’u.

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

<div class = "akeekkachiisa-uggura" > 
  <a class = "cufi" data-dismiss = "akeekkachiisa" href = "#" > × </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

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

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.

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

Mallattoo cufi

Qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf mallattoo cufiinsa waliigalaa fayyadami.

×

<button class = "cufi" > &yeroo; </button> jedhu 

Meeshaaleen iOS yoo anchor fayyadamuu filatte taateewwan cuqaasuuf href="#" barbaadu.

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