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.

Omume kacha mma

Anyị na-akwado ntuziaka ndị a maka iji otu bọtịnụ na ogwe ngwaọrụ:

  • Jiri otu mmewere mgbe niile n'otu bọtịnụ otu, <a>ma ọ bụ <button>.
  • Ejikọtala bọtịnụ nke agba dị iche iche n'otu bọtịnụ otu.
  • Jiri akara ngosi na mgbakwunye na ma ọ bụ kama ederede, mana jide n'aka na etinyere alt na ederede aha ebe kwesịrị ekwesị.

Otu bọtịnụ emetụtara nwere ndapụta (lee n'okpuru) kwesịrị ịkpọpụta iche ma na-etinye oge niile nlekọta mbelata iji gosi omume ebumnobi.

Ọmụmaatụ ndabara

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. <bọtịnụ klas = "btn" > 1 </button>
  3. <bọtịnụ klas = "btn" > 2 </bọtịnụ>
  4. <bọtịnụ klas = "btn" > 3 </bọtịnụ>
  5. </div>

Ihe atụ Toolbar

Gwakọta tent <div class="btn-group">n'ime a <div class="btn-toolbar">maka ihe mgbagwoju anya.

  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 »

Mbudata na otu bọtịnụ

Welie isi elu! Bọtịnụ ndị nwere ndapụta ga-abụ ndị a kechie n'otu n'otu na nke ha .btn-groupn'ime a .btn-toolbarmaka nsụgharị kwesịrị ekwesị.

Mbudata bọtịnụ

Nchịkọta na ihe atụ

Jiri bọtịnụ ọ bụla kpalite menu ndọpụta site na itinye ya n'ime .btn-groupma nye akara ngosi menu kwesịrị ekwesị.

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>

Na-arụ ọrụ na nha bọtịnụ niile

Mbelata bọtịnụ na-arụ ọrụ n'ogo ọ bụla. nha bọtịnụ gị ka .btn-large, .btn-small, ma ọ bụ .btn-mini.

Javascript chọrọ

Mbudata bọtịnụ chọrọ ngwa mgbakwunye Bootstrap ka ọ rụọ ọrụ.

N'ọnọdụ ụfọdụ-dị ka mkpanaka-nchịkọta mwepu ga-agbatị na mpụga ebe nlele. Ịkwesịrị iji aka ma ọ bụ javascript nke omenala dozie nhazi ahụ.


Mbelata bọtịnụ gbawara agbawa

Nchịkọta na ihe atụ

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 mwepu mkpọda n'aka nri nwere njikọ okirikiri.

Nha

Jiri klaasị bọtịnụ agbakwunyere .btn-mini, .btn-small, ma ọ bụ .btn-largemaka nha.

  1. <div klas = "btn-otu" >
  2. ...
  3. <ul class = "ndropdown-menu pull-right" >
  4. <!-- njikọ menu ndọpụta -->
  5. </ul>
  6. </div>

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. <bọtịnụ klas = "btn" > Ihe omume </button>
  3. <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >
  4. <span class = "nlekọta" </span>
  5. </bọtịnụ>
  6. <ul klas = "ndropdown-menu" >
  7. <!-- njikọ menu ndọpụta -->
  8. </ul>
  9. </div>

Nchịkọta nhọrọ

Enwere ike ịtụgharị menus mwụda site na ala elu site na ịgbakwunye otu klaasị na nne na nna nke .dropdown-menu. Ọ ga-atụgharị ntụzịaka nke .caretwee degharịa menu n'onwe ya ka ọ si na ala gbagoo kama isi n'elu ala.

  1. <div class = "btn-group dropup" >
  2. <bọtịnụ klas = "btn" > Mwepu </button>
  3. <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >
  4. <span class = "nlekọta" </span>
  5. </bọtịnụ>
  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ụ nke pager bụ njikọ njikọ maka mmejuputa pagination dị mfe na akara ọkụ na ọbụna ụdị ọkụ. Ọ dị mma maka saịtị dị mfe dị ka blọọgụ ma ọ bụ akwụkwọ akụkọ.

Ọnọdụ nkwarụ nhọrọ

Njikọ Pager na-ejikwa .disabledklas izugbe sitere na pagination.

Ọ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ọ ọ 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>
Ihe ịga nke ọma <span class="label label-success">Success</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>
Ngbanwe <span class="label label-inverse">Inverse</span>

Ihe gbasara

Baji bụ obere ihe dị mfe maka igosipụta ihe ngosi ma ọ bụ agụta ụdị ụfọdụ. A na-ahụkarị ha na ndị ahịa email dị ka Mail.app ma ọ bụ na ngwa mkpanaaka maka ịma ọkwa.

Klas dị

Aha Ọmụmaatụ Akara akara
Ọdabara 1 <span class="badge">1</span>
Ihe ịga nke ọma 2 <span class="badge badge-success">2</span>
Ịdọ aka ná ntị 4 <span class="badge badge-warning">4</span>
Ihe dị mkpa 6 <span class="badge badge-important">6</span>
Ozi 8 <span class="badge badge-info">8</span>
Ngbanwe 10 <span class="badge badge-inverse">10</span>

Otu dike

Bootstrap na-enye akụkụ dị fechaa, nke na-agbanwe agbanwe nke a na-akpọ otu dike iji gosipụta ọdịnaya na saịtị gị. Ọ na-arụ ọrụ nke ọma na ahịa na saịtị ọdịnaya-dị arọ.

Akara akara

Kechie ọdịnaya gị n'ụzọ divdị otú a:

  1. <div klas = "hero-unit" >
  2. <h1> Isi </h1>
  3. <p> Mkpado </p>
  4. <p>
  5. <a klas = "btn btn-primary btn-large" >
  6. Mụtakwuo
  7. </a>
  8. </p>
  9. </div>

Ndewo Ụwa!

Nke a bụ otu dike dị mfe, ngwa ngwa jumbotron dị mfe maka ịkpọkwu nlebara anya na ọdịnaya ma ọ bụ ozi egosipụtara.

Mụtakwuo

nkụnye eji isi mee

Shei dị mfe maka h1ịpụpụ n'ụzọ kwesịrị ekwesị na akụkụ nke ọdịnaya na ibe. Ọ nwere ike iji nke h1ndabara small, mmewere yana ọtụtụ ihe ndị ọzọ (nwere ụdị ndị ọzọ).

  1. <div class = "ibe-nkụnye ihe" >
  2. <h1> Ihe atụ nkụnye eji isi mee ibe </h1>
  3. </div>

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 ntubiaka 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. <bọtịnụ klaasị = "emechi" data-dismiss = "alert" > × </button>
  3. <strong> Ịdọ aka ná ntị! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma.
  4. </div>

Welie isi elu! Ngwaọrụ iOS chọrọ href="#"maka nchụpụ ọkwa. Jide n'aka na itinye ya na njirimara data maka akara ngosi arịlịka nso. N'aka nke ọzọ, ịnwere ike iji <button>mmewere nwere njirimara data, nke anyị họrọla ime maka doc anyị. Mgbe ị na-eji <button>, ị ga-etinyerịrị type="button"ma ọ bụ ụdị gị enweghị ike ịnyefe.

Jiri klaasị abụọ nhọrọ dị mfe gbatịa ozi ọkwa ọkwa ọkọlọtọ: .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 class = "njikere-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </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 class = "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ụ

Na-eji gradient mepụta mmetụta dị warara (enweghị IE).

  1. <div klaasị = "ọganihu na-aga n'ihu" >
  2. <div klas = "ụlọ mmanya"
  3. style = " obosara : 20 %; " </div>
  4. </div>

Anụmanụ

Were ihe atụ nke warara wee mee ya (ọ dịghị IE).

  1. <div klaasị = "ọganihu na-aga n'ihu
  2. 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ụ bọtịnụ na klaasị njikere maka ụdị na-agbanwe agbanwe.

Ogwe gbawara agbawa

Yiri agba siri ike, anyị nwere ogwe ọganihu dị iche iche dị iche iche.

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-9 ma ọ bụ ụdị Firefox ochie.

Opera na IE 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. <bọtịnụ klas = " nso" > & ugboro; </bọtịnụ>

Ngwa iOS chọrọ href="#" maka mmemme pịa ma ọ bụrụ na ị na-eji arịlịka.

  1. <a class = "emechi" href = "#" > & ugboro; </a>