Nneɛma a ɛwom
Bɛboro dumien a wotumi de di dwuma bio a wɔasisi de ama iconography, dropdowns, input groups, navigation, kɔkɔbɔ, ne nea ɛkeka ho pii.
Glyphicons a wɔde kyerɛw nsɛm
Glyph ahorow a ɛwɔ hɔ
Glyphs bɛboro 250 a ɛwɔ font format mu a efi Glyphicon Halflings set no mu ka ho. Glyphicons Halflings taa ntumi nnya bi kwa, nanso wɔn bɔfo no ama wɔanya Bootstrap a wontua hwee. Sɛ́ aseda no, yɛsrɛ ara ne sɛ wode link a ɛsan kɔ Glyphicons no bɛka ho bere biara a ɛbɛyɛ yiye.
- glyphicon glyphicon-nsoromma kyerɛwtohɔ
- glyphicon glyphicon-a wɔde ahyɛ mu
- glyphicon nkyerɛwde a ɛyɛ fɛ-euro
- glyphicon a wɔde hyɛ mu
- glyphicon glyphicon-a wɔayi afi mu
- glyphicon glyphicon-mununkum a ɛyɛ nwonwa
- glyphicon glyphicon-nsɛm a wɔde kyerɛw nsɛm
- glyphicon glyphicon-pɛnsere a wɔde kyerɛw nsɛm
- glyphicon glyphicon-ahwehwɛ a wɔde yɛ nneɛma
- glyphicon glyphicon-nnwom a ɛyɛ dɛ
- glyphicon glyphicon-hwehwɛ nsɛm mu
- glyphicon glyphicon-koma mu nsɛm
- glyphicon glyphicon-nsoromma a ɛyɛ fɛ
- glyphicon glyphicon-nsoromma-a hwee nni mu
- glyphicon glyphicon-a ɔde di dwuma
- glyphicon glyphicon-film a wɔde yɛ sini
- glyphicon glyphicon-a ɛto so abien a ɛyɛ kɛse
- glyphicon glyphicon-a ɛyɛ nsɛm a ɛyɛ dɛ
- glyphicon glyphicon-a ɛto so abien
- glyphicon glyphicon-ok a ɛkyerɛ sɛnea obi te nka
- glyphicon glyphicon-a woyi fi mu
- glyphicon glyphicon-a ɛyɛ fɛ yiye
- glyphicon glyphicon-a ɛyɛ ketewaa bi
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-nsɛnkyerɛnne
- glyphicon glyphicon-aduru a wɔde hyɛ mu
- glyphicon glyphicon-nwura a wɔde yɛ nneɛma
- glyphicon glyphicon-fie a ɛyɛ fɛ
- glyphicon glyphicon-fael no ho nsɛm
- glyphicon glyphicon-bere a ɛyɛ fɛ
- glyphicon glyphicon-kwan a ɛyɛ fɛ
- glyphicon glyphicon-twe-a-wɔde-alt
- glyphicon glyphicon-twe adwene si so
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-asɛm a wɔde hyɛ mu
- glyphicon glyphicon-agorudi-kuruwa
- glyphicon glyphicon-a wɔsan yɛ no bio
- glyphicon glyphicon-a ɛyɛ foforo
- glyphicon glyphicon-nkyerɛwee-alt
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-frankaa a ɛyɛ fɛ
- glyphicon glyphicon-asɛm a wɔde bɔ asom
- glyphicon glyphicon-nneɛma a wɔde di dwuma
- glyphicon glyphicon-nneɛma a ɛkɔ fam
- glyphicon glyphicon-nneɛma a ɛkɔ soro
- glyphicon nkyerɛwde-qrcode
- glyphicon glyphicon-barkode a wɔde kyerɛw nsɛm
- glyphicon glyphicon-asɛmfua a wɔde hyɛ mu
- glyphicon glyphicon-nsɛmfua a wɔde kyerɛw nsɛm
- glyphicon glyphicon-nwoma a wɔde kyerɛw nsɛm
- glyphicon glyphicon-nkyerɛwee a wɔde kyerɛw nsɛm
- glyphicon glyphicon-a wɔde tintim nhoma
- glyphicon glyphicon-mfoninitwa afiri
- glyphicon glyphicon-kyerɛw nsɛm a wɔde kyerɛw nsɛm
- glyphicon glyphicon-a ɛyɛ den
- glyphicon glyphicon-a ɛyɛ nkyerɛwde a wɔde hyɛ mu
- glyphicon glyphicon-nsɛm-a-korɔn
- glyphicon glyphicon-nsɛm-trɛw-trɛw
- glyphicon glyphicon-ahyɛ-benkum so
- glyphicon glyphicon-ahyɛ-mfinimfini
- glyphicon glyphicon-ahyɛ-nifa so
- glyphicon glyphicon-ahyɛ-ayɛ-ayɛ nea ɛfata
- glyphicon glyphicon-kyerɛw nsɛm a wɔahyehyɛ
- glyphicon glyphicon-a ɛwɔ benkum so
- glyphicon glyphicon-a wɔde ahyɛ mu-nifa so
- glyphicon glyphicon-anim bere-video
- glyphicon glyphicon-mfonini a ɛyɛ fɛ
- glyphicon glyphicon-asase mfonini-agyiraehyɛde
- glyphicon glyphicon-ayɛ nsakrae wɔ mu
- glyphicon glyphicon-tint a wɔde hyɛ mu
- glyphicon glyphicon-sesa nsɛm a wɔde kyerɛw nsɛm
- glyphicon glyphicon-kyɛ nsɛm
- glyphicon glyphicon-hwɛ nsɛm a wɔka kyerɛ
- glyphicon glyphicon-a wɔde tu kwan
- glyphicon glyphicon-anammɔn-akyi
- glyphicon glyphicon-ntɛmntɛm-akyi
- glyphicon glyphicon-a ɛkɔ akyi
- glyphicon glyphicon-asɛm a wɔde di agoru
- glyphicon glyphicon-gyinae kakra
- glyphicon glyphicon-gyinabea
- glyphicon glyphicon-a ɛkɔ anim
- glyphicon glyphicon-a ɛkɔ anim ntɛmntɛm
- glyphicon glyphicon-anammɔn-a ɛkɔ anim
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-chevron-benkum so a wɔde hyɛ mu
- glyphicon nkyerɛwde-chevron-nifa so
- glyphicon glyphicon-plus-ahyɛnsodeɛ
- glyphicon glyphicon-a wɔayi afi mu-ahyɛnsode
- glyphicon glyphicon-yi-nsɛnkyerɛnne
- glyphicon glyphicon-ok-ahyɛnsodeɛ
- glyphicon glyphicon-asɛmmisa-sɛnkyerɛnne
- glyphicon glyphicon-nsɛm-ahyɛnsode
- glyphicon glyphicon-a ɛwɔ screen so no ho mfonini
- glyphicon glyphicon-yi-kwan a ɛyɛ kurukuruwa
- glyphicon glyphicon-ok-a ɛyɛ kurukuruwa
- glyphicon glyphicon-ban-a ɛyɛ kurukuruwa
- glyphicon glyphicon-agyan-benkum so
- glyphicon glyphicon-agyan-nifa so
- glyphicon glyphicon-agyan a ɛwɔ soro
- glyphicon glyphicon-agyan-a ɛkɔ fam
- glyphicon glyphicon-kyɛ-alt
- glyphicon glyphicon-sesa ne kɛse-a ɛyɛ fɛ
- glyphicon glyphicon-sesa ne kɛse-ketewa
- glyphicon glyphicon-nsɛm-asɛm-nsɛnkyerɛnne
- glyphicon glyphicon-akyɛde a wɔde ma
- glyphicon glyphicon-ahaban a ɛyɛ fɛ
- glyphicon glyphicon-ogya a ɛyɛ fɛ
- glyphicon glyphicon-ani a ɛbue
- glyphicon glyphicon-ani a wɔde hyɛ mu
- glyphicon glyphicon-kɔkɔbɔ-sɛnkyerɛnne
- glyphicon glyphicon-wimhyɛn a wɔde di dwuma
- glyphicon glyphicon-kalenda a wɔde hyɛ mu
- glyphicon glyphicon-a ɛnyɛ nea wɔahyɛ da ayɛ
- glyphicon glyphicon-nsɛm a wɔka kyerɛ
- glyphicon glyphicon-magnet a wɔde hyɛ mu
- glyphicon glyphicon-chevron-a ɛwɔ soro
- glyphicon glyphicon-chevron-a ɛwɔ fam
- glyphicon glyphicon-nsɛm a wɔde kyerɛw nsɛm
- glyphicon glyphicon-adetɔ-teaseɛnam
- glyphicon glyphicon-folda-a wɔato mu
- glyphicon glyphicon-folda-abue
- glyphicon glyphicon-sesa ne kɛse-gyina hɔ
- glyphicon glyphicon-sesa ne kɛse-a ɛkɔ soro
- glyphicon glyphicon-hdd a wɔde hyɛ mu
- glyphicon glyphicon-nantwinini abɛn
- glyphicon glyphicon-dɔn a wɔde kyerɛw nsɛm
- glyphicon glyphicon-adansedi krataa
- glyphicon glyphicon-nsateaa a wɔde hyɛ soro
- glyphicon glyphicon-nsateaa-a ɛwɔ fam
- glyphicon glyphicon-nsa-nifa so
- glyphicon glyphicon-nsa-benkum so
- glyphicon glyphicon-nsa a wɔde hyɛ soro
- glyphicon glyphicon-nsa a wɔde hyɛ ase
- glyphicon glyphicon-kuruwa-agyan-nifa
- glyphicon glyphicon-kuruwa-agyan-benkum so
- glyphicon glyphicon-kyinhyia-agyan-a-kɔ soro
- glyphicon glyphicon-kyinhyia-agyan-a ɛkɔ fam
- glyphicon glyphicon-wiase a ɛwɔ wiase nyinaa
- glyphicon glyphicon-safe a wɔde hyɛ mu
- glyphicon glyphicon-nnwuma a wɔde yɛ adwuma
- glyphicon glyphicon-afiri a wɔde yi nneɛma mu
- glyphicon glyphicon-asɛm a wɔde kyerɛw nneɛma
- glyphicon glyphicon-a ɛwɔ anim no nyinaa
- glyphicon glyphicon-dashboard no ho nsɛm a wɔde kyerɛw nsɛm
- glyphicon glyphicon-krataa a wɔde kyerɛw nsɛm
- glyphicon glyphicon-koma-a hwee nni mu
- glyphicon glyphicon-nsɛmfua a wɔde di dwuma
- glyphicon glyphicon-fon a wɔde di dwuma wɔ telefon so
- glyphicon glyphicon-aduru a wɔde hyɛ nipadua mu
- glyphicon glyphicon-usd a wɔde kyerɛw nsɛm
- glyphicon nkyerɛwde a ɛyɛ fɛ-gbp
- glyphicon glyphicon-asɛmfua a wɔde di dwuma
- glyphicon glyphicon-hyehyɛ-sɛ-nkyerɛwde
- glyphicon glyphicon-hyehyɛ-sɛ-nkyerɛwde-alt
- glyphicon glyphicon-hyehyɛ-sɛ-wɔde-hyehyɛ
- glyphicon glyphicon-hyehyɛ-sɛ-hyehyɛ-alt
- glyphicon glyphicon-hyehyɛ-sɛ-wɔde-su ahorow
- glyphicon glyphicon-hyehyɛ-sɛ-wɔde-su-alt
- glyphicon glyphicon-a wɔanhwɛ mu
- glyphicon glyphicon-trɛw mu
- glyphicon glyphicon-a ɛhwe ase-ase
- glyphicon glyphicon-a ɛyɛ mmerɛw sɛ wobɛhwe ase
- glyphicon glyphicon-kɔ mu
- glyphicon glyphicon-a ɛyɛ fɛ a ɛyɛ fɛ
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-mfɛnsere-foforo
- glyphicon glyphicon-kyerewtohɔ
- glyphicon glyphicon-gye nsɛm a ɛyɛ dɛ
- glyphicon glyphicon-a wɔabue ano
- glyphicon glyphicon-a wɔakora so
- glyphicon glyphicon-a wɔde ba amannɔne
- glyphicon glyphicon-a wɔde kɔ amannɔne
- glyphicon glyphicon-a wɔde mena
- glyphicon glyphicon-floppy-disk a wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so
- glyphicon glyphicon-floppy-a wɔakora so
- glyphicon glyphicon-floppy-a woyi fi mu
- glyphicon glyphicon-floppy-a wɔde sie
- glyphicon glyphicon-floppy-a wɔabue mu
- glyphicon glyphicon-a wɔde gye sika-kaad
- glyphicon glyphicon-a wɔde kɔ baabi foforo
- glyphicon glyphicon-nkuku a wɔde yɛ aduan
- glyphicon glyphicon-asɛmti a wɔde kyerɛw nsɛm
- glyphicon glyphicon-a wɔde ahyɛ mu
- glyphicon glyphicon-asɛm a wɔde bɔ aso
- glyphicon glyphicon-frɛ-alt a wɔde di dwuma wɔ ɔkwan a ɛfata so
- glyphicon glyphicon-abantenten a wɔde hyɛ mu
- glyphicon glyphicon-asɛmfua ahorow
- glyphicon glyphicon-sd-video a wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so
- glyphicon glyphicon-hd-video a wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so
- glyphicon glyphicon-nsɛmfua a ɛwɔ ase
- glyphicon glyphicon-nnyigyei-nsɛm a ɛyɛ dɛ
- glyphicon glyphicon-nnyigyei-dolby a ɛyɛ dɛ
- glyphicon glyphicon-nnyigyei-5-1
- glyphicon glyphicon-nnyigyei-6-1
- glyphicon glyphicon-nnyigyei-7-1
- glyphicon glyphicon-akyerɛw-ahyɛnsode
- glyphicon glyphicon-nkyerɛwde-agyiraehyɛde
- glyphicon glyphicon-mununkum-twe adwene si so
- glyphicon glyphicon-mununkum-a wɔde gu so
- glyphicon glyphicon-dua-a-wɔde a ɛyɛ fɛ
- glyphicon glyphicon-dua-a nhaban gu so
- glyphicon glyphicon-cd a wɔde hyɛ mu
- glyphicon glyphicon-kora-fael no
- glyphicon glyphicon-abue-fael no
- glyphicon glyphicon-a ɛkɔ soro
- glyphicon glyphicon-a wɔde yɛ mfonini
- glyphicon glyphicon-a wɔde ahyɛ mu
- glyphicon glyphicon-asɛm a wɔde bɔ kɔkɔ
- glyphicon glyphicon-a ɛma ɛyɛ pɛpɛɛpɛ
- glyphicon glyphicon-hene a ɔyɛ ɔhene
- glyphicon glyphicon-ɔhemmaa a ɔyɛ ɔhemmaa
- glyphicon glyphicon-akuturuku a ɛyɛ fɛ
- glyphicon glyphicon-ɔsɔfopɔn
- glyphicon glyphicon-ɔpɔnkɔsotefo
- glyphicon glyphicon-akokoaa-aduru a wɔde yɛ aduan
- glyphicon glyphicon-ntama a wɔde hyɛ mu
- glyphicon glyphicon-kyerɛwpon tuntum
- glyphicon glyphicon-mpa a wɔde hyɛ mu
- glyphicon glyphicon-apɔw-mu-teɛteɛ
- glyphicon glyphicon-a wɔde popa nneɛma
- glyphicon glyphicon- dɔnhwerew dɔnhwerew
- glyphicon glyphicon-kanea a wɔde hyɛ mu
- glyphicon glyphicon-a ɛyɛ nea ɛyɛ abien
- glyphicon glyphicon-akraman a wɔde wɔn ho hyɛ mu
- glyphicon glyphicon-nsɛm a wɔde twitwiw nneɛma
- glyphicon glyphicon-bitcoin a wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so
- glyphicon glyphicon-btc a ɛyɛ nwonwa no
- glyphicon glyphicon-xbt a wɔde hyɛ mu
- glyphicon glyphicon-yen a wɔde kyerɛw nsɛm
- glyphicon nkyerɛwde a ɛwɔ anim-jpy
- glyphicon glyphicon-ruble a wɔde hyɛ mu
- glyphicon glyphicon-a wɔde hyɛ mu
- glyphicon glyphicon-nsɛmfua a wɔde di dwuma
- glyphicon glyphicon-nsukyenee a ɛyɛ fɛ
- glyphicon glyphicon-nsukyenee-lolly-a ɛyɛ dɛ
- glyphicon glyphicon-nkyerɛkyerɛ a wɔde ma
- glyphicon glyphicon-a wɔpaw-a ɛwɔ soro
- glyphicon glyphicon-a wɔpaw-gyina hɔ
- glyphicon glyphicon-menu-hamburger a wɔde yɛ aduan
- glyphicon glyphicon-kwan-mfɛnsere
- glyphicon glyphicon-ngo a wɔde yɛ nneɛma
- glyphicon glyphicon-aburow a wɔde yɛ aduan
- glyphicon glyphicon-ahwehwɛ a wɔde hwɛ owia
- glyphicon glyphicon-nkyerɛwee-kɛse
- glyphicon glyphicon-nkyerɛwee-kɔla
- glyphicon glyphicon-nkyerɛwee-akyi nsɛm
- glyphicon glyphicon-adeɛ-a-ɛhyehyɛ-atifi
- glyphicon glyphicon-ade-a-ahyɛ-ase
- glyphicon glyphicon-adeɛ-a ɛne ne ho hyia-a ɛkɔ soro
- glyphicon glyphicon-adeɛ-a ɛne ne ho hyia-benkum
- glyphicon glyphicon-adeɛ-a-ɛfata-gyina hɔ
- glyphicon glyphicon-adeɛ-a ɛne no hyia-nifa
- glyphicon glyphicon-ahinanan-nifa
- glyphicon glyphicon-ahinanan-benkum so
- glyphicon glyphicon-ahinanan-ase
- glyphicon glyphicon-ahinanan-a ɛwɔ soro
- glyphicon glyphicon-asɛmfua a wɔde di dwuma
- glyphicon glyphicon-nkyerɛwde a ɛwɔ soro
- glyphicon glyphicon-nkyerɛwee a ɛwɔ ase
- glyphicon glyphicon-menu-benkum so na ɛwɔ hɔ
- glyphicon nkyerɛwde-menu-nifa so
- glyphicon glyphicon-menu-a ɛwɔ fam
- glyphicon glyphicon-menu-a ɛwɔ soro
Sɛnea wɔde bedi dwuma
Esiane adwumayɛ nti, ahyɛnsode nyinaa hwehwɛ sɛ wonya nnyinaso adesua ne ankorankoro ahyɛnsode adesua. Sɛ wode bedi dwuma a, ɛkame ayɛ sɛ fa koodu a edidi so yi to baabiara. Hwɛ hu sɛ wubegyaw baabi wɔ ahyɛnsode no ne nsɛm no ntam na ama woatumi ayɛ padding no yiye.
Mfa nneɛma afoforo a ɛwom no nfrafra
Wontumi mfa ahyɛnsode ahorow no nka nneɛma afoforo ho tẽẽ. Ɛnsɛ sɛ wɔde di dwuma ka adesuakuw afoforo ho wɔ element koro no ara so. Mmom, fa nested bi ka ho <span>na fa icon class ahorow no di dwuma wɔ <span>.
Wɔde di dwuma wɔ element ahorow a hwee nni mu nkutoo so
Ɛsɛ sɛ wɔde ahyɛnsode adesua ahorow di dwuma wɔ element ahorow a nkyerɛwee mu nsɛm biara nni mu na enni mmofra elements nkutoo so.
Sesa a wobɛsesa icon font no beae
Bootstrap fa no sɛ icon font fael ahorow bɛba wɔ ../fonts/directory no mu, sɛ wɔde toto CSS fael ahorow a wɔaboaboa ano no ho a. Sɛ wode saa font fael ahorow no kɔ baabi foforo anaa wobɛsesa din a, ɛkyerɛ sɛ wobɛma CSS no ayɛ foforo wɔ akwan abiɛsa no mu biako so:
- Sesa
@icon-font-pathne/anaasɛ@icon-font-namensakrae ahorow a ɛwɔ fibea Less fael ahorow no mu. - Fa relative URLs option a Less compiler no de ama no di dwuma.
- Sesa
url()akwan a ɛwɔ CSS a wɔaboaboa ano no mu.
Fa ɔkwan biara a ɛfata wo nkɔso nhyehyɛe pɔtee no di dwuma.
Ahyɛnsode ahorow a wotumi nya
Nnɛyi nkyerɛase ahorow a ɛboa mfiridwuma no bɛbɔ nneɛma a CSS ayɛ, ne Unicode nkyerɛwde pɔtee bi ho amanneɛ. Sɛnea ɛbɛyɛ a yɛbɛkwati nsɛm a wɔanhyɛ da na ɛyɛ basaa wɔ screen akenkanfo mu (titiriw bere a wɔde ahyɛnsode ahorow di dwuma de siesie hɔ ara kwa no), yɛde aria-hidden="true"su no sie.
Sɛ wode ahyɛnsodeɛ bi redi dwuma de akyerɛ nteaseɛ (sen sɛ wode bɛyɛ afɛfɛdeɛ adeɛ nko ara a), hwɛ sɛ wɔde saa nteaseɛ yi nso bɛkyerɛ mfiridwuma a ɛboa – sɛ nhwɛsoɔ no, fa nsɛm foforɔ ka ho, a wɔde aniwa ahunta ne .sr-onlyadesuakuw no.
Sɛ woreyɛ controls a nsɛm foforo biara nni mu (te sɛ a <button>a ahyɛnsode nkutoo na ɛwom) a, ɛsɛ sɛ wode nsɛm foforo ma bere nyinaa de kyerɛ control no atirimpɔw, sɛnea ɛbɛyɛ a ntease bɛba mu ama wɔn a wɔde mfiridwuma a ɛboa di dwuma no. Wɔ eyi mu no, wubetumi de aria-labelattribute bi aka control no ankasa so.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Nhwɛso ahorow
Fa di dwuma wɔ bɔtn, bɔtn akuw ma adwinnade pon, akwantu, anaa kratasin a wɔde ahyɛ mu a wɔadi kan ahyɛ mu.
<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>Ahyɛnsodeɛ a wɔde di dwuma wɔ kɔkɔbɔ mu de kyerɛ sɛ ɛyɛ mfomsoɔ nkra, a .sr-onlynsɛm foforɔ ka ho de de saa nsɛnkyerɛnneɛ yi kɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma.
Mfomsoɔ:Hyehyɛ email address a ɛfata
<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>Nneɛma a wɔde gu fam
Toggleable, contextual menu a wɔde kyerɛ link ahorow a wɔahyehyɛ. Wɔde JavaScript plugin a ɛwɔ ase hɔ no yɛɛ nkitahodi .
Nhwɛsoɔ
Fa dropdown no trigger ne dropdown menu no kyekyere .dropdown, anaa element foforo a ɛpae mu ka position: relative;. Afei fa menu no HTML no ka ho.
<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>Wobetumi asesa dropdown menu ahorow no ma atrɛw akɔ soro (sen sɛ ɛbɛtrɛw akɔ fam) denam .dropupɔwofo no a wode bɛka ho no so.
<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>Nneɛma a Wɔde Di Dwuma
Sɛnea wɔahyɛ no, wɔde menu a ɛba fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Fa ka .dropdown-menu-righta ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu.
Ebia ebehia sɛ wɔde gyinabea foforo si hɔ
Wɔde dropdowns no si hɔ ankasa denam CSS so wɔ krataa no mu nsu a ɛsen daa no mu. Wei kyerɛ sɛ awofoɔ a wɔwɔ agyapadeɛ bi bɛtumi atwitwa dropdowns no overflowanaasɛ ɛbɛda adi wɔ viewport no hyeɛ so. W’ankasa wudi nsɛm yi ho dwuma bere a ɛsɔre no.
Alignment .pull-righta wɔagyae
Ɛde besi v3.1.0 no, yɛagyae adwuma .pull-rightwɔ dropdown menu ahorow so. Sɛ wopɛ sɛ wode menu bi hyɛ nifa so a, fa .dropdown-menu-right. Nav afã horow a wɔahyehyɛ no nifa wɔ navbar no mu no de mixin version a ɛwɔ saa adesua yi mu di dwuma de hyɛ menu no mu ankasa. Sɛ wopɛ sɛ wubu so a, fa .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>Nsɛmti a wɔde kyerɛw nsɛm
Fa asɛmti bi ka ho na fa nkyerɛwde afã horow a ɛfa nneyɛe ho wɔ dropdown menu biara mu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>Ɔkyekyɛfo
Fa divider bi ka ho na fa link ahorow a ɛtoatoa so a ɛtetew mu wɔ dropdown menu mu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>Menu mu nneɛma a wɔagyae
Fa ka .disableda ho <li>wɔ dropdown no mu na ama link no ayɛ adwuma.
<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>Button akuw ahorow
Fa bɔton ahorow a ɛtoatoa so no bom wɔ nkyerɛwde biako so ne bɔtn kuw no. Fa ka JavaScript radio a wopɛ ne checkbox style suban ho denam yɛn buttons plugin no so .
Tooltips & popovers wɔ button akuw mu hwehwɛ nhyehyɛe soronko
Sɛ wode adwinnade ho nsɛm anaa popovers redi dwuma wɔ element ahorow a ɛwɔ a mu a .btn-group, ɛsɛ sɛ wokyerɛ ɔkwan a wobɛfa container: 'body'so akwati nsunsuanso bɔne a wompɛ (te sɛ element no a ɛbɛtrɛw ne/anaasɛ ɛbɛhwere ne ntwea a ɛyɛ kurukuruwa bere a wɔafi ase adwinnade no ano anaa popover no).
Hwɛ sɛ ɛteɛ rolena fa ahyɛnsode bi ma
Sɛnea ɛbɛyɛ a mfiridwuma a ɛboa – te sɛ screen readers – bɛda no adi sɛ wɔaboaboa bɔtn ahorow a ɛtoatoa so ano no, roleɛsɛ sɛ wɔde su a ɛfata ma. Wɔ bɔtn akuw ho no, eyi bɛyɛ role="group", bere a ɛsɛ sɛ adwinnade ahorow no nya role="toolbar".
Adeɛ baako a ɛfiri mu ne akuo a ɛwɔ control baako pɛ (sɛ nhwɛsoɔ no, button akuo a ɛfata a <button>ɛwɔ elements) anaasɛ dropdown.
Bio nso, ɛsɛ sɛ wɔma akuw ne nnwinnade ahorow no agyiraehyɛde a ɛda adi pefee, efisɛ anyɛ saa a, mmoa mfiridwuma dodow no ara remmɔ amanneɛ, ɛmfa ho sɛ rolesu a ɛteɛ no wɔ hɔ no. Wɔ nhwɛso ahorow a wɔde ama wɔ ha no mu no, yɛde aria-label, nanso wobetumi de akwan foforo te sɛ nea aria-labelledbywobetumi nso adi dwuma.
Nhwɛso titiriw
Fa mu kyekyere bɔtn ahorow a ɛtoatoa so no .btnho .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>Button adwinnade pon
Ka sets of <div class="btn-group">into a <div class="btn-toolbar">ma nneɛma a ɛyɛ den kɛse.
<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>Sizing a wɔde yɛ nneɛma
Sɛ anka wode button sizing classes bedi dwuma wɔ button biara a ɛwɔ kuw bi mu no, fa ka .btn-group-*biara ho kɛkɛ .btn-group, a bere a woreyɛ nesting akuw pii ka ho.
<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>Nesting a wɔde yɛ buw
Fa a .btn-groupto foforo mu .btn-groupbere a wopɛ sɛ wode dropdown menus frafra button ahorow a ɛtoatoa so no.
<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>Nsakrae a ɛba gyina hɔ
Ma bɔton ahorow bi nyɛ te sɛ nea wɔaboaboa ano tẽẽ sen sɛ ɛbɛda adi sɛ ɛbɛkɔ soro. Split button dropdowns no ntumi mmoa wɔ ha.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>Button akuw ahorow a ɛfata
Ma bɔton kuw bi ntrɛw mu wɔ akɛse a ɛyɛ pɛ mu ma ɛtrɛw ne wofo no tɛtrɛtɛ nyinaa mu. Afei nso ɛyɛ adwuma ne button dropdowns wɔ button kuw no mu.
Ahye a wodi ho dwuma
Esiane HTML ne CSS pɔtee a wɔde di dwuma de kyerɛ sɛ bɔton ahorow no bem (a ɛne display: table-cell) nti, wɔma wɔn ntam ahye no yɛ mmɔho abien. Wɔ daa button akuw mu no, margin-left: -1pxwɔde di dwuma de stack borders no sen sɛ wobeyi afi hɔ. Nanso, marginɛnyɛ adwuma wɔ display: table-cell. Nea efi mu ba ne sɛ, egyina wo customizations to Bootstrap so no, ebia wobɛpɛ sɛ wuyi anaasɛ wosan de kɔla yɛ borders no.
IE8 ne ahyeɛ so
Internet Explorer 8 nkyerɛ borders wɔ buttons so wɔ button kuw a ɛfata mu, sɛ ɛyɛ on <a>anaa <button>elements. Sɛ wopɛ sɛ wudi ho dwuma a, fa bɔtn biara kyekyere foforo .btn-group.
Hwɛ #12476 na woanya nsɛm pii.
Ne <a>element ahorow
Fa s ahorow a ɛtoatoa so no kyekyere ho kɛkɛ .btnwɔ .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Links a ɛyɛ adwuma sɛ buttons
Sɛ wɔde <a>nneɛma no di dwuma sɛ bɔtɔn – ɛkanyan krataafa no mu dwumadi, sen sɛ wobɛkɔ krataa anaa ɔfã foforo a ɛwɔ kratafa a ɛwɔ hɔ mprempren no mu – ɛsɛ sɛ wɔma wɔn nso role="button".
Ne <button>element ahorow
Sɛ wode bɔtn akuw a ɛfata a <button>element ahorow wom bedi dwuma a, ɛsɛ sɛ wode bɔtn biara kyekyere bɔtn kuw bi mu . Browser dodow no ara mfa yɛn CSS no nni dwuma yiye mfa nkyerɛ sɛ <button>nneɛma teɛ, nanso esiane sɛ yɛboa button dropdowns nti, yebetumi ayɛ adwuma atwa saa asɛm no ho dwuma.
<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>Button a ɛwɔ ase hɔ
Fa bɔtn biara di dwuma fa hyɛ menu a ɛwɔ ase no ase denam de a wode bɛto a mu .btn-groupna wode menu agyiraehyɛde a ɛfata ama no so.
Plugin a wɔde wɔn ho to so
Button dropdowns hwehwɛ sɛ wɔde dropdown plugin no ka wo Bootstrap version no ho.
Button biako a ɛwɔ ase
Dane bɔtn bi kɔ dropdown toggle a ɛwɔ markup nsakrae atitiriw bi.
<!-- 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>Split button a ɛwɔ ase no
Saa ara nso na yɛ split button dropdowns a ɛwɔ markup nsakrae koro no ara, a button soronko nkutoo na ɛwɔ mu.
<!-- 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>Sizing a wɔde yɛ nneɛma
Button dropdowns no de button ahorow a ne kɛse nyinaa yɛ adwuma.
<!-- 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>Dropup nsakrae a ɛba
Trigger dropdown menus a ɛwɔ elements no atifi denam nea wode bɛka .dropupɔwofo no ho no so.
<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>Nsɛm a wɔde hyɛ mu akuw ahorow
Trɛw kratasin sohwɛ ahorow mu denam nsɛm anaa bɔtn ahorow a wode bɛka ho ansa na nsɛm biara a egyina nsɛm so no anim, akyi, anaa afã abien no nyinaa so <input>. Fa di dwuma .input-groupne .input-group-addonanaa .input-group-btnfa prepend anaa fa elements ka biako .form-controlho .
Nkyerɛwee <input>s nkutoo
Kwati sɛ wode <select>elements bedi dwuma wɔ ha efisɛ wontumi nsiesie no yiye wɔ WebKit browser ahorow mu.
Kwati sɛ wode <textarea>elements bedi dwuma wɔ ha efisɛ rowswɔrenni wɔn su no ni wɔ tebea horow bi mu.
Tooltips & popovers wɔ input akuw mu hwehwɛ nhyehyɛe soronko
Sɛ wode adwinnade ho nsɛm anaa popovers redi dwuma wɔ element ahorow a ɛwɔ an mu no so a .input-group, ɛsɛ sɛ wokyerɛ ɔkwan a wobɛfa container: 'body'so akwati nsunsuanso bɔne a wompɛ (te sɛ element no a ɛrenyin kɛse ne/anaasɛ ɛbɛhwere ne ntwea a ɛyɛ kurukuruwa bere a wɔafi ase adwinnade no ano anaa popover no).
Mfa nneɛma afoforo a ɛwom no nfrafra
Mfa fom akuo anaa grid column adesua nfra mu tẽẽ ne input akuo. Mmom, nest input kuw no wɔ fom kuw anaa grid-fam element no mu.
Fa nkyerɛwde ahorow ka ho bere nyinaa
Screen akenkanfoɔ bɛnya ɔhaw wɔ wo nkrataa no ho sɛ woamfa label anhyɛ biribiara a wode bɛhyɛ mu no mu a. Wɔ saa nsɛm a wɔde hyɛ mu akuo yi ho no, hwɛ sɛ wɔde nkyerɛwdeɛ anaa dwumadie foforɔ biara bɛma mfiridwuma a ɛboa.
Ɔkwan pɔtee a wɔde bedi dwuma (nneɛma a wotumi hu <label>, nneɛma a wɔde adesuakuw <label>no asie , anaasɛ , , , anaa su no a wɔde bedi dwuma) ne nsɛm foforo a ebehia sɛ wɔde ma no bɛsakra agyina interface widget ko a wode redi dwuma no so. Nhwɛso ahorow a ɛwɔ ɔfã yi mu no de akwan kakraa bi a wɔahyɛ ho nyansa, a ɛfa asɛm pɔtee bi ho ma..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
Nhwɛso titiriw
Fa add-on anaa button biako gu input bi afã abien no nyinaa. Wubetumi nso de biako ahyɛ input bi afã abien no nyinaa.
Yɛnboa add-ons pii ( .input-group-addonanaa .input-group-btn) wɔ ɔfã biako.
Yɛnmmoa form-controls pii wɔ input kuw biako mu.
<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>Sizing a wɔde yɛ nneɛma
Fa relative form sizing classes no ka no .input-groupankasa ho na emu nsɛm a ɛwɔ mu no bɛsesa ne kɛse ankasa —ɛho nhia sɛ wobɛsan ayɛ form control size classes no wɔ element biara so.
<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>Nnaka a wɔde hyɛ mu ne radio so nneɛma a wɔde ka ho
Fa checkbox anaa radio option biara gu input group bi addon mu sen sɛ wode text bɛhyɛ mu.
<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 a wɔde ka ho
Buttons a ɛwɔ input akuo mu no yɛ soronko kakra na ɛhia sɛ wɔde nesting level baako ka ho. Sɛ́ anka wode bedi dwuma no .input-group-addon, ɛho behia sɛ wode di dwuma .input-group-btnde kyekyere bɔtn ahorow no. Eyi ho hia esiane browser styles a wɔahyɛ da ayɛ a wontumi mfa nhyɛ so nti.
<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 -->Buttons a ɛwɔ dropdowns so
<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 -->Bɔton ahorow a wɔakyekyɛ mu
<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>Bɔton ahorow pii
Bere a wubetumi anya ade biako pɛ a wode bɛka ho wɔ ɔfã biara no, wubetumi anya bɔtn pii wɔ biako .input-group-btnmu .
<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
Navs a ɛwɔ Bootstrap mu no akyɛ markup, efi ase fi base .navclass no so, ne tebea horow a wɔakyekyɛ nso. Sesa modifier classes na dannan style biara ntam.
Tabs ahorow
Hyɛ no nsow sɛ .nav-tabsadesuakuw no hwehwɛ adesuakuw a ɛwɔ .navnnyinaso no.
<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>Nnuru a wɔde di dwuma
Fa saa HTML koro no ara, nanso fa di dwuma .nav-pillsmmom:
<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>Nnuru nso yɛ nea wotumi de boaboa ano gyina hɔ. Fa ka ho kɛkɛ .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Wɔabu no bem
Ɛnyɛ den sɛ yɛ tabs anaa pills a wɔn awofo no tɛtrɛtɛ yɛ pɛ wɔ screen ahorow a ɛtrɛw sen 768px a .nav-justified. Wɔ screen nketewa so no, wɔde nav links no ayɛ stack.
Navbar nav links a ɛfata mprempren no ntumi mmoa.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>Link ahorow a wɔagyae
Sɛ wopɛ nav component biara (tabs anaa pills), fa ka ho .disabledma gray links na hover effects biara nni hɔ .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Sɛ wode nsɛm a wɔde gu fam di dwuma
Fa menu ahorow a ɛwɔ fam no ka ho a HTML kakra aka ho ne JavaScript plugin a ɛwɔ fam no .
Tabs a ɛwɔ dropdown ahorow
<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>Nnuru a wɔde gu mu a wɔde gu fam
<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 na ɛwɔ hɔ
Navbar a wɔahyɛ da ayɛ
Navbars yɛ meta components a ɛyɛ mmuae a ɛyɛ adwuma sɛ navigation headers ma wo application anaa site no. Wofi ase hwe ase (na wotumi sesa) wɔ mobile views mu na ɛbɛyɛ horizontal bere a viewport a ɛwɔ hɔ no trɛw kɔ soro no.
Navbar nav links a ɛfata mprempren no ntumi mmoa.
<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>Brand mfonini
Fa w’ankasa mfonini si navbar brand no ananmu denam nkyerɛwee no a wobɛsesa de ayɛ <img>. Esiane sɛ the .navbar-brandno wɔ n’ankasa padding ne height nti, ebia ɛho behia sɛ wubu CSS bi so a egyina wo mfonini no so.
<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>Nkyerɛwee ahorow
Fa fom mu nsɛm gu mu .navbar-formma ɛyɛ pɛpɛɛpɛ vertical alignment ne collapsed suban wɔ narrow viewports mu. Fa alignment options no si baabi a ɛte wɔ navbar no mu nsɛm no mu ho gyinae.
Sɛ́ heads up, .navbar-formkyɛ ne code no fã kɛse no ara ne .form-inlinevia mixin. Fom controls binom, te sɛ input groups, betumi ahwehwɛ sɛ fixed widths bɛda adi yiye wɔ navbar mu.
<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>Nsɛmma nhoma no
Fa .navbar-btnclass no ka <button>elements a ɛnte a mu no ho na <form>fa vertically center wɔn wɔ navbar no mu.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Atwerɛ
Fa nkyerɛwee nhama kyekyere element bi mu a .navbar-text, mpɛn pii no wɔ <p>tag so ma anim ne kɔla a ɛfata.
<p class="navbar-text">Signed in as Mark Otto</p>Nkitahodi ahorow a ɛnyɛ nav
Wɔ folks a wɔde standard links a ɛnyɛ daa navbar navigation component no mu di dwuma no, fa .navbar-linkclass no fa kɔla a ɛfata ka ho ma default ne inverse navbar options no.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Nneɛma a ɛwom no hyia
Fa nav links, forms, buttons, anaa nsɛm no hyɛ mu, fa .navbar-leftanaa .navbar-rightutility classes no di dwuma. Klas abien no nyinaa de CSS float bɛka ho wɔ ɔkwan a wɔakyerɛ no so. Sɛ nhwɛso no, sɛ wopɛ sɛ wo ne nav link ahorow no hyia a, fa gu ɔkwan soronko <ul>so a wɔde utility class a ɛfa ho no di dwuma.
Saa adesua ahorow yi yɛ mixin-ed nkyerɛase ahorow a ɛfa .pull-leftne .pull-right, nanso wɔde scoped kɔ media nsɛmmisa ma ɛyɛ mmerɛw sɛ wobedi navbar afã horow ho dwuma wɔ mfiri akɛse nyinaa mu.
Wɔasiesie no akɔ soro
Fa bi ka ho .navbar-fixed-topna fa ka ho .containerto .container-fluidmfinimfini ne pad navbar mu nsɛm.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Wɔasiesie no wɔ ase hɔ
Fa bi ka ho .navbar-fixed-bottomna fa ka ho .containerto .container-fluidmfinimfini ne pad navbar mu nsɛm.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Static a ɛwɔ soro
Yɛ navbar a ne tɛtrɛtɛ nyinaa a ɛne kratafa no kɔ denam anaa to mfinimfini ne pad navbar mu nsɛm a wode bɛka ho .navbar-static-topna wode ahyɛ mu no so..container.container-fluid
Nea ɛnte sɛ .navbar-fixed-*adesua ahorow no, enhia sɛ wosakra padding biara wɔ body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Navbar a wɔadan no
Sesa sɛnea navbar no te denam .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Abodoo a wɔayam
Kyerɛ beae a krataafa a ɛwɔ hɔ mprempren no wɔ wɔ akwantu nhyehyɛe bi mu.
Wɔde separators ka ho ankasa wɔ CSS mu denam :beforene content.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>Nkratafa a wɔde kyerɛw nsɛm
Fa nkratafa link ahorow ma wo wɛbsaet anaa app no a nkratafa pii nkratafa fã no ka ho, anaasɛ pager foforo a ɛyɛ mmerɛw no .
Nkratafa a wɔahyɛ da ayɛ
Simple pagination inspired by Rdio, eye ma apps ne nhwehwɛmu aba. Block kɛse no yɛ den sɛ wobɛpa ho kyɛw, ɛnyɛ den sɛ wobɛsesa, na ɛma mmeae akɛse a wobɛbɔ.
<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>Nkyerɛwde a wɔde kyerɛw krataafa no fã no
Ɛsɛ sɛ wɔde <nav>element bi kyekyere nkratafa no fã no ho de kyerɛ sɛ ɛyɛ ɔfã a wɔde kyerɛ kwan a wɔde bɛhwɛ akenkanfo ne mfiridwuma afoforo a ɛboa. Bio nso, esiane sɛ ɛda adi sɛ kratafa bi wɔ ɔfã a ɛte saa a wɔde kyerɛ kwan no bɛboro biako dedaw (te sɛ akwantu titiriw a ɛwɔ asɛmti no mu, anaasɛ ɔkwan a wɔfa so kɔ baabi a ɛwɔ nkyɛnkyɛn no), ɛyɛ papa sɛ wode nkyerɛkyerɛmu bi bɛma aria-labelma nea <nav>ɛda n’atirimpɔw adi. Sɛ nhwɛso no, sɛ wɔde kratafa no fã no di dwuma de fa nneɛma a wɔhwehwɛ no mu a, wobetumi de ahyɛnsode a ɛfata ayɛ aria-label="Search results pages".
Asɛm a wɔadi dɛm ne nea ɛreyɛ adwuma
Links yɛ customizable ma tebea horow. Fa di dwuma .disabledma link ahorow a wuntumi klik so na .activekyerɛ kratafa a ɛwɔ hɔ mprempren no.
<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>Yɛhyɛ nyansa sɛ wobɛsesa anchor a ɛyɛ adwuma anaa wɔagyae adwuma no ama <span>, anaasɛ yi ankora no fi mu wɔ agyan a atwam/a edi hɔ no mu, na ama woayi klik dwumadi afi hɔ bere a wokora style ahorow a wopɛ sɛ woyɛ no so.
<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>Sizing a wɔde yɛ nneɛma
Fancy kɛse anaa nketewa nkratafa? Fa ka ho .pagination-lganaasɛ wopɛ .pagination-smsɛ wonya akɛse afoforo.
<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 a wɔde kyerɛw nsɛm
Ntɛmntɛm a edi kan ne nea edi hɔ links ma simple pagination implementations a hann markup ne styles. Ɛyɛ papa ma nsɛmma nhoma a ɛnyɛ den te sɛ blog anaa nsɛmma nhoma.
Default nhwɛso
Sɛnea wɔahyɛ no, pager no de link ahorow no si mfinimfini.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>Link ahorow a wɔahyehyɛ no pɛpɛɛpɛ
Sɛnea ɛbɛyɛ a, wubetumi de link biara ahyia afã horow no:
<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>Optional disabled tebea
Pager links nso de general .disabledutility class a ɛfiri pagination no mu di dwuma.
<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>Nneɛma a wɔde kyerɛw nsɛm
Nhwɛsoɔ
Nhwɛso asɛmti Foforo
Nhwɛso asɛmti Foforo
Nhwɛso asɛmti Foforo
Nhwɛso asɛmti Foforo
Nhwɛso asɛmti Foforo
Nhwɛso asɛmti Foforo
<h3>Example heading <span class="label label-default">New</span></h3>Nsonsonoe ahorow a ɛwɔ hɔ
Fa modifier class ahorow a yɛaka ho asɛm wɔ ase ha no mu biara ka ho na sesa label bi hwɛbea.
Default
Primary
Success
Info
Kɔkɔbɔ
Asiane
<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>So wowɔ nkyerɛwde tɔn pii?
Nkyerɛase ho haw betumi aba bere a wowɔ inline labels du du pii wɔ container teateaa bi mu, a emu biara kura n’ankasa inline-blockelement (te sɛ icon). Ɔkwan a wɔfa so twa eyi ho hyia ne sɛ wɔbɛhyehyɛ display: inline-block;. Sɛ wopɛ nsɛm a ɛfa ho ne nhwɛso a, hwɛ #13219 .
Badge ahorow
Ɛnyɛ den sɛ wobɛtwe adwene asi nneɛma foforo anaa nea wonkenkanee so denam a a wode bɛka ho wɔ <span class="badge">links, Bootstrap navs, ne nea ɛkeka ho no so.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Ɔno ankasa a ɔhwe ase
Sɛ nneɛma foforo anaa nea wɔankenkan nni hɔ a, badge ahorow no bɛhwe ase kɛkɛ (ɛnam CSS no :emptyselector so) sɛ nsɛm biara nni mu a.
Cross-browser a ɛne ne ho hyia
Badges rensɛe ne ho wɔ Internet Explorer 8 mu efisɛ enni mmoa ma :emptyselector no.
Adapts to active nav tebea horow mu
Wɔde ntade a wɔasisi mu ka ho ma wɔde badge ahorow gu aman a ɛyɛ nnam mu wɔ pill navigations mu.
<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>Jumbotron a ɛyɛ hu
Ade a emu yɛ hare, ɛyɛ mmerɛw a wubetumi apaw atrɛw viewport no nyinaa mu de akyerɛ nneɛma atitiriw a ɛwɔ wo wɛbsaet no so.
Hello, wiase!
Eyi yɛ hero unit a ɛnyɛ den, jumbotron-style component a ɛnyɛ den a wɔde twe adwene si nneɛma anaa nsɛm a wɔada no adi so kɛse.
<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>Sɛ wopɛ sɛ jumbotron no trɛw yɛ pɛ, na enni ntwea a ɛyɛ kurukuruwa a, fa to .containers nyinaa akyi na mmom fa .containermu bi ka ho.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Kratafa no asɛmti
Shell a ɛnyɛ den ma an h1to a ɛfata space out na segment afã horow a ɛwɔ kratafa bi so. Ebetumi de h1's default smallelement no adi dwuma, ne nneɛma afoforo dodow no ara (a ɛwɔ styles foforo).
Nhwɛso kratafa asɛmti Subtext for header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Mfonini nketewa
Trɛw Bootstrap grid nhyehyɛe no mu denam mfonini ketewa no fã no so na ama ɛnyɛ den sɛ wobɛda mfonini, video, nsɛm, ne nea ɛkeka ho grid adi.
Sɛ worehwehwɛ sɛ wobɛkyerɛ mfonini nketewa a ɛsono ne sorokɔ ne/anaasɛ ne tɛtrɛtɛ te sɛ Pinterest a, ɛho behia sɛ wode obi foforo plugin te sɛ Masonry , Isotope , anaa Salvattore di dwuma .
Default nhwɛso
Sɛnea wɔahyɛ no, wɔayɛ Bootstrap mfonini nketewa no sɛnea ɛbɛyɛ a ɛbɛkyerɛ mfonini ahorow a ɛwɔ abusuabɔ a ɛwɔ agyiraehyɛde kakraa bi a ɛho hia.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ
Sɛ wode markup kakra ka ho a, ɛyɛ yie sɛ wode HTML nsɛm biara te sɛ nsɛmti, nkyekyɛm, anaa bɔtɔn bɛka mfonini nketewa ho.
<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>Kɔkɔbɔ ahorow
Fa nsɛm a ɛfa ho nsɛm a wɔde ma ho nkrasɛm ma nneyɛe a ɛtaa ba a ɔde di dwuma no de nsa kakraa bi a ɛwɔ hɔ na ɛyɛ mmerɛw a wɔde bɔ kɔkɔ no ma.
Nhwɛso ahorow
Fa nsɛm biara ne dismiss button a wopɛ no kyekyere ne .alertnsɛm a ɛfa ho adesua ahorow anan no mu biako (sɛ nhwɛso no, .alert-success) ma kɔkɔbɔ nkrasɛm atitiriw.
Default class biara nni hɔ
Alerts nni default classes, ɛyɛ base ne modifier classes nko ara. Default gray alert no nnyɛ nteaseɛ pii, enti wɔhwehwɛ sɛ wokyerɛ type bi via contextual class. Paw fi nkonimdi, info, kɔkɔbɔ, anaa asiane mu.
Woayɛ adeɛ! Wokenkan kɔkɔbɔ nkrasɛm a ɛho hia yi yiye.
Ti a ɛwɔ soro! Saa kɔkɔbɔ yi hia w’adwene, nanso ɛnyɛ super important.
Kɔkɔbɔ! Better check yourself, wo nnyɛ fɛ dodo.
Oh snap! Sesa nneɛma kakraa bi na bɔ mmɔden sɛ wode bɛmena bio.
<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>Kɔkɔbɔ ahorow a wɔpow
Fa kɔkɔbɔ biara si so denam .alert-dismissiblebɔtn a wopɛ ne nea wode to mu a wode bɛka ho no so.
Ɛhwehwɛ sɛ wɔde JavaScript kɔkɔbɔ plugin di dwuma
Sɛ wopɛ sɛ wode kɔkɔbɔ ahorow no yɛ adwuma koraa, a wɔpow a, ɛsɛ sɛ wode kɔkɔbɔ ahorow no JavaScript plugin .
Kɔkɔbɔ! Better check yourself, wo nnyɛ fɛ dodo.
<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>Hwɛ sɛ suban pa wɔ mfiri ahorow nyinaa so
Hwɛ hu sɛ wode <button>element no bedi dwuma ne data-dismiss="alert"data attribute no.
Links wɔ kɔkɔbɔ ahorow mu
Fa .alert-linkutility class no di dwuma fa ntɛm ara ma links a ɛwɔ kɔla a ɛne no hyia wɔ kɔkɔbɔ biara mu.
Woayɛ adeɛ! Wokenkan
kɔkɔbɔ nkrasɛm a ɛho hia yi yiye .
Ti a ɛwɔ soro! This
alert needs your attention , nanso ɛnyɛ super a ɛho hia.
Kɔkɔbɔ! Better check yourself, wo ho
nyɛ fɛ dodo .
Oh snap!
Sesa nneɛma kakraa bi na bɔ mmɔden sɛ wode bɛmena bio.
<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>Nkɔso ho nsɛnkyerɛnne
Fa nsɛm a ɛyɛ foforo a ɛfa adwumayɛ nhyehyɛe anaa adeyɛ bi nkɔso ho ma denam nkɔso ho nsɛnkyerɛnne a ɛnyɛ den nanso ɛyɛ mmerɛw so.
Cross-browser a ɛne ne ho hyia
Nkɔsoɔ bars de CSS3 nsakraeɛ ne animations di dwuma de nya wɔn nsunsuansoɔ no bi. Saa nneɛma yi ntumi mmoa wɔ Internet Explorer 9 ne nea ɛwɔ ase ha anaa Firefox dedaw no mu. Opera 12 ntumi mmoa animations.
Nsɛm a Ɛwɔ Mu Ahobammɔ Nhyehyɛe (CSP) a ɛne no hyia
Sɛ wo wɛbsaet no wɔ Content Security Policy (CSP) a ɛmma ho kwan style-src 'unsafe-inline'a , ɛnde worentumi mfa inline styleattributes nni dwuma mfa nhyɛ nkɔso bar ntrɛwmu sɛnea wɔakyerɛ wɔ yɛn nhwɛso ahorow a ɛwɔ ase ha no mu no. Akwan foforo a wɔfa so hyehyɛ ntrɛwmu a ɛne CSP ahorow a ɛyɛ katee hyia no bi ne sɛ wode JavaScript kakra a wɔahyɛ da ayɛ (a ɛde element.style.width) bedi dwuma anaasɛ wode CSS adesua ahorow a wɔahyɛ da ayɛ.
Nhwɛso titiriw
Default nkɔso bar.
<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>Na wɔde label ahyɛ mu
Yi <span>with .sr-onlyclass no fi nkɔso bar no mu na kyerɛ ɔha biara mu nkyekyem a wotumi hu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>Sɛnea ɛbɛyɛ a wobɛhwɛ ahu sɛ label text no bɛkɔ so akenkan no ɔha biara mu nkyem a ɛba fam mpo no, susuw ho sɛ wode a bɛka min-widthnkɔso bar no ho.
<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>Nsɛm a ɛfa ho a wɔde besi ananmu
Nkɔso bars de button ne kɔkɔbɔ adesua koro no ara bi di dwuma ma style ahorow a ɛkɔ so daa.
<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>Ntrɛwmu
Ɔde gradient di dwuma de yɛ striped effect. Ɛnyɛ nea ɛwɔ IE9 ne nea ɛwɔ ase ha no mu.
<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>Animated a wɔde yɛ nneɛma
Fa ka .activeho na .progress-bar-stripedama nsensanee no ayɛ adwuma wɔ nifa so akɔ benkum so. Ɛnyɛ nea ɛwɔ IE9 ne nea ɛwɔ ase ha no mu.
<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>Wɔaboaboa ano
Fa nnua pii gu biako mu na .progressfa boaboa ano.
<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>Media ade a wɔde di dwuma
Abstract object styles a wɔde si nneɛma ahorow ahorow (te sɛ blog nsɛm, Tweets, ne nea ɛkeka ho) a ɛkyerɛ mfonini a ɛwɔ benkum anaa nifa a ɛka nsɛm a wɔakyerɛw ho.
Media a wɔde ahyɛ hɔ
Default media no kyerɛ media adeɛ (mfonini, video, ɔdio) wɔ benkum anaa nifa so wɔ content block bi so.
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Nested media asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis.
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, 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>Classes no .pull-leftne .pull-rightnso wɔ hɔ na na wɔadi kan de adi dwuma sɛ media component no fã, nanso wɔagyae ama saa dwumadie no sɛdeɛ ɛfiri v3.3.0. Wɔbɛyɛ sɛ ɛne .media-leftne .media-right, gye sɛ .media-rightɛsɛ sɛ wɔde si akyi .media-bodywɔ html no mu.
Nsɛm ho amanneɛbɔfo a wɔde wɔn ho hyɛ mu
Wobetumi de mfonini ahorow no anaa nsɛm ho amanneɛbɔ afoforo ayɛ pɛpɛɛpɛ wɔ soro, mfinimfini, anaa ase. Default no yɛ top aligned.
Top aligned nsɛm ho amanneɛbɔ
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus.
Nsɛm ho amanneɛbɔ a ɛwɔ mfinimfini
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus.
Nsɛm ho amanneɛbɔ a wɔahyɛ no agyirae wɔ ase
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi 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>Nsɛm ho amanneɛbɔfo din
Sɛ wode markup kakra ka ho a, wubetumi de media adi dwuma wɔ list mu (ɛho wɔ mfaso ma comment threads anaa articles lists).
-
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis.
Nested media asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis.
Nested media asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis.
Nested media asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, 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>Kyerɛw kuw no din
List akuo yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a ɛnyɛ nneɛma a wɔahyehyɛ a ɛnyɛ den nko na ɛkyerɛ, na mmom nea ɛyɛ den a ɛwɔ nsɛm a wɔahyɛ da ayɛ.
Nhwɛso titiriw
List kuw a ɛho hia sen biara no yɛ list a wɔanhyehyɛ no pɛpɛɛpɛ a list nneɛma wom, ne adesua ahorow a ɛfata ara kwa. Fa akwan horow a edi hɔ no si so, anaa w’ankasa CSS sɛnea ɛho hia.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<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>Badge ahorow
Fa badges component no ka list group adeɛ biara ho na ɛbɛsi nifa so ankasa.
- 14. 15Cras justo odio na ɔyɛ
- 2. 2.Dapibus ac adwumayɛbea a ɛwɔ
- 1. 1.Morbi leo a ɛwɔ soro no
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Nneɛma a wɔde abɔ mu
Fa list kuw nneɛma bata ho denam anchor tags a wode bedi dwuma sen sɛ wode list nneɛma bedi dwuma (ɛno nso kyerɛ ɔwofo <div>mmom sen sɛ wode bedi dwuma <ul>). Ɛho nhia sɛ wɔde awofo ankorankoro bɛtwa element biara ho ahyia.
<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>Nneɛma a ɛwɔ bɔton so
List kuw nneɛma betumi ayɛ buttons sen sɛ list nneɛma (ɛno nso kyerɛ ɔwofo <div>mmom sen sɛ ɛbɛyɛ <ul>). Ɛho nhia sɛ wɔde awofo ankorankoro bɛtwa element biara ho ahyia. Mfa standard .btnclasses no nni dwuma wɔ ha.
<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>Nneɛma a wɔadi dɛm
Fa ka .disableda ho .list-group-itemma ɛyɛ fitaa na ɛbɛyɛ te sɛ nea wɔadi dɛm.
<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>Adesua ahorow a ɛfa nsɛm a ɛfa ho
Fa nsɛm a ɛfa ho adesua ahorow di dwuma fa style list nneɛma, default anaa linked. Ɔman no nso ka ho .active.
- Dapibus ac adwumayɛbea a ɛwɔ
- Cras tena ase amet nibh libero
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<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>Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ
Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no.
Kyerɛw kuw no asɛmti
Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
Kyerɛw kuw no asɛmti
Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
Kyerɛw kuw no asɛmti
Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
<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>Panel ahorow
Bere a ɛnyɛ bere nyinaa na ɛho hia no, ɛtɔ mmere bi a ɛsɛ sɛ wode wo DOM no gu adaka mu. Sɛ wopɛ saa tebea horow no a, sɔ panel no fã no hwɛ.
Nhwɛso titiriw
Sɛnea wɔahyɛ no, nea ɛyɛ .panelara ne sɛ wode mfitiase border ne padding bi bedi dwuma de ahyɛ nsɛm bi mu.
Mfitiaseɛ panel nhwɛsoɔ
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panel a ɛwɔ asɛmti
Ɛnyɛ den sɛ wode asɛmti ahina bi bɛka wo panel no ho denam .panel-heading. Wubetumi nso de biara aka ho a wode adesuakuw bi aka ho de atiri a woadi kan woahyehye aka ho <h1>. Nanso, font akɛse a ɛwɔ - no yɛ nea wɔde .<h6>.panel-title<h1><h6>.panel-heading
Sɛ wopɛ sɛ wode link ahorow no kɔla yiye a, hwɛ hu sɛ wode link ahorow bɛhyɛ nsɛmti ahorow mu wɔ .panel-title.
Panel asɛmti a enni asɛmti
Panel mu nsɛm
Panel no asɛmti
Panel mu nsɛm
<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>Panel a ɛwɔ ase hɔ
Fa bɔton anaa nsɛm a ɛto so abien kyekyere ho wɔ .panel-footer. Hyɛ no nsow sɛ panel footers nnya kɔla ne ahye bere a wode nsɛm a ɛfa ho mu nsakrae redi dwuma efisɛ ɛnyɛ nea wɔahyɛ da ayɛ sɛ ɛbɛba anim.
Panel mu nsɛm
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Nsɛm a ɛfa ho a wɔde besi ananmu
Te sɛ nneɛma afoforo no, ɛnyɛ den sɛ wobɛma panel bi ayɛ nea ntease wom kɛse wɔ nsɛm pɔtee bi mu denam nsɛm a ɛfa ho tebea adesua ahorow no mu biara a wode bɛka ho no so.
Panel no asɛmti
Panel mu nsɛm
Panel no asɛmti
Panel mu nsɛm
Panel no asɛmti
Panel mu nsɛm
Panel no asɛmti
Panel mu nsɛm
Panel no asɛmti
Panel mu nsɛm
<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>Ne pon ahorow
Fa biribiara a ɛnyɛ bordered .tableka panel bi mu ma seamless design. Sɛ ɛwɔ hɔ a .panel-body, yɛde ɔhye foforo ka pon no atifi ma mpaapaemu.
Panel asɛmti
Ebinom default panel nsɛm wɔ ha. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so. Aenean lacinia bibendum a ɛyɛ mmerɛw sɛ wɔbɛbɔ no. Aenean eu leo quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.
| # . | Fie din | Abusuadin | Edin a wɔde di dwuma |
|---|---|---|---|
| 1. 1. | Marko | Otto na ɔkyerɛwee | @mdo na ɔkyerɛwee |
| 2. 2. | Yakob | Thornton na ɔkyerɛwee | @kɛseɛ |
| 3. 3 | Larry na ɔkyerɛwee | Anomaa no | @twitter so |
<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>Sɛ panel nipadua biara nni hɔ a, component no fi panel header so kɔ table so a biribiara ntwitware mu.
Panel asɛmti
| # . | Fie din | Abusuadin | Edin a wɔde di dwuma |
|---|---|---|---|
| 1. 1. | Marko | Otto na ɔkyerɛwee | @mdo na ɔkyerɛwee |
| 2. 2. | Yakob | Thornton na ɔkyerɛwee | @kɛseɛ |
| 3. 3 | Larry na ɔkyerɛwee | Anomaa no | @twitter so |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>Ne list akuw ahorow
Ɛnyɛ den sɛ wode list akuw a ne trɛw nyinaa bɛka panel biara ho.
Panel asɛmti
Ebinom default panel nsɛm wɔ ha. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so. Aenean lacinia bibendum a ɛyɛ mmerɛw sɛ wɔbɛbɔ no. Aenean eu leo quam. Pellentesque ornare sem lacinia a ɛwɔ akyi no. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<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>Mmuae a wɔde hyɛ mu
Ma browser ahorow no kwan ma wonhu video anaa slideshow nsusuwii ahorow a egyina wɔn block a ɛwɔ mu no trɛw so denam intrinsic ratio a wɔbɛyɛ a ɛbɛkɔ soro yiye wɔ mfiri biara so no so.
Wɔde mmara di dwuma tẽẽ wɔ <iframe>, <embed>, <video>, ne <object>nneɛma ahorow ho; sɛ wopɛ sɛ wode aseni adesuakuw a ɛda adi pefee di dwuma .embed-responsive-itembere a wopɛ sɛ wo ne styling no hyia ma su afoforo no.
Pro-Afotusɛm! Ɛho nhia sɛ wode ka frameborder="0"wo <iframe>s ho sɛnea yɛrebu saa asɛm no so ama wo no.
<!-- 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
Default no yiye
Fa abura no di dwuma sɛ nkɛntɛnso a ɛnyɛ den wɔ element bi so na ama no nsunsuanso a ɛwɔ mu.
Hwɛ, mewɔ abura bi mu!
<div class="well">...</div>Adesua ahorow a wobetumi apaw
Control padding ne kurukuruwa ntwea so ne abien optional modifier adesuakuw.
Hwɛ, mewɔ abura kɛse bi mu!
<div class="well well-lg">...</div>
Hwɛ, mewɔ abura ketewa bi mu!
<div class="well well-sm">...</div>