Mata dureewwan

Mata dureewwan HTML hundi, <h1>karaa <h6>ni argamu.

h1. Mata duree 1.

h2. Mata duree 2.

h3. Mata duree 3.

h4. Mata duree 4.

h5. Mata duree 5.

h6. Mata duree 6.

Koppii qaamaa

Bootstrap'n durtii addunyaa 14pxfont-size , a of 20px waliin . Kunis keewwata fi hunda irratti raawwatiinsa qaba. Dabalataanis, (keewwattoonni) margina jalaa walakkaa sarara-olka'iinsa isaanii (10px durtii) argatu.line-height<body><p>

Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Nullam id dolor id nibh ultricies konkolaataa.

Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Donec ullamcorper nulla kan hin meetus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit. Donec ullamcorper nulla kan hin meetus auctor fringilla.

Maecenas sed diam eget risus varius blandit taa'uu amet non magna. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit.

<p> ... </p> jedhu

Koppii qaama dursaa

Keeyyatni tokko .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii. Duis mollis, est kan koomoodoo hin taane.

<p gita = "hogganaa" > ... </p>

Xiqqaadhaan ijaarame

Iskeeliin maxxansaa jijjiiramoota keessatti jijjiiramoota LESS lama irratti hundaa'a.less : @baseFontSizefi @baseLineHeight. Inni jalqabaa hammangaa qubee bu'uuraa guutummaatti fayyadamu yoo ta'u inni lammaffaan immoo olka'iinsa sarara bu'uuraati. Jijjiiramoota sanaa fi herrega salphaa tokko tokko fayyadamnee margaa, paadiingii, fi sarara-olka'iinsa akaakuu keenya hundaafi kkf uumna. Isaan kana dhuunfachiisi Bootstrap ni madaqsa.

Xiyyeeffannoo

Mallattoolee cimsa durtii HTML akkaataa salphaa qaban fayyadami.

`<small>`

Sarara keessaa ykn uggura barruu cimsuu irraa hir'isuuf, mallattoo xiqqaa fayyadami.

Sararri barruu kun akka qubee xiqqaatti akka ilaalamu yaadameeti.

<p> <xiqqaa> Sararri barruu kun akka qubee xiqqaatti akka ilaalamu yaadame. </xiqqaa> </p>

Ija jabeessa

Cuqqaa barruu ulfaatina qubee ulfaataa ta'een cimsuuf.

Kutaan barruu armaan gadii akka barruu jajjabootti agarsiifama .

<strong> akka barruu jajjabootti agarsiifame </strong>

Qubee jallisii

Cuqqaa barruu qubee jallisiitiin cimsuuf.

Kutaan barruu armaan gadii akka barruu jallisii ta'etti agarsiifama .

<em> akka barruu jallisii ta'etti agarsiifame </em>

Mataa ol qaba!Fayyadamuuf bilisa ta'aa <b>fi <i>HTML5 keessatti. <b>jechoota ykn gaaleewwan barbaachisummaa dabalataa osoo hin dabarsin calaqqisiisuuf kan yaadame yoo ta’u <i>irra caalaa sagalee, jechoota teeknikaa fi kkf kan ta’udha.

Kutaalee cimsuu

Hiika karaa halluu daree faayidaa cimsuu harka muraasaan dabarsuu.

Fusce dapibus, tellus ac abaarsa koomoodoo, tortor mauris nibh jedhamuun beekama.

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Donec ullamcorper nulla kan hin meetus auctor fringilla.

Aenean eu leo quam jedhamuun beekama. Pellentesque ornare kan jedhaman yoo ta’u, isaanis.

Duis mollis, est non commodo luctus, nisi erat ligulaa geejjibaa.

<p class = "muted" > Fusce dapibus, tellus ac abaarsa koomoodoo, tortor mauris nibh. </p> jechuun ni danda’ama 
<p class = "barreeffama-akeekkachiisa" > Etiam porta sem malesuada magna mollis euismod. </p> jechuun ni danda’ama 
<p class = "dogongora-barruu" > Donec ullamcorper nulla non metus auctor fringilla. </p> jechuun ni danda’ama 
<p class = "odeeffannoo-barruu" > Aenean eu leo quam. Pellentesque ornare kan jedhaman yoo ta’u, isaanis. </p> jechuun ni danda’ama 
<p class = "barreeffama-milkaa'ina" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> jechuun ni danda’ama

Gabateewwan

Hojiirra oolmaa istaayil ta'e <abbr>elementii HTML's gabaabduu fi gabaabduudhaaf gosa babal'ate hover irratti agarsiisuuf. Gabateewwan titleamaloota qaban daangaa jalaa tuqaa ifaa fi qaree gargaarsaa yeroo hover qabu qabu, hover irratti yaada dabalataa kenna.

`<abbr>`

Barruu babal'ifame irratti gadi fageenya dheeraa gabaabduu irratti, titleamaloota hammachiisi.

Gabaabduun jecha amaloota attr dha .

<abbr mata duree = "amala" > attr </abbr>

`<abbr class="initialism">`

.initialismQubee-size xiqqoo xiqqaa ta'eef gabaabduutti dabali .

HTML erga daabboo ciranii as waan hunda caaludha.

<abbr title = "Afaan Mallattoo Barruu Ol'aanaa" class = "jalqaba" > HTML </abbr>

Teessoowwan

Odeeffannoo quunnamtii akaakayyuu dhiyoo jiruuf ykn qaama hojii guutuuf dhiyeessu.

`<address>`

Sararoota hunda waliin xumuruun foormaatii eegi <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
Saan Firaansiiskoo, CA 94107
P: (123) 456-7890. Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo

Maqaa Guutuu
[email protected]

<teessoo> jedhu
  <strong> Tiwiitara, Ink. </strong><br>
795 Folsom Ave, Suutaa   600 irratti kan argamu yoo ta'u, 1999
  Saan Firaansiiskoo, CA 94107 <br>
  <abbr mata duree = "Bilbila" > P: </abbr> (123) 456-7890 
</teessoo> jedhu
 
<teessoo> jedhu
  <strong> Maqaa Guutuu </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</teessoo> jedhu

Jechoota ugguraa

Galmee kee keessaa madda biraa irraa uggura qabiyyee caqasuudhaaf.

Caqasa uggura durtii

HTML<blockquote> kamiyyuu akka caqasaatti marsi . Caqasoota qajeeloodhaaf a .<p>

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

<caqasa ugguraa>
  <p> Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante. </p> jechuun ni danda’ama
</blockquote> jedhu

Filannoowwan caqasaa ugguruu

Jijjiirama akkaataa fi qabiyyee jijjiirama salphaa istaandaardii blockquote irratti.

Madda tokko moggaasuu

<small>Madda adda baasuuf mallattoo itti dabali . Maqaa hojii madda <cite>.

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.
Mata duree Madda keessatti nama beekamaa

<caqasa ugguraa>
  <p> Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante. </p> jechuun ni danda’ama
  <xiqqaa> Nama beekamaa <cite title = "Mata duree Madda" > Mata duree Madda </cite></small> 
</blockquote> jedhu

Agarsiisa wal jijjiirraa

.pull-rightCaqasaa ugguraa lola'aa, mirgaan qindaa'eef fayyadami .

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.
Mata duree Madda keessatti nama beekamaa

<blockquote class = "harkisuu-mirga" > 
  ...
</blockquote> jedhu

Tarreewwan

Ajaja hin qabne

Tarree wantoota tartiiba ifatti dhimma hin qabne.

Lorem ipsum dolor taa'aa amet
Consectetur adipiscing elit jedhamuun beekama
Lakkoofsa guutuu molestie lorem at mass
Faasilisis kan pretium nisl aliquet keessatti argamu
Nulla volutpat alikiyaam velit jedhamuun beekama
- Phasellus iaculis neque jedhamuun beekama
- Purus sodales ultricies jedhamuun beekama
- Vestibulum laoreet porttiitor sem
- Ak tristique libero volutpat irratti
Faucibus porta lacus fringilla vel jedhamuun beekama
Aenean taa'u amet erat nunc
Eget porttitor lorem jedhamtu

<ul> jedhamuun beekama
  <li> ... </li> jedhu
</ul> jechuun ni danda’ama

Ajajame

Tarree wantoota tartiiba ifatti dhimma itti bahu .

Lorem ipsum dolor taa'aa amet
Consectetur adipiscing elit jedhamuun beekama
Lakkoofsa guutuu molestie lorem at mass
Faasilisis kan pretium nisl aliquet keessatti argamu
Nulla volutpat alikiyaam velit jedhamuun beekama
Faucibus porta lacus fringilla vel jedhamuun beekama
Aenean taa'u amet erat nunc
Eget porttitor lorem jedhamtu

<ol> jedhamuun beekama
  <li> ... </li> jedhu
</ol>dha

Unstyled ta'e

Wantoota tarree irratti qaaqa durtii list-stylefi bitaa haqi (ijoollee battalaa qofa).

Lorem ipsum dolor taa'aa amet
Consectetur adipiscing elit jedhamuun beekama
Lakkoofsa guutuu molestie lorem at mass
Faasilisis kan pretium nisl aliquet keessatti argamu
Nulla volutpat alikiyaam velit jedhamuun beekama
- Phasellus iaculis neque jedhamuun beekama
- Purus sodales ultricies jedhamuun beekama
- Vestibulum laoreet porttiitor sem
- Ak tristique libero volutpat irratti
Faucibus porta lacus fringilla vel jedhamuun beekama
Aenean taa'u amet erat nunc
Eget porttitor lorem jedhamtu

<ul class = "hin style" > 
  <li> ... </li> jedhu
</ul> jechuun ni danda’ama

Sarara keessaa

Wantoota tarree hunda sarara tokko irratti inline-blockfi padding ifaa tokko tokko waliin kaa'i.

Lorem ipsum jedhamuun beekama
Phasellus iaculis jedhamuun beekama
Nullaa volutpat jedhamtu

<ul class = "sarara keessaa" > 
  <li> ... </li> jedhu
</ul> jechuun ni danda’ama

Ibsa

Tarree jechoota ibsa isaanii waliin walqabatan waliin.

Tarreewwan ibsa: Tarreen ibsa jechoota hiikuuf mijataa dha.
Euismod jedhama: Vestibulum id ligula porta felis euismod sanyiin eget laasiiniyaa odio sem nec elit.; Donec id elit non mi porta gravida yeroo eget metus jedhamutti.
Malesuada portaa jedhama: Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

<dl> jedhu
  <dt> ... </dt> jedhu
  <dd> ... </dd> jedhu
</dl> jechuun ni danda’ama

Ibsa qajeelaa

Jechootaa fi ibsawwan <dl>wal cinaa sararaan tolchi.

Tarreewwan ibsa: Tarreen ibsa jechoota hiikuuf mijataa dha.
Euismod jedhama: Vestibulum id ligula porta felis euismod sanyiin eget laasiiniyaa odio sem nec elit.; Donec id elit non mi porta gravida yeroo eget metus jedhamutti.
Malesuada portaa jedhama: Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.
Felis euismod semper eget laasiiniyaa jedhamuun beekama: Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum massa qofa taa'uu amet risus.

<dl gita = "dl-horizontal" > 
  <dt> ... </dt> jedhu
  <dd> ... </dd> jedhu
</dl> jechuun ni danda’ama

Mataa ol qaba!Tarreewwan ibsa qajeelaa jechoota sirreeffama tarjaa bitaa keessatti walsimsiisuuf baay'ee dheeraa ta'an ni muru text-overflow. Buufatawwan ilaalchaa dhiphoo ta'an keessatti, gara qindaa'ina durtii tuulameetti ni jijjiiramu.

Sarara keessaa

Cuquliisa koodii sarara keessaa waliin marsi <code>.

Fakkeenyaaf, <section>akka sarara keessaatti marfamuu qaba.

Fakkeenyaaf , < koodii ><kutaa> </ koodii > akka sarara keessaatti marfamuu qaba .

Blookii bu'uuraa

<pre>Sararoota koodii hedduudhaaf fayyadami . Sirnaan agarsiisuuf koodii keessatti qaree kofa kamiyyuu miliquu kee mirkaneessi.

<p>Barruu fakkeenyaa asitti...</p>

<duraa> jedhu
  <p>Barruu fakkeenyaa asitti...</p>
</pre> jedhu

Mataa ol qaba!<pre>Koodii mallattoolee keessaa hanga danda'ametti bitaatti dhihoo kaa'uu kee mirkaneessi ; caancala hunda ni agarsiisa.

Filannoodhaan .pre-scrollablegita kan olka'iinsa guddaa 350px saaguu fi barruu qaxxaamuraa siiqqe y kennuu dabaluu dandeessa.

Akkaataawwan durtii

Akkaataa bu'uuraatiif—paadiingii ifaa fi qoqqoodduu qajeelaa qofaaf—gita bu'uuraa .tablekamiyyuutti dabali <table>.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

< gita gabatee = "gabatee" > 
  ...
</table> jedhu

Kutaawwan filannoo

.tableGitoota armaan gadii keessaa kamiyyuu gara gita bu'uuraatti dabali .

`.table-striped`

<tbody>Tarree gabatee kamiyyuu karaa filannoo CSS keessaa zebra-striping dabalata :nth-child(IE7-IE8 keessatti hin argamu).

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

< gita gabatee = "gabatee gabatee-sarara" > 
  ...
</table> jedhu

`.table-bordered`

Daangaawwanii fi goleewwan geengoo ta'an gabatee irratti dabali.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
1. 1.	Maarqos	Otto	@getbootstrap irratti argattu
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

< gita gabatee = "gabatee gabatee-daangaa" > 
  ...
</table> jedhu

`.table-hover`

Tarreewwan gabatee irratti haalata hover a keessaa dandeessisi <tbody>.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

< gita gabatee = "gabatee-hover" > 
  ...
</table> jedhu

`.table-condensed`

Paadiingii seelii walakkaatti muruun minjaalota caalaatti kompaaktii taasisa.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Maqaa fayyadamaa
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

< gita gabatee = "gabatee gabatee-gabatee" > 
  ...
</table> jedhu

Gitoota tarree filannoo

Tarreewwan gabatee halluu itti gochuuf gitawwan yaadannoo fayyadami.

Kutaa	Ibsa
`.success`	Tarkaanfii milkaa’aa ykn gaarii agarsiisa.
`.error`	Tarkaanfii balaa qabu ykn hamaa ta’uu danda’u agarsiisa.
`.warning`	Akeekkachiisa xiyyeeffannoo barbaadu ta’uu danda’u agarsiisa.
`.info`	Akka filannootti akkaataa durtii fayyadama.

#	Oomisha	Kaffaltii Fudhatame	Sadarkaa
1. 1.	TB - Ji'a ji'aan	01/04/2012 gaafate	Mirkanaa'e
2. 2.	TB - Ji'a ji'aan	02/04/2012 gaafate	Kufe
3. 3.	TB - Ji'a ji'aan	03/04/2012 gaafate	Eeggataa kan jiru
4. 4.	TB - Ji'a ji'aan	04/04/2012 gaafate	Mirkaneessuuf bilbili

...
  < tr class = "milkaa'ina" >
    <td> 1 < /td> jedhu
    <td>TB - Ji'a ji'aan</ td >
    <td> 01 / 04 / 2012 < /td> Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
    <td>Raggaasifame</ td >
  </ tr > jechuudha
...

Mallattoo gabatee deeggarame

Tarree qaamolee HTML gabatee deeggaramanii fi akkaataa isaan itti fayyadamuu qaban.

Adda baasuuf mallattoo wayitti maxxanfamu	Ibsa
`<table>`	Qaama marmaa deetaa bifa gabatee agarsiisuuf
`<thead>`	Qabeentaa qabduu tarreewwan mataduree gabatee ( `<tr>`) gara tarjaawwan gabatee asxaa
`<tbody>`	Qaama qabduu tarreewwan gabatee ( `<tr>`) qaama gabatee keessatti
`<tr>`	Qaama qabduu tuuta man'eewwan gabatee ( `<td>`ykn `<th>`) tarree tokko irratti mul'atuuf
`<td>`	Man'ee gabatee durtii
`<th>`	Man'ee gabatee addaa asxaalee tarjaa (ykn tarree, bal'inaafi iddoo irratti hundaa'uun) a keessaa fayyadamuu qaba`<thead>`
`<caption>`	Ibsa ykn gabaabduu waan gabatee qabatu, keessumaa dubbistoota iskiriiniif faayidaa qaba

<gabatee> jedhu
  <barreeffama mata duree> ... </caption>
  <mataa> jedhu
    <tr> jedhu
      <th> ... </th> jedhu
      <th> ... </th> jedhu
    </tr>dha
  </thead> jedhu
  <qaama> jedha
    <tr> jedhu
      <td> ... </td> jedhu
      <td> ... </td> jedhu
    </tr>dha
  </tbody> jedhu
</table> jedhu

Akkaataawwan durtii

To'annoon unkaa dhuunfaa akkaataa fudhatu, garuu gita bu'uuraa barbaadamu tokko malee irratti <form>ykn jijjiirama guddaa mallattoo irratti. Bu'aan asxaalee tuulamanii, bitaa-hiriirfaman too'annoo unkaa gubbaatti argamsiisa.

<unka> jedhu
  <tuuta dirree>
    <sheekkoo> Oduu durii </legend>
    <label> Maqaa asxaa </label>
    <input type = "text" placeholder = "Waan tokko barreessi..." >  
    <span class = "help-block" > Fakkeenya barruu gargaarsaa sadarkaa ugguraa asitti. </span> jechuun ni danda’ama 
    < gita asxaa = "sanduuqa filannoo" > 
      <input type = "checkbox" > Na ilaali 
    </label> jedhu
    <button type = "galchi" class = "btn" > Galchi </button>  
  </dirree tuuta>
</form> jedhu

Haalata filannoo ta'e

Bootstrap waliin kan hammataman haalawwan fayyadama waliigalaadhaaf qindaa'inoota unkaa filannoo sadii dha.

Unka barbaadi

.form-searchUnkaa fi .search-querygara <input>galtee barruu dabalataa geengoo ta'eef dabali .

< gita unkaa = "unka-barbaacha" > 
  < gosa galtee = "barruu" gita = "galtee-giddugaleessa barbaacha-gaaffii" >  
  <button type = "submit" class = "btn" > Barbaadi </button>  
</form> jedhu

Unka sarara keessaa

.form-inlineAsxaalee bitaa-hiriiramanii fi too'annoo sarara keessaa-uggura qindaa'ina kompaaktiidhaaf dabali .

< gita unkaa = "unka-sarara keessaa" > 
  < gosa galtee = "barruu" gita = "galtee-xiqqaa" iddooqa = "Email" >   
  < gosa galtee = "jecha icciitii" gita = "galtee-xiqqaa" iddooqa = "Jecha icciitii" >   
  < gita asxaa = "sanduuqa filannoo" > 
    <input type = "checkbox" > Na yaadadhu 
  </label> jedhu
  <button type = "submit" class = "btn" > Galmi </button>  
</form> jedhu

Bifa qajeelaa

Asxaalee mirga qindeessii fi gara bitaatti yaasuun sarara walfakkaataa irratti too'annoowwanii wajjin akka mul'atan gochuuf. Jijjiiramoota mallattoo baay'ee unka durtii irraa barbaada:

.form-horizontalUnka irratti dabali
Asxaalee fi too'annoowwan keessaa marsi.control-group
.control-labelAsxaa irratti dabali
To'annoowwan walqabatan kamiyyuu .controlssirriitti qindaa'uuf keessa marsi

< gita unkaa = "unka-horizontal" > 
  <div class = "garee-to'annoo" > 
    <label class = "to'annoo-asxaa" for = "InputEmail" > Email </label>  
    <div class = "to'annoo" > 
      < gosa galtee = "barruu" id = "Email galtee " iddooqa = "Email" >   
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
  <div class = "garee-to'annoo" > 
    <label class = "to'annoo-asxaa" for = "jecha icciitii galtee" > Jecha icciitii </label>  
    <div class = "to'annoo" > 
      < gosa galtee = "jecha icciitii" id = "jecha icciitii galtee " iddooqa = "Jecha icciitii" >   
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
  <div class = "garee-to'annoo" > 
    <div class = "to'annoo" > 
      < gita asxaa = "sanduuqa filannoo" > 
        <input type = "checkbox" > Na yaadadhu 
      </label> jedhu
      <button type = "submit" class = "btn" > Galmi </button>  
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</form> jedhu

To'annoo unkaa deeggaramee

Fakkeenyota too'annoo unkaa istaandaardii qindaa'ina unkaa fakkeenyaa keessatti deeggaraman.

Galteewwan

To'annoo unkaa baay'ee beekamaa, man'eewwan galtee barruu irratti hundaa'an. Deeggarsa gosoota HTML5 hundaaf of keessatti qabata: barruu, jecha icciitii, sa'aatii guyyaa, sa'aatii guyyaa-naannoo, guyyaa, ji'a, sa'aatii, torban, lakkoofsa, iimeelii, url, barbaacha, tel, fi halluu.

typeYeroo hunda ibsame fayyadamuu barbaada .

< gosa galtee = "barruu" iddooqa = "Galtee barruu" >

Naannoo barreeffamaa

To'annoo unkaa kan sararoota barruu hedduu deeggaru. rowsAkka barbaachisummaa isaatti amalli jijjiiri .

< tarreewwan naannoo barruu = "3" ></naannoo barruu>

Sanduuqawwan filannoo fi raadiyoo

Sanduuqonni filannoo tarree tokko keessatti filannoo tokko ykn hedduu filachuuf yoo ta'u raadiyoowwan ammoo filannoo tokko baay'ee keessaa filachuuf.

Durtii (tuulame) .

< gita asxaa = "sanduuqa filannoo" > 
  < gosa galtee = "sanduuqa filannoo" gatii = "" >  
  Filannoon tokko kanaa fi sana-maaliif akka guddaa ta’e dabaluu kee mirkaneessi
</label> jedhu
 
< gita asxaa = "raadiyoo" > 
  < gosa galtee = "raadiyoo" maqaa = "filannooRaadiyoo" id = "filannooRaadiyoo1" gatii = "filannoo1" sakatta'ame >     
  Filannoon tokko kanaa fi sana-maaliif akka guddaa ta’e dabaluu kee mirkaneessi
</label> jedhu
< gita asxaa = "raadiyoo" > 
  < gosa galtee = "raadiyoo" maqaa = "filannooRaadiyoo" id = "filannooRaadiyoo2" gatii = "filannoo2" >    
  Filannoon lama waan biraa ta'uu danda'a filachuun filannoo tokko ni haqa
</label> jedhu

Sanduuqawwan filannoo sarara keessaa

.inlineGitaa gara tartiiba sanduuqawwan filannoo ykn raadiyoowwan too'annoowwan sarara walfakkaataa irratti mul'ataniif dabali .

<label class = "sarara keessaa saanduqa filannoo" > 
  < gosa galtee = "sanduuqa filannoo" id = "sanduuqa filannoo sarara keessaa1" gatii = "filannoo1" > 1   
</label> jedhu
<label class = "sarara keessaa saanduqa filannoo" > 
  < gosa galtee = "sanduuqa filannoo" id = "sanduuqa filannoo sarara keessaa2" gatii = "filannoo2" > 2   
</label> jedhu
<label class = "sarara keessaa saanduqa filannoo" > 
  < gosa galtee = "sanduuqa filannoo" id = "sanduuqa filannoo sarara keessaa3" gatii = "filannoo3" > 3   
</label> jedhu

Filata

Filannoo durtii fayyadami ykn filannoowwan multiple="multiple"hedduu yeroo tokkotti agarsiisuuf a ifteessi.

<filannoo> jedhu
  <filannoo> 1 </filannoo>
  <filannoo> 2 </filannoo>
  <filannoo> 3 </filannoo>
  <filannoo> 4 </filannoo>
  <filannoo> 5 </filannoo>
</filannoo> jedhu
 
< dachaa filadhu = "dachaa" > 
  <filannoo> 1 </filannoo>
  <filannoo> 2 </filannoo>
  <filannoo> 3 </filannoo>
  <filannoo> 4 </filannoo>
  <filannoo> 5 </filannoo>
</filannoo> jedhu

To'annoo unkaa dheeressuu

To'annoo biraawzari jiran gubbaatti dabaluudhaan, Bootstrap qaamolee unkaa faayidaa qaban biroo of keessatti qabata.

Galteewwan dursanii fi dabalaman

Galtee barruu irratti hundaa'e kamiyyuu dura ykn booda barruu ykn qaree dabali. selectAsitti elementoonni akka hin deeggaramne hubadhu .

Filannoowwan durtii

Barruu dursee galchuuf ykn galteetti dabaluuf an .add-onfi an gita lama keessaa tokkoon marsi .input

<div class = "galtee-dursa" > 
  <span class = "dabalata" > @ </span> 
  < gita galtee = "span2" id = "Galtee dursee " gosa = "barruu" iddooqa = "Maqaa fayyadamaa" >    
</div> jechuun ni danda’ama
<div class = "galtee-dabalachuu" > 
  < gita galtee = "span2" id = "Galtee dabalame" akaakuu = "barruu" >   
  <span class = "dabalata" > .00 </span> 
</div> jechuun ni danda’ama

Walitti makamee

.add-onGaltee tokko dursee galchuu fi dabaluudhaaf gita lamaan fi fakkeenyota lama fayyadami .

<div class = "galtee-dursa galtee-dabalaa" > 
  <span class = "dabalata" > $ </span> 
  < gita galtee = "span2" id = "GalteePrepended dabalame" gosa = "barruu" >   
  <span class = "dabalata" > .00 </span> 
</div> jechuun ni danda’ama

Barruu bakka buttooni

Bakka a <span>barruu waliin, a fayyadamii .btnqaree (ykn lama) galtee irratti maxxansi.

<div class = "galtee-dabalachuu" > 
  < gita galtee = "span2" id = "QabduuGaltee dabalame" gosa = "barruu" >   
  <button class = "btn" gosa = "button" > Deemi! </button> jedhu  
</div> jechuun ni danda’ama

<div class = "galtee-dabalachuu" > 
  <galtee  gita galtee = "span2" id = "Qabduu Galtee dabalame" gosa = "barruu" >  
  <button class = "btn" type = "button" > Barbaadi </button>  
  <button jedhu  class = "btn" type = "button" > Filannoowwan </button> 
</div> jechuun ni danda’ama

Qabduu kan gadi bu'u

<div class = "galtee-dabalachuu" > 
  < gita galtee = "span2".   id = "ButtonDropdown dabalame" gosa = "barruu" > 
  <div gita = "btn-garee" > 
    <button jedhu  class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" > 
      Gocha
      <span gita = "kareettii" </span> 
    </button> jedhu
    <ul  class = "tarree-gadi-bu'aa" >
      ...
    </ul> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

<div gita = "galtee-dursa" >
  <div gita = "btn-garee" >
    <button class = "btn gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa  = "gara bu'aa" >
      Gocha
      <span gita = "kareettii" </span>
    </button> jedhu
    <ul gita = "tarree-gadi-bu'aa" >
      ...
    </ul> jechuun ni danda’ama
  </div> jechuun ni danda’ama
  < gita galtee = "span2" id = "DropdownButton dursee " gosa =    "barruu" >
</div> jechuun ni danda’ama

<div class = "galtee-dursa galtee-dabalaa". >
  <div gita = "btn-garee" > 
    <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >  
      Gocha
      <span gita = "kareettii" </span> 
    </button> jedhu
    <ul class = "tarree-gadi-bu'aa" > 
      ...
    </ul> jechuun ni danda’ama
  </div> jechuun ni danda’ama
  < gita galtee = "span2" id = "ButtonDropdownDropdownPrepended dabalame" gosa = "barruu" >   
  <div gita = "btn-garee" > 
    <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >  
      Gocha
      <span gita = "kareettii" </span> 
    </button> jedhu
    <ul class = "tarree-gadi-bu'aa" > 
      ...
    </ul> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Gareewwan gadi bu'an qoodaman

<unka> jedhu
  <div class = "galtee-dursa" > 
    <div gita = "btn-garee" > ... </div> 
    < gosa galtee = "barruu" > 
  </div> jechuun ni danda’ama
  <div class = "galtee-dabalachuu" > 
    < gosa galtee = "barruu" > 
    <div gita = "btn-garee" > ... </div> 
  </div> jechuun ni danda’ama
</form> jedhu

Unka barbaadi

< gita unkaa = "unka-barbaacha" > 
  <div class = "galtee-dabalachuu" > 
    < gosa galtee = "barruu" gita = "span2 barbaacha-gaaffii" >  
    <button type = "submit" class = "btn" > Barbaadi </button>  
  </div> jechuun ni danda’ama
  <div class = "galtee-dursa" > 
    <button type = "submit" class = "btn" > Barbaadi </button>  
    < gosa galtee = "barruu" gita = "span2 barbaacha-gaaffii" >  
  </div> jechuun ni danda’ama
</form> jedhu

Saayizii to'achuu

Gitoota safara firaakshinii fayyadami akka .input-largeykn galtee kee hammangaa tarjaa tarjaa .span*gita fayyadamuun walsimsiisi.

Galtee sadarkaa ugguraa

<input>Kamiyyuu ykn <textarea>elementii akka elementii sadarkaa ugguraatti akka amala qabu godhi .

< gita galtee = "sadarkaa-uggura-galtee" gosa = "barruu" iddooqa = ".sadarkaa-uggura-galtee" >

Saayizii firaa

< gita galtee = "galtee-mini" gosa = "barruu" iddooqa = ".galtee-mini" >   
< gita galtee = "galtee-xiqqaa" gosa = "barruu" iddooqa = ".galtee-xiqqaa" >   
< gita galtee = "galtee-giddugaleessa" gosa = "barruu" iddooqa = ".galtee-giddugaleessa" >   
< gita galtee = "galtee-guddaa" akaakuu = "barruu" iddooqa = ".galtee-guddaa" >   
< gita galtee = "galtee-xguddaa" gosa = "barruu" iddooqa = ".galtee-xguddaa" >   
< gita galtee = "galtee-xxguddaa" gosa = "barruu" iddooqa = ".galtee-xxguddaa" >

Mataa ol qaba!Vershiniiwwan gara fuula duraatti, fayyadama gita galtee fira kanaa hangawwan qaree keenyaa wajjin walsimsiisuuf jijjiirra. Fakkeenyaaf, .input-largepadding fi font-size galtee tokkoo ni dabala.

Safara giiridii

Galteewwan hammangaa walfakkaataa tarjaawwan tarjaa waliin walsimaniif .span1to fayyadami ..span12

< gita galtee = "span1" akaakuu = "barruu" iddooqa = ".span1" >   
< gita galtee = "span2" akaakuu = "barruu" iddooqa = ".span2" >   
< gita galtee = "span3" akaakuu = "barruu" iddooqa = ".span3" >   
< gita filadhu = "span1" > 
  ...
</filannoo> jedhu
< gita filadhu = "span2" > 
  ...
</filannoo> jedhu
< gita filadhu = "span3" > 
  ...
</filannoo> jedhu

Galtee tarjaa dachaa sarara tokkoof, gita fooyyessaa addaan fageenya sirrii ta'eef fayyadami.controls-row . Galteewwan iddoo-adii kuffisuuf yaa'a, margina sirrii saaga, fi yaa'a qulqulleessa.

<div class = "to'annoo" > 
  < gita galtee = "span5" akaakuu = "barruu" iddooqa = ".span5" >   
</div> jechuun ni danda’ama
<div class = "too'annoo-tarree to'ata" > 
  < gita galtee = "span4" akaakuu = "barruu" iddooqa = ".span4" >   
  < gita galtee = "span1" akaakuu = "barruu" iddooqa = ".span1" >   
</div> jechuun ni danda’ama
...

Galteewwan hin gulaalamne

Deetaa unka mallattoo unkaa qabatamaa osoo hin fayyadamin gulaalamuu hin dandeenyeen dhiheessi.

<span class = "galtee-xlarge uneditable-input" > Gatii tokko tokko asitti </span>

Gochoota uumuu

Unkaa garee gochootaa (buttons) waliin xumuri. Yeroo a keessa kaa'amu .form-horizontal, qareewwan to'annoo unkaa wajjin sararuuf ofumaan garagalfamu.

<div class = "gochoota-unkaa" > 
  <button type = "submit" class = "btn btn-primary" > Jijjiiramoota saagi </button>  
  < gosa qaree = "button" class = "btn" > Haqi </button>  
</div> jechuun ni danda’ama

Barreeffama gargaarsaa

Deeggarsa sadarkaa sarara keessaa fi ugguraa barruu gargaarsaa naannoo too'annoo unkaa mul'atuuf.

Gargaarsa sarara keessaa

< gosa galtee = "barruu" ><span class = "gargaarsa-sarara keessaa" > Barruu gargaarsa sarara keessaa </span>

Gargaarsa ugguruu

<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

<input class="span3" type="email" required>

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Something may have gone wrong</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</div>

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

<i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar

<div class="btn-toolbar">
  <div class="btn-group">
 
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>

Dropdown in a button group

User

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Button sizes

Star Star Star

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>

Taayipoogiraafii

Mata dureewwan

h1. Mata duree 1.

h2. Mata duree 2.

h3. Mata duree 3.

h4. Mata duree 4.

h5. Mata duree 5.

h6. Mata duree 6.

Koppii qaamaa

Koppii qaama dursaa

Xiqqaadhaan ijaarame

Xiyyeeffannoo

<small>

Ija jabeessa

Qubee jallisii

Kutaalee cimsuu

Gabateewwan

<abbr>

<abbr class="initialism">

Teessoowwan

<address>

Jechoota ugguraa

Caqasa uggura durtii

Filannoowwan caqasaa ugguruu

Madda tokko moggaasuu

Agarsiisa wal jijjiirraa

Tarreewwan

Ajaja hin qabne

Ajajame

Unstyled ta'e

Sarara keessaa

Ibsa

Ibsa qajeelaa

Koodii

Sarara keessaa

Blookii bu'uuraa

Gabateewwan

Akkaataawwan durtii

Kutaawwan filannoo

.table-striped

.table-bordered

.table-hover

.table-condensed

Gitoota tarree filannoo

Mallattoo gabatee deeggarame

Unkaalee

Akkaataawwan durtii

Haalata filannoo ta'e

Unka barbaadi

Unka sarara keessaa

Bifa qajeelaa

To'annoo unkaa deeggaramee

Galteewwan

Naannoo barreeffamaa

Sanduuqawwan filannoo fi raadiyoo

Durtii (tuulame) .

Sanduuqawwan filannoo sarara keessaa

Filata

To'annoo unkaa dheeressuu

Galteewwan dursanii fi dabalaman

Filannoowwan durtii

Walitti makamee

Barruu bakka buttooni

Qabduu kan gadi bu'u

Gareewwan gadi bu'an qoodaman

Unka barbaadi

Saayizii to'achuu

Galtee sadarkaa ugguraa

Saayizii firaa

Safara giiridii

Galteewwan hin gulaalamne

Gochoota uumuu

Barreeffama gargaarsaa

Gargaarsa sarara keessaa

Gargaarsa ugguruu

Form control states

Input focus

Invalid inputs

Disabled inputs

Validation states

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`