Eleman

Plizyè douzèn konpozan ki kapab itilize ankò ki bati pou bay navigasyon, alèt, popovers, ak plis ankò.

Egzanp yo

De opsyon debaz, ansanm ak de varyasyon plis espesifik.

Gwoup bouton sèl

Vlope yon seri bouton ak .btnnan .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Goch </button>
  3. <button class = "btn" > Mwayen </button>
  4. <button class = "btn" > Dwa </button>
  5. </div>

Gwoup bouton miltip

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

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

Gwoup bouton vètikal

Fè yon seri bouton parèt vètikal anpile olye ke orizontal.

  1. <div class = "btn-group btn-group-vètical" >
  2. ...
  3. </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.

Dropdowns nan gwoup bouton

Tèt leve!Bouton ak dropdowns yo dwe vlope endividyèlman nan pwòp yo .btn-groupnan yon .btn-toolbarpou rann apwopriye.

Apèsi ak egzanp

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aksyon
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "meni dewoulman" >
  7. <!-- lyen meni déroulant -->
  8. </ul>
  9. </div>

Travay ak tout gwosè bouton

Bouton dropdowns travay nan nenpòt gwosè: .btn-large, .btn-small, oswa .btn-mini.

Mande JavaScript

Bouton dropdowns mande plugin Bootstrap dropdown pou fonksyone.

Nan kèk ka—tankou mobil—meni déroulant yo ap pwolonje deyò pòtay la. Ou bezwen rezoud aliyman an manyèlman oswa avèk JavaScript koutim.


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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aksyon </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </boutton>
  6. <ul class = "meni dewoulman" >
  7. <!-- lyen meni déroulant -->
  8. </ul>
  9. </div>

Gwosè

Sèvi ak klas bouton siplemantè .btn-mini, .btn-small, oswa .btn-largepou gwosè.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Aksyon </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </boutton>
  6. <ul class = "meni dewoulman" >
  7. <!-- lyen meni déroulant -->
  8. </ul>
  9. </div>

Dropup meni

Meni dewoulman yo kapab tou deklanche depi anba a lè yo ajoute yon sèl klas nan paran imedya a .dropdown-menu. Li pral baskile direksyon an nan .caretepi repositione meni an tèt li pou avanse pou pi anba a moute olye pou yo tèt desann.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </boutton>
  6. <ul class = "meni dewoulman" >
  7. <!-- lyen meni déroulant -->
  8. </ul>
  9. </div>

Pajinasyon estanda

Senp paginasyon enspire pa Rdio, bon pou apps ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Next </a></li>
  10. </ul>
  11. </div>

Opsyon

Eta andikape ak aktif

Lyen yo customizable pou diferan sikonstans. Itilize .disabledpou lyen ki pa klike ak .activepou endike paj aktyèl la.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "enfim" ><a href = "#" > « </a></li>
  4. <li class = "aktif" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Si ou vle, ou ka chanje lankr aktif oswa andikape pou span pou retire fonksyon klike sou pandan w ap kenbe estil entansyon yo.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "enfim" ><span> « </span></li>
  4. <li class = "aktif" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Gwosè

Anpenpan pi gwo oswa pi piti paginasyon? Ajoute .pagination-large, .pagination-small, oswa .pagination-minipou gwosè adisyonèl.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Aliyman

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-dwat" >
  2. ...
  3. </div>

Pager

Lyen rapid anvan ak pwochen pou enplemantasyon paginasyon senp ak mak ak estil limyè. Li bon pou sit senp tankou blog oswa magazin.

Default egzanp

Pa default, pager la santre lyen.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Previous </a></li>
  3. <li><a href = "#" > Next </a></li>
  4. </ul>

Lyen ki aliyen

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

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Pi gran </a>
  4. </li>
  5. <li klas = "pwochen" >
  6. <a href = "#" > Nouvo → </a>
  7. </li>
  8. </ul>

Si ou vle eta andikape

Lyen pager yo itilize tou klas itilite jeneral .disabledki soti nan paginasyon an.

  1. <ul class = "pager" >
  2. <li class = "anvan enfim" >
  3. <a href = "#" > Pi gran </a>
  4. </li>
  5. ...
  6. </ul>

Etikèt

Etikèt Marke
Default <span class="label">Default</span>
Siksè <span class="label label-success">Success</span>
Avètisman <span class="label label-warning">Warning</span>
Enpòtan <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Envès <span class="label label-inverse">Inverse</span>

Badj

Non Egzanp Marke
Default 1 <span class="badge">1</span>
Siksè 2 <span class="badge badge-success">2</span>
Avètisman 4 <span class="badge badge-warning">4</span>
Enpòtan 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Envès 10 <span class="badge badge-inverse">10</span>

Fasil pliable

Pou aplikasyon fasil, etikèt ak badj yo pral tou senpleman tonbe (atravè seleksyon CSS a :empty) lè pa gen okenn kontni ki egziste nan.

Inite ewo

Yon eleman ki lejè, fleksib pou montre kontni kle sou sit ou a. Li travay byen sou sit maketing ak kontni-lou.

Bonjou, mond!

Sa a se yon inite ewo senp, yon senp eleman jumbotron-style pou rele plis atansyon sou kontni an prezante oswa enfòmasyon.

Aprann plis

  1. <div class = "ewo-inite" >
  2. <h1> Tit </h1>
  3. <p> Eslogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Aprann plis
  7. </a>
  8. </p>
  9. </div>

Tèt paj

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

  1. <div class = "page-header" >
  2. <h1> Egzanp header paj <small> Soutèks pou header </small></h1>
  3. </div>

Miniatures par défaut

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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 deja egziste-tankou .span2oswa .span3-pou kontwòl dimansyon miniature.

Marke

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 :

  1. <ul class = "miniature" >
  2. <li class = "span4" >
  3. <a href = "#" class = "miniature" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "miniature" >
  2. <li class = "span4" >
  3. <div class = "miniature" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Etikèt miniature </h3>
  6. <p> Titre miniature... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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è.

Default alèt

Anvlope nenpòt tèks ak yon bouton anile opsyonèl .alertpou yon mesaj avètisman debaz.

Avètisman! Pi bon tcheke ou tèt ou, ou pa gade twò bon.
  1. <div class = "alèt" >
  2. <button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>
  3. <strong> Avètisman! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon.
  4. </div>

Bouton ranvwaye

Mobile Safari ak Mobile Opera navigatè, anplis de data-dismiss="alert"atribi a, mande href="#"pou yon ranvwa alèt lè w ap itilize yon <a>tag.

  1. <a href = "#" class = "close" data-dismiss = "alèt" > × </a>

Altènativman, ou ka itilize yon <button>eleman ki gen atribi done a, sa nou te chwazi fè pou dokiman nou yo. Lè w ap itilize <button>, ou dwe mete type="button"oswa fòm ou yo pa ka soumèt.

  1. <button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>

Rejte alèt yo atravè JavaScript

Sèvi ak alèt jQuery plugin pou ranvwaye alèt rapid ak fasil.


Opsyon

Pou mesaj ki pi long, ogmante ansman twal gaz la sou tèt ak anba nan anbalaj alèt la lè w ajoute .alert-block.

Avètisman!

Pi bon tcheke ou tèt ou, ou pa gade twò bon. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alèt alèt-blòk" >
  2. <button type = "bouton" class = "fèmen" data-dismiss = "alèt" > × </boutton>
  3. <h4> Avètisman! </h4>
  4. Pi bon tcheke tèt ou, ou pa...
  5. </div>

Altènativ kontèks

Ajoute klas si ou vle chanje konotasyon yon alèt.

Erè oswa danje

Oh menen! Chanje kèk bagay epi eseye soumèt ankò.
  1. <div class = "alèt alèt-erè" >
  2. ...
  3. </div>

Siksè

Byen fè! Ou byen li mesaj alèt enpòtan sa a.
  1. <div class = "alèt alèt-siksè" >
  2. ...
  3. </div>

Enfòmasyon

Tèt leve! Alèt sa a bezwen atansyon ou, men li pa trè enpòtan.
  1. <div class = "alèt alèt-info" >
  2. ...
  3. </div>

Egzanp ak maketing

Debaz

Default ba pwogrè ak yon gradyan vètikal.

  1. <div class = "pwogrè" >
  2. <div class = "bar" style = " lajè : 60 %; " ></div>
  3. </div>

Raye

Sèvi ak yon gradyan pou kreye yon efè trase. Pa disponib nan IE7-8.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " lajè : 20 %; " ></div>
  3. </div>

Anime

Ajoute .activenan .progress-stripedpou anime bann yo dwat a goch. Pa disponib nan tout vèsyon IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " lajè : 40 %; " ></div>
  3. </div>

Anpile

Mete plizyè ba nan menm bagay la .progresspou anpile yo.

  1. <div class = "pwogrè" >
  2. <div class = "bar bar-siksè" style = " lajè : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " lajè : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " lajè : 10 %; " ></div>
  5. </div>

Opsyon

Koulè adisyonèl

Ba pwogrè sèvi ak kèk nan menm bouton ak klas alèt pou estil ki konsistan.

  1. <div class = "pwogrè pwogrè-info" >
  2. <div class = "bar" style = " lajè : 20 % " ></div>
  3. </div>
  4. <div class = "pwogrè pwogrè-siksè" >
  5. <div class = "bar" style = " lajè : 40 % " ></div>
  6. </div>
  7. <div class = "pwogrè pwogrè-avètisman" >
  8. <div class = "bar" style = " lajè : 60 % " ></div>
  9. </div>
  10. <div class = "pwogrè pwogrè-danger" >
  11. <div class = "bar" style = " lajè : 80 % " ></div>
  12. </div>

Ba tras

Menm jan ak koulè solid yo, nou gen varye ba pwogrè trase.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " lajè : 20 % " ></div>
  3. </div>
  4. <div class = "pwogrè pwogrè-siksè pwogrè-ray" >
  5. <div class = "bar" style = " lajè : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " lajè : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " lajè : 80 % " ></div>
  12. </div>

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-9 oswa ansyen vèsyon Firefox.

Vèsyon ki pi bonè pase Internet Explorer 10 ak Opera 12 pa sipòte animasyon yo.

Estil objè abstrè pou bati divès kalite konpozan (tankou kòmantè blog, Tweet, elatriye) ki prezante yon imaj ki aliye sou bò gòch oswa dwa ansanm ak kontni tèks.

Default egzanp

Medya default yo pèmèt flote yon objè medya (imaj, videyo, odyo) sou bò gòch oswa adwat yon blòk kontni.

64x64

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.
64x64

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.
64x64

Medya tit

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis nan faucibus.
  1. <div class = "medya" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "medya-kò" >
  6. <h4 class = "media-heading" > Medya tit </h4>
  7. ...
  8.  
  9. <!-- Need media object -->
  10. <div class = "medya" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Lis medya yo

Avèk yon ti mak siplemantè, ou ka itilize medya andedan lis (itil pou fil kòmantè oswa lis atik).

  • 64x64

    Medya tit

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Tèt medya anbrike

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Tèt medya anbrike

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Tèt medya anbrike

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Medya tit

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "lis medya" >
  2. <li class = "medya" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "medya-kò" >
  7. <h4 class = "media-heading" > Medya tit </h4>
  8. ...
  9.  
  10. <!-- Need media object -->
  11. <div class = "medya" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

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

Gade, mwen nan yon pi!
  1. <div class = "byen" >
  2. ...
  3. </div>

Klas opsyonèl

Kontwòl padding ak kwen awondi ak de klas modifye opsyonèl.

Gade, mwen nan yon pi!
  1. <div class = "byen byen-gwo" >
  2. ...
  3. </div>
Gade, mwen nan yon pi!
  1. <div class = "byen byen-ti" >
  2. ...
  3. </div>

Fèmen icon

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

  1. <button class = "fèmen" > × </boutton>

Aparèy iOS mande pou yon href="#"evènman klike sou si ou ta pito itilize yon jete lank.

  1. <a class = "close" href = "#" > × </a>

Klas asistan yo

Senp, klas konsantre pou ti ekspozisyon oswa ajisteman konpòtman.

.rale-gòch

Flote yon eleman kite

  1. klas = "rale-gòch"
  1. . rale - gòch {
  2. flote : gòch ;
  3. }

.rale-dwat

Flote yon eleman dwat

  1. klas = "rale-dwa"
  1. . rale - dwat {
  2. flote : dwa ;
  3. }

.mute

Chanje koulè yon eleman an#999

  1. klas = "moute"
  1. . muet {
  2. koulè : #999;
  3. }

.clearfix

Klè floatsou nenpòt eleman

  1. klas = "clearfix"
  1. . clearfix {
  2. * rale : 1 ;
  3. &: anvan ,
  4. &: apre {
  5. ekspozisyon : tab ;
  6. kontni : "" ;
  7. }
  8. &: apre {
  9. klè : tou de ;
  10. }
  11. }