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.
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-path
fi/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-only
daree 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-label
amaloota 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.
Dogoggora: 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 .dropup
warraatti 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-right
dabali ..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 overflow
ykn daangaa mul'annoo ala mul'achuu danda'u. Dhimmoota kana akkuma ka’anitti ofumaan furmaata itti kenni.
Hiriirsa .pull-right
hin barbaachifne
.pull-right
v3.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>
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 .disabled
dabali .<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 .
Sirrii ta’uu isaa mirkaneessuu role
fi asxaa kennuu
Teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – buttooni walduraa duubaan garee ta’an akka dabarsaniif, role
amalli 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.
role
Dabalataanis, 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-labelledby
akkasumas fayyadamuu ni danda'u.
Fakkeenya bu’uuraa
Qabduulee walduraa duubaan jiran .btn
in 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.
Bitaa
Gidduu
Sirrii
Bitaa
Gidduu
Sirrii
Bitaa
Gidduu
Sirrii
Bitaa
Gidduu
Sirrii
<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-group
kan 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.
Furtuu
Furtuu
Gadi bu'aa
Furtuu
Furtuu
Gadi bu'aa
Gadi bu'aa
Gadi bu'aa
<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: -1px
daangaawwan balleessuu mannaa tuuluuf fayyadama. Haa ta'u malee, margin
waliin 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
.btn
s 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"
.
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-group
fi 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.
Durtii dha
Sadarkaa tokkoffaa
Milkaa'ina
Info
Akeekkachiisa
Hamaa
<!-- 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.
Durtii dha
Toggle Gadi Bu'aa
Sadarkaa tokkoffaa
Toggle Gadi Bu'aa
Milkaa'ina
Toggle Gadi Bu'aa
Info
Toggle Gadi Bu'aa
Akeekkachiisa
Toggle Gadi Bu'aa
Hamaa
Toggle Gadi Bu'aa
<!-- 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-group
waliin 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).
Dabalata ykn qaree tokko gama lamaan galtee tokkoo irratti kaa'i. Akkasumas tokko gama lamaan galtee tokkoo kaa'uu dandeessa.
Dabalata hedduu ( .input-group-addon
ykn .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>
Gitoota safara unkaa fira .input-group
ofitti 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>
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 -->
Qabduu gareewwan galtee keessa jiran xiqqoo adda ta'anii fi sadarkaa dabalataa tokko man'ee barbaadu. Bakka , qareewwan marsuuf .input-group-addon
fayyadamuu si barbaachisa . .input-group-btn
Kunis 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 -->
<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 -->
<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>
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, .nav
gita bu'uuraa irraa eegalee, akkasumas haalata qooddame. Tokkoon tokkoo akkaataa gidduutti jijjiiruuf gita fooyyessaa jijjiiri.
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-tabs
barbaada ..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-pills
bakka 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>
Navbar durtii
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-breakpoint
ykn 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-breakpoint
bal'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>
Fakkii maqaa daldalaa
Barruu jijjiiruudhaan maqaa navbar fakkii mataa keetiin bakka buusi <img>
. The padding fi height mataa isaa waan .navbar-brand
qabuuf, 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-form
qindaa'ina dhaabbataa sirrii fi amala kufaatiidhaaf iddoowwan ilaalchaa dhiphoo keessatti. Qabiyyee navbar keessa eessa akka jiraatu murteessuuf filannoowwan qindeessaa fayyadami.
Akka heads up, .navbar-form
koodii isaa baay'ee .form-inline
via 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>
.navbar-btn
Gitaa <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-btn
fayyadamuun 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
Barreeffama
Tarreewwan barruu qaama keessatti .navbar-text
, yeroo baay'ee <p>
mallattoo irratti dursaa fi halluu sirrii ta'eef marsi.
Mark Otto jedhamuun mallatteesse
<p class= "navbar-text" > Signed in as Mark Otto</p>
Hidhamtoota nav hin taane
Namoota hidhannoowwan istaandaardii qaama qajeelcha navbar idilee keessa hin jirre fayyadamaniif, .navbar-link
filannoowwan 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>
Hiriirsa qaamolee
Hidhamtoota nav, unkaalee, qareewwan, ykn barruu, gitaalee .navbar-left
ykn faayidaa fayyadamuun qindeessii. .navbar-right
Gitoonni 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-left
fi .pull-right
, garuu isaan gara gaaffiiwwan miidiyaatti bal'ina qaban salphaatti qabannaa qaamolee navbar hammangaa meeshaa hunda keessatti.
Qaamolee hedduu mirga qindeessuu
.navbar-right
Navbars yeroo ammaa gita hedduu waliin daangaa qabu . .navbar-right
Qabiyyee 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.
Gubbaa irratti dhaabbataa ta'e
Qabiyyee navbar giddugaleessaa fi paadiitti .navbar-fixed-top
a .container
ykn 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 padding
gubbaa <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 .
Gara jalaatti sirreeffame
Qabiyyee navbar giddugaleessaa fi paadiitti .navbar-fixed-bottom
a .container
ykn 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 padding
gara 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 .
Gubbaa istaatiksii
Navbar bal'ina guutuu kan fuula waliin gara biraatti garagaluun .navbar-static-top
a .container
ykn .container-fluid
gara 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>
Navbar garagalfame
Ilaalcha navbar dabaluudhaan fooyyessi .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
Bakka fuula ammaa sadarkaa qajeelchaa keessaa agarsiisi.
Addaan baastoonni ofumaan CSS keessatti karaa :before
fi content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
Hidhamtoota fuula marsariitii ykn appii keessaniif qaama fuula fuula hedduu qabuun, ykn filannoo fuula salphaa ta'een kenni .
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" > « </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" > » </span>
</a>
</li>
</ul>
</nav>
Haalata hanqifamee fi socho'aa
Hidhamtoonni haala adda addaatiif haala barbaadamuun kan jijjiiramudha. .disabled
Hidhamtoota hin cuqaasuu fi .active
fuula ammaa agarsiisuuf fayyadami .
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </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" > « </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-lg
ykn .pagination-sm
safara 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>
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" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
Haalata hanqifame filannoo
Hidhamtoonni fuulaa akkasumas .disabled
gita faayidaa waliigalaa fuula irraa fayyadamu.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
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-block
qaama 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.
<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 :empty
filannoo CSS) qabiyyeen tokkollee keessa yoo hin jiraanne.
Walsimsiisa qaxxaamuraa-browser
Baajiiwwan Internet Explorer 8 keessatti ofumaan hin kufan sababiin isaas :empty
filannoof 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, .container
s hundaan ala kaa'iitii kanaa mannaa .container
keessaa itti dabali.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
Qaaqa salphaa h1
kutaa qabiyyee fuula tokko irratti haala sirrii ta'een addaan baasuu fi qooduuf. h1
Qaama 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 .alert
fi 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-dismissible
Qabduu filannoo fi cufi dabaluudhaan akeekkachiisa kamiyyuu irratti ijaari .
×
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" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
Hidhamtoota akeekkachiisa keessatti
.alert-link
Akeekkachiisa 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>
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 . style
Malleen 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
<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-width
barruu adeemsaa irratti a dabaluu yaadaa.
<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) .
60% Guutuu (akeekkachiisa) .
<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) .
60% Guutuu (akeekkachiisa) .
<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 .active
itti dabali . .progress-bar-striped
IE9 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
.progress
Isaan 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>
Akkaataa wanta abstraaktii gosoota qaamolee adda addaa ijaaruuf (akka yaada biloogii, Tweets, fi kkf) kanneen fakkii bitaa- ykn mirga-hiriirfame qabiyyee barruu cinatti agarsiisan.
Miidiyaan durtii wanta miidiyaa (fakkiiwwan, viidiyoo, sagalee) gara bitaa ykn mirga uggura qabiyyee agarsiisa.
<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-left
fi .pull-right
akkasumas jiru fi duraan akka qaama qaama miidiyaatti fayyadamaa turan, garuu fayyadama sanaaf akka v3.3.0tti hin barbaachifne. Isaan tilmaamaan .media-left
fi , kan html keessatti booda kaa'amuu qabu .media-right
malee ..media-right
.media-body
Fakkiiwwan ykn miidiyaaleen biroo gubbaa, gidduu ykn jalaan qindaa'uu danda'u. Durtii gubbaa qindaa'ee jira.
<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>
Xiqqoo mallattoo dabalataatiin, miidiyaa tarree keessaa fayyadamuu dandeessa (dhangiiwwan yaada ykn tarreewwan barruuleedhaaf faayidaa qaba).
<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.
<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>
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
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" >
<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 .disabled
dabali ..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 .active
mootummaa 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>
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 .panel
godhu 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.
<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
.table
Dizaayinii 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-item
filannoodhaan 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>