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.
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ɔ.
Links yɛ customizable na ɛyɛ adwuma wɔ tebea horow bi mu ne adesuakuw a ɛfata. .disabled
sɛ wopɛ link ahorow a wuntumi nkɔ so ne .active
krataafa a ɛwɔ hɔ mprempren.
Fa adesuakuw abien a wopɛ no mu biara ka ho na sesa nkratafa nkitahodi ahorow no nhyehyɛe: .pagination-centered
ne .pagination-right
.
Default pagination component no yɛ nea ɛyɛ mmerɛw na ɛyɛ adwuma wɔ nsakrae dodow bi mu.
Wɔkyekyere no <div>
, nkratafa no yɛ <ul>
.
- <div adesuakuw = "kratafa" >
- <ul> no
- <li><a href = "#" > Nea edi kan </a></li>
- <li adesuakuw = "adwumayɛ" >
- <a href = "#" > 1 </a> na ɛwɔ hɔ
- </li>
- <li><a href = "#" > 2 </a></li> na ɛwɔ hɔ
- <li><a href = "#" > 3 </a></li> na ɛwɔ hɔ
- <li><a href = "#" > 4 </a></li> na ɛwɔ hɔ
- <li><a href = "#" > Nea edi hɔ </a></li>
- </ul>
- </div> no
Pager fã no yɛ link ahorow a wɔahyehyɛ ama pagination implemenations a ɛnyɛ den a ɛwɔ agyiraehyɛde a ɛyɛ hare ne ntade a ɛyɛ hare mpo. Ɛyɛ papa ma nsɛmma nhoma a ɛnyɛ den te sɛ blog anaa nsɛmma nhoma.
Sɛnea wɔahyɛ no, pager no de link ahorow no si mfinimfini.
- <ul adesuakuw = "pager" >
- <li> no
- <a href = "#" > Nea atwam </a>
- </li>
- <li> no
- <a href = "#" > Nea edi hɔ </a>
- </li>
- </ul>
Sɛnea ɛbɛyɛ a, wubetumi de link biara ahyia afã horow no:
- <ul adesuakuw = "pager" >
- <li adesuakuw = "a atwam" >
- <a href = "#" > Nsɛm a wɔka kyerɛ; Mpanyimfo </a>
- </li>
- <li adesuakuw = "nea edi hɔ" >
- <a href = "#" > Nsɛm foforo → </a>
- </li>
- </ul>
Nneɛma a wɔde kyerɛw nsɛm | Markup a wɔde hyɛ agyirae |
---|---|
Mfiaseɛ | <span class="label">Default</span> |
Foforɔ | <span class="label label-success">New</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> |
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.
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 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.
Mfonini ketewaa a wɔde hyɛ agyirae no yɛ mmerɛw—a ul
a nneɛma dodow biara li
wom 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.
Nea etwa to no, mfonini nketewa no fã no de grid nhyehyɛe adesua ahorow a ɛwɔ hɔ dedaw no di dwuma—te sɛ .span2
anaa .span3
—ma mfonini nketewa no nsusuwii ahorow sohwɛ.
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 :
- <ul class = "mfonini nketewa" >
- <li adesuakuw = "span3" >
- <a href = "#" adesuakuw = "mfonini ketewa" >
- <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "mfonini nketewa" >
- <li adesuakuw = "span3" >
- <div class = "mfonini ketewa" >
- <img src = "Ɔkwan a wɔfa so yɛ adwuma no/260x180" alt = "" >
- <h5> Mfonini ketewa no nkyerɛwde </h5>
- <p> Nsɛm a wɔakyerɛw wɔ ha yi ara... </p>
- </div> no
- </li>
- ...
- </ul>
Bootstrap 2 no, yɛama base class no ayɛ mmerɛw: .alert
sen 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, outter no nkutoo <div>
.
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
.
Bootstrap de jQuery plugin kɛseɛ bi ba a ɛboa kɔkɔbɔ nkrasɛm, ɛma sɛ wobɛpow no ntɛmntɛm na ɛnyɛ den.
Wrap wo nkra ne optional close icon wɔ div a simple class.
- <div adesuakuw = "kɔkɔbɔ" >
- <a adesuakuw = "ka ho" > × </a>
- <strong> Kɔkɔbɔ! </strong> Best check yo self, wo nnyɛ fɛ dodo.
- </div> no
Ɛnyɛ den sɛ wobɛtrɛw gyinapɛn kɔkɔbɔ nkra no mu denam adesua ahorow abien a wopɛ so: .alert-block
ma padding ne nsɛm a wɔde di dwuma pii ne .alert-heading
asɛmti a ɛne no hyia.
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.
- <div class = "kɔkɔbɔ kɔkɔbɔ-asiw" >
- <a adesuakuw = "ka ho" > × </a>
- <h4 class = "alert-heading" > Kɔkɔbɔ! </h4> no
- Best check yo self, wo nnyɛ...
- </div> no
- <div class = "kɔkɔbɔ kɔkɔbɔ-mfomso" >
- ...
- </div> no
- <div class = "kɔkɔbɔ kɔkɔbɔ-nkonimdi" >
- ...
- </div> no
- <div class = "kɔkɔbɔ kɔkɔbɔ-nsɛm" >
- ...
- </div> no
Default nkɔso bar a ɛwɔ vertical gradient.
- <div adesuakuw = "nkɔso" >
- <div adesuakuw = "bar".
- style = " ntrɛwmu : 60 %; " ></div>
- </div> no
Ɔde gradient di dwuma de yɛ striped effect.
- <div class = "nkɔso nkɔso-nsɛm."
- nkɔso-a ɛyɛ nsensanee" >
- <div adesuakuw = "bar".
- style = " ntrɛwmu : 20 %; " ></div>
- </div> no
Fa nhwɛso a ɛyɛ nsensanee no na ɛma ɛyɛ anigye.
- <div class = "nkɔso nkɔso-asiane."
- nkɔso-striped a ɛyɛ adwuma" >
- <div adesuakuw = "bar".
- style = " ntrɛwmu : 40 %; " ></div>
- </div> no
Nkɔso bars de adesuakuw din koro no ara bi di dwuma sɛ buttons ne kɔkɔbɔ ahorow ma styling a ɛte saa ara.
.progress-info
.progress-success
.progress-danger
Sɛnea ɛbɛyɛ a, wubetumi ayɛ LESS fael ahorow no sɛnea wopɛ na woabobɔw w’ankasa kɔla ne akɛse.
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 .active
adesua no di dwuma a, wo .progress-striped
nkɔso nnua no bɛma nsensanee no ayɛ adwuma wɔ benkum so akɔ nifa so.
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-8 anaa Firefox dedaw no mu.
Opera ntumi mmoa animations saa bere yi.
Fa abura no di dwuma sɛ nkɛntɛnso a ɛnyɛ den wɔ element bi so na ama no nsunsuanso a ɛwɔ mu.
- <div adesuakuw = "yiye" >
- ...
- </div> no
Fa generic close icon no di dwuma ma pow nsɛm te sɛ modals ne kɔkɔbɔ ahorow.
- <a adesuakuw = "ka ho" > × </a>