A na-ewu ọtụtụ ihe ndị ọzọ nwere ike iji mee ihe n'ime Bootstrap iji nye igodo, ọkwa, popovers na ọtụtụ ndị ọzọ.
Mpempe akwụkwọ dị mfe yana obere ụdị nke Rdio sitere n'ike mmụọ nsọ, mara mma maka ngwa na nsonaazụ ọchụchọ. Nnukwu ngọngọ siri ike ịgbaghara, na-adị mfe ịrị elu, ma na-enye nnukwu mpaghara pịa.
Enwere ike ịhazi njikọ ma na-arụ ọrụ n'ọtụtụ ọnọdụ yana klaasị kwesịrị ekwesị. .disabled
maka njikọ enweghị ike ịpị yana .active
maka ibe dị ugbu a.
Tinye nke ọ bụla n'ime klaasị abụọ nhọrọ iji gbanwee nhazi nke njikọ pagination: .pagination-centered
na .pagination-right
.
Akụkụ nke ndabara na-agbanwe agbanwe ma na-arụ ọrụ n'ọtụtụ ọdịiche.
Kechie na a <div>
, pagination bụ naanị a <ul>
.
- <div klas = "pagination" >
- <ul>
- <li><a href = "#" > Nke gara aga </a></li>
- <li klas = "arụ ọrụ" >
- <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 = "#" > Ọzọ </a></li>
- </ul>
- </div>
Akụkụ pager bụ njikọ njikọ maka mmejuputa pagination dị mfe yana akara ọkụ yana ọbụna ụdị ọkụ. Ọ dị mma maka saịtị dị mfe dị ka blọọgụ ma ọ bụ akwụkwọ akụkọ.
Site na ndabara, ebe nrụọrụ pager na-ejikọta njikọ.
- <ul klas = "pager" >
- <li>
- <a href = "#" > Nke gara aga </a>
- </li>
- <li>
- <a href = "#" > Ọzọ </a>
- </li>
- </ul>
Akara aha | Akara akara |
---|---|
Ọdabara | <span class="label">Default</span> |
Ọhụrụ | <span class="label label-success">New</span> |
Ịdọ aka ná ntị | <span class="label label-warning">Warning</span> |
Ihe dị mkpa | <span class="label label-important">Important</span> |
Ozi | <span class="label label-info">Info</span> |
Site na ndabara, emebere obere mkpụkọ Bootstrap iji gosipụta onyonyo ejikọrọ na obere akara achọrọ.
N'iji ntakịrị nrịbama agbakwunyere, ọ ga-ekwe omume itinye ụdị ọdịnaya HTML ọ bụla dị ka isiokwu, paragraf, ma ọ bụ bọtịnụ n'ime obere mkpịsị aka.
Mkpịsị aka (nke gara aga .media-grid
ruo v1.4) dị mma maka grids nke foto ma ọ bụ vidiyo, nsonaazụ ọchụchọ onyonyo, ngwaahịa azụmaahịa, Pọtụfoliyo na ọtụtụ ndị ọzọ. Ha nwere ike ịbụ njikọ ma ọ bụ ọdịnaya kwụ ọtọ.
Mkpịsị mkpịsị mkpịsị aka dị mfe - ul
nwere ọnụọgụ ihe ọ bụla li
bụ naanị ihe achọrọ. Ọ dịkwa oke mgbanwe, na-enye ohere maka ụdị ọdịnaya ọ bụla nwere ntakịrị akara karịa iji kechie ọdịnaya gị.
N'ikpeazụ, akụrụngwa thumbnails na-eji klaasị sistemụ grid dị ugbu a-dị ka .span2
ma ọ bụ .span3
-maka njikwa nke akụkụ thumbnail.
Dịka ekwuru na mbụ, akara achọrọ maka obere mkpịsị aka dị mfe ma kwụ ọtọ. Nke a bụ lelee ntọala ndabara maka onyonyo ejikọrọ :
- <ul klas = "thumbnails" >
- <li klas = "span3" >
- <a href = "#" klaasị = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Maka ọdịnaya HTML omenala na obere mkpịsị aka, akara ahụ na-agbanwe ntakịrị. Iji kwe ka ọdịnaya ngọngọ ngọngọ ebe ọ bụla, anyị na-agbanwe ya <a>
maka otu <div>
a:
- <ul klas = "thumbnails" >
- <li klas = "span3" >
- <div klas = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> akara mkpịsị mkpịsị mkpịsị aka </h5>
- <p> Nkọwa okwu ntubaaka ebe a... </p>
- </div>
- </li>
- ...
- </ul>
Site na Bootstrap 2, anyị emeela ka klas isi dị mfe: .alert
kama .alert-message
. Anyị ebelatala akara kacha nta achọrọ - mba <p>
achọrọ na ndabara, naanị mpụta <div>
.
Maka akụrụngwa na-adịgide adịgide nke nwere obere koodu, anyị ewepụla ihe dị iche iche maka ọkwa mgbochi, ozi ndị na-abịa na padding karịa yana ederede karịa. Klas ahụ agbanweela ka ọ bụrụ .alert-block
.
Bootstrap na-abịa na nnukwu jQuery ngwa mgbakwunye na-akwado ozi njikere, na-eme ka ịchụpụ ha ngwa ngwa na mfe.
Kechie ozi gị na akara ngosi nhọrọ na div nwere klaasị dị mfe.
- <div class = "ọkwa" >
- <a klas = "nsochi" > × </a>
- <strong> Ịdọ aka ná ntị! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma.
- </div>
Jiri klaasị nhọrọ abụọ gbatịkwuo ozi ọkwa ọkwa n'ụzọ dị mfe: .alert-block
maka padding ọzọ na njikwa ederede yana .alert-heading
maka isiokwu dabara adaba.
Kachasị mma ịlele onwe gị, ị naghị adị oke mma. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel selerisque nisl consectetur et.
- <div klaasị = "njikere-block" >
- <a klas = "nsochi" > × </a>
- <h4 klaasị = "ntụgharị uche" > ịdọ aka ná ntị! </h4>
- Lelee onwe gị nke ọma, ị bụghị ...
- </div>
- <div class = "Njehie nchegharị anya" >
- ...
- </div>
- <div klaasị = "njikere-ihe ịga nke ọma" >
- ...
- </div>
- <div klaasị = "amara ọkwa-ozi" >
- ...
- </div>
Ogwe ọganihu na-aga nke ọma nwere gradient kwụ ọtọ.
- <div klas = "ọganihu" >
- <div klas = "ụlọ mmanya"
- style = " obosara : 60 %; " </div>
- </div>
Na-eji gradient mepụta mmetụta dị warara.
- <div class = "oganihu-ozi
- ọganihu-n'ikirikiri" >
- <div klas = "ụlọ mmanya"
- style = " obosara : 20 %; " </div>
- </div>
Na-ewere ihe atụ nke warara ma mee ka ọ dị ndụ.
- <div class = " ọganihu ọganihu-ihe egwu
- ọganihu-striped arụ ọrụ" >
- <div klas = "ụlọ mmanya"
- style = " obosara : 40 %; " </div>
- </div>
Ogwe na-aga n'ihu na-eji ụfọdụ aha klaasị dị ka bọtịnụ na ọkwa maka ụdị ụdị ahụ.
.progress-info
.progress-success
.progress-danger
N'aka nke ọzọ, ị nwere ike hazie faịlụ ndị dị obere wee tụgharịa agba na nha nke gị.
Ogwe ọganihu na-eji ntụgharị CSS3, yabụ ọ bụrụ na ị na-emegharị obosara site na javascript, ọ ga-agbanwe nke ọma.
Ọ bụrụ na ị na-eji .active
klas ahụ, .progress-striped
ogwe ọganihu gị ga-eme ka ọnyá dị n'aka ekpe gaa n'aka nri.
Ogwe ọganihu na-eji gradients CSS3, ntụgharị na ihe ngosi iji nweta mmetụta ha niile. Anaghị akwado atụmatụ ndị a na IE7-8 ma ọ bụ ụdị Firefox ochie.
Opera anaghị akwado animation n'oge a.
Jiri nke ọma dị ka mmetụta dị mfe na mmewere iji nye ya mmetụta inset.
- <div klas = "mma" >
- ...
- </div>
Jiri akara ngosi nso nso a maka ịchụpụ ọdịnaya dịka modal na ọkwa.
- <a class = " nso" > & ugboro; </a>