Glyphs jiran

Tuuta Glyphicon Halflings irraa bifa qubeetiin gilgaalota 250 ol of keessatti qabata. Glyphicons Halflings akka idileetti bilisaan hin argaman, garuu uumaan isaanii Bootstrap bilisaan akka argatan taasiseera. Akka galataatti yeroo danda'ametti link gara Glyphicons deebisuu qofa akka dabaltan isin gaafanna.

gilfiikoonii gilfiikoonii-urjii
gilfiikoonii gilfiikoonii-plus
gilfiikoonii gilfiikoonii-yuroo
gilfiikoonii gilfiikoonii-eur
gilfiikoonii gilfiikoonii-hir’isuu
gilfiikoonii gilfiikoonii-duumessa
gilfiikoonii gilfiikoonii-envelope
gilfiikoonii gilfiikoonii-qalama
gilfiikoonii gilfiikoonii-giraasii
glyphicon glyphicon-muuziqaa
glyphicon glyphicon-barbaacha
glyphicon gilfiikoonii-garaa
gilfiikoonii gilfiikoonii-urjii
glyphicon glyphicon-urjii-duwwaa
glyphicon gilfiikoonii-fayyadamaa
gilfiikoonii gilfiikoonii-fiilmii
gilfiikoonii gilfiikoonii-ffaa-guddaa
gilfiikoonii gilfiikoonii-th
glyphicon gilfiikoonii-tarree-ffaa
gilfiikoonii gilfiikoonii-ok
glyphicon glyphicon-baqsuu
glyphicon gilfiikoonii-guddisuu
glyphicon gilfiikoonii-guddisuu-xiqqeessuu
gilfiikoonii gilfiikoonii-off
gilfiikoonii gilfiikoonii-mallattoo
gilfiikoonii gilfiikoonii-cog
glyphicon gilfiikoonii-kosii
glyphicon gilfiikoonii-manaa
glyphicon faayilii-giliifiikoonii
gilfiikoonii gilfiikoonii-yeroo
glyphicon gilfiikoonii-karaa
glyphicon glyphicon-buufachuu-alt
glyphicon glyphicon-buufadhu
glyphicon glyphicon-olkaa'uu
glyphicon glyphicon-sanduuqa galmee
glyphicon gilfiikoonii-tapha-geengoo
gilfiikoonii gilfiikoonii-irra deebi’uu
gilfiikoonii gilfiikoonii-haaraa
gilfiikoonii gilfiikoonii-tarree-alt
gilfiikoonii gilfiikoonii-qulfii
glyphicon gilfiikoonii-alaabaa
glyphicon gilfiikoonii-dhageessii
glyphicon gilfiikoonii-jildii-cufa
glyphicon glyphicon-jildii-gadi
glyphicon gilfiikoonii-jildii-ol
gilfiikoonii gilfiikoonii-qrcode
gilfiikoonii gilfiikoonii-barkoodii
gilfiikoonii gilfiikoonii-tag
gilfiikoonii gilfiikoonii-tags
glyphicon gilfiikoonii-kitaaba
glyphicon gilfiikoonii-mallattoo
glyphicon gilfiikoonii-maxxansaa
glyphicon gilfiikoonii-kaameraa
glyphicon gilfiikoonii-qubee
gilfiikoonii gilfiikoonii-jajjaboo
gilfiikoonii gilfiikoonii-italik
glyphicon glyphicon-barruu-olka'iinsa
glyphicon glyphicon-barruu-bal'ina
glyphicon glyphicon-hiriir-bitaa
giliifiikoonii giliifiikoonii-giddugaleessa-hiriirsuu
gilfiikoonii gilfiikoonii-mirga-hiriir
glyphicon glyphicon-walqixxeessuu-qajeelchuu
glyphicon gilfiikoonii-tarree
gilfiikoonii gilfiikoonii-indent-bitaa
gilfiikoonii gilfiikoonii-indent-mirga
glyphicon glyphicon-fuula-yeroo-viidiyoo
glyphicon gilfiikoonii-fakkii
glyphicon gilfiikoonii-mallattoo-kaartaa
glyphicon gilfiikoonii-sirreessu
gilfiikoonii gilfiikoonii-tint
glyphicon glyphicon-gulaaluu
glyphicon gilfiikoonii-qoodaa
glyphicon glyphicon-sakatta'i
gilfiikoonii gilfiikoonii-sochoo
glyphicon glyphicon-tarkaanfii-duubatti deebi'uu
glyphicon glyphicon-saffisaan-duubatti deebi'uu
gilfiikoonii gilfiikoonii-duubatti deebi’uu
glyphicon gilfiikoonii-taphachuu
glyphicon glyphicon-dhaabbachuu
glyphicon gilfiikoonii-dhaabbachuu
glyphicon glyphicon-fuulduratti
glyphicon glyphicon-saffisaan fuulduratti
glyphicon glyphicon-tarkaanfii-fuulduratti
gilfiikoonii gilfiikoonii-ba’uu
gilfiikoonii gilfiikoonii-chevron-bitaa
gilfiikoonii gilfiikoonii-chevron-mirgaa
glyphicon mallattoo gilfiikoonii-dabalataa
gilfiikoonii gilfiikoonii-mallattoo-hir’isuu
glyphicon glyphicon-mallattoo-baqsuu
gilfiikoonii gilfiikoonii-ok-mallattoo
glyphicon glyphicon-mallattoo-gaaffii
glyphicon mallattoo-odeeffannoo-giliifiikoonii
glyphicon glyphicon-fakkii iskiriinii
glyphicon glyphicon-baqsuu-geengoo
gilfiikoonii gilfiikoonii-ok-geengoo
gilfiikoonii gilfiikoonii-ban-geengoo
gilfiikoonii gilfiikoonii-xiyya-bitaa
gilfiikoonii gilfiikoonii-xiyya-mirga
gilfiikoonii gilfiikoonii-xiyya-ol
gilfiikoonii gilfiikoonii-xiyya-gadi
glyphicon gilfiikoonii-qoodaa-alt
glyphicon gilfiikoonii-gufataa-guutuu
glyphicon glyphicon-guddina-xiqqaa
glyphicon glyphicon-mallattoo-waamichaa
glyphicon gilfiikoonii-kennaa
gilfiikoonii gilfiikoonii-baala
gilfiikoonii gilfiikoonii-ibidda
glyphicon glyphicon-ija-banaadha
glyphicon glyphicon-ija-cufuu
glyphicon glyphicon-mallattoo-akeekkachiisaa
gilfiikoonii gilfiikoonii-xiyyaara
glyphicon glyphicon-kalaandarii
gilfiikoonii gilfiikoonii-tasaa
glyphicon glyphicon-yaada kennuu
gilfiikoonii gilfiikoonii-maagneetii
gilfiikoonii gilfiikoonii-chevron-up
gilfiikoonii gilfiikoonii-chevroon-gadi
glyphicon giliifiikoonii-retweet gochuu
glyphicon glyphicon-gaarii-bittaa
glyphicon glyphicon-galfata-cufuu
glyphicon glyphicon-galfata-banaa
gilfiikoonii gilfiikoonii-guddina-dhaabbataa
gilfiikoonii gilfiikoonii-guddina-horizontal
gilfiikoonii gilfiikoonii-hdd
gilfiikoonii gilfiikoonii-bullhorn
gilfiikoonii gilfiikoonii-beel
glyphicon glyphicon-ragaa
glyphicon glyphicon-qubbee-ol-qabachuu
glyphicon glyphicon-qubbee-gadi
glyphicon glyphicon-harka-mirga
glyphicon glyphicon-harka-bitaa
glyphicon glyphicon-harka ol-ka'aa
glyphicon glyphicon-harka-gadi-gadi
glyphicon glyphicon-geengoo-xiyya-mirgaa
glyphicon glyphicon-geengoo-xiyya-bitaa
glyphicon glyphicon-geengoo-xiyya-ol-ol
glyphicon glyphicon-geengoo-xiyya-gadi
gilfiikoonii gilfiikoonii-gloobii
gilfiikoonii gilfiikoonii-furtuu
glyphicon glyphicon-hojiiwwan
gilfiikoonii gilfiikoonii-filter
glyphicon gilfiikoonii-boorsaa
glyphicon glyphicon-iskiriinii guutuu
glyphicon gilfiikoonii-daashboordii
gilfiikoonii gilfiikoonii-waraqaa
glyphicon glyphicon-garaa-duwwaa
gilfiikoonii gilfiikoonii-link
glyphicon gilfiikoonii-bilbila
gilfiikoonii gilfiikoonii-pushpin
gilfiikoonii gilfiikoonii-usd
gilfiikoonii gilfiikoonii-gbp
gilfiikoonii gilfiikoonii-sort
glyphicon glyphicon-qubeedhaan-sassaabuu
glyphicon glyphicon-qubeedhaan-sassaabuu-alt
glyphicon glyphicon-tartiibaan-sassaabuu
glyphicon glyphicon-tartiibaan-saaraa-alt
glyphicon glyphicon-amaloota-akka-saaraa
glyphicon glyphicon-amalootaan-saaraa-alt
glyphicon glyphicon-hin sakatta'amne
gilfiikoonii gilfiikoonii-babal’isuu
glyphicon glyphicon-kufaatii-gadi
gilfiikoonii gilfiikoonii-kufaatii-ol
glyphicon glyphicon-galchuu
gilfiikoonii gilfiikoonii-flash
glyphicon glyphicon-ba'uu
glyphicon glyphicon-foddaa-haaraa
glyphicon gilfiikoonii-galmee
glyphicon glyphicon-qusachuu
gilfiikoonii gilfiikoonii-banaa
glyphicon glyphicon-kan qusate
gilfiikoonii gilfiikoonii-galchuu
gilfiikoonii gilfiikoonii-al-ergii
glyphicon gilfiikoonii-erguu
glyphicon gilfiikoonii-flooppii-diskii
glyphicon glyphicon-floppy-qusate
glyphicon glyphicon-flooppii-baqsuu
glyphicon glyphicon-flooppii-qusachuu
glyphicon gilfiikoonii-flooppii-banaa
glyphicon glyphicon-kaardii-liqii
gilfiikoonii gilfiikoonii-dabarsuu
glyphicon gilfiikoonii-miidhaginaa
glyphicon gilfiikoonii-mata duree
gilfiikoonii gilfiikoonii-dhiibbaa ta’e
glyphicon glyphicon-gurraa bilbilaa
glyphicon gilfiikoonii-bilbila-alt
gilfiikoonii gilfiikoonii-masaraa
gilfiikoonii gilfiikoonii-istaatiksii
glyphicon giliifiikoonii-sd-viidiyoo
glyphicon gilgaala-hd-viidiyoo
glyphicon glyphicon-mata duree xiqqaa
gilfiikoonii gilfiikoonii-sagalee-isteeriyoo
gilfiikoonii gilfiikoonii-sagalee-dolbii
gilfiikoonii gilfiikoonii-sagalee-5-1
gilfiikoonii gilfiikoonii-sagalee-6-1
gilfiikoonii gilfiikoonii-sagalee-7-1
glyphicon glyphicon-mallattoo-mirga waraabbii
glyphicon glyphicon-mallattoo-galmee
glyphicon glyphicon-duumessa-buusuu
glyphicon glyphicon-duumessa-olkaa'uu
gilfiikoonii gilfiikoonii-muka-koonifarii
glyphicon glyphicon-muka-baala baqaqsu
gilfiikoonii gilfiikoonii-cd
glyphicon faayilii-glyphicon-qusachuu
glyphicon glyphicon-faayilii-banaa
gilfiikoonii gilfiikoonii-sadarkaa-ol
gilfiikoonii gilfiikoonii-koppii
gilfiikoonii gilfiikoonii-paastaa
glyphicon gilfiikoonii-akeekkachiisa
gilfiikoonii gilfiikoonii-walqixxeessaa
glyphicon gilfiikoonii-mootii
gilfiikoonii gilfiikoonii-mootittii
gilfiikoonii gilfiikoonii-pawn
gilfiikoonii gilfiikoonii-bishop
gilfiikoonii gilfiikoonii-naayitii
gilfiikoonii gilfiikoonii-foormulaa-daa’imaa
glyphicon gilfiikon-dunkaanaa
glyphicon gilfiikoonii-gabatee gurraacha
gilfiikoonii gilfiikoonii-siree
gilfiikoonii gilfiikoonii-abaaboo
gilfiikoonii gilfiikoonii-haquu
gilfiikoonii gilfiikoonii-sa’aatii sa’aatii
gilfiikoonii gilfiikoonii-ibsaa
gilfiikoonii gilfiikoonii-duplicate
gilfiikoonii gilfiikoonii-piggy-bank
gilfiikoonii gilfiikoonii-cissors
gilfiikoonii gilfiikoonii-bitcoin
gilfiikoonii gilfiikoonii-btc
gilfiikoonii gilfiikoonii-xbt
gilfiikoonii gilfiikoonii-yen
giliifiikoonii giliifiikoonii-jpy
gilfiikoonii gilfiikoonii-ruubilii
gilfiikoonii gilfiikoonii-rub
gilfiikoonii gilfiikoonii-iskeelii
gilfiikoonii gilfiikoonii-ice-lolly
gilfiikoonii gilfiikoonii-ice-lolly-dhandhame
glyphicon gilfiikoonii-barnoota
gilfiikoonii gilfiikoonii-filannoo-horizontal
glyphicon glyphicon-filannoo-dhaabbataa
gilfiikoonii gilfiikoonii-menu-hamburger
gilfiikoonii gilfiikoonii-moodaalii-foddaa
gilfiikoonii gilfiikoonii-zayitii
gilfiikoonii gilfiikoonii-midhaan
glyphicon glyphicon-uffannaa aduu
glyphicon glyphicon-barruu-guddina
glyphicon glyphicon-barruu-halluu
glyphicon glyphicon-barruu-duubbee
glyphicon glyphicon-wanta-hiriir-gubbaa
glyphicon gilfiikoonii-wanta-hiriir-gadi
gilfiikoonii gilfiikoonii-wanta-hiriirsa-horizontal
glyphicon glyphicon-wanta-hiriir-bitaa
glyphicon glyphicon-wanta-hiriir-dhaabbataa
glyphicon glyphicon-wanta-hiriir-mirga
gilfiikoonii gilfiikoonii-rega sadii-mirga
gilfiikoonii gilfiikoonii-rega sadii-bitaa
gilfiikoonii gilfiikoonii-rega-sadii-gadi
gilfiikoonii gilfiikoonii-rega-sadii-gubbaa
glyphicon gilfiikoonii-konsoolii
gilfiikoonii gilfiikoonii-superscript
glyphicon glyphicon-barreeffama xiqqaa
gilfiikoonii gilfiikoonii-menu-bitaa
gilfiikoonii gilfiikoonii-menu-mirga
gilfiikoonii gilfiikoonii-menu-gadi
gilfiikoonii gilfiikoonii-menu-up

Akkaataa itti fayyadama

Sababa raawwiif, mallattoolee hundi gita bu'uuraa fi gita mallattoo dhuunfaa barbaadu. Fayyadamuuf koodii armaan gadii bakka barbaaddetti kaa'i. Sirnaan guutuuf mallattoo fi barruu gidduutti bakka dhiisuu kee mirkaneessi.

Qaamolee biroo wajjin hin makaminaa

Gitoota mallattoo kallattiin qaamolee biroo wajjin walitti makamuu hin danda'an. Isaanis gita biroo waliin elementii tokko irratti fayyadamuu hin qaban. Inumaayyuu, nested dabaliiti <span>gitawwan mallattoo gara <span>.

Qaamolee duwwaa irratti qofa fayyadamuuf

Gitoota mallattoo qaamolee qabiyyee barruu hin qabnee fi qaamolee mucaa hin qabne qofa irratti fayyadamuu qabu.

Bakka qubee mallattoo jijjiiruu

Bootstrap faayilii qubee mallattoo galmee keessatti akka argaman tilmaama ../fonts/, faayilii CSS qindaa'anii wajjin walqabatee. Faayilota qubee sana sochoosuu ykn maqaa jijjiiruu jechuun CSS karaa sadii keessaa tokkoon fooyyessuu jechuudha:

Faayilota madda Less keessatti @icon-font-pathfi/ykn jijjiiramoota jijjiiri .@icon-font-name
Filannoo URL firaakshinii qindeessaa Xiqqaatiin kenname fayyadami.
url()Daandiiwwan CSS qindaa'e keessatti jijjiiri .

Filannoo qindeessaa misoomaa addaa keessaniif mijatu kamiyyuu fayyadami.

Mallattoolee dhaqqabamaa ta'an

Teeknooloojiiwwan gargaarsaa ammayyaa qabiyyee CSS uumame, akkasumas arfiilee Yuunikoodii adda ta'an ni beeksisa. Dubbistoota iskiriinii keessatti firii hin yaadamne fi burjaaja'aa akka hin uumamneef (keessattuu yeroo mallattoowwan faayaaf qulqulluu ta'an fayyadaman), amallichaan dhoksina aria-hidden="true".

Yoo hiika dabarsuudhaaf mallattoo fayyadamaa jirta ta'e (akka elementii faaya qofaatti osoo hin taane), hiikni kun teeknooloojiiwwan gargaarsaatiifis akka dabarfamuu mirkaneessi – fakkeenyaaf, qabiyyee dabalataa dabali, .sr-onlydaree wajjin mul'ataan dhokate.

Yoo too'annoo barruu biraa hin qabne uumte (kan akka <button>mallattoo qofa of keessaa qabu), yeroo hunda kaayyoo too'annoo adda baasuuf qabiyyee filannoo kennuu qabda, akka fayyadamtoota teeknooloojiiwwan gargaaraaf hiika qabaata. Haala kana keessatti, aria-labelamaloota too'annoo mataa isaa irratti dabaluu dandeessa.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Fakkeenyaaf

Qabduu, gareewwan qaree barruu meeshaa, qajeelcha, ykn galtee unkaa durtii keessatti fayyadami.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Mallattoo ergaa dogongoraa ta'uu isaa dabarsuudhaaf akeekkachiisa.sr-only keessatti fayyadamu, barreeffama dabalataa akeekkachiisa kana fayyadamtoota teeknooloojiiwwan gargaarsaa dabarsuudhaaf.

Teessoo imeelii sirrii galchi

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Jijjiiramaa, menu tarree tarreewwan hidhannoo agarsiisuuf. Ijaarsa JaavaScript kan gadi bu'aa ta'een walqunnamtii taasifame .

Fakkeenya

Qaaqa tarree fi sajoo tarree keessaa .dropdown, ykn qaama biraa kan labsu keessaa marsi position: relative;. Sana booda HTML menu sanaa itti dabali.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Menuuwwan gadi bu'aa gara oliitti (gadi gadi osoo hin taane) gara oliitti babal'isuuf gara .dropupwarraatti dabaluudhaan jijjiiramuu danda'u.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Hiriirsuu

Akka durtiitti, sajoo tarree ofumaan 100% gubbaa irraa fi gama bitaa warra isaa irratti dhaabbata. Sajoo tarree gara mirgaatti .dropdown-menu-rightdabali ..dropdown-menu

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Mata dureewwan

Kutaalee gochaalee sajoo tarree kamiyyuu keessatti asxaa gochuuf mataduree dabali.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Qoqqoodduu

Hidhamtoota walduraa duubaan adda baasuuf qoqqoodduu sajoo tarree keessatti dabali.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Wantoota menu hanqifaman

Hidhaa hanqisuuf tarree keessaa atti .disableddabali .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Qabduulee walduraa duubaan sarara tokko irratti garee qaree waliin garee. Raadiyoo JaavaScript filannoo fi amala akkaataa sanduuqa filannoo irratti dabali qaree keenyaan .

Tooltips & popovers gareewwan button keessatti qindaa'ina addaa barbaadu

Yeroo gorsa meeshaa ykn popovers elementoota a keessa jiran irratti fayyadamtu .btn-group, filannoo miidhaa cinaa hin barbaachifne irraa of eeguuf ifteessuu qabda container: 'body'(kan akka elementiin bal'achuu fi/ykn yeroo tooltip ykn popover kaka'u goleewwan isaa geengoo ta'an dhabuu).

Sirrii ta’uu isaa mirkaneessuu `role`fi asxaa kennuu

Teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – buttooni walduraa duubaan garee ta’an akka dabarsaniif, roleamalli sirrii ta’e kennamuu qaba. Gareewwan qareedhaaf, kun role="group", yeroo ta'u, barruulee meeshaalee qabaachuu qabu role="toolbar".

Kan ala ta'e tokko gareewwan too'annoo tokko qofa of keessaa qaban (fakkeenyaaf gareewwan qaree qajeelfaman elementoota waliin <button>) ykn tarree gadi bu'aa dha.

roleDabalataanis, gareewwanii fi barruulee meeshaalee asxaan ifa ta'e kennamuu qaba, sababiin isaas teeknooloojiiwwan gargaarsaa baay'een isaanii yoo kana hin taane, amalli sirrii ta'e jiraatus, isaan hin beeksisan . Fakkeenyota asitti kennaman keessatti, fayyadamna aria-label, garuu filannoowwan akka aria-labelledbyakkasumas fayyadamuu ni danda'u.

Fakkeenya bu’uuraa

Qabduulee walduraa duubaan jiran .btnin tiin marsi .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Saayizii gochuu

Gitoota safara qaree garee keessatti qaree hundaaf hojii irra oolchuu mannaa, .btn-group-*tokkoon tokkootti qofa dabali .btn-group, yeroo gareewwan hedduu man'eessu dabalatee.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Koonyaa gochuu

Yeroo menuwwan tarree qareewwan walduraa duubaan makaman barbaaddu a .btn-groupkan biraa keessa kaa'i ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Jijjiirama dhaabbataa

Tuuta qaree akka qajeelaa osoo hin taane dhaabbataadhaan tuulame akka mul'atu godhi. Tarreewwan qaree addaan ba'uu asitti hin deeggaraman.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Gareewwan buttooni sirrii ta'an

Gareen qaree tokko bal'ina warra isaa guutuu akka diriiru hammangaa walqixa ta'een akka diriiru taasisi. Akkasumas garee qaree keessaa tarreewwan qaree wajjin hojjeta.

Daangaa qabachuu

Sababa HTML fi CSS addaa qareewwan qajeelchuuf fayyadamu irraa kan ka'e (jechuunis display: table-cell), daangaawwan isaan gidduu jiran dachaa ta'u. Gareewwan qaree idilee keessatti, margin-left: -1pxdaangaawwan balleessuu mannaa tuuluuf fayyadama. Haa ta'u malee, marginwaliin hin hojjetu display: table-cell. Kanarraa kan ka'e, dhuunfachiisa kee gara Bootstrap irratti hundaa'uun, daangaawwan haquu ykn irra deebitee halluu itti gochuu barbaadda ta'a.

IE8 fi daangaawwan

Internet Explorer 8 daangaa qaree garee qaree haqa qabeessa keessatti hin agarsiisu, yoo ibsames ta'e <a>elementoota <button>. Sana irra darbuuf, tokkoon tokkoon qaree kan biraatiin marsi .btn-group.

Odeeffannoo dabalataaf #12476 ilaali .

`<a>`Elementiiwwan waliin

.btns walitti aansuun qofa .btn-group.btn-group-justified.

Bitaa Gidduu Sirrii

Bitaa Gidduu

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Hidhamtoota akka buttooniitti hojjetan

Yoo <a>elementoonni akka qaree hojjechuuf fayyadaman – dalagaa fuula keessaa kakaasuu, gara galmee ykn kutaa biraa fuula ammaa keessa deemuu irra – isaanis sirrii ta'e kennamuu qaba role="button".

`<button>`Elementiiwwan waliin

Gareewwan qaree qajeeloo <button>elementoota waliin fayyadamuuf, tokkoon tokkoo qaree garee qaree keessatti marsuu qabda . Irra caalaan biraawzaroota CSS keenya elementootaaf qajeelchuuf sirnaan hin hojiirra oolchan <button>, garuu erga button dropdowns deeggarree, sana irra darbuu dandeenya.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

Hirkatummaa pilaagii

Buttooni gadi bu'u ifteessiin gadi bu'aa gosa Bootstrap kee keessatti hammatamuu barbaadu.

Buttooni tokko kan gadi bu'u

Jijjiirama mallattoo bu'uuraa tokko tokko waliin qaree tokko gara jijjiirraa tarree gadi bu'utti jijjiiri.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Tarreewwan qaree addaan qoodi

Haaluma walfakkaatuun, jijjiirama mallattoo walfakkaataa waliin, qaree addaa qofaan, tarreewwan qaree qoqqoodamu uumi.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Saayizii gochuu

Tarreewwan qaree qaree hammangaa hunda waliin hojjetu.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Jijjiirama dropup

Warraatti dabaluudhaan qaaqawwan tarree elementoota olitti kakaasi .dropup.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Barruu ykn qaree duraa, booda, ykn gama lamaan barruu irratti hundaa'e kamiyyuu dabaluudhaan too'annoo unkaa dheeressi <input>. Qaamolee tokko irratti dursanii fannisuuf ykn dabaluudhaaf ykn .input-groupwaliin fayyadami ..input-group-addon.input-group-btn.form-control

Barreeffama `<input>`s qofa

Qaamolee asitti fayyadamuu irraa fagaadhu <select>sababiin isaas isaan guutummaatti akkaataa biraawzaroota WebKit keessatti ta'uu hin danda'an.

Amalli isaanii haala tokko tokko keessatti waan hin kabajamneef <textarea>elementoota asitti fayyadamuu irraa fagaadhu .rows

Tooltips & popovers gareewwan galtee keessatti qindaa'ina addaa barbaadu

Yeroo gorsa meeshaa ykn popovers elementoota an keessa jiran irratti fayyadamtu .input-group, filannoo miidhaa cinaa hin barbaadamne irraa of eeguuf ifteessuu qabda container: 'body'(kan akka elementiin bal'achuu fi/ykn yeroo tooltip ykn popover kaka'u goleewwan isaa geengoo ta'an dhabuu).

Qaamolee biroo wajjin hin makaminaa

Garee unkaa ykn gita tarjaa tarjaa kallattiin gareewwan galtee waliin hin makamin. Inumaayyuu, garee galtee garee unkaa ykn qaama tarjaa wajjin walqabatu keessaa man'ee.

Yeroo hunda asxaalee itti dabali

Dubbistoonni iskiriinii unkaalee kee irratti rakkina ni qabaatu yoo galtee hundaaf asxaa hin daballe. Garee galtee kanaaf, asxaan ykn dalagaa dabalataa kamiyyuu gara teeknooloojiiwwan gargaarsaatti akka darbu mirkaneessuu.

Teekniikiin sirrii fayyadamuu qabu ( <label>qaamolee mul'atan, qaamolee gita <label>fayyadamuun dhokatan , ykn fayyadama , , , ykn amalli) fi odeeffannoo dabalataa maaltu dabarsuu akka qabu gosa sirrii wiijetii walqunnamtii hojiirra oolchaa jirtu irratti hundaa'uun garaagarummaa qabaata. Fakkeenyonni kutaa kana keessatti argaman malawwan yaada kennaman muraasa, haala addaatiin kennaman ni kennu..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Fakkeenya bu’uuraa

Dabalata ykn qaree tokko gama lamaan galtee tokkoo irratti kaa'i. Akkasumas tokko gama lamaan galtee tokkoo kaa'uu dandeessa.

Dabalata hedduu ( .input-group-addonykn .input-group-btn) gama tokkoon hin deeggarru.

Garee galtee tokko keessatti unka-to'annoo hedduu hin deeggarru.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Saayizii gochuu

Gitoota safara unkaa fira .input-groupofitti dabali qabiyyeen keessa jiru ofumaan guddina ni jijjiira-gita hammangaa too'annoo unkaa tokkoon tokkoo qaama irratti irra deebi'uun hin barbaachisu.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Sanduuqawwan filannoo fi dabalataa raadiyoo

Sanduuqa filannoo ykn filannoo raadiyoo kamiyyuu barruu osoo hin taane dabalata garee galtee keessa kaa'i.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Button dabalata

Qabduu gareewwan galtee keessa jiran xiqqoo adda ta'anii fi sadarkaa dabalataa tokko man'ee barbaadu. Bakka , qareewwan marsuuf .input-group-addonfayyadamuu si barbaachisa . .input-group-btnKunis sababa akkaataalee biraawzari durtii irra darbamuu hin dandeenyeef barbaachisaadha.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Qabduulee kanneen gadi bu'an qaban

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Qabduulee qoodaman

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Qabduu dachaa

Gama tokkoof dabalata tokko qofa qabaachuu kan dandeessu yoo ta'u, tokko keessaa qaree hedduu qabaachuu dandeessa .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs Bootstrap keessatti argaman mallattoo qooddatan qabu, .navgita bu'uuraa irraa eegalee, akkasumas haalata qooddame. Tokkoon tokkoo akkaataa gidduutti jijjiiruuf gita fooyyessaa jijjiiri.

Navs paanaalii caancalaa fayyadamuun JavaScript caancalaa plugin barbaada

Caancaloota naannoowwan caancala qabaniif, caancalaawwan JavaScript plugin fayyadamuu qabda . Mallattoon amaloota dabalataa rolefi ARIAs ni barbaada – bal'ina dabalataaf mallattoo fakkeenyaa ifteessaa ilaali.

Navs akka navigeeshiniitti fayyadaman dhaqqabamaa taasisuu

Yoo barruu qajeelchaa kennuudhaaf navs fayyadamaa jirta ta'e, role="navigation"qabduu warraa baay'ee loojikii ta'e irratti a dabaluu kee mirkaneessi <ul>, ykn <nav>qaama naannoo guutummaa qajeelchaatti marsi. Gahee sana <ul>ofuma isaa irratti hin dabalinaa, kunis akka tarree qabatamaatti teknooloojiiwwan gargaarsaatiin akka hin labsamne waan dhorkuuf.

Caancaloota

Hubadhu gitaan gita bu'uuraa .nav-tabsbarbaada ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Kiniinii

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Kiniiniinis vertikaaliin tuulamuu danda’a. Itti dabaluu qofa .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Haqa qabeessa

Salphaatti tabs ykn kiniinii bal'ina warra isaanii walqixa ta'e iskiriinii bal'aa 768px ol ta'e irratti .nav-justified. Iskiriinii xixiqqoo irratti, hidhannoowwan nav tuulamanii jiru.

Hidhamtoonni navbar nav haqa qabeessa ta'an yeroo ammaa hin deeggaraman.

Safarii fi deebii kennuu danda'u haqa qabeessa navs

v9.1.2 irraa eegalee, Safari dogongora agarsiisa kan safara biraawzari kee horizontally jijjiiruun dogongora agarsiisaa nav haqa qabeessa keessatti yeroo haaromfamuu qulqullaa'u fidu agarsiisa. Dogoggorri kun fakkeenya nav haqa qabeessa keessattis agarsiifama .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Hidhamtoota hanqifaman

Qaama nav kamiifuu (tabs ykn kiniinii), hidhaa halluu diimaa fi bu'aa hover hin.disabled qabneef dabali .

Hojiin walqabsiisaa dhiibbaa hin geessisu

Gitni kun <a>bifa 's qofa jijjiira malee dalagaa isaa miti. Hidhamtoota asitti hanqisuuf JaavaScript amala fayyadami.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Gadi bu'aa fayyadamuu

Sajoo tarree HTML xiqqoo dabalataa fi tarreewwan JavaScript plugin waliin dabali .

Caancaloota kanneen gadi bu'an qaban

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Kiniinii kan dropdown qabu

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars qaamolee meetaa deebii kennan kanneen akka mataduree navigeeshinii application ykn saayitii keetii tajaajilaniidha. Isaan mul'ata moobaayilaa keessatti kufanii jalqabu (fi jijjiiramuu danda'u) fi akkuma bal'inni buufata ilaalchaa jiru dabalaa deemuun qajeelaa ta'u.

Hidhamtoonni navbar nav haqa qabeessa ta'an yeroo ammaa hin deeggaraman.

Qabiyyee dhangala’aa jiru

Bootstrap qabiyyeen navbar kee keessa jiru bakka hangamii akka barbaadu waan hin beekneef, qabiyyee tarree lammaffaatti marfamuu irratti dhimmoota si mudachuu danda'a. Kana furuuf ammoo:

Hamma ykn bal'ina wantoota navbar hir'isi.
Wantoota navbar murtaa'oo hammangaa iskiriinii murtaa'an irratti gita faayidaa deebii kennuu fayyadamuun dhoksi .
Qabxii navbar kee haalata kufaa fi qajeelaa gidduutti jijjiiramu jijjiiri. Jijjiiramaa dhuunfachiisi @grid-float-breakpointykn gaaffii miidiyaa mataa keetii dabali.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Barruu jijjiiruudhaan maqaa navbar fakkii mataa keetiin bakka buusi <img>. The padding fi height mataa isaa waan .navbar-brandqabuuf, fakkii kee irratti hundaa'uun CSS tokko tokko irra darbuu si barbaachisuu danda'a.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Qabiyyee unkaa keessa kaa'i .navbar-formqindaa'ina dhaabbataa sirrii fi amala kufaatiidhaaf iddoowwan ilaalchaa dhiphoo keessatti. Qabiyyee navbar keessa eessa akka jiraatu murteessuuf filannoowwan qindeessaa fayyadami.

Akka heads up, .navbar-formkoodii isaa baay'ee .form-inlinevia mixin waliin qooddata. To'annoon unkaa tokko tokko, akka gareewwan galtee, bal'ina dhaabbataa navbar keessaa sirriitti akka mul'atu barbaadu danda'a.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Yeroo hunda asxaalee itti dabali

Dubbistoonni iskiriinii unkaalee kee irratti rakkina ni qabaatu yoo galtee hundaaf asxaa hin daballe. .sr-onlyUnkaalee sarara keessaa kanaaf, asxaalee gita fayyadamuun dhoksuu dandeessa . Malli filannoo dabalataa teknooloojiiwwan gargaarsaaf asxaa kennuu, kan akka aria-label, aria-labelledbyykn titleamalli jiru. Yoo kanneen keessaa tokkollee hin jirre, dubbistoonni iskiriinii amallicha fayyadamuutti gargaaramuu danda'u , yoo jiraate, garuu akka bakka bu'aa malawwan asxaa birootti placeholderfayyadamuun akka hin gorfanne hubadhu .placeholder

.navbar-btnGitaa <button>elementoota a keessa hin jiraannetti dabali <form>navbar keessatti dhaabbataadhaan giddugaleessa gochuuf.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Tarreewwan barruu qaama keessatti .navbar-text, yeroo baay'ee <p>mallattoo irratti dursaa fi halluu sirrii ta'eef marsi.

<p class="navbar-text">Signed in as Mark Otto</p>

Namoota hidhannoowwan istaandaardii qaama qajeelcha navbar idilee keessa hin jirre fayyadamaniif, .navbar-linkfilannoowwan navbar durtii fi faallaadhaaf halluuwwan sirrii dabaluudhaaf gita fayyadami.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Hidhamtoota nav, unkaalee, qareewwan, ykn barruu, gitaalee .navbar-leftykn faayidaa fayyadamuun qindeessii. .navbar-rightGitoonni lamaan kallattii ifteessame irratti CSS float ni dabalu. Fakkeenyaaf, hidhamtoota nav qindeessuuf, <ul>gita faayidaa walfakkaataa hojiirra ooleen addatti kaa'i.

Gitoota kunniin gosoota mixin-ed kan .pull-leftfi .pull-right, garuu isaan gara gaaffiiwwan miidiyaatti bal'inaan qabamaniiru salphaatti qaamolee navbar hammangaa meeshaa hunda keessatti qabachuuf.

Qabiyyee navbar giddugaleessaa fi paadiitti .navbar-fixed-topa .containerykn dabali fi dabali..container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Qaama padding barbaachisa

Navbar dhaabbataa qabiyyee kee kan biraa ni haguuga, yoo paddinggubbaa <body>. Duudhaalee mataa keetii yaali ykn cuquliisa keenya armaan gadii fayyadami. Gorsa: Akka durtiitti, navbar olka'iinsa 50px qaba.

body { padding-top: 70px; }

Kana Bootstrap CSS hundee booda hammachuu kee mirkaneessi .

Qabiyyee navbar giddugaleessaa fi paadiitti .navbar-fixed-bottoma .containerykn dabali fi dabali..container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Qaama padding barbaachisa

Navbar dhaabbataa qabiyyee kee kan biraa ni haguuga, yoo paddinggara jala <body>. Duudhaalee mataa keetii yaali ykn cuquliisa keenya armaan gadii fayyadami. Gorsa: Akka durtiitti, navbar olka'iinsa 50px qaba.

body { padding-bottom: 70px; }

Kana Bootstrap CSS hundee booda hammachuu kee mirkaneessi .

Navbar bal'ina guutuu kan fuula waliin gara biraatti garagaluun .navbar-static-topa .containerykn .container-fluidgara giddugaleessaatti fi qabiyyee navbar pad dabaluudhaan uumi.

Kutaalee irraa adda ta'ee .navbar-fixed-*, padding kamiyyuu irratti jijjiiruun si hin barbaachisu body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Ilaalcha navbar dabaluudhaan fooyyessi .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Daabboo

Bakka fuula ammaa sadarkaa qajeelchaa keessaa agarsiisi.

Addaan baastoonni ofumaan CSS keessatti karaa :beforefi content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Fuulaa (Pagination) jedhu

Hidhamtoota fuula marsariitii ykn appii keessaniif qaama fuula fuula hedduu qabuun, ykn filannoo fuula salphaa ta'een kenni .

Fuula durtii

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Qaama fuula asxaa kaa'uu

<nav>Qaamni fuulaa akka kutaa navigeeshinii dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa birootti adda baasuuf elementii tokkoon marfamuu qaba . Dabalataanis, fuul-barruun tokko kutaa qajeelchaa akkasii tokkoo ol duraan qabaachuu waan hin oolleef (kan akka qajeelcha jalqabaa mataduree keessatti, ykn qajeelcha barruu cinaa), kaayyoo isaa calaqqisiisuuf ibsa kennuu aria-labelgaariidha <nav>. Fakkeenyaaf, yoo qaamni fuula tuuta bu'aa barbaacha gidduutti naanna'uuf fayyadame, asxaan sirrii ta'uu danda'a aria-label="Search results pages".

Haalata hanqifamee fi socho'aa

Hidhamtoonni haala adda addaatiif haala barbaadamuun kan jijjiiramudha. .disabledHidhamtoota hin cuqaasuu fi .activefuula ammaa agarsiisuuf fayyadami .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

<span>Akkaataawwan yaadaman qabattee osoo jirtuu dalagaa cuqaasuu haquuf, ankuraawwan socho'an ykn hanqifaman , ykn haala xiyyawwan duraa/itti aanan keessatti ankuraa akka dhiistu gorsina .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Saayizii gochuu

Fuula guddaa moo xiqqaa ta'e barbaadduu? Dabalaa .pagination-lgykn .pagination-smsafara dabalataaf.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager jedhamuun beekama

Hidhamtoota saffisaa duraa fi itti aanan hojiirra oolmaa fuula salphaa mallattoo ifaa fi akkaataa waliin. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.

Fakkeenya durtii

Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Hidhamtoota qindaa'an

Akka filannootti, tokkoon tokkoon hidhaa gara cinaachaatti qindeessuu dandeessa:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Haalata hanqifame filannoo

Hidhamtoonni fuulaa akkasumas .disabledgita faayidaa waliigalaa fuula irraa fayyadamu.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Fakkeenya

Fakkeenya mata duree Haaraa

<h3>Example heading <span class="label label-default">New</span></h3>

Jijjiirama jiran

Bifa asxaa jijjiiruuf gita fooyyessaa armaan gadii kamiyyuu dabali.

Odeeffannoo Milkaa'ina Duraa Durtii Akeekkachiisa Balaa

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Asxaa toonii hedduu qabduu?

Rakkoon agarsiisaa yeroo asxaalee sarara keessaa kudhan kudhan qabduu dhiphoo keessa qabdu, tokkoon tokkoon inline-blockqaama mataa isaanii of keessaa qaban (akka mallattoo) uumamuu danda'u. Karaan kana itti darbu setting display: inline-block;. Yaadannoo fi fakkeenyaaf, #13219 ilaali .

Wantoota haaraa ykn hin dubbifamne salphaatti a <span class="badge">to links, Bootstrap navs, fi kkf dabaluudhaan calaqqisiisi.

Inbox42.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Of kuffisuu

Yeroo wantoonni haaraan ykn hin dubbifamne hin jirre, baaajiiwwan salphaatti ni kufa (karaa :emptyfilannoo CSS) qabiyyeen tokkollee keessa yoo hin jiraanne.

Walsimsiisa qaxxaamuraa-browser

Baajiiwwan Internet Explorer 8 keessatti ofumaan hin kufan sababiin isaas :emptyfilannoof deeggarsa waan hin qabneef.

Haalawwan nav sochii qabanitti madaqsa

Akkaataan ijaaraman baajiiwwan haalawwan sochii qaban keessatti navigeeshinii kiniinii keessatti kaa'uuf hammatamaniiru.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Qaama salphaa, jijjiiramaa kan filannoodhaan guutummaa buufata ilaalchaa dheeressuun qabiyyee furtuu marsariitii kee irratti agarsiisuu danda'u.

Akkam jirtu addunyaa!

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

Caalaatti baradhaa

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Jumbotron bal'ina guutuu gochuuf, fi golee geengoo malee, .containers hundaan ala kaa'iitii kanaa mannaa .containerkeessaa itti dabali.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Qaaqa salphaa h1kutaa qabiyyee fuula tokko irratti haala sirrii ta'een addaan baasuu fi qooduuf. h1Qaama durtii 's fayyadamuu danda'a small, akkasumas irra caalaan qaamolee biroo (akkaataa dabalataa wajjin).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Sirna tarjaa Bootstrap qaama suuraa xiqqaa waliin dheeressuun tarjaa fakkiiwwan, viidiyoo, barruu fi kkf salphaatti agarsiisuuf.

Yoo Pinterest fakkaatu dhiheessi suuraa xiqqaa olka'iinsaa fi/ykn bal'ina adda addaa barbaadde, plugin qaama sadaffaa kan akka Masonry , Isotope , ykn Salvattore fayyadamuu si barbaachisa .

Fakkeenya durtii

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Qabiyyee amala

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.

Furtuu Furtuu

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.

Furtuu Furtuu

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.

Furtuu Furtuu

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Ergaawwan yaada yaada haalaa gochoota fayyadamaa idileedhaaf ergaawwan akeekkachiisaa harka muraasa jiran fi jijjiiramaa ta'an waliin kenni.

Fakkeenyaaf

Barruu kamiyyuu fi qaree ari'uu filannoo keessaa .alertfi gita yaadannoo afran keessaa tokko (fkn, .alert-success) ergaawwan akeekkachiisa bu'uuraatiif marsi.

Gitaa durtii hin qabu

Akeekkachiisni gita durtii hin qaban, gita bu'uuraa fi fooyyessaa qofa. Akeekkachiisni halluu diimaa durtii hiika guddaa hin qabu, kanaaf akaakuu karaa gita yaadannoo ifteessuun si barbaachisa. Milkaa'ina, info, akeekkachiisa, ykn balaa keessaa filadhu.

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

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

Akeekkachiisa! Of sakatta'uu wayya, ati baay'ee gaarii hin fakkaattu.

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Akeekkachiisa hojiirraa ari'amuu danda'u

.alert-dismissibleQabduu filannoo fi cufi dabaluudhaan akeekkachiisa kamiyyuu irratti ijaari .

Ijaarsa akeekkachiisa JaavaScript barbaada

Guutummaatti hojjechuuf, akeekkachiisa kuffifamuu danda'uuf, akeekkachiisa JavaScript plugin fayyadamuu qabda .

Akeekkachiisa! Of sakatta'uu wayya, ati baay'ee gaarii hin fakkaattu.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Meeshaalee hunda irratti amala sirrii ta'e mirkaneessuu

Qabeentaa amaloota deetaa <button>waliin fayyadamuu kee mirkaneessi .data-dismiss="alert"

Hidhamtoota akeekkachiisa keessatti

.alert-linkAkeekkachiisa kamiyyuu keessaa walitti hidhamiinsa halluu walsimsiisu saffisaan kennuudhaaf gita faayidaa fayyadami .

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

Mataa ol qaba! This alert needs your attention , garuu super barbaachisaa miti.

Akeekkachiisa! Of sakatta'uu wayya, ati baay'ee gaarii hin fakkaattu .

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

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Adeemsa adeemsa hojii ykn gocha irratti yaada yeroo ammaa barruulee adeemsaa salphaa garuu jijjiiramaa ta’aniin kennuu.

Walsimsiisa qaxxaamuraa-browser

Sajoo adeemsaa bu'aa isaanii tokko tokko galmaan ga'uuf ce'umsaa fi sochiiwwan CSS3 fayyadamu. Amaloonni kun Internet Explorer 9 fi isaa gadii ykn gosoota Firefox durii keessatti hin deeggaraman. Opera 12 sochii qaamaa hin deeggaru.

Walsimsiisaa Imaammata Nageenya Qabiyyee (CSP).

Yoo marsariitiin keessan Imaammata Nageenya Qabiyyee (CSP) kan hin hayyamne qabaate , sana booda akka fakkeenyota keenya armaan gadii keessatti mul'atutti bal'ina barruu adeemsaa saaguuf amaloota style-src 'unsafe-inline'sarara keessaa fayyadamuu hin dandeessan . styleMalleen filannoo bal'ina CSP ciccimoo wajjin walsimu saaguuf JavaScript xiqqoo amala fayyadamuu (kan saagu element.style.width) ykn gita CSS amala fayyadamuu of keessatti qabata.

Fakkeenya bu’uuraa

Barruu adeemsa durtii.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Asxaa waliin

Dhibbeentaa mul'atu agarsiisuuf gita <span>waliin barruu adeemsaa keessaa haqi ..sr-only

60% .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Barruun asxaa dhibbeentaa gadi aanaadhaaf illee dubbifamaa akka turu mirkaneessuuf, min-widthbarruu adeemsaa irratti a dabaluu yaadaa.

0% .

2% .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Filannoowwan haala dubbiitiin

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Sarara kan qabu

Bu'aa sarara qabu uumuuf garagalcha fayyadama. IE9 fi isaa gadii keessatti hin argamu.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animeeshinii kan qabu

Sararoota mirgaa gara bitaatti sochoosuuf gara .activeitti dabali . .progress-bar-stripedIE9 fi isaa gadii keessatti hin argamu.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Tuulamaa

.progressIsaan tuuluuf barruulee hedduu tokko keessa kaa'i .

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Akkaataa wanta abstraaktii gosoota qaamolee adda addaa ijaaruuf (akka yaada biloogii, Tweets, fi kkf) kanneen fakkii bitaa- ykn mirga-hiriirfame qabiyyee barruu cinatti agarsiisan.

Miidiyaa durtii

Miidiyaan durtii wanta miidiyaa (fakkiiwwan, viidiyoo, sagalee) gara bitaa ykn mirga uggura qabiyyee agarsiisa.

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Mata duree miidiyaa nested

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Gitoota .pull-leftfi .pull-rightakkasumas jiru fi duraan akka qaama qaama miidiyaatti fayyadamaa turan, garuu fayyadama sanaaf akka v3.3.0tti hin barbaachifne. Isaan tilmaamaan .media-leftfi , kan html keessatti booda kaa'amuu qabu .media-rightmalee ..media-right.media-body

Hiriirsuu miidiyaa

Fakkiiwwan ykn miidiyaaleen biroo gubbaa, gidduu ykn jalaan qindaa'uu danda'u. Durtii gubbaa qindaa'ee jira.

Miidiyaa gubbaa qindaa'e

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

Miidiyaa giddu galeessaan qindaa’e

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

Miidiyaa jalaa qindaa'e

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Tarree miidiyaa

Xiqqoo mallattoo dabalataatiin, miidiyaa tarree keessaa fayyadamuu dandeessa (dhangiiwwan yaada ykn tarreewwan barruuleedhaaf faayidaa qaba).

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

Mata duree miidiyaa nested
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

Mata duree miidiyaa nested
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

Mata duree miidiyaa nested
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Gareen tarree tarreewwan elementoota salphaa qofa osoo hin taane, kanneen walxaxaa qabiyyee amala qaban agarsiisuuf qaama socho'aa fi humna qabuudha.

Fakkeenya bu’uuraa

Gareen tarree hunda caalaa bu'uuraa salphaatti tarree hin tartiibamin wantoota tarree waliin, fi gita sirrii dha. Filannoowwan itti aanan waliin irratti ijaari, ykn akka barbaachisummaa isaatti CSS mataa keetii.

Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Baajiiwwan

Qaama baajii wanta garee tarree kamiyyuutti dabali ofumaan mirga irratti ni dhaabata.

14.Cras qofaa odio
2. 2.Dapibus ac haala mijeessuu keessatti
1. 1.Morbi leo risus jedhamuun beekama

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Wantoota walitti hidhaman

Wantoota garee tarree bakka wanta tarree mallattoo anchor fayyadamuun walqabsiisi (innis <div>bakka warraa jechuudha <ul>). Warra dhuunfaa naannoo elementii tokkoon tokkoo isaaniitti hin barbaachisu.

Cras qofaa odio Dapibus ac haala mijeessuu keessatti Morbi leo risus jedhamuun beekama Porta ac consectetur jedhamuun beekama Vestibulum at eros jedhama

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Wantoota button

Wantoonni garee tarree wanta tarree osoo hin taane qaree ta'uu danda'u (innis <div>bakka warraa jechuudha <ul>). Warra dhuunfaa naannoo elementii tokkoon tokkoo isaaniitti hin barbaachisu. Asitti kutaalee istaandaardii hin fayyadaminaa ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Wantoota hanqifaman

Akka hanqifame mul'atuuf gara atti .disableddabali ..list-group-item

Cras qofaa odio Dapibus ac haala mijeessuu keessatti Morbi leo risus jedhamuun beekama Porta ac consectetur jedhamuun beekama Vestibulum at eros jedhama

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Kutaalee haala dubbii (contextual classes).

Wantoota tarree akkaataa, durtii ykn walqabsiisan, gitawwan yaadannoo fayyadami. Akkasumas .activemootummaa of keessatti qabata.

Dapibus ac haala mijeessuu keessatti
Cras taa'aa amet nibh libero
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama

Dapibus ac haala mijeessuu keessatti Cras taa'aa amet nibh libero Porta ac consectetur jedhamuun beekama Vestibulum at eros jedhama

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Qabiyyee amala

HTML kamiyyuu jechuun ni danda'ama keessaa dabali, gareewwan tarree walitti hidhaman akka isa armaan gadiitiif illee.

Mata duree wanta garee tarreessi

Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Maecenas sed diam eget risus varius blandit jedhamuun beekama.

Mata duree wanta garee tarreessi

Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Maecenas sed diam eget risus varius blandit jedhamuun beekama.

Mata duree wanta garee tarreessi

Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Maecenas sed diam eget risus varius blandit jedhamuun beekama.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Yeroo hunda barbaachisaa ta'uu baatus, yeroo tokko tokko DOM kee saanduqa keessa kaa'uu qabda. Haalota sanaaf, qaama paanaalii yaali.

Fakkeenya bu’uuraa

Akka durtiitti, wanti .panelgodhu hundi qabiyyee tokko tokko qabachuuf daangaa bu'uuraa fi padding tokko tokko hojiirra oolchuudha.

Fakkeenya paanaalii bu'uuraa

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Paanaalii mata duree qabu

Salphaatti qabduu mata duree gara paanaalii keetti dabali .panel-heading. Akkasumas mata duree dursee akkaataa itti ta'e dabaluuf gita waliin kamiyyuu hammachuu dandeessa <h1>. Haa ta'u malee, hammangaawwan qubee - tiin irra darbamu .<h6>.panel-title<h1><h6>.panel-heading

Halluu hidhaa sirrii ta'eef, hidhannoo mata dureewwan keessa kaa'uu kee mirkaneessi .panel-title.

Mata duree paanaalii mata duree malee

Qabiyyee paanaalii

Mata duree paanaalii

Qabiyyee paanaalii

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Paaneliin jala jalaa qabu

Qabduu ykn barruu lammaffaa keessatti marsi .panel-footer. Hubadhu, jalaan qaaqa yeroo jijjiiramoota yaadannoo fayyadamtu halluuwwanii fi daangaawwan hin dhaalan sababiin isaas isaan fuuldura akka ta'aniif waan hin yaadamneef.

Qabiyyee paanaalii

Jalqaba paanaalii

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Filannoowwan haala dubbiitiin

Akkuma qaamolee biroo, salphaatti gita haalata haalata kamiyyuu dabaluudhaan paanaalii haalata murtaa'eef hiika guddaa akka qabaatu godhi.

Mata duree paanaalii

Qabiyyee paanaalii

Mata duree paanaalii

Qabiyyee paanaalii

Mata duree paanaalii

Qabiyyee paanaalii

Mata duree paanaalii

Qabiyyee paanaalii

Mata duree paanaalii

Qabiyyee paanaalii

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Gabatee waliin

.tableDizaayinii wal hin tuqneef paanaalii keessaa daangaa hin qabne kamiyyuu dabali . Yoo jiraate .panel-body, addaan baasuuf daangaa dabalataa gubbaa gabatee irratti daballa.

Mata duree paanaalii

Qabiyyee paanaalii durtii tokko tokko asitti. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Aenean eu leo quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

#	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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Yoo qaamni qaaqa hin jirre, qaamni mataduree qaaqa irraa gara gabatee osoo addaan hin citin socho'a.

Mata duree paanaalii

#	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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Garee tarree waliin

Gareewwan tarree bal'ina guutuu salphaatti qaaqa kamiyyuu keessaa hammachiisi.

Mata duree paanaalii

Qabiyyee paanaalii durtii tokko tokko asitti. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Aenean eu leo quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Biraawzaroota bal'ina bilookii of keessaa qabu irratti hundaa'uun safara viidiyoo ykn agarsiisa islaayidii akka murteessan hayyami reeshiyoo keessaa kan meeshaa kamiyyuu irratti sirnaan iskeelii ta'u uumuudhaan.

Seerotni kallattiin <iframe>, <embed>, <video>, fi <object>elementoota irratti hojii irra oolu; .embed-responsive-itemfilannoodhaan yeroo amaloota biroof akkaataa walsimsiisuu barbaaddu gita sanyii ifa ta'e fayyadami .

Gorsa Deggeraa! Sana siif waan irra darbinu s frameborder="0"kee keessatti hammachuun si hin barbaachisu .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Akka gaariitti durtii

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

Ilaa ani boolla bishaanii keessa jira!

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

Kutaawwan filannoo

Paadiingii fi goleewwan geengoo gita fooyyessaa filannoo lamaa wajjin too'adhu.

Ilaa ani boolla guddaa tokko keessa jira!

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

Ilaa ani boolla xiqqoo tokko keessa jira!

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

Qaamolee

Glyphicons jedhaman

Glyphs jiran

Akkaataa itti fayyadama

Qaamolee biroo wajjin hin makaminaa

Qaamolee duwwaa irratti qofa fayyadamuuf

Bakka qubee mallattoo jijjiiruu

Mallattoolee dhaqqabamaa ta'an

Fakkeenyaaf

Dropdowns kan jedhu

Fakkeenya

Hiriirsuu

Ejjennoo dabalataa barbaadu ta’a

Hiriirsa .pull-righthin barbaachifne

Mata dureewwan

Qoqqoodduu

Wantoota menu hanqifaman

Gareewwan buttooni

Tooltips & popovers gareewwan button keessatti qindaa'ina addaa barbaadu

Sirrii ta’uu isaa mirkaneessuu rolefi asxaa kennuu

Fakkeenya bu’uuraa

Barruu meeshaa qaree

Saayizii gochuu

Koonyaa gochuu

Jijjiirama dhaabbataa

Gareewwan buttooni sirrii ta'an

Daangaa qabachuu

IE8 fi daangaawwan

<a>Elementiiwwan waliin

Hidhamtoota akka buttooniitti hojjetan

<button>Elementiiwwan waliin

Qabduu kan gadi bu'u

Hirkatummaa pilaagii

Buttooni tokko kan gadi bu'u

Tarreewwan qaree addaan qoodi

Saayizii gochuu

Jijjiirama dropup

Garee galtee

Barreeffama <input>s qofa

Tooltips & popovers gareewwan galtee keessatti qindaa'ina addaa barbaadu

Qaamolee biroo wajjin hin makaminaa

Yeroo hunda asxaalee itti dabali

Fakkeenya bu’uuraa

Saayizii gochuu

Sanduuqawwan filannoo fi dabalataa raadiyoo

Button dabalata

Qabduulee kanneen gadi bu'an qaban

Qabduulee qoodaman

Qabduu dachaa

Navs jedhama

Navs paanaalii caancalaa fayyadamuun JavaScript caancalaa plugin barbaada

Navs akka navigeeshiniitti fayyadaman dhaqqabamaa taasisuu

Caancaloota

Kiniinii

Haqa qabeessa

Safarii fi deebii kennuu danda'u haqa qabeessa navs

Hidhamtoota hanqifaman

Hojiin walqabsiisaa dhiibbaa hin geessisu

Gadi bu'aa fayyadamuu

Caancaloota kanneen gadi bu'an qaban

Kiniinii kan dropdown qabu

Navbar jedhama

Navbar durtii

Qabiyyee dhangala’aa jiru

Ijaarsa JaavaScript barbaada

Qabxii cabsuu navbar moobaayilaa kufe jijjiiruu

Navbars dhaqqabamaa taasisuu

Fakkii maqaa daldalaa

Unkaalee

Of eeggannoo meeshaa moobaayilaa

Yeroo hunda asxaalee itti dabali

Qabduulee

Fayyadama haala dubbii adda ta’e

Barreeffama

Hidhamtoota nav hin taane

Hiriirsa qaamolee

Qaamolee hedduu mirga qindeessuu

Gubbaa irratti dhaabbataa ta'e

Qaama padding barbaachisa

Gara jalaatti sirreeffame

Hiriirsa `.pull-right`hin barbaachifne

Sirrii ta’uu isaa mirkaneessuu `role`fi asxaa kennuu

`<a>`Elementiiwwan waliin

`<button>`Elementiiwwan waliin

Barreeffama `<input>`s qofa