Mazana ezvinyorwa zvinogoneka zvakare zvakavakwa muBootstrap kuti ipe kufamba, zviziviso, popovers, uye zvimwe zvakawanda.
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.
Zvisungo zvinogoneka uye zvinoshanda mune akati wandei mamiriro nekirasi chaiyo. .disabled
zvemalink asingabatike uye .active
nepeji yazvino.
Wedzera imwe yemakirasi maviri esarudzo kuti uchinje kurongeka kwepagination link: .pagination-centered
uye .pagination-right
.
The default pagination chikamu chinoshanduka uye chinoshanda mune akati wandei akasiyana.
Yakaputirwa mu <div>
, pegination ingori <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Prev </a></li>
- <li class = "active" >
- <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 = "#"> Inotevera </a> </li>
- </ul>
- </ div>
Iyo pager chikamu iseti yezvinongedzo zvezviri nyore pagination mashandisirwo ane mwenje markup uye kunyange akareruka masitayera. Yakanakira masaiti akareruka senge mablogiki kana magazini.
Nekumisikidza, iyo pager inoisa zvinongedzo.
- <ul class = "pager" >
- <li>
- <a href = "#"> Yakapfuura </a> _
- </li>
- <li>
- <a href = "#"> Inotevera </a> _
- </li>
- </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> |
Bootstrap inopa yakareruka, inoshanduka chikamu chinonzi gamba unit kuratidza zvirimo pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.
Peta zvemukati senge div
:
- <div kirasi = "gamba-chikamu" >
- <h1> Musoro </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-primary btn-large">
- Dzidza zvimwe
- </a>
- </ p>
- </ div>
Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.
Sheko h1
rakareruka 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).
- <div kirasi = "peji-haeder" >
- <h1> Muenzaniso wemusoro wepeji </h1>
- </ div>
Nekumisikidza, zvigunwe zveBootstrap zvakagadzirirwa kuratidza mifananidzo yakabatana ine shoma inodiwa markup.
Nechimwe chekuwedzera markup, zvinokwanisika kuwedzera chero mhando yezvinyorwa zveHTML senge misoro, ndima, kana mabhatani muzvigunwe.
Thumbnails (yaimbova .media-grid
kusvika v1.4) yakanaka kune magiradhi emifananidzo kana mavhidhiyo, mitsva yekutsvaga mifananidzo, zvigadzirwa zvekutengesa, mapotifolio, nezvimwe zvakawanda. Anogona kunge ari malink kana static content.
Thumbnail markup iri nyore-a ul
ine chero nhamba li
yezvinhu ndizvo zvese zvinodiwa. Iyo zvakare inochinjika zvakanyanya, ichibvumira kune chero mhando yezvinyorwa ine zvishoma zvishoma markup yekuputira zvirimo.
Chekupedzisira, chikamu chezvigunwe chinoshandisa grid system makirasi aripo- senge .span2
kana - .span3
pakutonga kwezvigunwe zvimiro.
Sezvambotaurwa, iyo markup inodiwa yezvigunwe yakareruka uye yakatwasuka. Heino tarisa kune iyo default setup yemifananidzo yakabatana :
- <ul class = "thumbnails" >
- <li kirasi = "span3" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Kune yetsika HTML yemukati muzvigunwe, iyo markup inochinja zvishoma. Kuti tibvumire block level yemukati chero kupi, isu tinochinjanisa iyo <a>
seyakadaro <div>
:
- <ul class = "thumbnails" >
- <li kirasi = "span3" >
- <div kirasi = "chigunwe" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Thumbnail label </h5>
- <p> Thumbnail caption ipo pano... </p>
- </ div>
- </li>
- ...
- </ul>
NeBootstrap 2, takarerutsa kirasi yepasi: .alert
pachinzvimbo che .alert-message
. Isu takadzikisawo hudiki hunodiwa markup — kwete <p>
inodiwa nekusarudzika, yekunze chete <div>
.
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
.
Bootstrap inouya neyakakura jQuery plugin inotsigira mameseji echenjedzo, zvichiita kuti kuvadzinga nekukurumidza uye nyore.
Peta meseji yako uye sarudzo yekuvhara icon mune div ine kirasi yakapusa.
- <div kirasi = "chenjedzo" >
- <a class = "close" data-dismiss = "alert"> × </a> _
- <strong> Yambiro! </strong> Best check yo self, hausi kunyanyonaka.
- </ div>
Wedzera zviri nyore iyo yakajairwa yambiro meseji nemakirasi maviri esarudzo: .alert-block
kune mamwe padding uye mameseji ekudzora uye .alert-heading
yeinoenderana musoro.
Best check yo self, hausi kunyanyonaka. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div kirasi = "alert alert-block" >
- <a class = "close" data-dismiss = "alert"> × </a> _
- <h4 kirasi = "yambiro-musoro" > Yambiro! </ h4>
- Best check yo self, hausi...
- </ div>
- <div class = "alert alert-error" >
- ...
- </ div>
- <div kirasi = "yambiro alert-kubudirira" >
- ...
- </ div>
- <div kirasi = "yambiro yekuzivisa-ruzivo" >
- ...
- </ div>
Default bhaa yekufambira mberi ine yakatwasuka gradient.
- <div kirasi = "kufambira mberi" >
- <div kirasi = "bha"
- style = " upamhi : 60 %; " ></div>
- </ div>
Inoshandisa gradient kugadzira mitsetse.
- <div class = "kufambira mberi-ruzivo
- kufambira mberi-mitsetse" >
- <div kirasi = "bha"
- style = " hupamhi : 20 %; " ></div>
- </ div>
Inotora muenzaniso wemitsetse uye inouita.
- <div class = "kufambira mberi-ngozi
- progress-striped active" >
- <div kirasi = "bha"
- style = " hupamhi : 40 %; " ></div>
- </ div>
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.
Mabhawa ekufambira mberi anoshandisa CSS3 shanduko, saka kana iwe ukagadzirisa hupamhi kuburikidza nejavascript, ichaita saizi zvakanaka.
Kana iwe ukashandisa .active
kirasi, mabara ako .progress-striped
ekufambira mberi anosimudzira mitsetse kuruboshwe kuenda kurudyi.
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.
Shandisa tsime seyakapusa mhedzisiro pane chinhu kuti upe iyo inset maitiro.
- <div kirasi = "zvakanaka" >
- ...
- </ div>
Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.
- <a class = "close" > × </a>