Gwoup bouton

Sèvi ak gwoup bouton pou mete plizyè bouton ansanm kòm yon sèl eleman konpoze. Bati yo ak yon seri de <a>oswa <button>eleman.

Pi bon pratik

Nou rekòmande gid sa yo pou itilize gwoup bouton ak ba zouti:

• Toujou itilize menm eleman nan yon gwoup bouton sèl, <a>oswa <button>.
• Pa melanje bouton ki gen koulè diferan nan menm gwoup bouton an.
• Sèvi ak ikon anplis oswa olye de tèks, men asire w ke w mete alt ak tèks tit kote sa apwopriye.

Gwoup bouton ki gen rapò ak dropdowns (gade pi ba a) ta dwe rele separeman epi toujou gen ladann yon dropdown caret pou endike konpòtman entansyonèl.

Default egzanp

Men ki jan HTML a sanble pou yon gwoup bouton estanda bati ak bouton tag anchor:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Egzanp ba zouti

Konbine ansanm <div class="btn-group">nan yon <div class="btn-toolbar">pou konpozan pi konplèks.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Checkbox ak gou radyo

Gwoup bouton yo ka fonksyone tou kòm radyo, kote yon sèl bouton ka aktif, oswa kaz, kote nenpòt ki kantite bouton ka aktif. Gade dokiman Javascript yo pou sa.

Jwenn javascript la »

Tèt leve

CSS pou gwoup bouton yo nan yon dosye separe, bouton-groups.less.

Bouton dropdowns

Sèvi ak nenpòt bouton pou deklanche yon meni deroulant lè w mete l nan yon .btn-groupepi bay meni apwopriye maketing la.

Tèt leve! Bouton dropdowns mande pou plugin Bootstrap dropdown pou fonksyone.

Egzanp maketing

Menm jan ak yon gwoup bouton, maketing nou an itilize regilye maketing bouton, men ak yon ti ponyen nan adisyon yo rafine style la ak sipòte Bootstrap a dropdown jQuery plugin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aksyon
    <span class = "caret" ></span> 
  </a>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Split bouton dropdowns

Bati sou estil gwoup bouton yo ak maketing, nou ka fasilman kreye yon bouton fann. Bouton fann yo prezante yon aksyon estanda sou bò gòch la ak yon baskile dropdown sou bò dwat la ak lyen kontèks.

Egzanp maketing

Nou elaji sou deroulan bouton nòmal yo pou bay yon dezyèm aksyon bouton ki fonksyone kòm yon deklanche dropdown apa.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Aksyon </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "meni dewoulman" > 
    <!-- lyen meni déroulant -->
  </ul>
</div>

Pwisan klas debaz

Tout konpozan nav isit la—onglè, grenn, ak lis— pataje menm mak ak estil de baz atravè .navklas la.

Lè pou itilize

Tab ak grenn yo bon pou seksyon nan kontni oswa navige ant paj nan kontni ki gen rapò.

Aliyman eleman

Pou fè aliman lyen navigasyon, sèvi ak .pull-leftklas .pull-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a.

Onglet debaz yo

Pran yon regilye <ul>nan lyen epi ajoute .nav-tabs:

• Lakay
• Profile
• Mesaj

<ul class = "nav nav-tabs" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Grenn debaz yo

Pran menm HTML sa a, men sèvi ak .nav-pillspito:

• Lakay
• Profile
• Mesaj

<ul class = "nav nav-pills" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Ki jan yo pile yo

Kòm onglè ak grenn yo orizontal pa default, jis ajoute yon dezyèm klas, .nav-stacked, pou fè yo parèt vètikal anpile.

Onglets anpile

• Lakay
• Profile
• Mesaj

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

Anpile grenn

• Lakay
• Profile
• Mesaj

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

Meni rich fè fasil

Meni dropdown nan onglè Bootstrap ak grenn yo trè fasil epi yo mande sèlman yon ti kras HTML siplemantè ak yon plugin jQuery ki lejè.

Ale nan paj Javascript la pou li dokiman sou inisyalize dropdowns nan Bootstrap.

Onglet ak dropdowns

• Lakay
• Profile
• Dropdown
  • Aksyon
  • Yon lòt aksyon
  • Yon lòt bagay isit la
  • Lyen separe

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    < a class = "dropdown-toggle" 
       done-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meni dewoulman" > 
      <!-- lyen -->
    </ul>
  </li>
</ul>

Grenn ak dropdowns

• Lakay
• Profile
• Dropdown
  • Aksyon
  • Yon lòt aksyon
  • Yon lòt bagay isit la
  • Lyen separe

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    < a class = "dropdown-toggle" 
       done-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meni dewoulman" > 
      <!-- lyen -->
    </ul>
  </li>
</ul>

Aplikasyon-style navigasyon

Lis Nav bay yon fason ki senp epi fasil pou konstwi gwoup lyen nav ak en-tête si ou vle. Yo pi byen itilize nan kad tankou Finder nan OS X.

Estriktirèl, yo ap bati sou menm estil debaz yo nav kòm tab ak grenn, kidonk itilizasyon ak personnalisation yo senp.

Avèk ikon

Lis Nav yo tou fasil pou ekipe ak ikon. <i>Ajoute tag apwopriye a ak klas la epi w ap fikse.

Egzanp lis nav

Pran yon lis lyen epi ajoute class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Lis header
  </li>
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li>
    <a href = "#" > Bibliyotèk </a> 
  </li>
  ...
</ul>

Egzanp ak ikon

Menm egzanp, men ak <i>tags pou ikon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klas = "ikon-liv" ></i> 
      Bibliyotèk
    </a>
  </li>
  ...
</ul>

Ki sa ki enkli

Bay onglè ou yo nan lavi ak yon senp plugin pou chanje ant kontni atravè onglet. Bootstrap entegre onglè tabbable nan kat estil: tèt (default), dwa, anba, ak agoch.

Chanje ant yo se fasil epi sèlman mande pou chanje anpil ti mak.

Egzanp tabtab

Pou fè onglet tabbable, vlope .nav-tabsnan yon lòt div ak klas .tabbable.

Custom jQuery plugin

Tout onglè tabbable yo mache ak plugin jQuery ki lejè nou an. Li plis sou fason pou pote onglet tabulab yo bay lavi sou paj javascript docs la.

Jwenn javascript la →

Tabs sou anba a

Flip lòd HTML la epi ajoute yon klas pou mete onglè sou anba a.

<div class = "onglet tab-anba a" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Onglet sou bò gòch la

Boukante klas la pou mete onglè sou bò gòch la.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Onglet sou bò dwat la

Boukante klas la pou mete onglè sou bò dwat la.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar echafodaj

Navbar a mande sèlman kèk div pou estrikti li byen pou ekspozisyon estatik oswa fiks.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenè" > 
      ...
    </div>
  </div>
</div>

Navbar fiks

Pou fè navbar la fiks sou tèt pòtay la, ajoute .navbar-fixed-topnan div ki pi eksteryè a, .navbar.

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

Nan CSS ou a, w ap bezwen tou konte pou sipèpoze li lakòz lè w ajoute 40px oswa plis nan padding nan <body>. Asire w ou ajoute sa a apre debaz Bootstrap CSS la ak anvan si ou vle reponn CSS la.

Non mak

Yon lyen senp pou montre mak ou oswa non pwojè ou sèlman mande pou yon tag anchor.

<a class = "mak" href = "#" >  
  Non pwojè a
</a>

Fòm rechèch

Fòm rechèch yo resevwa estil koutim nan navbar ak .navbar-searchklas la. Mete .pull-leftoswa .pull-rightsou formaliman li.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Rechèch" >   
</form>

Si ou vle varyasyon reponn

Tou depan de kantite kontni nan topbar ou a, ou ta ka vle aplike opsyon yo reponn. Pou fè sa, vlope kontni nav ou a nan yon div ki genyen, .nav-collapse.collapse, epi ajoute bouton baskile navbar la, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenè" > 
 
      <!-- Yo itilize .btn-navbar kòm baskil pou kontni navbar ki tonbe -->
      <a class = "btn btn-navbar" data-toggle = "effondreman" data-target = ".nav-effondreman" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Asire w ou kite mak la deyò si ou vle li montre -->
      <a class = "brand" href = "#" > Non pwojè </a>  
 
      <!-- Tout sa ou vle kache nan 940px oswa mwens, mete nan isit la -->
      <div class = "nav-effondreman" > 
        <!-- .nav, .navbar-search, .navbar-form, elatriye -->
      </div>
 
    </div>
  </div>
</div>

Lyen navigasyon yo

Atik Nav yo senp pou ajoute atravè lis ki pa òdone.

<ul class = "nav" > 
  <li class = "aktif" > 
    <a href = "#" > Kay </a> 
  </li>
  <li><a href = "#" > Lyen </a></li> 
  <li><a href = "#" > Lyen </a></li> 
</ul>

Ou ka fasilman ajoute divizeur nan lyen navigasyon ou yo ak yon atik lis vid ak yon klas ki senp. Jis ajoute sa a ant lyen:

<ul class = "nav" > 
  ...
  <li class = "divider-vètical" ></li> 
  ...
</ul>

Aliyman eleman

Pou fè aliman yon navigasyon, yon fòm rechèch oswa yon tèks, sèvi ak .pull-leftklas .pull-rightsèvis piblik yo. Tou de klas yo pral ajoute yon flote CSS nan direksyon espesifye a.

Ajoute dropdowns

Ajoute dropdowns nan navigasyon an se trè senp, men li mande pou itilize plugin javascript nou an .

<ul class = "nav" > 
  <li class = "dropdown" > 
    < a href = "#" 
          klas = "deroule-toggle"
          done-toggle = "dropdown" >
          Kont
          <b class = "caret" ></b> 
    </a>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </li>
</ul>

Jwenn javascript la →

Poukisa sèvi ak yo

Navigasyon Breadcrumb yo itilize kòm yon fason pou montre itilizatè yo kote yo ye nan yon aplikasyon oswa yon sit, men se pa pou navigasyon prensipal. Kenbe itilizasyon yo rar ak suks pou pi efikas.

Egzanp yo

Yon sèl egzanp montre jan li ta ka parèt sou plizyè paj.

• Lakay

• Kay /
• Bibliyotèk

• Kay /
• Bibliyotèk /
• Done

Marke

HTML se lis estanda ou pa òdone ak lyen.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Kay </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliyotèk </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktif" > 
    <a href = "#" > Done </a> 
  </li>
</ul>

Lè pou itilize

Paginasyon ultra senplist ak minim estile enspire pa Rdio, bon pou aplikasyon pou ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

Lyen paj Stateful

Lyen yo personnalisable ak travay nan yon kantite sikonstans ak bon klas la. .disabledpou lyen ki pa klike ak .activepou paj aktyèl la.

Aliyman fleksib

Ajoute youn nan de klas opsyonèl pou chanje aliyman lyen paginasyon yo: .pagination-centeredak .pagination-right.

Egzanp yo

Eleman pagination default la fleksib epi li travay nan yon kantite varyasyon.

Marke

Anvlope nan yon <div>, pagination se jis yon <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li class = "aktif" > 
      <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 = "#" > Next </a></li> 
  </ul>
</div>

Konsènan pager

Eleman pager la se yon seri lyen pou enplemantasyon paginasyon senp ak maketing limyè e menm estil pi lejè. Li bon pou sit senp tankou blog oswa magazin.

Default egzanp

Pa default, pager la santre lyen.

• Previous
• Next

<ul class = "pager" > 
  <li>
    <a href = "#" > Previous </a> 
  </li>
  <li>
    <a href = "#" > Next </a> 
  </li>
</ul>

Lyen ki aliyen

Altènativman, ou ka aliman chak lyen sou kote sa yo:

• ← Pi gran
• Nouvo →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Pi gran </a> 
  </li>
  <li klas = "pwochen" > 
    <a href = "#" > Nouvo → </a> 
  </li>
</ul>

Bootstrap bay yon eleman ki lejè, fleksib ki rele yon inite ewo pou montre kontni sou sit ou a. Li travay byen sou sit maketing ak kontni-lou.

Marke

Vlope kontni ou a nan yon divtankou konsa:

<div class = "ewo-inite" > 
  <h1> Tit </h1>
  <p> Eslogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Aprann plis
    </a>
  </p>
</div>

Yon kokiy senp pou yon h1espas apwopriye epi segman seksyon kontni sou yon paj. Li ka itilize eleman h1default smallla ak pifò lòt konpozan (ak estil adisyonèl).

<div class = "page-haeder" > 
  <h1> Egzanp tèt paj </h1>
</div>

Miniatures default

Pa default, ti miniatures Bootstrap yo fèt pou montre imaj ki lye yo ak maketing minimòm obligatwa.

Trè personnalisable

Avèk yon ti mak siplemantè, li posib pou ajoute nenpòt kalite kontni HTML tankou tit, paragraf, oswa bouton nan miniatures.

• 

  Etikèt miniature

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksyon Aksyon

• 

  Etikèt miniature

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Aksyon Aksyon

Poukisa itilize miniatures

Miniatures (anvan .media-gridjiska v1.4) yo bon pou kadriyaj foto oswa videyo, rezilta rechèch imaj, pwodwi Yo Vann an Detay, pòtfolyo, ak plis ankò. Yo ka lyen oswa kontni estatik.

Senp, fleksib maketing

Markage miniatures se senp — yon ulak nenpòt kantite lieleman se tout sa ki nesesè. Li la tou super fleksib, sa ki pèmèt pou nenpòt kalite kontni ak jis yon ti jan plis maketing vlope sa ou yo.

Itilize gwosè kolòn kadriyaj

Anfen, eleman miniature yo sèvi ak klas sistèm kadriyaj ki egziste deja-tankou .span2oswa .span3-pou kontwòl dimansyon miniature.

Markup la

Kòm mansyone deja, maketing ki nesesè pou ti miniatures se lejè ak senp. Men yon gade nan konfigirasyon default pou imaj ki lye yo :

<ul class = "miniature" > 
  <li class = "span3" > 
    <a href = "#" class = "miniature" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Pou kontni HTML koutim nan miniatures, maketing la chanje yon ti kras. Pou pèmèt kontni nivo blòk nenpòt kote, nou chanje a <a>pou yon <div>tankou konsa:

<ul class = "miniature" > 
  <li class = "span3" > 
    <div class = "miniature" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etikèt miniature </h5>
      <p> Titul miniature isit la... </p>
    </div>
  </li>
  ...
</ul>

Plis egzanp

Eksplore tout opsyon ou yo ak plizyè klas gri ki disponib pou ou. Ou kapab tou melanje ak matche ak diferan gwosè.

Reekri klas de baz

Avèk Bootstrap 2, nou te senplifye klas debaz la: .alertolye de .alert-message. Nou te redwi tou minimòm maketing ki nesesè yo—pa gen okenn <p>obligatwa pa default, jis deyò a <div>.

Mesaj alèt sèl

Pou yon eleman ki pi dirab ak mwens kòd, nou te retire gade diferansye a pou alèt blòk, mesaj ki vini ak plis padding ak tipikman plis tèks. Klas la tou chanje an .alert-block.

Ale gwo ak javascript

Bootstrap vini ak yon gwo plugin jQuery ki sipòte mesaj alèt, sa ki fè ranvwaye yo rapid ak fasil.

Jwenn Plugin la »

Egzanp alèt

Anvlope mesaj ou a ak yon icon fèmen opsyonèl nan yon div ak klas senp.

<div class = "alèt" > 
  <a class = "close" data-dismiss = "alèt" > × </a>  
  <strong> Avètisman! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon.
</div>

Fasil pwolonje mesaj alèt estanda a ak de klas opsyonèl: .alert-blockpou plis padding ak kontwòl tèks ak .alert-headingpou yon tit matche.

<div class = "alèt alèt-blòk" > 
  <a class = "close" data-dismiss = "alèt" > × </a>  
  <h4 class = "alert-heading" > Avètisman! </h4> 
  Pi bon tcheke tèt ou, ou pa...
</div>

Erè oswa danje

<div class = "alèt alèt-erè" > 
  ...
</div>

Siksè

<div class = "alèt alèt-siksè" > 
  ...
</div>

Enfòmasyon

<div class = "alèt alèt-info" > 
  ...
</div>

Debaz

Default ba pwogrè ak yon gradyan vètikal.

<div class = "pwogrè" > 
  <div class = "ba" 
       style = " lajè : 60 %; " ></div> 
</div>

Raye

Sèvi ak yon gradyan pou kreye yon efè trase.

<div class = "pwogrè pwogrè-info 
     pwogrè-ray" >
  <div class = "ba" 
       style = " lajè : 20 %; " ></div> 
</div>

Anime

Pran egzanp trase a epi li anime li.

<div class = "pwogrè pwogrè-danje 
     aktif pwogrese" >
  <div class = "ba" 
       style = " lajè : 40 %; " ></div> 
</div>

Koulè adisyonèl

Ba pwogrè yo itilize kèk nan menm non klas yo kòm bouton ak alèt pou fason menm jan an.

• .progress-info
• .progress-success
• .progress-danger

Altènativman, ou ka Customize dosye yo MWEN ak woule koulè pwòp ou yo ak gwosè.

Konpòtman

Ba pwogrè yo sèvi ak tranzisyon CSS3, kidonk si ou ajiste dinamik lajè a atravè javascript, li pral san pwoblèm redimansyone.

Si ou itilize .activeklas la, .progress-stripedba pwogrè ou yo pral anime bann yo gòch a dwat.

Sipò navigatè

Ba pwogrè yo sèvi ak gradyan CSS3, tranzisyon, ak animasyon pou reyalize tout efè yo. Karakteristik sa yo pa sipòte nan IE7-8 oswa ansyen vèsyon Firefox.

Opera pa sipòte animasyon nan moman sa a.

Wells

Sèvi ak pi a kòm yon efè senp sou yon eleman bay li yon efè ensèk.

<div class = "byen" > 
  ...
</div>

Badj

Sèvi ak yon badj sou yon eleman pou yon konte ki pa li oswa kòm yon endikatè senp.

<span class = "badj" > 3 </div> 

Fèmen icon

Sèvi ak jenerik ikòn fèmen pou ranvwaye kontni tankou modal ak alèt.

×

<a class = "fèmen" > × </a>