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

<div klas = "btn-otu" > 
  <bọtịnụ klas = "btn" > 1 </button> 
  <bọtịnụ klas = "btn" > 2 </bọtịnụ> 
  <bọtịnụ klas = "btn" > 3 </bọtịnụ> 
</div>

Ihe atụ Toolbar

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

<div class = "btn-toolbar" > 
  <div klas = "btn-otu" > 
    ...
  </div>
</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.

<div klas = "btn-otu" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Omume
    <span class = "nlekọta" </span> 
  </a>
  <ul klas = "ndropdown-menu" > 
    <!-- njikọ menu ndọpụta -->
  </ul>
</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ụ mgbakwunye .btn-mini, .btn-small, ma ọ bụ .btn-largemaka nha.

<div klas = "btn-otu" > 
  ...
  <ul class = "ndropdown-menu pull-right" > 
    <!-- njikọ menu ndọpụta -->
  </ul>
</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.

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

<div class = "btn-group dropup" > 
  <bọtịnụ klas = "btn" > Mwepu </button> 
  <bọtịnụ klaasị = "btn dropdown-toggle" data-toggle = "dobe" >  
    <span class = "nlekọta" </span> 
  </bọtịnụ>
  <ul klas = "ndropdown-menu" > 
    <!-- njikọ menu ndọpụta -->
  </ul>
</div>

Ihe ndabara dị fechaa Otu akara, klaasị dị iche iche

Klas isi dị ike

Ngwa ụgbọ mmiri niile ebe a — taabụ, pill, na ndepụta — na -ekekọrịta otu akara akara na ụdị site na .navklaasị.

Mgbe iji

Taabụ na ọgwụ dị mma maka akụkụ nke ọdịnaya ma ọ bụ ịnyagharịa n'etiti ibe ọdịnaya metụtara ya.

Nhazi akụrụngwa

Iji kwado njikọ nav, jiri klaasị .pull-leftma ọ bụ ọrụ. .pull-rightKlas abụọ a ga-agbakwunye CSS sere n'elu na ntụzịaka akọwapụtara.

Ntọala ntọala

Were njikọ oge niile <ul>wee tinye .nav-tabs:

<ul klas = "nav nav-tabs" > 
  <li klas = "arụ ọrụ" > 
    <a href = "#" > Ụlọ </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Mkpụrụ ọgwụ ndị bụ isi

Were otu HTML ahụ, mana jiri .nav-pillskama:

<ul klas = "nav nav-pills" > 
  <li klas = "arụ ọrụ" > 
    <a href = "#" > Ụlọ </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stackable Mee taabụ ma ọ bụ ọgwụ kwụ ọtọ

Otu esi ekpokọta ha

Dị ka taabụ na pill bụ kehoraizin site ndabara, dị nnọọ tinye a nke abụọ klas, .nav-stacked, ime ka ha yie na kwụkọrọ ọtọ.

Taabụ kpokọtara

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Mkpụrụ ọgwụ ekpokọtara

<ul klas = "nav nav-pills nav-stacked" > 
  ...
</ul>

Mbudata Maka akụrụngwa ụgbọ mmiri dị elu

Ọgaranya menu mere ka ọ dị mfe

Nchịkọta nhọrọ mwụda na taabụ Bootstrap na ọgwụ dị oke mfe ma chọọ naanị ntakịrị HTML mgbakwunye yana ngwa jQuery dị fechaa.

Gaa na ibe Javascript ka ịgụọ dọkụmentị na ibido dropdowns na Bootstrap.

Taabụ nwere dropdowns

<ul klas = "nav nav-tabs" > 
  <li klas = "mkpọda" > 
    <a klaasị = "mkpọtụ-ndabere" 
       data-toggle = "doropdown"
       href = "#" >
        Wedaa
        <b klas = "nlekọta" </b> 
      </a>
    <ul klas = "ndropdown-menu" > 
      <! - njikọ -->
    </ul>
  </li>
</ul>

Ọgwụ nwere ndapụta

<ul klas = "nav nav-pills" > 
  <li klas = "mkpọda" > 
    <a klaasị = "mkpọtụ-ndabere" 
       data-toggle = "doropdown"
       href = "#" >
        Wedaa
        <b klas = "nlekọta" </b> 
      </a>
    <ul klas = "ndropdown-menu" > 
      <! - njikọ -->
    </ul>
  </li>
</ul>

Ndepụta ụgbọ mmiri Wulite ọdụ ụgbọ mmiri dị mfe, dị mma maka akụkụ akụkụ

Ntugharị ụdị ngwa

Ndepụta Nav na-enye ụzọ dị mfe ma dị mfe iji wuo otu njikọ ụgbọ mmiri nwere nkụnye eji isi mee nhọrọ. A na-eji ha kacha mma na sidebars dị ka Finder na OS X.

N'usoro, a na-ewu ha n'otu ụdị ụgbọ mmiri dị mkpa dị ka taabụ na ọgwụ, yabụ ojiji na nhazi ya kwụ ọtọ.

Nwere akara ngosi

Ndepụta ụgbọ mmiri dịkwa mfe iji akara ngosi. Tinye <i>mkpado kwesịrị ekwesị na klaasị wee hazie gị.

Ndị nkesa kwụ ọtọ

Tinye nkesa kwụ ọtọ site na ịmepụta ihe ndepụta efu na klas ahụ .divider, dị ka nke a:

<ul klas = "nav nav-list" > 
  ...
  <li klas = "onye nkesa" </li> 
  ...
</ul>

Ihe atụ ndepụta akwọ ụgbọ mmiri

Were ndepụta njikọ wee tinye class="nav nav-list":

<ul klas = "nav nav-list" > 
  <li klas = "nav-header" > 
    Ndepụta nkụnye eji isi mee
  </li>
  <li klas = "arụ ọrụ" > 
    <a href = "#" > Ụlọ </a> 
  </li>
  <li>
    <a href = "#" > Library </a> 
  </li>
  ...
</ul>

Ọmụmaatụ nwere akara ngosi

Otu ihe atụ, mana nwere <i>mkpado maka akara ngosi.

<ul klas = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "akara ngosi-akwụkwọ" </i> 
      Ụlọ akwụkwọ
    </a>
  </li>
  ...
</ul>

Tabbable nav weta taabụ na ndụ site na javascript

Kedu ihe gụnyere

Jiri ngwa mgbakwunye dị mfe weta taabụ gị ka ọ gbanwee n'etiti ọdịnaya site na taabụ. Bootstrap na-ejikọta taabụ tabbable n'ụdị anọ: elu (ndabere), aka nri, ala na aka ekpe.

Ịgbanwe n'etiti ha dị mfe ma na-achọ naanị ịgbanwe obere akara.

Ihe atụ nwere ike ime

Iji mee ka taabụ taabụ, kechie ya .nav-tabsna div ọzọ na klas .tabbable.

Anọ m na ngalaba 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Ngwa mgbakwunye jQuery omenala

A na-akwado taabụ tabbable site na ngwa mgbakwunye jQuery anyị dị fechaa. Gụkwuo maka otu esi eweta tabbable tab na ndụ na ibe akwụkwọ javascript.

Nweta javascript →

Akara kwụ ọtọ

Iji taabụ tabbụ chọrọ mkpuchi mkpuchi, nhazi nke taabụ, yana otu pane ọdịnaya.

<div class = "tabbable" > 
  <ul klas = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "taabụ" > Nkebi 1 </a></li>   
    <li><a href = "#2" data-toggle = "taabụ" > Nkebi 2 </a></li>  
  </ul>
  <div class = "taabụ-ọdịnaya" > 
    <div class = "tab-pane arụ ọrụ" id = "1" >  
      <p> Anọ m na ngalaba 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Howdy, a nọ m na ngalaba 2. </p>
    </div>
  </div>
</div>

Tabbable n'akụkụ ọ bụla

Taabụ na ala

Tụgharịa usoro HTML wee gbakwunye otu klas iji tinye taabụ na ala.

Anọ m na ngalaba A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tabbable tabs-n'okpuru" > 
  <div class = "taabụ-ọdịnaya" > 
    ...
  </div>
  <ul klas = "nav nav-tabs" > 
    ...
  </ul>
</div>

Taabụ n'aka ekpe

Gbanwee klaasị ka itinye taabụ n'aka ekpe.

Anọ m na ngalaba A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tabbable tabs-ekpe" > 
  <ul klas = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "taabụ-ọdịnaya" > 
    ...
  </div>
</div>

Taabụ n'aka nri

Gbanwee klaasị ka itinye taabụ n'aka nri.

Anọ m na ngalaba A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tabbable tabs-right" > 
  <ul klas = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "taabụ-ọdịnaya" > 
    ...
  </div>
</div>

Ọmụmaatụ navbar static

Ọmụmaatụ nke static (anaghị edozi ya n'elu) navbar nwere aha oru ngo, igodo, na ụdị ọchụchọ.

Navbar scaffolding

Navbar chọrọ naanị divs ole na ole iji hazie ya nke ọma maka ngosipụta kwụ ọtọ ma ọ bụ nke edobere.

<div klas = "navbar" > 
  <div klas = "navbar-inner" > 
    <div klas = "container" > 
      ...
    </div>
  </div>
</div>

Navbar kwụsiri ike

Dozie navbar ahụ n'elu ma ọ bụ ala nke ihe nkiri ahụ yana klaasị gbakwunyere na div kacha elu, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Mgbe ị na-agbakwunye navbar, cheta na ị ga-aza ajụjụ maka mpaghara zoro ezo n'okpuru. Tinye 40px ma ọ bụ karịa nke ntinye na faịlụ <body>. Jide n'aka na ịtinye nke a mgbe isi Bootstrap CSS na tupu CSS na-anabata nhọrọ.

Aha ika

Njikọ dị mfe iji gosi ika ma ọ bụ aha ọrụ gị chọrọ naanị mkpado arịlịka.

<a class = "akara" href = "#" >  
  Aha oru ngo
</a>

Ụdị na navbar

Ka ịkepụta nke ọma na idowe ụdị n'ime navbar, tinye klaasị kwesịrị ekwesị dị ka egosiri n'okpuru. Maka ụdị ndabara, gụnye .navbar-formna ma ọ .pull-leftbụ .pull-rightkwado ya nke ọma.

<ụdị klas = "navbar-form pull-ekpe" > 
  < ụdị ntinye = "ederede" klaasị = "span2" >  
</form>

Maka ụdị nchọta ahaziri ahazi, tinye .navbar-searchklas ka ị nweta ụdị pụrụ iche na navbar.

<ụdị klas = "navbar-search pull-ekpe" > 
  < ụdị ntinye = "ederede" klaasị = "search-query" ebe nchekwa = "Chọọ" >   
</form>

Ọdịiche na-anabata nhọrọ

Dabere na ọnụọgụ ọdịnaya dị na topbar gị, ị nwere ike mejuputa nhọrọ na-anabata. Iji mee nke a, kechie ọdịnaya agagharị gị n'ime div nwere, .nav-collapse.collapse, ma tinye bọtịnụ mkpagharị navbar, .btn-navbar.

<div klas = "navbar" > 
  <div klas = "navbar-inner" > 
    <div klas = "container" > 
 
      <!-- .btn-navbar a na-eji dị ka ntụgharị maka ọdịnaya navbar dara ada -->
      <a class = "btn btn-navbar" data-toggle = "dara" data-target = ".nav-collapse" >   
        <span class = "akara ngosi-ogwe" ></span> 
        <span class = "akara ngosi-ogwe" ></span> 
        <span class = "akara ngosi-ogwe" ></span> 
      </a>
 
      <!-- Jide n'aka na ị ga-ahapụ ika ahụ ma ọ bụrụ na ịchọrọ igosi ya -->
      <a class = "akara" href = "#" > Aha oru ngo </a>  
 
      <!-- Ihe niile ịchọrọ zoro ezo na 940px ma ọ bụ obere, tinye n'ime ebe a -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-ụdị, wdg -->
      </div>
 
    </div>
  </div>
</div>

Welie isi elu! Navbar na-anabata chọrọ ngwa mgbakwunye ọdịda .

Njikọ ụgbọ mmiri

Ihe akwọ ụgbọ mmiri dị mfe ịgbakwunye site na listi edeghị aha.

<ul klas = "nav" > 
  <li klas = "arụ ọrụ" > 
    <a href = "#" > Ụlọ </a> 
  </li>
  <li><a href = "#" > Njikọ </a></li> 
  <li><a href = "#" > Njikọ </a></li> 
</ul>

Ị nwere ike itinye ihe nkesa ngwa ngwa na njikọ ụgbọ mmiri gị yana ihe ndepụta efu yana klaasị dị mfe. Naanị tinye nke a n'etiti njikọ:

<ul klas = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Nhazi akụrụngwa

Ka ịhazie nav, fọm ọchụchọ, ma ọ bụ ederede, jiri klaasị .pull-leftma ọ bụ ike. .pull-rightKlas abụọ a ga-agbakwunye CSS sere n'elu na ntụzịaka akọwapụtara.

Na-agbakwụnye menu ndọpụta

Ịgbakwunye dropdowns na dropups na nav dị oke mfe, mana ọ chọrọ iji ngwa javascript anyị .

<ul klas = "nav" > 
  <li klas = "mkpọda" > 
    <a href = "#" 
          klaasị = "mgbanwe-ntụgharị"
          data-toggle = "ndokwasa" >
          Akaụntụ
          <b klas = "nlekọta" </b> 
    </a>
    <ul klas = "ndropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Nweta javascript →

Ederede na navbar

Kechie eriri ederede na <p>mkpado maka ndu na agba kwesịrị ekwesị.

Gịnị mere eji ha

A na-eji igodo crumb eme ihe dị ka ụzọ iji gosi ndị ọrụ ebe ha nọ n'ime ngwa ma ọ bụ saịtị, mana ọ bụghị maka igodo igodo. Mee ka ojiji ha dị obere ma dị nkenke ka ọ bụrụ nke kachasị dị irè.

Ihe atụ

Otu ihe atụ egosiri ka enwere ike igosi ya n'ofe ibe.

Akara akara

HTML bụ ndepụta ahaziri ọkọlọtọ gị nwere njikọ.

<ul klas = "achịcha achịcha" > 
  <li>
    <a href = "#" > Ụlọ </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Library </a> <span class = "divider" > / </span>   
  </li>
  <li klas = "arụ ọrụ" > Data </li> 
</ul>

Multicon-ibe ibe

Mgbe iji

Mpempe akwụkwọ dị mfe na 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 iche.

Akara akara

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>

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

<ul klas = "pager" > 
  <li>
    <a href = "#" > Nke gara aga </a> 
  </li>
  <li>
    <a href = "#" > Ọzọ </a> 
  </li>
</ul>

Njikọ agbakwunyere

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

<ul klas = "pager" > 
  <li klas = "buburu" > 
    <a href = "#" > ← Oke </a> 
  </li>
  <li klas = "na-esote" > 
    <a href = "#" > Ọhụrụ → </a> 
  </li>
</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>`
Njehie	6	`<span class="badge badge-error">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:

<div klas = "hero-unit" > 
  <h1> Isi </h1>
  <p> Mkpado </p>
  <p>
    <a klas = "btn btn-primary btn-large" > 
      Mụtakwuo
    </a>
  </p>
</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ụ ebe kwesịrị ekwesị yana kewaa akụkụ nke ọdịnaya na ibe. Ọ nwere ike iji nke h1ndabara small, mmewere yana ọtụtụ ihe ndị ọzọ (nwere ụdị ndị ọzọ).

<div class = "ibe-nkụnye ihe" > 
  <h1> Ihe atụ nkụnye eji isi mee ibe </h1>
</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ọ :

<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 ntubiaka ebe a... </p>
    </div>
  </li>
  ...
</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.

<div class = "ọkwa" > 
  <a class = "nsochi" data-dismiss = "amarakwa" > × </a>  
  <strong> Ịdọ aka ná ntị! </strong> Lelee kacha mma maka onwe gị, ị naghị adị oke mma.
</div>

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.

<div class = "njikere-block" > 
  <a class = "nsochi" data-dismiss = "amarakwa" > × </a>  
  <h4 klaasị = "ntụgharị uche" > ịdọ aka ná ntị! </h4> 
  Lelee onwe gị nke ọma, ị bụghị ...
</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ọ.

<div class = "Njehie nchegharị anya" > 
  ...
</div>

Ihe ịga nke ọma

× Ị mere nke ọma! Ị gụchara ozi njikere a dị mkpa nke ọma.

<div class = "njikere-ihe ịga nke ọma" > 
  ...
</div>

Ozi

× Welie isi elu! Ọkwa a chọrọ nlebara anya gị, mana ọ bụghị oke mkpa.

<div klaasị = "amara ọkwa-ozi" > 
  ...
</div>

Ihe atụ na akara

Isi

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

<div klas = "ọganihu" > 
  <div klas = "ụlọ mmanya" 
       style = " obosara : 60 %; " </div> 
</div>

Ekewapụ

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

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

Anụmanụ

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

<div klaasị = "ọganihu na-aga n'ihu 
     arụ ọrụ >>
  <div klas = "ụlọ mmanya" 
       style = " obosara : 40 %; " </div> 
</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!

<div klas = "mma" > 
  ...
</div>

Mechie akara ngosi

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

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

Otu bọtịnụ Jikọọ bọtịnụ maka ịrụ ọrụ dị ka ogwe ngwaọrụ ọzọ

Otu bọtịnụ

Omume kacha mma

Ọmụmaatụ ndabara

Ihe atụ Toolbar

Igbe nlele na ụtọ redio

Mbudata na otu bọtịnụ

Bọtịnụ mwụda menu arụnyere n'otu bọtịnụ iji nye menu onodu okirikiri

Mbudata bọtịnụ

Nchịkọta na ihe atụ

Ihe atụ akara

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

Javascript chọrọ

Mbelata bọtịnụ gbawara agbawa

Nchịkọta na ihe atụ

Nha

Ihe atụ akara

Nchịkọta nhọrọ

Ịnyagharịa, taabụ na pill Ntugharị ụdị ndepụta ahaziri nke ukwuu

Ihe ndabara dị fechaa Otu akara, klaasị dị iche iche

Klas isi dị ike

Mgbe iji

Nhazi akụrụngwa

Ntọala ntọala

Mkpụrụ ọgwụ ndị bụ isi

Stackable Mee taabụ ma ọ bụ ọgwụ kwụ ọtọ

Otu esi ekpokọta ha

Taabụ kpokọtara

Mkpụrụ ọgwụ ekpokọtara

Mbudata Maka akụrụngwa ụgbọ mmiri dị elu

Ọgaranya menu mere ka ọ dị mfe

Taabụ nwere dropdowns

Ọgwụ nwere ndapụta

Ndepụta ụgbọ mmiri Wulite ọdụ ụgbọ mmiri dị mfe, dị mma maka akụkụ akụkụ

Ntugharị ụdị ngwa

Nwere akara ngosi

Ndị nkesa kwụ ọtọ

Ihe atụ ndepụta akwọ ụgbọ mmiri

Ọmụmaatụ nwere akara ngosi

Tabbable nav weta taabụ na ndụ site na javascript

Kedu ihe gụnyere

Ihe atụ nwere ike ime

Ngwa mgbakwunye jQuery omenala

Akara kwụ ọtọ

Tabbable n'akụkụ ọ bụla

Taabụ na ala

Taabụ n'aka ekpe

Taabụ n'aka nri

Navbar

Ọmụmaatụ navbar static

Navbar scaffolding

Navbar kwụsiri ike

Aha ika

Ụdị na navbar

Ọdịiche na-anabata nhọrọ

Njikọ ụgbọ mmiri

Nhazi akụrụngwa

Na-agbakwụnye menu ndọpụta

Ederede na navbar

Nri achịcha

Gịnị mere eji ha

Ihe atụ

Akara akara

Pagination Nhọrọ abụọ maka ịde akwụkwọ site na ọdịnaya

Multicon-ibe ibe

Mgbe iji

Njikọ ihu akwụkwọ mara mma

Ndozi mgbanwe

Ihe atụ

Akara akara

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

Banyere pager

Ọnọdụ nkwarụ nhọrọ

Ọmụmaatụ ndabara

Njikọ agbakwunyere

Akara akara n'ahịrị na ederede nkọwa

Ihe ngosi baajị na ọnụ ọgụgụ a na-agụghị

Ihe gbasara

Klas dị

Ihe odide ederede ibe nkụnye eji isi mee na ngalaba dike maka ikewa ọdịnaya