Mazana ezvishandiso zvinogoneka zvakavakwa kuti zvipe kufamba, zviziviso, popovers, nezvimwe.
Inobatika, yemenu yemukati yekuratidza rondedzero yezvinongedzo. Yakagadzirwa kupindirana nekudonhedza javascript plugin .
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Chiito </a></li>
- <li><a tabindex = "-1" href = "#" > Chimwe chiitiko </a></li>
- <li><a tabindex = "-1" href = "#" > Chimwe chinhu pano </a></li>
- <li kirasi = "divider" > </ li>
- <li><a tabindex = "-1" href = "#" > Separated link </a></li>
- </ul>
Uchitarisa pane yekudonhedza menyu, heino HTML inodiwa. Iwe unofanirwa kuputira chinodonhedza chinokonzeresa uye yekudonha menyu mukati .dropdown
, kana chimwe chinhu chinozivisa position: relative;
. Zvadaro gadzira menyu.
- <div class="dropdown"> kirasi = "kudonha" >
- <!-- Batanidza kana bhatani rekushandura kudonhedza pasi -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Chiito </a></li>
- <li><a tabindex = "-1" href = "#" > Chimwe chiitiko </a></li>
- <li><a tabindex = "-1" href = "#" > Chimwe chinhu pano </a></li>
- <li kirasi = "divider" > </ li>
- <li><a tabindex = "-1" href = "#" > Separated link </a></li>
- </ul>
- </ div>
Rongedza mamenu kurudyi uye wedzera zvinosanganisira mamwe mazinga ekudonha.
Wedzera .pull-right
kune a .dropdown-menu
kune kurudyi gadzirisa menyu yekudonha.
- <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> kirasi = "kudonha-menyu kudhonza-kurudyi" basa = "menyu" aria-labelledby = "dLabel" >
- ...
- </ul>
Wedzera imwe nhanho yemamenu ekudonhedza, inoonekwa pane hover senge iyo yeOS X, iine zvimwe zviri nyore markup yekuwedzera. Wedzera .dropdown-submenu
kune chero li
mune iripo yekudonha menyu ye otomatiki styling.
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#" > Dzimwe sarudzo </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
Yakareruka pagination yakafemerwa neRdio, yakanakira maapplication uye mhinduro dzekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.
- <div class="pagination"> kirasi = "pagination" >
- <ul>
- <li><a href = "#" > Prev </a></li>
- <li><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>
Zvisungo zvinogoneka kune akasiyana mamiriro. Shandisa .disabled
kune unclickable links uye .active
kuratidza peji iripo.
- <div class="pagination"> class = "pagination" >
- <ul>
- <li class = "disabled" ><a href = "#"> Prev </a></li >
- <li class = "active" ><a href = "#"> 1 </a></li >
- ...
- </ul>
- </ div>
Wedzera imwe yemakirasi maviri esarudzo kuti uchinje kurongeka kwepagination link: .pagination-centered
uye .pagination-right
.
- <div class="pagination-centered"> class = "pagination pagination-centered" >
- ...
- </ div>
- <div class="pagination pagination-right"> kirasi = "pagination pagination-kurudyi" >
- ...
- </ div>
Kurumidza yapfuura uye inotevera zvinongedzo zvekushandisa zviri nyore pagination ine mwenje markup uye masitaera. Yakanakira masaiti akareruka senge mablogiki kana magazini.
Nekumisikidza, iyo pager inoisa zvinongedzo.
- <ul class="pager"> class = "pager" >
- <li><a href = "#" > Yakapfuura </a> < /li>
- <li><a href = "#"> Inotevera </a> </li>
- </ul>
Neimwe nzira, unogona kuenzanisa chinongedzo chimwe nechimwe kumativi:
- <ul class="pager"> class = "pager" >
- <li kirasi = "yapfuura" >
- <a href = "#" > ← Vakuru </a>
- </li>
- <li class = "inotevera" >
- <a href = "#" > Nyowani → </a>
- </li>
- </ul>
Pager zvinongedzo zvinoshandisawo general .disabled
utility kirasi kubva kupeji.
- <ul class="pager"> class = "pager" >
- <li class = "kare yakaremara" >
- <a href = "#" > ← Vakuru </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> |
Inverse | <span class="label label-inverse">Inverse</span> |
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> |
Chinhu chisina kuremerwa, chinochinjika kuratidza zvakakosha zvemukati pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.
Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.
- <div class="hero-unit"> kirasi = "gamba-chikamu" >
- <h1> Musoro </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-primary btn-large">
- Dzidza zvimwe
- </a>
- </ p>
- </ div>
Shell yakapfava h1
yenzvimbo yakakodzera kunze uye zvikamu zvemukati pane peji. Inogona kushandisa iyo h1
's default small
, element pamwe nezvimwe zvakawanda zvinoumba (nemamwe masitayera).
- <div class="peji-musoro"> kirasi = "peji-musoro" >
- <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"> class = "thumbnails" >
- <li kirasi = "span4" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/300x200" 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"> class = "thumbnails" >
- <li kirasi = "span4" >
- <div kirasi = "chigunwe" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Thumbnail label </h3>
- <p> Thumbnail caption... </p>
- </ div>
- </li>
- ...
- </ul>
Ongorora zvese zvaunogona kuita nemakirasi egidhi akasiyana anowanikwa kwauri. Iwe unogona zvakare kusanganisa uye kuenzanisa hukuru hwakasiyana.
Putira chero mavara uye bhatani raunosarudza rekudzinga mukati .alert
memeseji yechenjedzo yakakosha.
- <div class="alert"> kirasi = "chenjedzo" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Yambiro! </strong> Best check yo self, hausi kunyanyonaka.
- </ div>
Nharembozha Safari uye Mobile Opera mabhurawuza, kuwedzera kune data-dismiss="alert"
hunhu, inoda href="#"
kudzingwa kweyambiro kana uchishandisa <a>
teki.
- <a href="#" class="close" data-dismiss="alert">×</button> href = "#" class = "close" data-dismiss = "chenjedzo" > × </button>
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.
- <button type="button" class="close" data-dismiss="alert">×</button> type = "button" class = "close" data-dismiss = "chenjedzo" > × </button>
Shandisa chenjedzo jQuery plugin yekukurumidza uye nyore kudzinga zviziviso.
Kune mameseji akareba, wedzera padding kumusoro uye pasi peyambiro wrapper nekuwedzera .alert-block
.
Best check yo self, hausi kunyanyonaka. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class="alert alert-block"> class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Yambiro! </ h4>
- Best check yo self, hausi...
- </ div>
Wedzera makirasi esarudzo kuti uchinje chirevo chechenjedzo.
- <div class="alert alert-error"> class = "alert alert-error" >
- ...
- </ div>
- <div class="alert alert-success"> class = "alert alert-success" >
- ...
- </ div>
- <div class="alert alert-info"> kirasi = "alert alert-info" >
- ...
- </ div>
Default bhaa yekufambira mberi ine yakatwasuka gradient.
- <div class="progress"> kirasi = "kufambira mberi" >
- <div class = "bar" style = " hupamhi : 60 %; " ></div>
- </ div>
Inoshandisa gradient kugadzira mitsetse. Haisi kuwanikwa muIE7-8.
- <div class="progress progress-striped"> class = "progress progress-striped" >
- <div class = "bar" style = " upamhi : 20 %; " ></div>
- </ div>
Wedzera .active
kune .progress-striped
kumutsa mitsetse kurudyi kuruboshwe. Haiwanikwi mushanduro dzese dzeIE.
- <div class="progress progress-striped active"> class = "progress progress-striped active" >
- <div class = "bar" style = " hupamhi : 40 %; " ></div>
- </ div>
Isa mabhawa akawanda mune imwechete .progress
kuti aaise.
- <div class="progress"> kirasi = "kufambira mberi" >
- <div class = "bar-success" style = " hupamhi : 35 %; " ></div>
- <div class = "bar-warning" style = " hupamhi : 20 %; " ></div>
- <div class = "bar-danger" style = " hupamhi : 10 %; " ></div>
- </ div>
Mabhawa ekufambira mberi anoshandisa mamwe bhatani rimwe chete uye makirasi ekuzivisa kune anowirirana masitaera.
- <div class="progress progress-info"> kirasi = "kufambira mberi-ruzivo" >
- <div class = "bar" style = " width : 20 % > </div>
- </ div>
- <div class = "kufambira mberi-kubudirira" >
- <div class = "bar" style = " width : 40 % > </div>
- </ div>
- <div class = "kufambira mberi-yambiro" >
- <div class = "bar" style = " width : 60 % > </div>
- </ div>
- <div class = "kufambira mberi-njodzi" >
- <div class = "bar" style = " width : 80 % > </div>
- </ div>
Zvakafanana nemavara akasimba, isu tine mitsetse yakasiyana-siyana yekufambira mberi.
- <div kirasi = "kufambira mberi-ruzivo kufambira mberi-mitsetse" >
- <div class = "bar" style = " width : 20 % > </div>
- </ div>
- <div class = "kufambira mberi-kubudirira kufambira mberi-striped" >
- <div class = "bar" style = " width : 40 % > </div>
- </ div>
- <div class = "kufambira mberi-yambiro kufambira mberi-yakatemwa" >
- <div class = "bar" style = " width : 60 % > </div>
- </ div>
- <div kirasi = "kufambira mberi-njodzi kufambira mberi-yakatemwa" >
- <div class = "bar" style = " width : 80 % > </div>
- </ div>
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.
Shandisa tsime seyakapusa mhedzisiro pane chinhu kuti upe iyo inset maitiro.
- <div kirasi = "zvakanaka" >
- ...
- </ div>
Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.
- <div kirasi = "zvakanaka-yakakura" >
- ...
- </ div>
- <div kirasi = "zvakanaka-zvidiki" >
- ...
- </ div>
Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.
- <button class = "close" > × </ button>
iOS zvishandiso zvinoda href="#" zvekudzvanya zviitiko kana iwe uchida kushandisa anchor.
- <a class = "close" href = "#" > × </a>
Akareruka, akatarisana makirasi ediki kuratidza kana maitiro tweaks.
Fonera chinhu kuruboshwe
- kirasi = "dhonza-kuruboshwe"
- . dhonza - kuruboshwe {
- float : left ;
- }
Fonera chinhu kurudyi
- kirasi = "dhonza-kurudyi"
- . dhonza - kurudyi {
- kuyangarara : kurudyi ;
- }
Shandura ruvara rwechimwe chinhu kuti#999
- kirasi = "yakanyarara"
- . nyarara {
- ruvara : #999;
- }
Bvisa iyo float
pane chero chinhu
- kirasi = "clearfix"
- . clearfix {
- * zoom : 1 ;
- &: pamberi ,
- &: mushure me {
- kuratidza : tafura ;
- content : "" ;
- }
- &: mushure me {
- clear : zvese ;
- }
- }