Zvikamu

Mazana ezvinyorwa zvinogoneka zvakare zvakavakwa muBootstrap kuti ipe kufamba, zviziviso, popovers, uye zvimwe zvakawanda.

Mabhatani mapoka

Shandisa mabhatani mapoka kuti ubatanidze akawanda mabhatani pamwechete sechinhu chimwe chinoumbwa. Zvivake nenhevedzano yezvinhu <a>kana <button>zvinhu.

Maitiro akanaka

Isu tinokurudzira nhungamiro dzinotevera dzekushandisa mabhatani mapoka nematurusi:

  • Gara uchishandisa chinhu chimwe chete muboka remabhatani, <a>kana <button>.
  • Usasanganise mabhatani emavara akasiyana muboka remabhatani rimwechete.
  • Shandisa zvidhori mukuwedzera kune kana kuti pachinzvimbo chemavara, asi iva nechokwadi chokuti unosanganisira alt uye zvinyorwa zvemusoro pazvinenge zvakakodzera.

Mapoka emaBhatani ane hukama ane zvinodonhedza (ona pazasi) anofanirwa kudaidzwa akaparadzana uye anogara achisanganisira kudonhedza caret kuratidza maitiro anotarisirwa.

Default muenzaniso

Heano maitiro eHTML anotarisa kune akajairwa bhatani boka rakavakwa nema anchor tag mabhatani:

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

Toolbar muenzaniso

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

1 2 3 4
5 6 7
8
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </ div>
  5. </ 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.

Tora javascript »


Heads up

CSS yemapoka emabhatani iri mune imwe faira, mabhatani-mapoka.less.

Mabhatani anodonhedza

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


Musoro! Mabhatani anodonha anoda iyo Bootstrap inodonha plugin kuti ishande.

Muenzaniso markup

Zvakafanana neboka remabhatani, yedu markup inoshandisa yakajairwa bhatani markup, asi ine mashoma ekuwedzera kukwenenzvera chimiro uye kutsigira Bootstrap yekudonha jQuery plugin.

  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>

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.

Muenzaniso markup

Isu tinowedzera pane zvakajairika bhatani kudonhedza kuti tipe yechipiri bhatani chiito chinoshanda seyakasiyana yekudonhedza trigger.

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

Multicon-peji pagination

Nguva yekushandisa

Ultra yakapfava uye ine diki styled pagination yakafemerwa neRdio, yakanakira maapplication uye mitsva yekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

Stateful peji zvinongedzo

Zvisungo zvinogoneka uye zvinoshanda mune akati wandei mamiriro nekirasi chaiyo. .disabledzvemalink asingabatike uye .activenepeji yazvino.

Flexible alignment

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

Mienzaniso

The default pagination chikamu chinoshanduka uye chinoshanda mune akati wandei akasiyana.

Markup

Yakaputirwa mu <div>, pegination ingori <ul>.

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

Pager Yekukurumidza yapfuura uye inotevera zvinongedzo

About pager

Iyo pager chikamu iseti yezvinongedzo zvezviri nyore pagination mashandisirwo ane mwenje markup uye kunyange akareruka masitayera. Yakanakira masaiti akareruka senge mablogiki kana magazini.

Default muenzaniso

Nekumisikidza, iyo pager inoisa zvinongedzo.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> Yakapfuura </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> Inotevera </a> _
  7. </li>
  8. </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>
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>

Hero chikwata

Bootstrap inopa yakareruka, inoshanduka chikamu chinonzi gamba unit kuratidza zvirimo pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.

Markup

Peta zvemukati senge div:

  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>

Mhoro, nyika!

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

Dzidza zvimwe

Musoro wepeji

Sheko h1rakareruka rekuti riite zvakaringana nzvimbo kunze uye kupatsanura zvikamu zvemukati pane peji. Inogona kushandisa iyo h1's default small, element pamwe nezvimwe zvakawanda zvinoumba (nemamwe masitayera).

  1. <div kirasi = "peji-haeder" >
  2. <h1> Muenzaniso wemusoro wepeji </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.

  • 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

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

The markup

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

  1. <ul class = "thumbnails" >
  2. <li kirasi = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div kirasi = "chigunwe" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Thumbnail label </h5>
  6. <p> Thumbnail caption ipo pano... </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.

Lightweight defaults

Rewritten base class

NeBootstrap 2, takarerutsa kirasi yepasi: .alertpachinzvimbo che .alert-message. Isu takadzikisawo hudiki hunodiwa markup — kwete <p>inodiwa nekusarudzika, yekunze chete <div>.

Meseji yekuzivisa imwe chete

Kuti uwane chikamu chakasimba chine kodhi shoma, tabvisa kutarisa kwekusiyanisa kwe block block, mameseji anouya neakawanda padding uye kazhinji mamwe mavara. Kirasi yachinjawo kuita .alert-block.


Inoenda zvakanaka nejavascript

Bootstrap inouya neyakakura jQuery plugin inotsigira mameseji echenjedzo, zvichiita kuti kuvadzinga nekukurumidza uye nyore.

Tora iyo plugin »

Muenzaniso chenjedzo

Peta meseji yako uye sarudzo yekuvhara icon mune div ine kirasi yakapusa.

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

Wedzera zviri nyore iyo yakajairwa yambiro meseji nemakirasi maviri esarudzo: .alert-blockkune mamwe padding uye mameseji ekudzora uye .alert-headingyeinoenderana musoro.

×

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. <a class = "close" data-dismiss = "alert"> × </a> _
  3. <h4 kirasi = "yambiro-musoro" > Yambiro! </ h4>
  4. Best check yo self, hausi...
  5. </ div>

Contextual alternatives 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 kirasi = "bha"
  3. style = " upamhi : 60 %; " ></div>
  4. </ div>

Striped

Inoshandisa gradient kugadzira mitsetse.

  1. <div class = "kufambira mberi-ruzivo
  2. kufambira mberi-mitsetse" >
  3. <div kirasi = "bha"
  4. style = " hupamhi : 20 %; " ></div>
  5. </ div>

Animated

Inotora muenzaniso wemitsetse uye inouita.

  1. <div class = "kufambira mberi-ngozi
  2. progress-striped active" >
  3. <div kirasi = "bha"
  4. style = " hupamhi : 40 %; " ></div>
  5. </ div>

Sarudzo uye bhurawuza rutsigiro

Mamwe mavara

Mabhawa ekufambira mberi anoshandisa mamwe mazita emakirasi akafanana semabhatani uye chenjedzo dzemaitiro akafanana.

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

Neimwe nzira, iwe unogona kugadzirisa iyo LESS mafaera uye kutenderedza ako mavara uye saizi.

Maitiro

Mabhawa ekufambira mberi anoshandisa CSS3 shanduko, saka kana iwe ukagadzirisa hupamhi kuburikidza nejavascript, ichaita saizi zvakanaka.

Kana iwe ukashandisa .activekirasi, mabara ako .progress-stripedekufambira mberi anosimudzira mitsetse kuruboshwe kuenda kurudyi.

Browser rutsigiro

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

Opera haitsigire mifananidzo panguva ino.

Wells

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

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

Close icon

Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.

×

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