Ngwa

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

Otu bọtịnụ

Jiri otu bọtịnụ jikọọ ọtụtụ bọtịnụ ọnụ dị ka otu ihe mejupụtara. Jiri usoro <a>ma ọ bụ <button>ihe mejupụtara wuo ha.

Ị nwekwara ike ikpokọta tent nke <div class="btn-group">n'ime a <div class="btn-toolbar">maka mgbagwoju anya oru ngo.

1 2 3 4
5 6 7
8

Ihe atụ akara

Nke a bụ ka HTML si achọ otu bọtịnụ ọkọlọtọ ejiri bọtịnụ mkpado arịlịka rụọ:

  1. <div klas = "btn-otu" >
  2. <a class = "btn" href = "#" > 1 </a>
  3. <a class = "btn" href = "#" > 2 </a>
  4. <a class = "btn" href = "#" > 3 </a>
  5. </div>

Ya na ogwe ngwaọrụ maka ọtụtụ otu:

  1. <div class = "btn-toolbar" >
  2. <div klas = "btn-otu" >
  3. ...
  4. </div>
  5. </div>

Igbe nlele na ụtọ redio

Otu bọtịnụ nwekwara ike ịrụ ọrụ dị ka redio, ebe naanị otu bọtịnụ nwere ike na-arụ ọrụ, ma ọ bụ igbe nlele, ebe ọnụọgụ bọtịnụ ọ bụla nwere ike na-arụ ọrụ. Lelee dọkụmentị Javascript maka nke ahụ.

Nweta javascript »


Welie isi elu

CSS maka otu bọtịnụ dị na faịlụ dị iche, bọtịnụ-groups.less.

Ihe atụ akara

Yiri otu bọtịnụ, nrịbama anyị na-eji akara bọtịnụ oge niile, mana yana mgbakwunye njuaka iji megharịa ụdị ahụ yana kwado ngwa mgbakwunye jQuery nke Bootstrap.

  1. <div klas = "btn-otu" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Omume
  4. <span class = "nlekọta" </span>
  5. </a>
  6. <ul klas = "ndropdown-menu" >
  7. <!-- njikọ menu ndọpụta -->
  8. </ul>
  9. </div>

Mbelata bọtịnụ gbawara agbawa

Na-ewu na ụdị bọtịnụ otu na akara, anyị nwere ike ịmepụta bọtịnụ nkewa n'ụzọ dị mfe. Bọtịnụ gbawara agbawa na-egosipụta ihe omume ọkọlọtọ n'aka ekpe yana ngbanwe mkpọda n'aka nri nwere njikọ ọnọdụ.

Ihe atụ akara

Anyị na-agbasawanye na ndakpọ bọtịnụ nkịtị iji nye mmemme bọtịnụ nke abụọ na-arụ ọrụ dị ka ihe mkpalite ọdịda dị iche.

  1. <div klas = "btn-otu" >
  2. <a class = "btn" href = "#" > Omume </a>
  3. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  4. <span class = "nlekọta" </span>
  5. </a>
  6. <ul klas = "ndropdown-menu" >
  7. <!-- njikọ menu ndọpụta -->
  8. </ul>
  9. </div>

Multicon-ibe ibe

Mgbe iji

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.

Njikọ ihu akwụkwọ mara mma

Enwere ike ịhazi njikọ ma na-arụ ọrụ n'ọtụtụ ọnọdụ yana klaasị kwesịrị ekwesị. .disabledmaka njikọ enweghị ike ịpị yana .activemaka ibe dị ugbu a.

Ndozi mgbanwe

Tinye nke ọ bụla n'ime klaasị abụọ nhọrọ iji gbanwee nhazi nke njikọ pagination: .pagination-centeredna .pagination-right.

Ihe atụ

Akụkụ nke ndabara na-agbanwe agbanwe ma na-arụ ọrụ n'ọtụtụ ọdịiche.

Akara akara

Kechie na a <div>, pagination bụ naanị a <ul>.

  1. <div klas = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Nke gara aga </a></li>
  4. <li klas = "arụ ọrụ" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Ọzọ </a></li>
  11. </ul>
  12. </div>

Pager Maka njikọ gara aga na nke na-esote ọsọ ọsọ

Banyere pager

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

Ọmụmaatụ ndabara

Site na ndabara, ebe nrụọrụ pager na-ejikọta njikọ.

  1. <ul klas = "pager" >
  2. <li>
  3. <a href = "#" > Nke gara aga </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Ọzọ </a>
  7. </li>
  8. </ul>

Njikọ agbakwunyere

N'aka nke ọzọ, ị nwere ike ịhazi njikọ nke ọ bụla n'akụkụ:

  1. <ul klas = "pager" >
  2. <li klas = "buburu" >
  3. <a href = "#" > Oke </a>
  4. </li>
  5. <li klas = "na-esote" >
  6. <a href = "#" > Ọhụrụ → </a>
  7. </li>
  8. </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>

thumbnails mbụ

Site na ndabara, emebere obere mkpụkọ Bootstrap iji gosipụta onyonyo ejikọrọ na obere akara achọrọ.

Enwere ike ịhazi ya nke ukwuu

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.

  • akara mkpịsị mkpịsị aka

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Omume Omume

  • akara mkpịsị mkpịsị aka

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Omume Omume

Gịnị kpatara eji thumbnails

Mkpịsị aka (nke gara aga .media-gridruo 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ọ.

Mfe, mgbanwe akara

Mkpịsị mkpịsị mkpịsị aka dị mfe - ulnwere ọnụọgụ ihe ọ bụla libụ 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ị.

Na-eji nha kọlụm grid

N'ikpeazụ, akụrụngwa thumbnails na-eji klaasị sistemụ grid dị ugbu a-dị ka .span2ma ọ bụ .span3-maka njikwa nke akụkụ thumbnail.

The markup

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

  1. <ul klas = "thumbnails" >
  2. <li klas = "span3" >
  3. <a href = "#" klaasị = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul klas = "thumbnails" >
  2. <li klas = "span3" >
  3. <div klas = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> akara mkpịsị mkpịsị mkpịsị aka </h5>
  6. <p> Nkọwa okwu ntubaaka ebe a... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Ihe atụ ndị ọzọ

Jiri klas grid dị iche iche chọgharịa nhọrọ gị niile. Ị nwekwara ike ịgwakọta ma kwekọọ nha dị iche iche.

Ihe ndabara dị fechaa

Klas isi edegharịrị

Site na Bootstrap 2, anyị emeela ka klas isi dị mfe: .alertkama .alert-message. Anyị ebelatala akara kacha nta achọrọ - mba <p>achọrọ na ndabara, naanị mpụta <div>.

Otu ozi njikere

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.


Na-aga nke ọma na javascript

Bootstrap na-abịa na nnukwu jQuery ngwa mgbakwunye na-akwado ozi njikere, na-eme ka ịchụpụ ha ngwa ngwa na mfe.

Nweta ngwa mgbakwunye »

Ngosipụta ihe atụ

Kechie ozi gị na akara ngosi nhọrọ na div nwere klaasị dị mfe.

× Ịdọ aka ná ntị! Kachasị mma ịlele onwe gị, ị naghị adị oke mma.
  1. <div class = "ọkwa" >
  2. <a klas = "nsochi" > × </a>
  3. <strong> Ịdọ aka ná ntị! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma.
  4. </div>

Jiri klaasị nhọrọ abụọ gbatịkwuo ozi ọkwa ọkwa n'ụzọ dị mfe: .alert-blockmaka padding ọzọ na njikwa ederede yana .alert-headingmaka isiokwu dabara adaba.

×

Ịdọ aka ná ntị!

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.

  1. <div klaasị = "njikere-block" >
  2. <a klas = "nsochi" > × </a>
  3. <h4 klaasị = "ntụgharị uche" > ịdọ aka ná ntị! </h4>
  4. Lelee onwe gị nke ọma, ị bụghị ...
  5. </div>

Nhọrọ okirikiri nhọrọ ukwuu Tinye klaasị nhọrọ iji gbanwee nkọwa njikere

Njehie ma ọ bụ ihe egwu

× Oh snoo! Gbanwee ihe ole na ole wee nwaa ịnyefe ọzọ.
  1. <div class = "Njehie nchegharị anya" >
  2. ...
  3. </div>

Ihe ịga nke ọma

× Ị mere nke ọma! Ị gụchara ozi njikere a dị mkpa nke ọma.
  1. <div klaasị = "njikere-ihe ịga nke ọma" >
  2. ...
  3. </div>

Ozi

× Welie isi elu! Ọkwa a chọrọ nlebara anya gị, mana ọ bụghị oke mkpa.
  1. <div klaasị = "amara ọkwa-ozi" >
  2. ...
  3. </div>

Ihe atụ na akara

Isi

Ogwe ọganihu na-aga nke ọma nwere gradient kwụ ọtọ.

  1. <div klas = "ọganihu" >
  2. <div klas = "ụlọ mmanya"
  3. style = " obosara : 60 %; " </div>
  4. </div>

Ekewapụrụ

Na-eji gradient mepụta mmetụta dị warara.

  1. <div class = "oganihu-ozi
  2. ọganihu-n'ikirikiri" >
  3. <div klas = "ụlọ mmanya"
  4. style = " obosara : 20 %; " </div>
  5. </div>

Anụmanụ

Na-ewere ihe atụ nke warara ma mee ka ọ dị ndụ.

  1. <div class = " ọganihu ọganihu-ihe egwu
  2. ọganihu-striped arụ ọrụ" >
  3. <div klas = "ụlọ mmanya"
  4. style = " obosara : 40 %; " </div>
  5. </div>

Nhọrọ na nkwado ihe nchọgharị

Agba ndị ọzọ

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

Omume

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 .activeklas ahụ, .progress-stripedogwe ọganihu gị ga-eme ka ọnyá dị n'aka ekpe gaa n'aka nri.

Nkwado ihe nchọgharị

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.

Ọdịda

Jiri nke ọma dị ka mmetụta dị mfe na mmewere iji nye ya mmetụta inset.

Lee, anọ m n'olulu mmiri!
  1. <div klas = "mma" >
  2. ...
  3. </div>

Mechie akara ngosi

Jiri akara ngosi nso nso a maka ịchụpụ ọdịnaya dịka modal na ọkwa.

×

  1. <a class = " nso" > & ugboro; </a>