Glyphicons jedhaman

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 gilfiikooniin-dhiibbaa ta’e
  • glyphicon glyphicon-gurraaf bilbila
  • 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.

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

Dropdowns kan jedhu

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

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>

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

Ejjennoo dabalataa barbaadu ta’a

Gad-bu'oonni ofumaan karaa CSS dhangala'aa idilee galmee keessa kaa'amu. Kana jechuun gadi bu'oonni warra qabeentota murtaa'an qabaniin muramuu danda'u overflowykn daangaa mul'annoo ala mul'achuu danda'u. Dhimmoota kana akkuma ka’anitti ofumaan furmaata itti kenni.

Hiriirsa .pull-righthin barbaachifne

.pull-rightv3.1.0 irraa eegalee, menu gadi bu'aa irratti deprecated gooneerra . Menuu tokko mirga-hiriirsuuf, fayyadami .dropdown-menu-right. Qaamonni nav mirgaan qindaa'an barruu navbar keessatti ofumaan menu qindeessuuf gosa mixin gita kanaa fayyadamu. Isa irra darbuuf, fayyadami .dropdown-menu-left.

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

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>

Hidhamtoota walduraa duubaan adda baasuuf qoqqoodduu sajoo tarree keessatti dabali.

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

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>

Gareewwan buttooni

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

Barruu meeshaa qaree

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.

<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 kan gadi bu'u

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>

Garee galtee

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.

@

@fakkeenya.com

$ .00 ta’a

https://fakkeenya.com/fayyadamtoota/
<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 jedhama

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.

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>

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>

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>

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>

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>

Navbar jedhama

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:

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

Ijaarsa JaavaScript barbaada

Yoo JaavaScript hanqifamee fi bakki ilaalchaa dhiphoo ta'ee navbar kufa, navbar bal'isuu fi qabiyyee keessaa ilaaluun hin danda'amu .navbar-collapse.

Navbar deebii kennu, pilaaginiin kufaatii gosa Bootstrap kee keessatti hammatamuu barbaada.

Qabxii cabsuu navbar moobaayilaa kufe jijjiiruu

Navbar gara mul'ata sochootuu dhaabbataa isaatti yeroo buufanni ilaalchaa , caalaa dhiphatutti kufa @grid-float-breakpoint, fi gara mul'ata sochootuu hin taane qajeelaa isaatti yeroo buufanni ilaalchaa yoo xiqqaate @grid-float-breakpointbal'ina qabutti babal'ata. Jijjiiramaa kana madda Xiqqaa keessatti yeroo navbar kufa/bal'atu to'achuuf sirreessii. Gatiin durtii 768px(foddaa "xiqqaa" ykn "taableetii" isa xiqqaadha).

Navbars dhaqqabamaa taasisuu

Qaama fayyadamuu kee mirkaneessi <nav>ykn, yoo elementii waliigalaa kan akka a fayyadamte, fayyadamtoota teeknooloojiiwwan gargaarsaaf akka naannoo mallattoo ifatti adda baasuuf navbar hunda irratti <div>a dabali .role="navigation"

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

Of eeggannoo meeshaa moobaayilaa

Meeshaalee sochootuu irratti elementoota dhaabbataa keessaa too'annoo unkaa fayyadamuu ilaalchisee of eeggannoowwan tokko tokko jiru. Bal'ina isaaf docs deeggarsa browser keenya ilaalaa .

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>

Fayyadama haala dubbii adda ta’e

Akkuma gita qaree istaandaardii , irratti fi elementoota .navbar-btnfayyadamuun ni danda'ama . Haa ta'u malee, gitaalee qaree istaandaardii lamaanuu elementoota keessa jiran irratti fayyadamuu hin qaban .<a><input>.navbar-btn<a>.navbar-nav

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'ina qaban salphaatti qabannaa qaamolee navbar hammangaa meeshaa hunda keessatti.

Qaamolee hedduu mirga qindeessuu

.navbar-rightNavbars yeroo ammaa gita hedduu waliin daangaa qabu . .navbar-rightQabiyyee sirnaan iddooqa baasuuf, elementii dhumaa irratti margina negaatiivii fayyadamna . Yeroo elementoonni dachaa gita sana fayyadaman jiraatan, margiin kun akka yaadametti hin hojjetan.

Kana yeroo qaama sana v4 keessatti irra deebi'anii barreessuu dandeenyu irra deebinee ilaalla.

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>

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>

Asxaalee

Fakkeenya

Fakkeenya mata duree Haaraa

Fakkeenya mata duree Haaraa

Fakkeenya mata duree Haaraa

Fakkeenya mata duree Haaraa

Fakkeenya mata duree Haaraa
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 .

Baajiiwwan

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>

Jumbotroon jedhamuun beekama

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>

Mata duree fuula

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>

Suuraalee xiqqaa

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.

100%x200 ta’a

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

100%x200 ta’a

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

100%x200 ta’a

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>

Akeekkachiisa

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.

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

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

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

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

Barruulee adeemsaa

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.

60% Guutuu
<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.

40% Guutuu (milkaa'ina) .
20% Guutuu
60% Guutuu (akeekkachiisa) .
80% Guutuu (balaa) .
<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.

40% Guutuu (milkaa'ina) .
20% Guutuu
60% Guutuu (akeekkachiisa) .
80% Guutuu (balaa) .
<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.

45% Guutuu
<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 .

35% Guutuu (milkaa'ina) .
20% Guutuu (akeekkachiisa) .
10% Guutuu (balaa) .
<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>

Wanti miidiyaa

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>

Garee tarreessi

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.

<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

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

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

Paanaalii

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>

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

Deebii kan kennu embed

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>

Wells jedhama

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>