Zvikamu

Mazana ezvishandiso zvinogoneka zvakavakwa kuti zvipe kufamba, zviziviso, popovers, nezvimwe.

Mienzaniso

Sarudzo mbiri dzekutanga, pamwe nemamwe maviri akasiyana akasiyana.

Boka rebhatani rimwechete

Putira mabhatani akatevedzana ne .btnin .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kuruboshwe </ bhatani>
  3. <button class = "btn" > Pakati </button>
  4. <button class = "btn" > Right </ button>
  5. </ div>

Mapoka emabhatani akawanda

Batanidza seti dzekuita <div class="btn-group">a <div class="btn-toolbar">kune zvimwe zvakaoma zvinoumba.

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

Mapoka emabhatani epamhepo

Itai kuti mabhatani aite seti akaturikidzana kwete akachinjika.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </ div>

Checkbox uye redhiyo flavour

Mapoka emabhatani anogonawo kushanda seredhiyo, uko bhatani rimwe chete rinogona kunge richishanda, kana mabhokisi ekutarisa, uko chero nhamba yemabhatani inogona kushanda. Wona iyo JavaScript docs yeiyo.

Dropdowns mumapoka emabhatani

Musoro!Mabhatani ane anodonhedza anofanirwa kuputirwa ega .btn-groupmukati mawo .btn-toolbarkuti akwanise kupihwa.

Muchidimbu uye mienzaniso

Shandisa chero bhatani kukonzeresa menyu yekudonha nekuiisa mukati .btn-groupuye nekupa iyo yakakodzera menyu markup.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Chiito
  4. <span class = "caret" > </ span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </ div>

Inoshanda nemasaizi ese emabhatani

Mabhatani anodonhedza anoshanda chero saizi: .btn-large, .btn-small, kana .btn-mini.

Inoda JavaScript

Mabhatani anodonha anoda iyo Bootstrap inodonha plugin kuti ishande.

Mune zvimwe zviitiko, senge nharembozha-mamenu ekudonha anozowedzera kunze kwenzvimbo yekuona. Iwe unofanirwa kugadzirisa kurongeka nemaoko kana neJavaScript yakajairwa.


Split button dropdowns

Kuvaka pamabhatani emapoka masitayipi uye markup, isu tinogona nyore kugadzira bhatani rekuparadzanisa. Split mabhatani anoratidza chiitiko chakajairwa kuruboshwe uye kudonhedza chinja kurudyi nemamiriro ekubatanidza.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Chiito </ button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </ span>
  5. </ button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </ div>

Saizi

Shandisa mamwe mabhatani makirasi .btn-mini, .btn-smallkana .btn-largekuti saizi.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Chiito </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "kudonha" >
  4. <span class = "caret" > </ span>
  5. </ button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </ div>

Dropup menus

Mamenu ekudonhedza anogona zvakare kuchinjika kubva pasi kumusoro nekuwedzera kirasi imwechete kumubereki wepedyo we .dropdown-menu. Ichapenengura kutungamira kweiyo .caretuye kuisazve menyu pachayo kuti ifambe kubva pasi kumusoro pane kumusoro pasi.

  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. </ button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </ div>

Standard pagination

Yakareruka pagination yakafemerwa neRdio, yakanakira maapplication uye mhinduro dzekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

  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 = "#"> Inotevera </a> </li>
  10. </ul>
  11. </ div>

Options

Yakaremara uye inoshanda nyika

Zvisungo zvinogoneka kune akasiyana mamiriro. Shandisa .disabledkune unclickable links uye .activekuratidza peji iripo.

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

Iwe unogona kusarudza chinjanisa anoshanda kana akaremara anchors kune spans kuti ubvise kudzvanya mashandiro uchichengeta zvitaera zvakatarisirwa.

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

Saizi

Fancy yakakura kana diki pagination? Wedzera .pagination-large, .pagination-small, kana .pagination-minimamwe masaizi.

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

Alignment

Wedzera imwe yemakirasi maviri esarudzo kuti uchinje kurongeka kwepagination link: .pagination-centereduye .pagination-right.

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

Pager

Kurumidza yapfuura uye inotevera zvinongedzo zvekushandisa zviri nyore pagination ine mwenje markup uye masitaera. Yakanakira masaiti akareruka senge mablogiki kana magazini.

Default muenzaniso

Nekumisikidza, iyo pager inoisa zvinongedzo.

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

Aligned links

Neimwe nzira, unogona kuenzanisa chinongedzo chimwe nechimwe kumativi:

  1. <ul class = "pager" >
  2. <li kirasi = "yapfuura" >
  3. <a href = "#" > Vakuru </a>
  4. </li>
  5. <li class = "inotevera" >
  6. <a href = "#" > Nyowani → </a>
  7. </li>
  8. </ul>

Optional disabled state

Pager zvinongedzo zvinoshandisawo general .disabledutility kirasi kubva kupeji.

  1. <ul class = "pager" >
  2. <li class = "kare yakaremara" >
  3. <a href = "#" > Vakuru </a>
  4. </li>
  5. ...
  6. </ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Yambiro <span class="label label-warning">Warning</span>
Zvakakosha <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Mabheji

Zita Muenzaniso Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Yambiro 4 <span class="badge badge-warning">4</span>
Zvakakosha 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Zviri nyore kuputsika

Kuti zviitwe zviri nyore, mavara nemabheji zvinongodonha (kuburikidza neCSS's :emptyselector) kana pasina zvirimo mukati.

Hero chikwata

Chinhu chisina kuremerwa, chinochinjika kuratidza zvakakosha zvemukati pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.

Mhoro, nyika!

Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.

Dzidza zvimwe

  1. <div kirasi = "gamba-chikamu" >
  2. <h1> Musoro </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Dzidza zvimwe
  7. </a>
  8. </ p>
  9. </ div>

Musoro wepeji

Shell yakapfava h1yenzvimbo yakakodzera kunze uye zvikamu zvemukati pane peji. Inogona kushandisa iyo h1's default small, element pamwe nezvimwe zvakawanda zvinoumba (nemamwe masitayera).

  1. <div class = "peji-musoro" >
  2. <h1> Muenzaniso wemusoro wepeji <small> Subtext yemusoro </small></h1>
  3. </ div>

Default thumbnails

Nekumisikidza, zvigunwe zveBootstrap zvakagadzirirwa kuratidza mifananidzo yakabatana ine shoma inodiwa markup.

Yakanyanya customizable

Nechimwe chekuwedzera markup, zvinokwanisika kuwedzera chero mhando yezvinyorwa zveHTML senge misoro, ndima, kana mabhatani muzvigunwe.

  • 300x200

    Thumbnail label

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

    Chiito Chiito

  • 300x200

    Thumbnail label

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

    Chiito Chiito

  • 300x200

    Thumbnail label

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

    Chiito Chiito

Sei kushandisa thumbnails

Thumbnails (yaimbova .media-gridkusvika v1.4) yakanaka kune magiradhi emifananidzo kana mavhidhiyo, mitsva yekutsvaga mifananidzo, zvigadzirwa zvekutengesa, mapotifolio, nezvimwe zvakawanda. Anogona kunge ari malink kana static content.

Nyore, inochinjika markup

Thumbnail markup iri nyore-a uline chero nhamba liyezvinhu ndizvo zvese zvinodiwa. Iyo zvakare inochinjika zvakanyanya, ichibvumira kune chero mhando yezvinyorwa ine zvishoma zvishoma markup yekuputira zvirimo.

Inoshandisa grid column saizi

Chekupedzisira, chikamu chezvigunwe chinoshandisa grid system makirasi aripo- senge .span2kana - .span3pakutonga kwezvigunwe zvimiro.

Markup

Sezvambotaurwa, iyo markup inodiwa yezvigunwe yakareruka uye yakatwasuka. Heino tarisa kune iyo default setup yemifananidzo yakabatana :

  1. <ul class = "thumbnails" >
  2. <li kirasi = "span4" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Kune yetsika HTML yemukati muzvigunwe, iyo markup inochinja zvishoma. Kuti tibvumire block level yemukati chero kupi, isu tinochinjanisa iyo <a>seyakadaro <div>:

  1. <ul class = "thumbnails" >
  2. <li kirasi = "span4" >
  3. <div kirasi = "chigunwe" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Thumbnail label </h3>
  6. <p> Thumbnail caption... </p>
  7. </ div>
  8. </li>
  9. ...
  10. </ul>

Mimwe mienzaniso

Ongorora zvese zvaunogona kuita nemakirasi egidhi akasiyana anowanikwa kwauri. Iwe unogona zvakare kusanganisa uye kuenzanisa hukuru hwakasiyana.

Default chenjedzo

Putira chero mavara uye bhatani raunosarudza rekudzinga mukati .alertmemeseji yechenjedzo yakakosha.

Yambiro! Best check yo self, hausi kunyanyonaka.
  1. <div kirasi = "chenjedzo" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </ button>
  3. <strong> Yambiro! </strong> Best check yo self, hausi kunyanyonaka.
  4. </ div>

Ramba mabhatani

Nharembozha Safari uye Mobile Opera mabhurawuza, kuwedzera kune data-dismiss="alert"hunhu, inoda href="#"kudzingwa kweyambiro kana uchishandisa <a>teki.

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

Neimwe nzira, unogona kushandisa <button>chinhu chine data hunhu, izvo isu takasarudza kuitira zvinyorwa zvedu. Paunenge uchishandisa <button>, unofanirwa kusanganisira type="button"kana mafomu ako anogona kusaendesa.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </ button>

Ramba chenjedzo uchishandisa JavaScript

Shandisa chenjedzo jQuery plugin yekukurumidza uye nyore kudzinga zviziviso.


Options

Kune mameseji akareba, wedzera padding kumusoro uye pasi peyambiro wrapper nekuwedzera .alert-block.

Yambiro!

Best check yo self, hausi kunyanyonaka. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div kirasi = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </ button>
  3. <h4> Yambiro! </ h4>
  4. Best check yo self, hausi...
  5. </ div>

Contextual dzimwe nzira

Wedzera makirasi esarudzo kuti uchinje chirevo chechenjedzo.

Kukanganisa kana ngozi

Oh snap! Shandura zvinhu zvishoma uye edza kutumira zvakare.
  1. <div class = "alert alert-error" >
  2. ...
  3. </ div>

Success

Kuita zvakanaka! Iwe wakabudirira kuverenga iyi yakakosha meseji yekuzivisa.
  1. <div kirasi = "yambiro alert-kubudirira" >
  2. ...
  3. </ div>

Information

Musoro! Yambiro iyi inoda kutariswa newe, asi haina kukosha zvakanyanya.
  1. <div kirasi = "yambiro yekuzivisa-ruzivo" >
  2. ...
  3. </ div>

Mienzaniso uye markup

Basic

Default bhaa yekufambira mberi ine yakatwasuka gradient.

  1. <div kirasi = "kufambira mberi" >
  2. <div class = "bar" style = " hupamhi : 60 %; " ></div>
  3. </ div>

Striped

Inoshandisa gradient kugadzira mitsetse. Haisi kuwanikwa muIE7-8.

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

Animated

Wedzera .activekune .progress-stripedkumutsa mitsetse kurudyi kuruboshwe. Haiwanikwi mushanduro dzese dzeIE.

  1. <div kirasi = "kufambira mberi-kufambiswa kunoshanda" >
  2. <div class = "bar" style = " hupamhi : 40 %; " ></div>
  3. </ div>

Stacked

Isa mabhawa akawanda mune imwechete .progresskuti aaise.

  1. <div kirasi = "kufambira mberi" >
  2. <div class = "bar-success" style = " hupamhi : 35 %; " ></div>
  3. <div class = "bar-warning" style = " hupamhi : 20 %; " ></div>
  4. <div class = "bar-danger" style = " hupamhi : 10 %; " ></div>
  5. </ div>

Options

Mamwe mavara

Mabhawa ekufambira mberi anoshandisa mamwe bhatani rimwe chete uye makirasi ekuzivisa kune anowirirana masitaera.

  1. <div kirasi = "kufambira mberi-ruzivo" >
  2. <div class = "bar" style = " width : 20 % > </div>
  3. </ div>
  4. <div class = "kufambira mberi-kubudirira" >
  5. <div class = "bar" style = " width : 40 % > </div>
  6. </ div>
  7. <div class = "kufambira mberi-yambiro" >
  8. <div class = "bar" style = " width : 60 % > </div>
  9. </ div>
  10. <div class = "kufambira mberi-njodzi" >
  11. <div class = "bar" style = " width : 80 % > </div>
  12. </ div>

Mazariro ane mitsetse

Zvakafanana nemavara akasimba, isu tine mitsetse yakasiyana-siyana yekufambira mberi.

  1. <div kirasi = "kufambira mberi-ruzivo kufambira mberi-mitsetse" >
  2. <div class = "bar" style = " width : 20 % > </div>
  3. </ div>
  4. <div class = "kufambira mberi-kubudirira kufambira mberi-striped" >
  5. <div class = "bar" style = " width : 40 % > </div>
  6. </ div>
  7. <div class = "kufambira mberi-yambiro kufambira mberi-yakatemwa" >
  8. <div class = "bar" style = " width : 60 % > </div>
  9. </ div>
  10. <div kirasi = "kufambira mberi-njodzi kufambira mberi-mitsetse" >
  11. <div class = "bar" style = " width : 80 % > </div>
  12. </ div>

Browser rutsigiro

Mabhawa ekufambira mberi anoshandisa CSS3 gradients, shanduko, uye animations kuti vakwanise kuita zvese zvavanoita. Aya maficha haatsigirwe muIE7-9 kana ekare shanduro dzeFirefox.

Mavhezheni ekutanga kupfuura Internet Explorer 10 uye Opera 12 haatsigire mifananidzo.

Abstract chinhu masitaera ekuvaka akasiyana marudzi ezvikamu (seblog blog, maTweets, nezvimwewo) ane mufananidzo wekuruboshwe- kana kurudyi-padivi pezvinyorwa.

Default muenzaniso

Iyo yakasarudzika midhiya inobvumira kuyangarara chinhu che media (mifananidzo, vhidhiyo, odhiyo) kuruboshwe kana kurudyi rwemukati block.

64x64

Musoro wenhau

Cras sit amet nibh libero, mu 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 in faucibus.
64x64

Musoro wenhau

Cras sit amet nibh libero, mu 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 in faucibus.
64x64

Musoro wenhau

Cras sit amet nibh libero, mu 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 in faucibus.
  1. <div class = "media" >
  2. <a class = "dhonza-kuruboshwe" href = "#"> _
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Musoro wenhau </h4>
  7. ...
  8.  
  9. <!-- Nested media chinhu -->
  10. <div class = "media" >
  11. ...
  12. </ div>
  13. </ div>
  14. </ div>

Media list

Neine imwe yekuwedzera markup, unogona kushandisa midhiya mukati rondedzero (inobatsira kune ekutaura tambo kana zvinyorwa zvinyorwa).

  • 64x64

    Musoro wenhau

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

    64x64

    Nested media heading

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

    Nested media heading

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

    Nested media heading

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

    Musoro wenhau

    Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "dhonza-kuruboshwe" href = "#"> _
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Musoro wenhau </h4>
  8. ...
  9.  
  10. <!-- Nested media chinhu -->
  11. <div class = "media" >
  12. ...
  13. </ div>
  14. </ div>
  15. </li>
  16. </ul>

Wells

Shandisa tsime seyakapusa mhedzisiro pane chinhu kuti upe iyo inset maitiro.

Tarirai, ndiri mutsime!
  1. <div kirasi = "zvakanaka" >
  2. ...
  3. </ div>

Optional makirasi

Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.

Tarirai, ndiri mutsime!
  1. <div kirasi = "zvakanaka-yakakura" >
  2. ...
  3. </ div>
Tarirai, ndiri mutsime!
  1. <div kirasi = "zvakanaka-zvidiki" >
  2. ...
  3. </ div>

Close icon

Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.

  1. <button class = "close" > × </ button>

iOS zvishandiso zvinoda href="#"yekudzvanya zviitiko kana iwe uchida kushandisa anchor.

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

Makirasi ekubatsira

Akareruka, akatarisana makirasi ediki kuratidza kana maitiro tweaks.

.dhonza-kuruboshwe

Fonera chinhu kuruboshwe

  1. kirasi = "dhonza-kuruboshwe"
  1. . dhonza - kuruboshwe {
  2. float : left ;
  3. }

.dhonza-kurudyi

Fonera chinhu kurudyi

  1. kirasi = "dhonza-kurudyi"
  1. . dhonza - kurudyi {
  2. kuyangarara : kurudyi ;
  3. }

.muted

Shandura ruvara rwechimwe chinhu kuti#999

  1. kirasi = "yakanyarara"
  1. . nyarara {
  2. ruvara : #999;
  3. }

.clearfix

Bvisa iyo floatpane chero chinhu

  1. kirasi = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: pamberi ,
  4. &: mushure me {
  5. kuratidza : tafura ;
  6. content : "" ;
  7. }
  8. &: mushure me {
  9. clear : zvese ;
  10. }
  11. }