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.

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>

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.

<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 fa hyɛ nneyɛe afã horow din 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>

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ɛ `role`na 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ɛ nnwinnade 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>

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

Benkum Mfimfini Nifa

Benkum Mfimfini

<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 button akuw a ɛfata a <button>element ahorow wom bedi dwuma a, ɛsɛ sɛ wode button biara kyekyere button 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>

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>

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 wode bedi dwuma) ne nsɛm foforo a ɛho behia sɛ wɔde ma no bɛsakra agyina interface widget pɔtee 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 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.

Sɛ wode navs di dwuma ma tab panels a, ɛhwehwɛ sɛ wode JavaScript tabs plugin di dwuma

Sɛ wopɛ tab ahorow a ɛwɔ mmeae a wobetumi akyerɛw tab a, ɛsɛ sɛ wode tab ahorow no di dwuma JavaScript plugin . Agyiraehyɛde no nso bɛhwehwɛ nneɛma foforo rolene ARIA su ahorow – hwɛ plugin no nhwɛso agyiraehyɛde no ma nsɛm pii.

Ma navs a wɔde di dwuma sɛ navigation no nyɛ nea wotumi nya

Sɛ wode navs redi dwuma de ama navigation bar a, hwɛ hu sɛ wode a bɛka role="navigation"ɔwofo container a ntease wom sen biara a ɛwɔ <ul>, anaasɛ fa <nav>element bi kyekyere navigation no nyinaa ho. Mfa dwuma no nka <ul>n’ankasa ho, efisɛ eyi remma mfiridwuma a ɛboa no rentumi mfa ho dawuru sɛ ɛyɛ din ankasa.

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.

Safari ne mmuae a ɛfata navs

Ɛde besi v9.1.2 no, Safari da bɔne bi adi a sɛ wo browser no kɛse sesa no tẽẽ a, ɛde mfomso ba wɔ nkyerɛase mu wɔ nav a ɛfata no mu a wɔpopa bere a woasan ayɛ foforo no. Saa bɔne yi nso wɔakyerɛ wɔ nav nhwɛso a ɛfata no mu .

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

Link dwumadie no nnyaa nkɛntɛnsoɔ

Saa adesuakuw yi bɛsesa <a>'s no hwɛbea nkutoo, na ɛnyɛ ne dwumadi. Fa JavaScript a wɔahyɛ da ayɛ no di dwuma fa siw link ahorow a ɛwɔ ha no ano.

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

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.

Nsɛm a ɛwɔ mu a ɛboro so

Esiane sɛ Bootstrap nnim baabi dodow a nsɛm a ɛwɔ wo navbar no hia no nti, wubetumi ahyia nsɛm a ɛfa nsɛm a wɔde kyekyere ho wɔ row a ɛto so abien mu no ho. Sɛ wopɛ sɛ wusiesie eyi a, wubetumi:

Tew navbar nneɛma dodow anaa ne tɛtrɛtɛ so.
Fa navbar nneɛma bi sie wɔ screen akɛse bi mu denam utility class ahorow a ɛyɛ mmuae so .
Sesa beae a wo navbar no dannan kɔ collapsed ne horizontal mode ntam. Yɛ @grid-float-breakpointnsakrae no ho nhyehyɛe anaa fa w’ankasa media asɛmmisa no ka ho.

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

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>

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>

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 inline nkrataa yi ho no, wubetumi de .sr-onlyadesuakuw no asie nkyerɛwde ahorow no. Akwan foforo wɔ hɔ a wɔfa so de ahyɛnsode ma mfiridwuma a ɛboa, te sɛ aria-label, aria-labelledbyanaa titlesu no. Sɛ eyinom mu biara nni hɔ a, screen akenkanfo betumi de placeholdersu no adi dwuma, sɛ ɛwɔ hɔ a, nanso hyɛ no nsow sɛ wɔmfa nni dwuma placeholdersɛ nea wɔde besi akwan afoforo a wɔfa so kyerɛw nsɛm no ananmu.

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>

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>

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>

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 mu ma ɛyɛ mmerɛw sɛ wobedi navbar afã horow ho dwuma wɔ mfiri akɛse nyinaa mu.

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>

Nipadua padding ho hia

Navbar a wɔahyɛ da ayɛ no bɛkata wo nsɛm foforo no so, gye sɛ wode ka paddingho wɔ <body>. Sɔ w’ankasa wo gyinapɛn ahorow hwɛ anaa fa yɛn snippet a ɛwɔ ase ha no di dwuma. Afotu: Sɛnea wɔahyɛ no, navbar no sorokɔ yɛ 50px.

body { padding-top: 70px; }

Hwɛ sɛ wode eyi bɛka ho wɔ core Bootstrap CSS no akyi.

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>

Nipadua padding ho hia

Navbar a wɔahyɛ no agyirae no bɛkata wo nsɛm afoforo no so, gye sɛ wode ka paddingho wɔ <body>. Sɔ w’ankasa wo gyinapɛn ahorow hwɛ anaa fa yɛn snippet a ɛwɔ ase ha no di dwuma. Afotu: Sɛnea wɔahyɛ no, navbar no sorokɔ yɛ 50px.

body { padding-bottom: 70px; }

Hwɛ sɛ wode eyi bɛka ho wɔ core Bootstrap CSS no akyi.

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>

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 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">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Nhwɛsoɔ

Nhwɛso asɛmti Foforo

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

Nsonsonoe ahorow a ɛwɔ hɔ

Fa modifier classes a yɛaka ho asɛm wɔ aseɛ ha yi 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 .

Ɛnyɛ den sɛ wobɛtwe adwene asi nneɛma foforo anaa nea wonkenkanee so denam a <span class="badge">to links, Bootstrap navs, ne nea ɛkeka ho a wode bɛka ho no so.

Inbox a ɛwɔ hɔ42 na ɛwɔ hɔ

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

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.

Sua pii

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

Shell a ɛnyɛ den ma an h1to a ɛfata space out na segment afã horow a ɛwɔ nsɛm 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).

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

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.

Mfonini ketewaa bi a wɔde kyerɛw nsɛm

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma ut id elit.

Bɔtom Bɔtom

Mfonini ketewaa bi a wɔde kyerɛw nsɛm

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma ut id elit.

Bɔtom Bɔtom

Mfonini ketewaa bi a wɔde kyerɛw nsɛm

Cras justo odio, dapibus a ɛyɛ mmerɛw wɔ, egestas eget quam. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma ut id elit.

Bɔtom Bɔtom

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

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">&times;</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>

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.

60% na ɛwɔ hɔ.

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

0% na ɛwɔ hɔ.

2% na ɛwɔ hɔ.

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

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

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 nkyerɛwee mu nsɛm ho.

Media a wɔde ahyɛ hɔ

Default media no kyerɛ media adeɛ bi (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 foforo kakra di dwuma 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>

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 a ɔyɛ ɔkwasea
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac consectetur a ɛyɛ nea ɛyɛ nwonwa
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 a ɔyɛ ɔkwasea
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.

Cras justo odio a ɔyɛ ɔkwasea Dapibus ac adwumayɛbea a ɛwɔ Morbi leo a ɛwɔ soro no Porta ac consectetur a ɛyɛ nea ɛyɛ nwonwa Vestibulum a ɛwɔ eros no

<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 mmom sen list items (ɛ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.

Cras justo odio a ɔyɛ ɔkwasea Dapibus ac adwumayɛbea a ɛwɔ Morbi leo a ɛwɔ soro no Porta ac consectetur a ɛyɛ nea ɛyɛ nwonwa Vestibulum a ɛwɔ eros no

<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 consectetur a ɛyɛ nea ɛyɛ nwonwa
Vestibulum a ɛwɔ eros no

Dapibus ac adwumayɛbea a ɛwɔ Cras tena ase amet nibh libero Porta ac consectetur a ɛyɛ nea ɛyɛ nwonwa 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>

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

Panel a ɛwɔ ase hɔ

<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 ɛyɛ nwonwa 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 ut id elit.

# .	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 ɛyɛ nwonwa 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 ut id elit.

Cras justo odio a ɔyɛ ɔkwasea
Dapibus ac adwumayɛbea a ɛwɔ
Morbi leo a ɛwɔ soro no
Porta ac consectetur a ɛyɛ nea ɛyɛ nwonwa
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>

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

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>

Nneɛma a ɛwom

Glyphicons a wɔde kyerɛw nsɛm

Glyph ahorow a ɛwɔ hɔ

Sɛnea wɔde bedi dwuma

Mfa nneɛma afoforo a ɛwom no nfrafra

Wɔde di dwuma wɔ element ahorow a hwee nni mu nkutoo so

Sesa a wobɛsesa icon font no beae

Ahyɛnsode ahorow a wotumi nya

Nhwɛso ahorow

Nneɛma a wɔde gu fam

Nhwɛsoɔ

Nneɛma a Wɔde Di Dwuma

Ebia ebehia sɛ wɔde gyinabea foforo si hɔ

Alignment .pull-righta wɔagyae

Nsɛmti a wɔde kyerɛw nsɛm

Ɔkyekyɛfo

Menu mu nneɛma a wɔagyae

Button akuw ahorow

Tooltips & popovers wɔ button akuw mu hwehwɛ nhyehyɛe soronko

Hwɛ sɛ ɛteɛ rolena fa ahyɛnsode bi ma

Nhwɛso titiriw

Button adwinnade pon

Sizing a wɔde yɛ nneɛma

Nesting a wɔde yɛ buw

Nsakrae a ɛba gyina hɔ

Button akuw ahorow a ɛfata

Ahye a wodi ho dwuma

IE8 ne ahyeɛ so

Ne <a>element ahorow

Links a ɛyɛ adwuma sɛ buttons

Ne <button>element ahorow

Button a ɛwɔ ase hɔ

Plugin a wɔde wɔn ho to so

Button biako a ɛwɔ ase

Split button a ɛwɔ ase no

Sizing a wɔde yɛ nneɛma

Dropup nsakrae a ɛba

Nsɛm a wɔde hyɛ mu akuw ahorow

Nkyerɛwee <input>s nkutoo

Tooltips & popovers wɔ input akuw mu hwehwɛ nhyehyɛe soronko

Mfa nneɛma afoforo a ɛwom no nfrafra

Fa nkyerɛwde ahorow ka ho bere nyinaa

Nhwɛso titiriw

Sizing a wɔde yɛ nneɛma

Nnaka a wɔde hyɛ mu ne radio so nneɛma a wɔde ka ho

Button a wɔde ka ho

Buttons a ɛwɔ dropdowns so

Bɔton ahorow a wɔakyekyɛ mu

Bɔton ahorow pii

Navs

Sɛ wode navs di dwuma ma tab panels a, ɛhwehwɛ sɛ wode JavaScript tabs plugin di dwuma

Ma navs a wɔde di dwuma sɛ navigation no nyɛ nea wotumi nya

Tabs ahorow

Nnuru a wɔde di dwuma

Wɔabu no bem

Safari ne mmuae a ɛfata navs

Link ahorow a wɔagyae

Link dwumadie no nnyaa nkɛntɛnsoɔ

Sɛ wode nsɛm a wɔde gu fam di dwuma

Tabs a ɛwɔ dropdown ahorow

Nnuru a wɔde gu mu a wɔde gu fam

Navbar na ɛwɔ hɔ

Navbar a wɔahyɛ da ayɛ

Nsɛm a ɛwɔ mu a ɛboro so

Ɛhwehwɛ sɛ wɔde JavaScript plugin di dwuma

Sesa mobile navbar breakpoint a abubu no

Ma navbars nyɛ nea wotumi de di dwuma

Brand mfonini

Nkyerɛwee ahorow

Mobile mfiri ho kɔkɔbɔ ahorow

Fa nkyerɛwde ahorow ka ho bere nyinaa

Nsɛmma nhoma no

Nsɛm a ɛfa ho a wɔde di dwuma pɔtee

Atwerɛ

Nkitahodi ahorow a ɛnyɛ nav

Nneɛma a ɛwom no hyia

Nneɛma pii a wɔde hyɛ mu nifa so

Wɔasiesie no akɔ soro

Nipadua padding ho hia

Wɔasiesie no akɔ ase

Alignment `.pull-right`a wɔagyae

Hwɛ sɛ ɛteɛ `role`na fa ahyɛnsode bi ma

Ne `<a>`element ahorow

Ne `<button>`element ahorow

Nkyerɛwee `<input>`s nkutoo