Nneɛma a ɛwom

Wɔde nneɛma du du pii a wotumi de di dwuma bio ahyɛ Bootstrap mu de ama akwantu, kɔkɔbɔ, popovers, ne nea ɛkeka ho pii.

Button akuw ahorow

Fa bɔtn akuw ahorow di dwuma de bom bɔtn ahorow pii bom sɛ ade biako a wɔabom ayɛ. Fa <a>anaa <button>nneɛma ahorow a ɛtoatoa so kyekyere wɔn.

Nneyɛe a eye sen biara

Yɛkamfo akwankyerɛ a edidi so yi kyerɛ sɛnea wode bɔtn akuw ne nnwinnade bedi dwuma:

  • Fa element koro no ara di dwuma bere nyinaa wɔ button kuw biako mu, <a>anaa <button>.
  • Mfa button ahorow a ɛsono kɔla ahorow nfrafra button kuw koro no ara mu.
  • Fa ahyɛnsode ahorow di dwuma de ka nsɛm ho anaasɛ wode besi ananmu, nanso hwɛ hu sɛ fa alt ne asɛmti nsɛm ka ho wɔ baabi a ɛfata.

Ɛsɛ sɛ wɔfrɛ Button akuw a ɛfa ho a ɛwɔ dropdowns (hwɛ ase hɔ) no wɔ ɔkwan soronko so na bere nyinaa wɔde dropdown caret ka ho de kyerɛ suban a wɔahyɛ da ayɛ.

Default nhwɛso

Sɛnea HTML no hwehwɛ standard button kuw a wɔde anchor tag buttons asi no ni:

  1. <div adesuakuw = "btn-kuw" >
  2. <bɔtn adesuakuw = "btn" > 1 </bɔtn>
  3. <bɔtn adesuakuw = "btn" > 2 </bɔtn>
  4. <bɔtn adesuakuw = "btn" > 3 </bɔtn>
  5. </div> no

Nnwinnade pon nhwɛso

Ka sets of <div class="btn-group">into a <div class="btn-toolbar">ma nneɛma a ɛyɛ den kɛse.

  1. <div adesuakuw = "btn-adwinnade" >
  2. <div adesuakuw = "btn-kuw" >
  3. ...
  4. </div> no
  5. </div> no

Checkbox ne radio so nneɛma a ɛyɛ dɛ

Button akuw nso betumi ayɛ adwuma sɛ radio, baabi a button biako pɛ na ebetumi ayɛ adwuma, anaasɛ checkboxes, baabi a button dodow biara betumi ayɛ adwuma. Hwɛ Javascript docs no ma ɛno.

Nya javascript no » .

Dropdowns wɔ button akuw ahorow mu

Ti a ɛwɔ soro! Ɛsɛ sɛ wɔkyekyere bɔton a ɛwɔ dropdowns no mmiako mmiako wɔ wɔn ankasa .btn-groupmu wɔ a mu na .btn-toolbarama wɔatumi akyerɛ ase yiye.

Button a ɛwɔ ase hɔ

Nsɛm a wɔaka abom ne nhwɛso ahorow

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.

Nhwɛso a wɔde hyɛ agyirae

Te sɛ button kuw no, yɛn markup no de button markup a wɔyɛ no daa di dwuma, nanso wɔde nsa kakraa bi ka ho de siesie ɔkwan no na ɛboa Bootstrap dropdown jQuery plugin no.

  1. <div adesuakuw = "btn-kuw" >
  2. <a class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" href = "#" >
  3. Anamɔntuo
  4. <span adesuakuw = "caret" ></span>
  5. </a>
  6. <ul class = "nsɛm a ɛwɔ ase hɔ" >
  7. <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  8. </ul>
  9. </div> no

Ɛyɛ adwuma wɔ button akɛse nyinaa ho

Button dropdowns yɛ adwuma wɔ kɛse biara mu. wo bɔtn no akɛse kɔ .btn-large, .btn-small, anaa .btn-mini.

Ɛhwehwɛ sɛ wɔyɛ javascript

Button dropdowns hwehwɛ sɛ Bootstrap dropdown plugin no atumi ayɛ adwuma.

Wɔ tebea horow bi mu—te sɛ mobile—dropdown menu ahorow no bɛtrɛw akɔ viewport no akyi. Ɛsɛ sɛ wode nsa anaasɛ wode javascript a wɔahyɛ da ayɛ no siesie alignment no.


Split button a ɛwɔ ase no

Nsɛm a wɔaka abom ne nhwɛso ahorow

Sɛ yɛde button group styles ne markup no to hɔ a, ɛnyɛ den sɛ yebetumi ayɛ split button. Split buttons no kyerɛ adeyɛ a ɛyɛ gyinapɛn wɔ benkum so ne dropdown toggle wɔ nifa so a ɛwɔ contextual links.

Nneɛma akɛse

Fa button class ahorow a ɛka ho no di dwuma .btn-mini, .btn-small, anaasɛ .btn-largefa sizing.

  1. <div adesuakuw = "btn-kuw" >
  2. ...
  3. <ul class = "dropdown-menu twetwe-nifa" >
  4. <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  5. </ul>
  6. </div> no

Nhwɛso a wɔde hyɛ agyirae

Yɛtrɛw mu wɔ button dropdowns a ɛyɛ daa no so de button adeyɛ a ɛto so abien a ɛyɛ adwuma sɛ dropdown trigger a ɛyɛ soronko no ma.

  1. <div adesuakuw = "btn-kuw" >
  2. <button class = "btn" > Adeyɛ </button>
  3. <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >
  4. <span adesuakuw = "caret" ></span>
  5. </button> no ho
  6. <ul class = "nsɛm a ɛwɔ ase hɔ" >
  7. <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  8. </ul>
  9. </div> no

Menu ahorow a wɔde gu fam

Wobetumi nso adan dropdown menu ahorow no afi ase akɔ soro denam adesuakuw biako a wode bɛka ɔwofo a ɔwɔ hɔ ntɛm ara no ho no so .dropdown-menu. Ɛbɛdannan akwankyerɛ a ɛwɔ no .caretna asan de menu no ankasa asi hɔ ma afi ase akɔ soro sen sɛ ɛbɛkɔ soro akɔ fam.

  1. <div class = "btn-kuo a ɛtɔ gu fam" >
  2. <button class = "btn" > Nsuo a ɛtɔ gu fam </button>
  3. <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >
  4. <span adesuakuw = "caret" ></span>
  5. </button> no ho
  6. <ul class = "nsɛm a ɛwɔ ase hɔ" >
  7. <!-- menu a ɛwɔ ase hɔ no link ahorow -->
  8. </ul>
  9. </div> no

Nkratafa a ɛwɔ nkratafa pii

Bere a ɛsɛ sɛ wɔde di dwuma

Ultra simplistic na minimally styled pagination inspired by Rdio, kɛse 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ɔ.

Stateful krataafa link ahorow

Links yɛ customizable na ɛyɛ adwuma wɔ tebea horow bi mu ne adesuakuw a ɛfata. .disabledsɛ wopɛ link ahorow a wuntumi nkɔ so ne .activekrataafa a ɛwɔ hɔ mprempren.

Nneɛma a wɔde hyɛ mu a ɛyɛ mmerɛw

Fa adesuakuw abien a wopɛ no mu biara ka ho na sesa nkratafa nkitahodi ahorow no nhyehyɛe: .pagination-centeredne .pagination-right.

Nhwɛso ahorow

Default pagination component no yɛ nea ɛyɛ mmerɛw na ɛyɛ adwuma wɔ nsakrae dodow bi mu.

Markup a wɔde hyɛ agyirae

Wɔkyekyere no <div>, nkratafa no yɛ <ul>.

  1. <div adesuakuw = "kratafa" >
  2. <ul> no
  3. <li><a href = "#" > Nea edi kan </a></li>
  4. <li adesuakuw = "adwumayɛ" >
  5. <a href = "#" > 1 </a> na ɛwɔ hɔ
  6. </li>
  7. <li><a href = "#" > 2 </a></li> na ɛwɔ hɔ
  8. <li><a href = "#" > 3 </a></li> na ɛwɔ hɔ
  9. <li><a href = "#" > 4 ​​</a></li> na ɛwɔ hɔ
  10. <li><a href = "#" > Nea edi hɔ </a></li>
  11. </ul>
  12. </div> no

Pager Sɛ wopɛ link ahorow a atwam ne nea edi hɔ ntɛmntɛm

Ɛfa pager ho

Pager fã no yɛ link ahorow a wɔahyehyɛ ama pagination dwumadie a ɛnyɛ den a ɛwɔ agyiraehyɛdeɛ a ɛyɛ hare ne mpo styles a ɛyɛ hare. Ɛyɛ papa ma nsɛmma nhoma a ɛnyɛ den te sɛ blog anaa nsɛmma nhoma.

Optional disabled tebea

Pager links nso de general .disabledclass a efi pagination no mu no di dwuma.

Default nhwɛso

Sɛnea wɔahyɛ no, pager no de link ahorow no si mfinimfini.

  1. <ul adesuakuw = "pager" >
  2. <li> no
  3. <a href = "#" > Nea atwam </a>
  4. </li>
  5. <li> no
  6. <a href = "#" > Nea edi hɔ </a>
  7. </li>
  8. </ul>

Link ahorow a wɔahyehyɛ no pɛpɛɛpɛ

Sɛnea ɛbɛyɛ a, wubetumi de link biara ahyia afã horow no:

  1. <ul adesuakuw = "pager" >
  2. <li adesuakuw = "a atwam" >
  3. <a href = "#" > Nsɛm a wɔka kyerɛ; Mpanyimfo </a>
  4. </li>
  5. <li adesuakuw = "nea edi hɔ" >
  6. <a href = "#" > Nsɛm foforo → </a>
  7. </li>
  8. </ul>
Nneɛma a wɔde kyerɛw nsɛm Markup a wɔde hyɛ agyirae
Mfiaseɛ <span class="label">Default</span>
Nkunimdie <span class="label label-success">Success</span>
Kɔkɔbɔ <span class="label label-warning">Warning</span>
Ɛhia <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Fa ho

Badge yɛ nneɛma nketenkete a ɛnyɛ den a wɔde kyerɛ ade bi anaa akontaabu bi. Wɔtaa hu wɔ email clients te sɛ Mail.app anaa mobile apps so ma push notifications.

Adesua ahorow a ɛwɔ hɔ

Din Nhwɛsoɔ Markup a wɔde hyɛ agyirae
Mfiaseɛ 1. 1. <span class="badge">1</span>
Nkunimdie 2. 2. <span class="badge badge-success">2</span>
Kɔkɔbɔ 4. 4. <span class="badge badge-warning">4</span>
Ɛhia 6. 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10. 10 <span class="badge badge-inverse">10</span>

Ɔkokodurufo unit

Bootstrap de ade a emu yɛ hare, ɛyɛ mmerɛw a wɔfrɛ no hero unit ma de kyerɛ nneɛma a ɛwɔ wo site no so. Ɛyɛ adwuma yiye wɔ aguadi ne nsɛmma nhoma ahorow a emu nsɛm pii wom so.

Markup a wɔde hyɛ agyirae

Fa wo nsɛm no kyekyere divlike so:

  1. <div adesuakuw = "ɔkokodurufo-kuw" >
  2. <h1> Asɛmti </h1>
  3. <p> Nsɛmfua a wɔde kyerɛw nsɛm </p>
  4. <p> na ɛwɔ hɔ
  5. <a class = "btn btn-mfitiaseɛ btn-kɛseɛ" >
  6. Sua pii
  7. </a>
  8. </p> no
  9. </div> no

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

Kratafa no asɛmti

Shell a ɛnyɛ den ma an h1to a ɛfata space out na segment afã horow a ɛwɔ kratafa bi so. Ɛbɛtumi de h1's default small, element no adi dwuma ne afã afoforo dodow no ara (a styles afoforo ka ho).

  1. <div class = "kratafa-atiri" >
  2. <h1> Nhwɛso krataafa asɛmti </h1>
  3. </div> no

Mfonini nketewa a wɔde ahyɛ hɔ

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.

Ɛyɛ nea wotumi sesa no kɛse

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 wɔ ɔkwan a ɛfata so.

    Anamɔntuo Anamɔntuo

  • 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 wɔ ɔkwan a ɛfata so.

    Anamɔntuo Anamɔntuo

Dɛn nti na wode mfonini nketewa di dwuma

Mfonini nketewa (kan no na .media-gridɛkɔ soro kosi v1.4) yɛ papa ma mfonini anaa video ahorow a ɛwɔ grids, mfonini hwehwɛ aba, nneɛma a wɔtɔn wɔ sotɔɔ mu, portfolio ahorow, ne nea ɛkeka ho pii. Ebetumi ayɛ link ahorow anaasɛ static content.

Markup a ɛnyɛ den na ɛyɛ mmerɛw

Mfonini ketewaa a wɔde hyɛ agyirae no yɛ mmerɛw—a ula nneɛma dodow biara liwom no nkutoo ne nea ɛho hia. Ɛsan nso yɛ super flexible, ɛma kwan ma biribiara a ɛwɔ mu a ɛwɔ markup kakra bi kɛkɛ a ɛbɛkyekyere wo nsɛm no.

Ɔde grid column akɛse di dwuma

Nea etwa to no, mfonini nketewa no fã no de grid nhyehyɛe adesua ahorow a ɛwɔ hɔ dedaw no di dwuma—te sɛ .span2anaa .span3—ma mfonini nketewa no nsusuwii ahorow sohwɛ.

Nneɛma a wɔde hyɛ agyirae no

Sɛnea yɛadi kan aka no, agyiraehyɛde a wɔhwehwɛ ma mfonini nketewa no yɛ hare na ɛyɛ tẽẽ. Ɛha na wobɛhwɛ default nhyehyɛe a ɛwɔ mfonini ahorow a wɔde abɔ mu no :

  1. <ul class = "mfonini nketewa" >
  2. <li adesuakuw = "span3" >
  3. <a href = "#" adesuakuw = "mfonini ketewa" >
  4. <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Sɛ wopɛ HTML nsɛm a wɔahyɛ da ayɛ wɔ mfonini nketewa mu a, agyiraehyɛde no sesa kakra. Sɛ yɛbɛma block level content kwan wɔ baabiara a, yɛsesa no <a>ma <div>like so:

  1. <ul class = "mfonini nketewa" >
  2. <li adesuakuw = "span3" >
  3. <div class = "mfonini ketewa" >
  4. <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >
  5. <h5> Mfonini ketewa no nkyerɛwde </h5>
  6. <p> Nsɛm a wɔakyerɛw wɔ ha yi ara... </p>
  7. </div> no
  8. </li>
  9. ...
  10. </ul>

Nhwɛso pii

Hwehwɛ wo akwan nyinaa mu denam grid adesua ahorow a ɛwɔ hɔ ma wo no so. Wubetumi nso de akɛse ahorow afrafra na woayɛ no pɛpɛɛpɛ.

Default ahorow a emu yɛ hare

Wɔasan akyerɛw base class

Bootstrap 2 no, yɛama base class no ayɛ mmerɛw: .alertsen sɛ yɛbɛma .alert-message. Yɛatew agyiraehyɛde a ɛba fam koraa a wɔhwehwɛ nso so—dabi <p>na ɛho hia default so, akyi no <div>nkutoo .

Kɔkɔbɔ nkrasɛm biako pɛ

Sɛ wopɛ sɛ wonya ade a ɛyɛ den a ɛwɔ koodu kakraa bi a, yɛayi nsonsonoe hwɛ a ɛfa block alerts, nkrasɛm a ɛba ne padding pii ne mpɛn pii no nsɛm pii. Adesuakuw no nso asesa ayɛ no .alert-block.


Ɛkɔ yiye ne javascript

Bootstrap de jQuery plugin kɛseɛ bi ba a ɛboa kɔkɔbɔ nkrasɛm, ɛma sɛ wobɛpo no ntɛmntɛm na ɛnyɛ den.

Nya plugin no » .

Nhwɛso a ɛfa kɔkɔbɔ ahorow ho

Wrap wo nkra ne optional close icon wɔ div a simple class.

Kɔkɔbɔ! Best check yo self, wo nnyɛ fɛ dodo.
  1. <div adesuakuw = "kɔkɔbɔ" >
  2. <button class = "to" data-dismiss = "kɔbɔ" > × </button>
  3. <strong> Kɔkɔbɔ! </strong> Best check yo self, wo nnyɛ fɛ dodo.
  4. </div> no

Ti a ɛwɔ soro! iOS mfiri ahorow hwehwɛ sɛ href="#"wɔde kɔkɔbɔ ahorow a wɔpow no. Hwɛ hu sɛ wode ne data attribute no bɛka ho ama anchor close icons. Sɛnea ɛbɛyɛ a, wubetumi de <button>element bi a ɛwɔ data attribute no adi dwuma, a yɛapaw sɛ yɛbɛyɛ ama yɛn docs no. Sɛ wode redi dwuma <button>a, ɛsɛ sɛ wode ka ho type="button"anaasɛ wo nkrataa no remfa mma.

Ɛnyɛ den sɛ wobɛtrɛw gyinapɛn kɔkɔbɔ nkra no mu denam adesua ahorow abien a wopɛ so: .alert-blockma padding ne nsɛm a wɔde di dwuma pii ne .alert-headingasɛmti a ɛne no hyia.

Kɔkɔbɔ!

Best check yo self, wo nnyɛ fɛ dodo. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so. Praesent commodo cursus magna, vel scelerisque nisl consectetur ne nea wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so.

  1. <div class = "kɔkɔbɔ kɔkɔbɔ-asiw" >
  2. <a class = "to" data-dismiss = "kɔbɔ" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Kɔkɔbɔ! </h4> no
  4. Best check yo self, wo nnyɛ...
  5. </div> no

Contextual alternatives Fa adesua ahorow a wopɛ ka ho na sesa kɔkɔbɔ bi nkyerɛase

Mfomso anaa asiane

Oh snap! Sesa nneɛma kakraa bi na bɔ mmɔden sɛ wode bɛmena bio.
  1. <div class = "kɔkɔbɔ kɔkɔbɔ-mfomso" >
  2. ...
  3. </div> no

Nkunimdie

Woayɛ adeɛ! Wokenkan kɔkɔbɔ nkrasɛm a ɛho hia yi yiye.
  1. <div class = "kɔkɔbɔ kɔkɔbɔ-nkonimdi" >
  2. ...
  3. </div> no

Asɛm

Ti a ɛwɔ soro! Saa kɔkɔbɔ yi hia w’adwene, nanso ɛnyɛ super important.
  1. <div class = "kɔkɔbɔ kɔkɔbɔ-nsɛm" >
  2. ...
  3. </div> no

Nhwɛso ne agyiraehyɛde

Mfiasesɛm

Default nkɔso bar a ɛwɔ vertical gradient.

  1. <div adesuakuw = "nkɔso" >
  2. <div adesuakuw = "bar".
  3. style = " ntrɛwmu : 60 %; " ></div>
  4. </div> no

Ntrɛwmu

Ɔde gradient di dwuma de yɛ striped effect (IE nni hɔ).

  1. <div class = "nkɔso nkɔso-striped" >
  2. <div adesuakuw = "bar".
  3. style = " ntrɛwmu : 20 %; " ></div>
  4. </div> no

Animated a wɔde yɛ nneɛma

Fa striped nhwɛso no na ɛma ɛyɛ animated (no IE).

  1. <div class = "nkɔso nkɔso-striped."
  2. a ɛyɛ adwuma" >
  3. <div adesuakuw = "bar".
  4. style = " ntrɛwmu : 40 %; " ></div>
  5. </div> no

Nneɛma a wubetumi apaw ne browser mmoa

Kɔla afoforo a wɔde ahyɛ mu

Nkɔso bars de button ne kɔkɔbɔ adesua koro no ara bi di dwuma ma style ahorow a ɛkɔ so daa.

Nnua a ɛwɔ nsensanee

Te sɛ kɔla ahorow a ɛyɛ den no, yɛwɔ nkɔso nnua ahorow a ɛyɛ nsensanee.

Suban

Nkɔsoɔ bars de CSS3 nsakraeɛ di dwuma, enti sɛ wo dynamically sesa ne tɛtrɛtɛ denam javascript so a, ɛbɛsesa ne kɛseɛ yie.

Sɛ wode .activeadesua no di dwuma a, wo .progress-stripednkɔso nnua no bɛma nsensanee no ayɛ adwuma wɔ benkum so akɔ nifa so.

Browser mmoa a wɔde ma

Nkɔsoɔ bars de CSS3 gradients, nsakraeɛ, ne animations di dwuma de nya wɔn nsunsuansoɔ nyinaa. Saa nneɛma yi ntumi mmoa wɔ IE7-9 anaa Firefox dedaw no mu.

Opera ne IE ntumi mmoa animations saa bere yi.

Wells

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!
  1. <div adesuakuw = "yiye" >
  2. ...
  3. </div> no

To ahyɛnsode no mu

Fa generic close icon no di dwuma ma pow nsɛm te sɛ modals ne kɔkɔbɔ ahorow.

  1. <button class = "to mu" > &mmere; </button> no ho

iOS mfiri hwehwɛ href="#" ma click events sɛ wopɛ sɛ wode anchor di dwuma a.

  1. <a adesuakuw = "to" href = "#" > &mmere; </a>