Bɔtin grup dɛn

Yuz bɔtin grup dɛn fɔ jɔyn bɔku bɔtin dɛn togɛda as wan kɔmpɔzit kɔmpɔnɛnt. Bil dɛn wit wan siriɔs <a>ɔ <button>ɛlimɛnt dɛn.

Di bɛst we fɔ du tin

Wi kin advays yu fɔ yuz di bɔtin grup dɛn ɛn di tulba dɛn we de dɔŋ ya:

• Yuz di sem ɛlimɛnt ɔltɛm na wan bɔtin grup, <a>ɔ <button>.
• Nɔ miks bɔtin dɛn we gɛt difrɛn kɔlɔ dɛn na di sem bɔtin grup.
• Yuz aykɔn dɛn apat frɔm ɔ insted fɔ tɛks, bɔt mek shɔ se yu put alt ɛn taytul tɛks usay i fayn.

Rilayt Bɔtin grup dɛn we gɛt drɔpdɔwn (luk dɔŋ ya) fɔ kɔl aut sɛpret ɛn ɔltɛm dɛn fɔ gɛt drɔpdɔwn caret fɔ sho di we aw dɛn want fɔ biev.

Difɔlt ɛgzampul

Na so di HTML de luk fɔ wan standad bɔtin grup we dɛn bil wit ankɔ tag bɔtin dɛn:

<div klas = "btn-grup" > 
  <bɔtin klas = "btn" > 1 </bɔtin> 
  <bɔtin klas = "btn" > 2 </bɔtin> 
  <bɔtin klas = "btn" > 3 </bɔtin> 
</div> fɔ di wan dɛn we de

Tulba ɛgzampul

Kɔmbayn sɛt dɛn fɔ <div class="btn-group">insay wan <div class="btn-toolbar">fɔ mɔ kɔmpleks kɔmpɔnɛnt dɛn.

<div klas = "btn-tulba" > 
  <div klas = "btn-grup" > 
    ...
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Chekbɔks ɛn redio flawa dɛn

Bɔtin grup dɛn kin wok bak lɛk redio, usay na wan bɔtin nɔmɔ kin wok, ɔ chɛk bɔks dɛn, usay ɛni nɔmba pan di bɔtin dɛn kin wok. Luk di JavaSkript dɔkyumɛnt dɛn fɔ dat.

Get di javaskript »

Drɔpdɔwn dɛn na di bɔtin grup dɛn

Hed dɛn de ɔp! Bɔtin dɛn we gɛt drɔpdɔwn dɛn fɔ rap dɛn wan bay wan .btn-groupinsay wan .btn-toolbarfɔ mek dɛn rɛnd dɛn fayn fayn wan.

Ɔvaviu ɛn ɛgzampul dɛn

Yuz ɛni bɔtin fɔ trig wan drɔpdɔwn mɛnyu bay we yu put am insay wan .btn-groupɛn gi di rayt mɛnyu mak.

Ɛgzampul fɔ mak

Semweso lɛk bɔtin grup, wi mak de yuz rɛgyula bɔtin mak, bɔt wit wan anful adishɔn fɔ rifin di stayl ɛn sɔpɔt Bootstrap in drɔpdɔwn jQuery plɔgin.

<div klas = "btn-grup" > 
  <a klas = "btn drɔpdɔwn-tɔgl" data-tɔgl = "drɔpdɔwn" href = "#" >   
    Du
    <span klas = "kɛrɛt" ></span> 
  </a> fɔ di wan dɛn we de
  <ul klas = "drɔpdɔwn-mɛnyu" > 
    <!-- drɔpdɔwn mɛnyu link dɛn -->
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

I de wok wit ɔl di bɔtin saiz dɛn

Di bɔtin dɛn we de drɔp de wok pan ɛni saiz. yu bɔtin saiz dɛn to .btn-large, .btn-small, ɔ .btn-mini.

I nid fɔ gɛt javascript

Bɔtin drɔpdɔwn dɛn nid di Bootstrap drɔpdɔwn plɔgin fɔ wok.

Sɔntɛnde—lɛk mobayl—drɔp-dɔwn mɛnyu dɛn go de na do na di say usay dɛn de si di tin dɛn. Yu nid fɔ sɔlv di alaynɛshɔn wit yu an ɔ wit kɔstɔm javaskript.

Ɔvaviu ɛn ɛgzampul dɛn

We wi bil pan di bɔtin grup stayl ɛn mak, wi kin mek wan split bɔtin izi wan. Split bɔtin dɛn gɛt wan standad akshɔn na di lɛft ɛn wan drɔpdɔwn tɔgl na di rayt say wit kɔntɛkstual link dɛn.

Sayz dɛn

Yuz di ekstra bɔtin klas dɛn .btn-mini, .btn-small, ɔ .btn-largefɔ sayz.

<div klas = "btn-grup" > 
  ...
  <ul klas = "drɔpdɔwn-mɛnyu pul-rayt" > 
    <!-- drɔpdɔwn mɛnyu link dɛn -->
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Ɛgzampul fɔ mak

Wi de ɛkspɛn di nɔmal bɔtin drɔpdɔwn dɛn fɔ gi sɛkɔn bɔtin akshɔn we de wok as sɛpret drɔpdɔwn triga.

<div klas = "btn-grup" > 
  <bɔtin klas = "btn" > Akshɔn </bɔtin> 
  <bɔtin klas = "btn drɔpdɔwn-tɔgl" data-tɔgl = "drɔpdɔwn" >  
    <span klas = "kɛrɛt" ></span> 
  </bɔtin>
  <ul klas = "drɔpdɔwn-mɛnyu" > 
    <!-- drɔpdɔwn mɛnyu link dɛn -->
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Di meny dɛn we de drɔp

Yu kin chenj di drɔpdɔwn mɛnyu dɛn bak frɔm di bɔt ɔp bay we yu ad wan klas to di mama ɔ papa we de nia .dropdown-menu. I go flip di dairekshɔn fɔ di .caretɛn ripɔzishɔn di mɛnyu sɛf fɔ muf frɔm di bɔt ɔp instead fɔ muf ɔp dɔŋ.

<div klas = "btn-grup drɔp" > 
  <bɔtin klas = "btn" > Drɔp ap </bɔtin> 
  <bɔtin klas = "btn drɔpdɔwn-tɔgl" data-tɔgl = "drɔpdɔwn" >  
    <span klas = "kɛrɛt" ></span> 
  </bɔtin>
  <ul klas = "drɔpdɔwn-mɛnyu" > 
    <!-- drɔpdɔwn mɛnyu link dɛn -->
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Pawaful bays klas

Ɔl di nav kɔmpɔnɛnt dɛn ya—tab, pils, ɛn list— de sheb di sem bays mak ɛn stayl dɛn tru di .navklas.

Ustɛm fɔ yuz am

Tab ɛn pils fayn fɔ sɛkshɔn dɛn we gɛt tin dɛn ɔ fɔ go bitwin pej dɛn we gɛt tin dɛn we gɛt fɔ du wit am.

Komponent alaynɛshɔn

Fɔ alaynɛd ​​nav link dɛn, yuz di .pull-leftɔ .pull-rightyutiliti klas dɛn. Ɔl tu di klas dɛn go ad wan CSS flot na di say we dɛn dɔn sho.

Besik tab dɛn

Tek wan rɛgyula <ul>fɔ link dɛn ɛn ad .nav-tabs:

• Os
• Profayl
• Mɛsej dɛn

<ul klas = "nav nav-tab dɛn" > 
  <li klas = "aktiv" > 
    <a href = "#" > Na di os </a> 
  </li> fɔ di wan dɛn we de
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul> fɔ di wan dɛn we de

Besik pils dɛn

Tek da sem HTML de, bɔt yuz .nav-pillsinsted:

• Os
• Profayl
• Mɛsej dɛn

<ul klas = "nav nav-pils" > 
  <li klas = "aktiv" > 
    <a href = "#" > Na di os </a> 
  </li> fɔ di wan dɛn we de
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul> fɔ di wan dɛn we de

Aw fɔ stak 'em

As tab ɛn pils dɛn ɔrizɔntal bay difɔlt, jɔs ad sɛkɔn klas, .nav-stacked, fɔ mek dɛn tan lɛk se dɛn dɔn stak vertikal wan.

Tab dɛn we dɛn dɔn stak

• Os
• Profayl
• Mɛsej dɛn

<ul klas = "nav nav-tab dɛn we dɛn dɔn stak" > 
  ...
</ul> fɔ di wan dɛn we de

Pils dɛn we dɛn dɔn stak

• Os
• Profayl
• Mɛsej dɛn

<ul klas = "nav nav-pils nav-stak" > 
  ...
</ul> fɔ di wan dɛn we de

Rich menus mek am izi

Drɔpdɔwn mɛnyu dɛn na Bootstrap tab ɛn pils dɛn na supa izi ɛn dɛn nid jɔs smɔl ɛkstra HTML ɛn laytwɛt jQuery plɔgin.

Hed ova to di JavaSkript pej fɔ rid di dɔkyumɛnt dɛn bɔt aw fɔ initialize drɔpdɔwn dɛn na Bootstrap.

Tab dɛn we gɛt drɔp-dɔwn dɛn

• Os
• Ɛp
• Drɔpdɔwn
  • Action
  • Another action
  • Something else here
  • Separated link

<ul klas = "nav nav-tab dɛn" > 
  <li klas = "drɔpdɔwn" > 
    <a klas = "drɔpdɔwn-tɔgl". 
       data-toggle = "drɔpdɔwn".
       href = "#" > fɔ di wan dɛn we de
        Drɔpdɔwn
        <b klas = "kɛrɛt" ></b> 
      </a> fɔ di wan dɛn we de
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      <!-- link dɛn -->
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Pils wit dropdowns

• Os
• Ɛp
• Drɔpdɔwn
  • Action
  • Another action
  • Something else here
  • Separated link

<ul klas = "nav nav-pils" > 
  <li klas = "drɔpdɔwn" > 
    <a klas = "drɔpdɔwn-tɔgl". 
       data-toggle = "drɔpdɔwn".
       href = "#" > fɔ di wan dɛn we de
        Drɔpdɔwn
        <b klas = "kɛrɛt" ></b> 
      </a> fɔ di wan dɛn we de
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      <!-- link dɛn -->
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Aplikeshɔn-stayl nevigishɔn

Nav list dɛn de gi wan simpul ɛn izi we fɔ bil grup dɛn fɔ nav link dɛn wit opshɔnal hεda dɛn. Dɛn kin yuz dɛn fayn fayn wan na saydbar dɛn lɛk di Faynda na OS X.

Structurally, dɛn bil pan di sem kɔr nav stayl dɛn lɛk tab ɛn pils, so yuz ɛn kɔstɔmayshɔn na stret.

Wit aykɔn dɛn

Nav list dɛn bak izi fɔ ɛp wit aykɔn dɛn. Add di proper <i>tag wit klas en yu don set.

Ɔrizɔntal divayda dɛn

Ad wan ɔrizɔntal divayda bay we yu mek wan ɛmti list aytem wit di klas .divider, lɛk so:

<ul klas = "nav nav-list" > 
  ...
  <li klas = "divayda" </li> 
  ...
</ul> fɔ di wan dɛn we de

Ɛgzampul nav list

Tek wan list fɔ di link dɛn ɛn ad class="nav nav-list":

<ul klas = "nav nav-list" > 
  <li klas = "nav-hɛda" > 
    Lista di hεda
  </li> fɔ di wan dɛn we de
  <li klas = "aktiv" > 
    <a href = "#" > Na di os </a> 
  </li> fɔ di wan dɛn we de
  <li> fɔ di wan dɛn we de
    <a href = "#" > Laybri </a> 
  </li> fɔ di wan dɛn we de
  ...
</ul> fɔ di wan dɛn we de

Ɛgzampul wit aykɔn dɛn

Semweso ɛgzampul, bɔt wit <i>tag dɛn fɔ aykɔn dɛn.

<ul klas = "nav nav-list" > 
  ...
  <li> fɔ di wan dɛn we de
    <a href = "#" > we de na di wɔl 
      <i klas = "aykɔn-buk" </i> 
      Laybri
    </a> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
  ...
</ul> fɔ di wan dɛn we de

Wetin de insay

Bring yu tab dɛn to layf wit wan simpul plɔgin fɔ toggle bitwin kɔntinyu tru tab dɛn. Bootstrap de intagret tab dɛn we gɛt tab dɛn insay 4 stayl dɛn: ɔp (difɔlt), rayt, dɔŋ, ɛn lɛft.

Fɔ chenj bitwin dɛn izi ɛn i jɔs nid fɔ chenj smɔl mak.

Fade in tab dɛn

Fɔ mek di tab dɛn go fayn, ad .fadeto ɛni wan pan dɛn .tab-pane.

I nid fɔ gɛt jQuery plɔgin

Ɔl di tab dɛn we gɛt tab dɛn gɛt pawa frɔm wi laytwɛt jQuery plɔgin. Rid mɔ bɔt aw fɔ briŋ tab dɛn we gɛt tab to layf na di javascript docs pej .

Gɛt di javaskript →

Tabbabul ɛgzampul

Fɔ mek tab dɛn ebul fɔ tab, mek wan .tab-panewit yunik ID fɔ ɛvri tab ɛn rap dɛn insay .tab-content.

Fɔ tab dɛn we de alaynɛd ​​na di rayt ɔ lɛft, rap di .nav-tabsɛn .tab-contentinsay .tabbable.

Mak-ap we de stret

Fɔ yuz tab dɛn we gɛt tab dɛn nid fɔ rap div, wan sɛt fɔ tab dɛn, ɛn wan sɛt fɔ tab dɛn pan dɛn fɔ kɔntinyu.

<div class = "tabbable" > <!-- Na fɔ lɛft/rayt tab dɛn nɔmɔ dɛn nid -->  
  <ul klas = "nav nav-tab dɛn" > 
    <li klas = "aktiv" ><a href = "#tab1" data-tɔgl = "tab" > Sɛkshɔn 1 </a></li>   
    <li><a href = "#tab2" data-tɔgl = "tab" > Sɛkshɔn 2 </a></li>  
  </ul> fɔ di wan dɛn we de
  <div klas = "tab-kɔntinɛnt" > 
    <div klas = "tab-pan aktiv" id = "tab1" >  
      <p> A de na Sɛkshɔn 1. </p>
    </div> fɔ di wan dɛn we de
    <div klas = "tab-pan" id = "tab2" >  
      <p> Awdi, a de na Sɛkshɔn 2. </p>
    </div> fɔ di wan dɛn we de
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Tab dɛn we de dɔŋ

Flip di ɔda we aw di HTML de ɛn ad wan klas fɔ put tab dɛn na di bɔt.

<div klas = "tab dɛn we de na di tab-dɔŋ" > 
  <div klas = "tab-kɔntinɛnt" > 
    ...
  </div> fɔ di wan dɛn we de
  <ul klas = "nav nav-tab dɛn" > 
    ...
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Tab dɛn we de na di lɛft say

Swap di klas fɔ put tab dɛn na di lɛft.

<div klas = "tab dɛn we de na di tab-lɛft" > 
  <ul klas = "nav nav-tab dɛn" > 
    ...
  </ul> fɔ di wan dɛn we de
  <div klas = "tab-kɔntinɛnt" > 
    ...
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Tab dɛn we de na di rayt say

Swap di klas fɔ put tab dɛn na di rayt say.

<div klas = "tab dɛn we de na di tab-rayt" > 
  <ul klas = "nav nav-tab dɛn" > 
    ...
  </ul> fɔ di wan dɛn we de
  <div klas = "tab-kɔntinɛnt" > 
    ...
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Navbar skɔf fɔ mek

Di navbar nid fɔ jɔs sɔm div fɔ strɔkchɔ am fayn fɔ statik ɔ fiks displei.

<div klas = "navbar" > 
  <div klas = "navbar-ina" > 
    <div klas = "kɔntena" > 
      ...
    </div> fɔ di wan dɛn we de
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Navbar we dɛn dɔn fiks

Fiks di navbar to di tap ɔ dɔŋ di viupɔt wit wan ɔda klas na di div we de na do pas ɔl, .navbar.

<div klas = "navbar navbar-fiks-tɔp" > 
  ...
</div> fɔ di wan dɛn we de

<div klas = "navbar navbar-fiks-bɔt" > 
  ...
</div> fɔ di wan dɛn we de

We yu de fiks di navbar, mɛmba fɔ akɔn fɔ di say we ayd ɔnda de. Ad 40px ɔ mɔ pan di padding to di <body>. Mek shɔ se yu ad dis afta di kɔr Bootstrap CSS ɛn bifo di opshɔnal rispɔnsiv CSS.

Na di brand

Wan simpul link fɔ sho yu brand ɔ prɔjek nem jɔs nid fɔ gɛt ankɔ tag.

<a klas = "brand" href = "#" >  
  Projɛkt nem
</a> fɔ di wan dɛn we de

Fɔm dɛn na navbar

Fɔ mek yu ebul fɔ stayl ɛn put wan fɔm fayn fayn wan insay di navbar, ad di klas dɛn we fit lɛk aw dɛn sho dɔŋ ya. Fɔ difɔlt fɔm, put .navbar-formɛn ɛni wan pan dɛn .pull-leftɔ .pull-rightfɔ alaynɛt am fayn fayn wan.

<fɔm klas = "navbar-fɔm pul-lɛft" > 
  <input tayp = "tɛks" klas = "span2" >  
</fɔm>

Fɔ wan mɔ kɔstɔmayt sɔch fɔm, ad .navbar-searchto di formɛn .search-queryto di input fɔ spɛshal stayl dɛn na di navbar.

<fɔm klas = "navbar-sɔch pul-lɛft" > 
  <input tayp = "tɛks" klas = "sɔch-kwɛstyɔn" pleshɔlda = "Sɔch" >   
</fɔm>

Opshɔnal rispɔnsiv vɛryushɔn

Dipen pan di bɔku tin dɛn we de na yu tɔpba, yu kin want fɔ impruv di opshɔn dɛn we de ansa. Fɔ du dat, rap yu nav kɔntinyu insay wan we gɛt div, .nav-collapse.collapse, ɛn ad di navbar tɔgl bɔtin, .btn-navbar.

<div klas = "navbar" > 
  <div klas = "navbar-ina" > 
    <div klas = "kɔntena" > 
 
      <!-- .btn-navbar de yuz as di toggle fɔ kollaps navbar kɔntinyu -->
      <a klas = "btn btn-navbar" data-tɔgl = "kɔlaps" data-target = ".nav-kɔlaps" >   
        <span klas = "aykɔn-bar" ></span> 
        <span klas = "aykɔn-bar" ></span> 
        <span klas = "aykɔn-bar" ></span> 
      </a> fɔ di wan dɛn we de
 
      <!-- Mek shɔ se yu lɛf di brand na do if yu want fɔ sho am -->
      <a klas = "brand" href = "#" > Projɛkt nem </a>  
 
      <!-- Ɔltin we yu want fɔ ayd na 940px ɔ less, put insay ya -->
      <div klas = "nav-kollaps" > 
        <!-- .nav, .navbar-sɔch, .navbar-fɔm, ɛn ɔda wan dɛn -->
      </div> fɔ di wan dɛn we de
 
    </div> fɔ di wan dɛn we de
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Nav link dɛn

Nav aytem dɛn simpul fɔ ad via list dɛn we nɔ ɔda.

<ul klas = "nav" > 
  <li klas = "aktiv" > 
    <a href = "#" > Na di os </a> 
  </li> fɔ di wan dɛn we de
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul> fɔ di wan dɛn we de

Yu kin ad divayda dɛn izi wan to yu nav link dɛn wit wan ɛmti list aytem ɛn wan simpul klas. Jɔs ad dis bitwin di link dɛn:

<ul klas = "nav" > 
  ...
  <li klas = "divayda-vɛtikal" </li> 
  ...
</ul> fɔ di wan dɛn we de

Komponent alaynɛshɔn

Fɔ alaynɛt nav, sɔch fɔm, ɔ tɛks, yuz di .pull-leftɔ .pull-rightyutiliti klas dɛn. Ɔl tu di klas dɛn go ad wan CSS flot na di say we dɛn dɔn sho.

We dɛn de ad drɔp-dɔwn mɛnyu dɛn

Fɔ ad drɔpdɔwn ɛn drɔp-ap to di nav na tin we rili simpul, bɔt i nid fɔ yuz wi javaskript plɔgin .

<ul klas = "nav" > 
  <li klas = "drɔpdɔwn" > 
    <a href = "#" yu go si am. 
          klas = "drɔpdɔwn-tɔgl".
          data-toggle = "drɔpdɔwn" >
          Akawnt
          <b klas = "kɛrɛt" ></b> 
    </a> fɔ di wan dɛn we de
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      ...
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Gɛt di javaskript →

Teks na di navbar

Rap string dɛn fɔ tɛks insay wan <.navbar-text>, bɔku tɛm na <p>tag fɔ mek yu gɛt di rayt lida ɛn kɔlɔ.

Wetin mek fɔ yuz dɛn

Dɛn kin yuz bredkrɔm nevigishɔn as we fɔ sho di wan dɛn we de yuz am usay dɛn de insay wan ap ɔ sayt, bɔt nɔto fɔ di praymari nevigishɔn. Kip dɛn yus smɔl ɛn shɔt fɔ mek dɛn go wok fayn pas ɔl.

Ɛgzampul dɛn

Wan ɛgzampul we dɛn sho as i kin sho akɔdin to bɔku pej dɛn.

• Os

• Na os / .
• Laybri

• Na os / .
• Laybri / .
• Data

Mak-ap fɔ di tin dɛn we de apin

HTML na yu standad list we nɔ ɔda wit link dɛn.

<ul klas = "brɛd krɔm" > 
  <li> fɔ di wan dɛn we de
    <a href = "#" > Os </a> <span klas = "divayda" > / </span>   
  </li> fɔ di wan dɛn we de
  <li> fɔ di wan dɛn we de
    <a href = "#" > Laybri </a> <span klas = "divayda" > / </span>   
  </li> fɔ di wan dɛn we de
  <li klas = "aktiv" > Data </li> 
</ul> fɔ di wan dɛn we de

Ustɛm fɔ yuz am

Ultra simplistik ɛn minimal stayl pejineshɔn we dɛn inspɛkt frɔm Rdio, fayn fɔ ap ɛn sɔch rizɔlt dɛn. Di big blɔk at fɔ mis, i izi fɔ skel, ɛn i de gi big say dɛn fɔ klik.

Stetful pej link dɛn

Links kin kɔstɔmayz ɛn dɛn kin wok insay bɔku tin dɛn wit di rayt klas. .disabledfɔ link dɛn we yu nɔ go ebul fɔ klik ɛn .activefɔ di pej we de naw.

Fleksibul alaynɛshɔn

Ad ɛni wan pan tu opshɔnal klas dɛn fɔ chenj di alaynɛshɔn fɔ pej link dɛn: .pagination-centeredɛn .pagination-right.

Ɛgzampul dɛn

Di difɔlt pejin kɔmpɔnɛnt na fleksibul ɛn i de wok insay bɔku chenj dɛn.

Mak-ap fɔ di tin dɛn we de apin

We dɛn rap am wit wan <div>, pej na jɔs wan <ul>.

<div klas = "pejineshɔn" > 
  <ul> fɔ di wan dɛn we de
    <li><a href = "#" > Di wan dɛn we de bifo </a></li> 
    <li klas = "aktiv" > 
      <a href = "#" > 1 </a> 
    </li> fɔ di wan dɛn we de
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > Nɛks </a></li> 
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Na bɔt pej

Di pej kɔmpɔnɛnt na wan sɛt fɔ link fɔ simpul pej implimɛnt wit layt mak ɛn ivin layt stayl dɛn. I fayn fɔ simpul sayt dɛn lɛk blɔk ɔ magazin.

Opshɔnal disabled stet

Peja link dɛn de yuz di jenɛral .disabledklas bak frɔm di pejeshɔn.

Difɔlt ɛgzampul

Bay difɔlt, di pej de sɛnt di link dɛn.

• Bifo
• Nɛks

<ul klas = "peja" > 
  <li> fɔ di wan dɛn we de
    <a href = "#" > Di wan dɛn we bin dɔn de bifo </a> 
  </li> fɔ di wan dɛn we de
  <li> fɔ di wan dɛn we de
    <a href = "#" > Nɛks </a> 
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Links dɛn we dɛn dɔn alaynɛd

Ɔda we de fɔ du dat, yu kin alaynɛd ​​ɛni link to di sayd dɛn:

• ← Di wan dɛn we dɔn ol
• Nyu wan →

<ul klas = "peja" > 
  <li klas = "we bin de bifo" > 
    <a href = "#" > ɛn di wan dɛn we de na di wɔl. Di wan dɛn we dɔn ol </a> 
  </li> fɔ di wan dɛn we de
  <li klas = "nɛks" > 
    <a href = "#" > Nyu wan → </a> fɔ di wan dɛn we de 
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Bɔt

Badge na smɔl, simpul kɔmpɔnɛnt dɛn fɔ sho wan indikɛtɔ ɔ kɔnt ɔf sɔm kayn. Dɛn kin de na imel klaynt dɛn lɛk Mail.app ɔ na mobayl ap fɔ push notis.

Klas dɛn we de

Bootstrap de gi yu wan layt, fleksibul kɔmpɔnɛnt we dɛn kɔl hiro yunit fɔ sho di tin dɛn we de insay yu sayt. I de wok fayn pan sayt dɛn we gɛt bɔku bɔku tin dɛn fɔ sɛl ɛn we gɛt bɔku tin dɛn fɔ du.

Mak-ap fɔ di tin dɛn we de apin

Rap yu kɔntinyu insay wan divlɛk so:

<div klas = "hiro-yunit" > 
  <h1> Ɛd fɔ </h1>
  <p> Taglayn </p>
  <p> fɔ di wan dɛn we de
    <a klas = "btn btn-praymari btn-big" > 
      Lan mɔ bɔt dis
    </a> fɔ di wan dɛn we de
  </p>we de sho aw fɔ du dat
</div> fɔ di wan dɛn we de

Wan simpul shel fɔ wan h1fɔ apɔpriet spɛs aut ɛn sɛgmɛnt sɛkshɔn dɛn fɔ kɔntinyu na wan pej. I kin yuz di h1's difɔlt small, ɛlimɛnt ɛn mɔs ɔda kɔmpɔnɛnt dɛn (wit ɔda stayl dɛn).

<div klas = "pej-hɛda" > 
  <h1> Ɛgzampul pej hεda </h1>
</div> fɔ di wan dɛn we de

Difɔlt smɔl pikchɔ dɛn

Bay difɔlt, dɛn mek Bootstrap in smɔl pikchɔ dɛn fɔ sho pikchɔ dɛn we gɛt link wit smɔl mak we dɛn nid.

I rili kɔstɔmayz

Wit smɔl ɛkstra mak, i pɔsibul fɔ ad ɛni kayn HTML kɔntinyu lɛk ɛd, paregraf, ɔ bɔtin dɛn insay smɔl pikchɔ dɛn.

• 

  Lebul fɔ di smɔl pikchɔ dɛn

  Kras jɔsto odio, dapibus asid fasilisis in, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

  Du Du

• 

  Lebul fɔ di smɔl pikchɔ dɛn

  Kras jɔsto odio, dapibus asid fasilisis in, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

  Du Du

Wetin mek yu yuz smɔl pikchɔ dɛn

Thumbnails (we bin de bifo .media-gridte to v1.4) fayn fɔ grid dɛn fɔ foto ɔ fim dɛn, pikchɔ sɔch rizɔlt dɛn, rital prɔdak dɛn, pɔtfolio dɛn, ɛn bɔku ɔda tin dɛn. Dɛn kin bi link ɔ statik kɔntinyu.

Simpul, fleksibul mak-ap

Thumbnail markup na simpul tin—a ulwit ɛni nɔmba fɔ di liɛlimɛnt dɛn na ɔl wetin dɛn nid. I de tu supa fleksibul, alaw fɔ ɛni kayn kɔntinyu wit jɔs smɔl mɔ mak fɔ rap yu kɔntinyu.

Yuz grid kɔlɔm saiz dɛn

Las wan, di thumbnails kɔmpɔnɛnt de yuz di grid sistem klas dɛn we dɔn de—lɛk .span2ɔ .span3—fɔ kɔntrol di thumbnail dimɛnshɔn dɛn.

Di mak-ap

As wi bin dɔn tɔk, di mak we dɛn nid fɔ mek di smɔl pikchɔ dɛn layt ɛn i nɔ izi fɔ yuz. Na dis na wan luk pan di difɔlt sɛtup fɔ linked pikchɔ dɛn :

<ul klas = "smɔl pikchɔ dɛn" > 
  <li klas = "span3" > 
    <a href = "#" klas = "smɔl pikchɔ" >  
      <img src = "https://pleshold.it/260x180" alt = "" >  
    </a> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
  ...
</ul> fɔ di wan dɛn we de

Fɔ kɔstɔm HTML kɔntinyu insay smɔl pikchɔ dɛn, di mak kin chenj smɔl. Fɔ alaw blɔk lɛvɛl kɔntinyu ɛnisay, wi de swap di <a>fɔ wan <div>lɛk so:

<ul klas = "smɔl pikchɔ dɛn" > 
  <li klas = "span3" > 
    <div klas = "smɔl pikchɔ" > 
      <img src = "https://pleshold.it/260x180" alt = "" >  
      <h5> Lebul fɔ di smɔl pikchɔ dɛn </h5>
      <p> Thumbnail kapshɔn rayt ya... </p>
    </div> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
  ...
</ul> fɔ di wan dɛn we de

Mɔ ɛgzampul dɛn

Eksplɔrɔ ɔl yu opshɔn dɛn wit di difrɛn grid klas dɛn we de fɔ yu. Yu kin miks ɛn mach difrɛn sayz dɛn bak.

Rirayt bays klas

Wit Bootstrap 2, wi don simpul di bes klas: .alertinsted of .alert-message. Wi dɔn ridyus bak di smɔl mak we dɛn nid—nɔ <p>nid fɔ de bay difɔlt, jɔs di ɔda <div>wan .

Single alert mɛsej

Fɔ wan mɔ durable kɔmpɔnɛnt wit less kɔd, wi dɔn pul di difrɛns luk fɔ blɔk alɛt, mɛsej dɛn we kam wit mɔ pad ɛn tipikli mɔ tɛks. Di klas sɛf dɔn chenj to .alert-block.

Go gud gud wan wit javascript

Bootstrap kam wit wan fayn jQuery plɔgin we de sɔpɔt alɛt mɛsej dɛn, we de mek fɔ dismis dɛn kwik ɛn izi.

Get di plɔgin »

Ɛgzampul alɛt dɛn

Rap yu mɛsej ɛn wan opshɔnal klos aykɔn insay wan div wit simpul klas.

<div klas = "alɛt" > 
  <bɔt klas = "klos" data-dismis = "alɛt" > × </bɔtin>  
  <strong> Na wɔnin! </strong> Best check yo self, yu no de luk tu gud.
</div> fɔ di wan dɛn we de

Hed dɛn de ɔp! iOS divays dɛn nid wan href="#"fɔ di dismisal fɔ di alɛt dɛn. Mek shɔ se yu put am ɛn di data atribyut fɔ ankɔ klos aykɔn dɛn. Ɔda we de fɔ du dat, yu kin yuz wan <button>ɛlimɛnt wit di data atribyut, we wi dɔn pik fɔ du fɔ wi dɔkyumɛnt dɛn. We yu de yuz <button>, yu fɔ put type="button"am ɔ yu fɔm dɛn nɔ go sɛn.

I izi fɔ ɛkstɛnd di standad alɛt mɛsej wit tu opshɔnal klas dɛn: .alert-blockfɔ mɔ pad ɛn tɛks kɔntrol ɛn .alert-headingfɔ wan edlayn we de mach.

<div klas = "alɛt alert-blɔk" > 
  <a klas = "klos" data-dismis = "alɛt" href = "#" > × </a>   
  <h4 klas = "alɛt-hɛdin" > Wɔnin! </h4> fɔ di wan dɛn we de 
  Best check yo self, yu no...
</div> fɔ di wan dɛn we de

Mistek ɔ denja

<div klas = "alɛt alert-ɛrɔd" > 
  ...
</div> fɔ di wan dɛn we de

Go bifo

<div klas = "alɛt alert-sakses" > 
  ...
</div> fɔ di wan dɛn we de

Tin dɛn

<div klas = "alɛt alɛt-infɔ" > 
  ...
</div> fɔ di wan dɛn we de

Men

Difɔlt prɔgrɛs bar wit wan vertikal grɛdiɛnt.

<div klas = "prɔgrɛs" > 
  <div klas = "bar". 
       stayl = " wit : 60 %; " ></div> 
</div> fɔ di wan dɛn we de

Striped we gɛt strɛp

Yuz wan gradient fɔ mek wan strɛp ifɛkt (nɔ gɛt IE).

<div klas = "prɔgrɛs prɔgrɛs-strip" > 
  <div klas = "bar". 
       stayl = " wit : 20 %; " ></div> 
</div> fɔ di wan dɛn we de

Animashɔn we dɛn mek

Tek di strɛp ɛgzampul ɛn animate am (nɔ IE).

<div klas = "prɔgrɛs prɔgrɛs-strip." 
     aktif" >
  <div klas = "bar". 
       stayl = " wit : 40 %; " ></div> 
</div> fɔ di wan dɛn we de

Ɔda kɔlɔ dɛn

Progrɛs bar dɛn de yuz sɔm pan di sem bɔtin ɛn alɛt klas dɛn fɔ stayl dɛn we nɔ de chenj.

Bar dɛn we gɛt strɛp

Semweso lɛk di sɔlid kɔlɔ dɛn, wi gɛt difrɛn strɛp prɔgrɛs bar dɛn.

Biev

Progres bar dɛn de yuz CSS3 transishɔn dɛn, so if yu dinamik wan ajɔst di wit via javascript, i go chenj di sayz fayn fayn wan.

If yu yuz di .activeklas, yu .progress-stripedprɔgrɛs bar dɛn go mek di strɛp dɛn gɛt layf frɔm lɛft to rayt.

Brawza sɔpɔt

Progres bar dɛn de yuz CSS3 gradient, transishɔn, ɛn animashɔn fɔ ajɔst ɔl dɛn ifɛkt dɛn. Dɛn tin ya nɔ de sɔpɔt na IE7-9 ɔ ol wan dɛn fɔ Fayafaks.

Opera ɛn IE nɔ de sɔpɔt animashɔn dɛn dis tɛm.

Wɛls

Yuz di wɛl as simpul ifɛkt pan wan ɛlimɛnt fɔ gi am insɛt ifɛkt.

<div klas = "wɛl" > 
  ...
</div> fɔ di wan dɛn we de

Klos di aykɔn

Yuz di jenɛrik klos aykɔn fɔ dismis kɔntinyu lɛk modal ɛn alɛt.

×

<bɔtin klas = "klos" > &tayms; </bɔtin> 

iOS divays dɛn nid fɔ gɛt href="#" fɔ klik ivin if yu lɛk fɔ yuz ankɔ.

<a klas = "klos" href = "#" > &taym dɛn; </a> fɔ di wan dɛn we de