Glyphs iripo
Inosanganisira anopfuura mazana maviri nemakumi mashanu glyphs mufomati font kubva kuGlyphicon Halflings set. Glyphicons Halflings haiwanzo kuwanikwa mahara, asi musiki wavo akaita kuti iwanikwe kuBootstrap mahara. Sekutenda, tinongokumbira kuti ubatanidze chinongedzo chekudzokera kuGlyphicons pese pazvinogoneka.
Kushandisa sei
Nezvikonzero zvekuita, zvese zvidhori zvinoda base kirasi uye yega icon kirasi. Kuti ushandise, isa kodhi inotevera chero kupi zvako. Ita shuwa yekusiya nzvimbo pakati peiyo icon uye zvinyorwa zvepadding chaiyo.
Usasanganise nezvimwe zvikamu
Icon makirasi haigone kusanganiswa zvakananga nezvimwe zvikamu. Izvo hazvifanirwe kushandiswa pamwe nemamwe makirasi pachinhu chimwe chete. Pane kudaro, wedzera nested <span>
uye shandisa iyo icon makirasi kune iyo <span>
.
Chete chekushandisa pazvinhu zvisina chinhu
Icon makirasi anofanirwa kungoshandiswa pazvinhu zvisina zvinyorwa uye zvisina mwana zvinhu.
Kuchinja iyo icon font nzvimbo
Bootstrap inotora icon font mafaera achave ari ../fonts/
mudhairekitori, zvine chekuita neakaunganidzwa CSS mafaera. Kufambisa kana kutumidzazve iwo mafonti mafaera zvinoreva kuvandudza iyo CSS mune imwe yenzira nhatu:
Shandura iyo @icon-font-path
uye/kana @icon-font-name
vhezheni mune sosi Mashoma mafaera.
Shandisa iyo hukama URLs sarudzo yakapihwa neMudiki compiler.
Shandura url()
nzira muCSS yakaunganidzwa.
Shandisa chero sarudzo inonyatsokodzera yako chaiyo yekusimudzira setup.
Inowanikwa mifananidzo
Shanduro dzemazuva ano dzetekinoroji dzekubatsira dzichazivisa CSS inogadzirwa zvemukati, pamwe neakananga Unicode mavara. Kuti udzivise zvisingatarisirwe uye zvinovhiringa kubuda muvaverengi vescreen (kunyanya kana zvidhori zvichishandiswa kushongedza chete), tinozvivanza aria-hidden="true"
nehunhu.
Kana uri kushandisa chiratidzo kuratidza zvinoreva (kwete sechinhu chekushongedza chete), ita shuwa kuti chirevo ichi chinosvitswa kune tekinoroji inobatsira - semuenzaniso, sanganisira zvimwe zvemukati, zvinoonekwa zvakavanzwa .sr-only
nekirasi.
Kana iwe uchigadzira zvidzoreso zvisina mamwe mavara ( <button>
senge ane chiratidzo chete), iwe unofanirwa kugara uchipa zvimwe zvemukati kuratidza chinangwa chekutonga, kuitira kuti zvive zvine musoro kune vashandisi vetekinoroji inobatsira. Mune ino kesi, iwe unogona kuwedzera aria-label
hunhu pane iyo control pachayo.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
Mienzaniso
Ashandise mumabhatani, mapoka emabhatani eturubhu, kufamba, kana mamepu akafanorongwa.
<button type= "button" class= "btn btn-default" aria-label= "Left Align" >
<span class= "glyphicon glyphicon-align-left" aria-hidden= "true" ></span>
</button>
<button type= "button" class= "btn btn-default btn-lg" >
<span class= "glyphicon glyphicon-star" aria-hidden= "true" ></span> Star
</button>
Chiratidzo chinoshandiswa muchenjedzo kuratidza kuti imhaka yemeseji, iine mamwe .sr-only
mavara ekuendesa iyi zano kune vashandisi vetekinoroji inobatsira.
Error: Isa kero yeemail inoshanda
<div class= "alert alert-danger" role= "alert" >
<span class= "glyphicon glyphicon-exclamation-sign" aria-hidden= "true" ></span>
<span class= "sr-only" > Error:</span>
Enter a valid email address
</div>
Inobatika, yemenu yemukati yekuratidza rondedzero yezvinongedzo. Yakagadzirwa kupindirana nekudonhedza JavaScript plugin .
Muenzaniso
Putira chinodonhedza chinokonzeresa uye menyu yekudonhedza mukati .dropdown
, kana chimwe chinhu chinozivisa position: relative;
. Wobva wawedzera HTML yemenyu.
<div class= "dropdown" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu1" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu1" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
Dropdown menus inogona kuchinjwa kuti iwedzere kumusoro (panzvimbo yepasi) nekuwedzera .dropup
kumubereki.
<div class= "dropup" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
Alignment
Nekumisikidza, menyu yekudonha inoiswa otomatiki 100% kubva kumusoro uye nekuruboshwe rwemubereki wayo. Wedzera .dropdown-menu-right
kune a .dropdown-menu
kune kurudyi gadzirisa menyu yekudonha.
Inogona kuda imwe nzvimbo
Dropdowns inomisikidzwa otomatiki kuburikidza neCSS mukati meyakajairika kuyerera kwegwaro. Izvi zvinoreva kuti kudonha kunogona kuchekwa nevabereki vane zvimwe overflow
zvivakwa kana kuoneka kunze kwemiganhu yekuona. Rongedza nyaya idzi woga padzinomuka.
.pull-right
Kurongeka kwakareruka
Kubva pav3.1.0, isu takasiya .pull-right
mamenu ekudonha. Kurongedza menyu kurudyi, shandisa .dropdown-menu-right
. Kurudyi-yakamisikidzwa nav components mubhara rekushandisa shandisa mixin vhezheni yekirasi ino kurongedza otomatiki menyu. Kuti uwedzere, shandisa .dropdown-menu-left
.
<ul class= "dropdown-menu dropdown-menu-right" aria-labelledby= "dLabel" >
...
</ul>
Wedzera musoro kuti unyore zvikamu zvezviito mune chero kudonha menyu.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu3" >
...
<li class= "dropdown-header" > Dropdown header</li>
...
</ul>
Divider
Wedzera divider kuti iparadzanise nhevedzano yezvekubatanidza mune yekudonha menyu.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenuDivider" >
...
<li role= "separator" class= "divider" ></li>
...
</ul>
Akaremara menyu zvinhu
Wedzera .disabled
kune a <li>
mukudonhedza kudzima chinongedzo.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu4" >
<li><a href= "#" > Regular link</a></li>
<li class= "disabled" ><a href= "#" > Disabled link</a></li>
<li><a href= "#" > Another link</a></li>
</ul>
Rongedza nhevedzano yemabhatani pamwe chete pamutsetse mumwechete neboka remabhatani. Wedzera pane inosarudzika JavaScript redhiyo uye cheki bhokisi maitiro nemabhatani edu plugin .
Iva nechokwadi chechokwadi role
uye upe label
Kuti tekinoroji yekubatsira - senge yekuverenga skrini - kuratidza kuti nhevedzano yemabhatani akaiswa mumapoka, role
hunhu hwakakodzera hunoda kupihwa. Kumapoka emabhatani, izvi zvingave role="group"
, ukuwo maturusi anofanirwa kunge aine role="toolbar"
.
Imwe yakasarudzika mapoka anongove ane imwechete kutonga (semuenzaniso mabhatani mapoka ane <button>
zvinhu) kana kudonhedza pasi.
Pamusoro pezvo, mapoka uye maturusi anofanirwa kupihwa chirairo chakajeka, sezvo tekinoroji zhinji dzinobatsira dzisingazozvizivise, kunyangwe kuvepo kwehunhu hwakakodzera role
. Mumienzaniso yakapihwa pano, tinoshandisa aria-label
, asi dzimwe nzira dzakadai aria-labelledby
dzinogona kushandiswa zvakare.
Basic muenzaniso
Putira mabhatani akatevedzana ne .btn
in .btn-group
.
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > Left</button>
<button type= "button" class= "btn btn-default" > Middle</button>
<button type= "button" class= "btn btn-default" > Right</button>
</div>
Batanidza seti dzekuita <div class="btn-group">
a <div class="btn-toolbar">
kune zvimwe zvakaoma zvinoumba.
<div class= "btn-toolbar" role= "toolbar" aria-label= "..." >
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
</div>
Kukura
Panzvimbo pekushandisa bhatani kuronga makirasi kune ese bhatani muboka, ingowedzera .btn-group-*
kune yega yega .btn-group
, kusanganisira kana uchisunungura mapoka mazhinji.
Ruboshwe
Pakati
Rudyi
Ruboshwe
Pakati
Rudyi
Ruboshwe
Pakati
Rudyi
Ruboshwe
Pakati
Rudyi
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-sm" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-xs" role= "group" aria-label= "..." > ...</div>
Nesting
Isa .btn-group
mukati meimwe .btn-group
kana iwe uchida mamenu ekudonha akasanganiswa nenhevedzano yemabhatani.
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > 1</button>
<button type= "button" class= "btn btn-default" > 2</button>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Dropdown link</a></li>
<li><a href= "#" > Dropdown link</a></li>
</ul>
</div>
</div>
Vertical variation
Itai kuti mabhatani aite seti akaturikidzana kwete akachinjika. Kudonhedza mabhatani ekupatsanura hakushandi pano.
Bhatani
Bhatani
Dropdown
Bhatani
Bhatani
Dropdown
Dropdown
Dropdown
<div class= "btn-group-vertical" role= "group" aria-label= "..." >
...
</div>
Mapoka emabhatani akapembedzwa
Ita boka remabhatani akatambanudzwa pahukuru hwakaenzana kuti urebe hupamhi hwese hwemubereki wayo. Inoshandawo nemabhatani ekudonhedza mukati meboka remabhatani.
Kubata miganhu
Nekuda kweiyo chaiyo HTML neCSS inoshandiswa kururamisa mabhatani (kureva display: table-cell
), miganhu iri pakati pavo inopetwa kaviri. Mumapoka emabhatani enguva dzose, margin-left: -1px
anoshandiswa kuisa miganho pachinzvimbo chekuabvisa. Nekudaro, margin
hazvishande ne display: table-cell
. Nekuda kweizvozvo, zvinoenderana nemaitiro ako kuBootstrap, ungashuvira kubvisa kana kupendesazve miganhu.
IE8 uye miganhu
Internet Explorer 8 haipe miganhu pamabhatani ari muboka remabhatani anoruramiswa, ingave iri pairi <a>
kana <button>
zvinhu. Kuti utenderere ipapo, peta bhatani rega rega mune rimwe .btn-group
.
Ona #12476 kuti uwane rumwe ruzivo.
Nezvinhu <a>
_
Ingopeta mutsara we .btn
s mu .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
Zvisungo zvinoshanda semabhatani
Kana izvo <a>
zvinhu zvakashandiswa kuita semabhatani - zvichikonzera mukati-peji kushanda, pane kuenda kune rimwe gwaro kana chikamu mukati meiyo peji peji - ivo vanofanirwawo kupihwa yakakodzera role="button"
.
Kuti ushandise mabhatani mapoka ane <button>
zvinhu, unofanirwa kuputira bhatani rega rega muboka remabhatani . Mabhurawuza mazhinji haashandise zvakanaka CSS yedu yekururamisa kune <button>
zvinhu, asi sezvo isu tichitsigira kudonhedza mabhatani, tinogona kushanda tichitenderedza izvozvo.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Left</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Middle</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Right</button>
</div>
</div>
Shandisa chero bhatani kukonzeresa menyu yekudonha nekuiisa mukati .btn-group
uye nekupa iyo yakakodzera menyu markup.
Plugin kutsamira
Mabhatani anodonhedza anoda iyo yekudonha plugin kuti ibatanidzwe mune yako vhezheni yeBootstrap.
Single button dropdowns
Shandura bhatani kuita rekudonhedza pasi uine dzimwe shanduko dzemakipu.
Default
Primary
Success
Info
Yambiro
Danger
<!-- Single button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
Split button dropdowns
Saizvozvo, gadzira kupatsanurwa bhatani kudonhedza neyakafanana markup shanduko, chete nebhatani rakasiyana.
Default
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Yambiro
Toggle Dropdown
Danger
Toggle Dropdown
<!-- Split button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
Kukura
Mabhatani anodonhedza anoshanda nemabhatani emasaizi ese.
<!-- Large button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Extra small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-xs dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Extra small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
Dropup musiyano
Tamba mamenu ekudonhedza pamusoro pezvinhu nekuwedzera .dropup
kumubereki.
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-default" > Dropup</button>
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<!-- Dropdown menu links -->
</ul>
</div>
Wedzera zvidzoreso zvemafomu nekuwedzera mavara kana mabhatani pamberi, mushure, kana mativi ese echero mavara-akavakirwa <input>
. Shandisa .input-group
ne .input-group-addon
kana .input-group-btn
kugadzirira kana kubatanidza zvinhu kune imwechete .form-control
.
Zvinyorwa <input>
chete
Dzivisa kushandisa <select>
zvinhu pano sezvo zvisingagone kunyorwa zvizere mumabhurawuza eWebKit.
Regedza kushandisa <textarea>
zvinhu pano sezvo rows
hunhu hwavo husingazoremekedzwa mune dzimwe nguva.
Zvishandiso & popover mumapoka ekuisa zvinoda kurongeka kwakakosha
Paunenge uchishandisa matipi ezvishandiso kana mapopovers pazvinhu zviri mukati me .input-group
, uchafanirwa kudoma sarudzo container: 'body'
yekudzivirira zvisingadiwe mhedzisiro (senge chinhu chiri kukura zvakafara uye/kana kurasikirwa nemakona ayo akatenderedzwa kana chishandiso kana popover yatanga).
Isa imwe add-on kana bhatani kune rimwe divi rekuisa. Iwe unogona zvakare kuisa imwe pamativi ese maviri ekuisa.
Isu hatitsigire akawanda ma-add-ons ( .input-group-addon
kana .input-group-btn
) kune rimwe divi.
Isu hatitsigire akawanda mafomu-zvinodzora muboka rekuisa rimwe chete.
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "basic-addon1" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-describedby= "basic-addon2" >
<span class= "input-group-addon" id= "basic-addon2" > @example.com</span>
</div>
<div class= "input-group" >
<span class= "input-group-addon" > $</span>
<input type= "text" class= "form-control" aria-label= "Amount (to the nearest dollar)" >
<span class= "input-group-addon" > .00</span>
</div>
<label for= "basic-url" > Your vanity URL</label>
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon3" > https://example.com/users/</span>
<input type= "text" class= "form-control" id= "basic-url" aria-describedby= "basic-addon3" >
</div>
Wedzera iyo inoenderana fomu saizi makirasi kune iyo .input-group
pachayo uye zviri mukati zvinongozvigadzirisa-hapana chikonzero chekudzokorora fomu rekudzora saizi makirasi pane chimwe nechimwe chinhu.
<div class= "input-group input-group-lg" >
<span class= "input-group-addon" id= "sizing-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon1" >
</div>
<div class= "input-group" >
<span class= "input-group-addon" id= "sizing-addon2" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon2" >
</div>
<div class= "input-group input-group-sm" >
<span class= "input-group-addon" id= "sizing-addon3" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon3" >
</div>
Isa chero bhokisi rekutarisa kana redhiyo sarudzo mukati meboka rekupinda addon pane zvinyorwa.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "checkbox" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "radio" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
Mabhatani ari mumapoka ekuisa akati siyanei uye anoda imwe nhanho yekuwedzera yekugara. Panzvimbo pe .input-group-addon
, iwe unozofanirwa kushandisa .input-group-btn
kuputira mabhatani. Izvi zvinodikanwa nekuda kwezvitaera zvebrowser zvisingagone kupfuudzwa.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
<input type= "text" class= "form-control" placeholder= "Search for..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Search for..." >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu dropdown-menu-right" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
</div>
Nepo iwe uchingokwanisa kuve nekuwedzera-padivi padivi, iwe unogona kuve nemabhatani akawanda mukati meimwe .input-group-btn
.
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
</div>
Navs inowanikwa muBootstrap yakagovana markup, kutanga .nav
nekirasi yepasi, pamwe nenzvimbo dzakagovaniswa. Chinjana makirasi ekugadzirisa kuti uchinje pakati pechimwe nechimwe chimiro.
Kushandisa navs kune tab mapaneru kunoda JavaScript tabs plugin
Kune ma tabo ane nzvimbo dzinobatika, unofanira kushandisa ma tabs JavaScript plugin . Iyo markup inodawo yekuwedzera role
uye ARIA hunhu - ona iyo plugin muenzaniso markup kuti uwane rumwe ruzivo.
Ita kuti navs ishandiswe sekufambisa kusvike
Kana uri kushandisa navs kupa bhaa yekufambisa, ive shuwa yekuwedzera role="navigation"
kune ine musoro mubereki chigaba che <ul>
, kana kuputira <nav>
chinhu kutenderedza kutenderera kwese. Usawedzera basa kune iro <ul>
pacharo, sezvo izvi zvingadzivirira kuti zvisaziviswa sechinyorwa chaicho neanobatsira matekinoroji.
Tabs
Cherechedza kuti .nav-tabs
kirasi inoda .nav
kirasi yepasi.
<ul class= "nav nav-tabs" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
Mapiritsi
Tora iyo HTML yakafanana, asi shandisa .nav-pills
pachinzvimbo:
<ul class= "nav nav-pills" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
Mapiritsi anewo vertically stackable. Ingo wedzera .nav-stacked
.
<ul class= "nav nav-pills nav-stacked" >
...
</ul>
Kururamiswa
Gadzira ma tabhu kana mapiritsi zviri nyore hupamhi hwemubereki wavo pamasikirini akafara kupfuura 768px ane .nav-justified
. Pamasikirini madiki, ma nav link akaturikidzana.
Manongedzo e navbar nav ane kodzero haasi kutsigirwa parizvino.
Safari uye inopindura inoruramiswa navs
Kubva pav9.1.2, Safari inoratidza tsikidzi umo kudzoreredza saizi yebrowser yako zvakachinjika kunokonzeresa kupa zvikanganiso mune inoruramiswa nav inocheneswa pakuzorodza. Iyi bug inoratidzwawo mu justified nav muenzaniso .
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
Disabled links
Kune chero chinhu che nav (ma tabhu kana mapiritsi), wedzera .disabled
kune grey link uye hapana hover mhedzisiro .
Kushanda kwelink hakuna kukanganiswa
Kirasi iyi inongoshandura chimiro che <a>
', kwete kushanda kwayo. Shandisa tsika JavaScript kudzima zvinongedzo pano.
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "disabled" ><a href= "#" > Disabled link</a></li>
...
</ul>
Kushandisa dropdowns
Wedzera mamenu ekudonhedza nekamwe HTML kadiki uye anodonhedza JavaScript plugin .
Tabs ane dropdowns
<ul class= "nav nav-tabs" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
Mapiritsi ane dropdowns
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
Default navbar
Navbars inoteerera meta zvikamu zvinoshanda semafambiro emusoro wekushandisa kwako kana saiti. Ivo vanotanga kudonha (uye vari kuchinjika) munharembozha uye vova akachinjika sezvo inowanikwa yekuona hupamhi hunowedzera.
Manongedzo e navbar nav ane kodzero haasi kutsigirwa parizvino.
Kufashukira zvemukati
Sezvo Bootstrap isingazive kuti yakawanda sei nzvimbo yemukati mune yako navbar inoda, unogona kumhanyisa nyaya nezviri kuputirwa mumutsara wechipiri. Kuti ugadzirise izvi, unogona:
Deredza huwandu kana hupamhi hwezvinhu zve navbar.
Viga zvimwe zvinhu zvenavbar pane mamwe masikirini saizi uchishandisa makirasi ekushandisa anoteerera .
Chinja poindi iyo navbar yako inochinja pakati pekudonha uye yakachinjika modhi. Gadzirisa @grid-float-breakpoint
shanduko kana wedzera yako midhiya yemubvunzo.
Inoda JavaScript plugin
Kana JavaScript yakaremara uye nzvimbo yekuona yakamanikana zvekuti navbar inodonha, hazvigoneke kuwedzera navbar uye kuona zviri mukati me..navbar-collapse
.
Iyo inopindura navbar inoda iyo yekudonha plugin kuti ibatanidzwe mune yako vhezheni yeBootstrap.
Kusandura iyo yakadonha mobile navbar breakpoint
Iyo navbar inodonha ichipinda yakatwasuka nharembozha kana nzvimbo yekutarisa yakatetepa kupfuura @grid-float-breakpoint
, uye inowedzera kune yakachinjika isiri-yenhare yekuona kana nzvimbo yekutarisa iri @grid-float-breakpoint
muhupamhi. Rongedza shanduko iyi muChishoma sosi kuti udzore kana navbar yadonha/kuwedzera. Iyo yakasarudzika kukosha ndeye 768px
(diki "diki" kana "tablet" skrini).
Ita kuti ma navbar awanikwe
Iva nechokwadi chekushandisa chimwe <nav>
chinhu kana, kana ukashandisa chimwe chinhu chakajairika senge <div>
, wedzera role="navigation"
kune imwe navbar kuti uiratidze zvakajeka senzvimbo ine mukurumbira kune vashandisi vetekinoroji inobatsira.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class= "navbar-header" >
<button type= "button" class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" >
<span class= "sr-only" > Toggle navigation</span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
</button>
<a class= "navbar-brand" href= "#" > Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >
<ul class= "nav navbar-nav" >
<li class= "active" ><a href= "#" > Link <span class= "sr-only" > (current)</span></a></li>
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > One more separated link</a></li>
</ul>
</li>
</ul>
<form class= "navbar-form navbar-left" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
<ul class= "nav navbar-nav navbar-right" >
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
Mufananidzo wechiratidzo
Tsiva iyo navbar brand nemufananidzo wako nekuchinjanisa mavara kune <img>
. Sezvo iyo .navbar-brand
ine yayo padding uye kureba, ungangoda kudarika imwe CSS zvichienderana nemufananidzo wako.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<div class= "navbar-header" >
<a class= "navbar-brand" href= "#" >
<img alt= "Brand" src= "..." >
</a>
</div>
</div>
</nav>
Isa zviri mukati mefomu mukati .navbar-form
kuitira kurongeka kwakaringana uye maitiro akaputsika munzvimbo dzakamanikana dzekuona. Shandisa sarudzo dzekugadzirisa kuti usarudze kuti inogara kupi mukati meiyo navbar yemukati.
Semusoro kumusoro, .navbar-form
inogovera yakawanda yekodhi yayo ne .form-inline
kuburikidza ne mixin. Mamwe mafomu ekudzora, semapoka ekuisa, angangoda hupamhi hwakatarwa kuti huratidzike zvakanaka mukati mebhara.
<form class= "navbar-form navbar-left" role= "search" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
Mobile mudziyo caveats
Kune mamwe macaveats ane chekuita nekushandisa mafomu ekudzora mukati mezvakagadziriswa zvinhu panharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.
Wedzera .navbar-btn
kirasi <button>
kuzvinhu zvisiri kugara mu a <form>
kuti vertically pakati pavo mu navbar.
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
Context-chaiyo kushandiswa
Kufanana neyakajairwa bhatani makirasi , .navbar-btn
anogona kushandiswa pane <a>
uye <input>
zvinhu. Nekudaro, .navbar-btn
kana iwo akajairwa mabhatani makirasi haafanire kushandiswa pazvinhu <a>
zviri mukati .navbar-nav
.
Text
Putira tambo dzemavara nechinhu ne .navbar-text
, kazhinji <p>
pategi yekutungamira uye ruvara rwakafanira.
<p class= "navbar-text" > Signed in as Mark Otto</p>
Non-nav links
Kune vanhu vanoshandisa zvakajairwa zvinongedzo zvisiri mukati meyenguva navbar yekufambisa chikamu, shandisa .navbar-link
kirasi kuwedzera iwo mavara akakodzera ezvakasarudzika uye inverse navbar sarudzo.
<p class= "navbar-text navbar-right" > Signed in as <a href= "#" class= "navbar-link" > Mark Otto</a></p>
Component alignment
Gadzirisa nav zvinongedzo, mafomu, mabhatani, kana zvinyorwa, uchishandisa .navbar-left
kana .navbar-right
makirasi ekushandisa. Makirasi ese ari maviri anozowedzera CSS inoyangarara munzira yakatarwa. Semuenzaniso, kurongedza nav link, zviise mune yakaparadzana <ul>
neyakasiyana utility kirasi yakashandiswa.
Aya makirasi mamixin-ed vhezheni e .pull-left
uye .pull-right
, asi anoiswa kune midhiya mibvunzo kuitira nyore kubata zvinhu zve navbar pamasaizi emudziyo.
Kurudyi kurongedza zvikamu zvakawanda
Navbars parizvino ane muganhu .navbar-right
nemakirasi akawanda. Kuti tiite zvakanaka nzvimbo yemukati, tinoshandisa negative margin pane yekupedzisira .navbar-right
element. Kana paine zvinhu zvakawanda zvinoshandisa kirasi iyoyo, mapeji aya haashande sezvakarongwa.
Tichaongorora izvi kana takwanisa kunyora zvakare chikamu muv4.
Yakagadziriswa kumusoro
Wedzera .navbar-fixed-top
uye sanganisira a .container
kana .container-fluid
pakati uye pad navbar zvemukati.
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
Body padding inodiwa
Iyo yakagadziriswa navbar ichafukidza zvimwe zvako zvirimo, kunze kwekunge wawedzera padding
kumusoro kweiyo <body>
. Edza tsika dzako kana shandisa snippet yedu pazasi. Zano: Nekusagadzika, iyo navbar ndeye 50px yakakwirira.
body { padding-top : 70px ; }
Ita shuwa yekuisa izvi mushure meiyo yakakosha Bootstrap CSS.
Yakagadziriswa kusvika pasi
Wedzera .navbar-fixed-bottom
uye sanganisira a .container
kana .container-fluid
pakati uye pad navbar zvemukati.
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
Body padding inodiwa
Iyo yakagadziriswa navbar ichafukidza zvimwe zvako zvirimo, kunze kwekunge wawedzera padding
kuzasi kweiyo <body>
. Edza tsika dzako kana shandisa snippet yedu pazasi. Zano: Nekusagadzika, iyo navbar ndeye 50px yakakwirira.
body { padding-bottom : 70px ; }
Ita shuwa yekuisa izvi mushure meiyo yakakosha Bootstrap CSS.
Static top
Gadzira yakazara-yakafara navbar inotenderera ichienda nepeji nekuwedzera .navbar-static-top
uye inosanganisira a .container
kana .container-fluid
kuti pakati uye pad navbar zvemukati.
Kusiyana .navbar-fixed-*
nemakirasi, haufanire kushandura chero padding pane body
.
<nav class= "navbar navbar-default navbar-static-top" >
<div class= "container" >
...
</div>
</nav>
Inverted navbar
Shandura chitarisiko che navbar nekuwedzera .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
Ratidza nzvimbo yepeji iripo mukati mehurongwa hwekufamba.
Zviparadzanisa zvinowedzerwa otomatiki muCSS kuburikidza :before
uye content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
Ipa zvinongedzo zvemapeji esaiti yako kana app ine mapeji akawanda epagination chikamu, kana iri nyore kupeja imwe nzira .
Yakareruka pagination yakafemerwa neRdio, yakanakira maapplication uye mhinduro dzekutsvaga. Iyo yakakura block yakaoma kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </span>
</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= "#" > 5</a></li>
<li>
<a href= "#" aria-label= "Next" >
<span aria-hidden= "true" > » </span>
</a>
</li>
</ul>
</nav>
Yakaremara uye inoshanda nyika
Zvisungo zvinogoneka kune akasiyana mamiriro. Shandisa .disabled
kune unclickable links uye .active
kuratidza peji iripo.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </span></a></li>
<li class= "active" ><a href= "#" > 1 <span class= "sr-only" > (current)</span></a></li>
...
</ul>
</nav>
Isu tinokukurudzira kuti uchinje ma anchor anoshanda kana akaremara ku <span>
, kana kusiya anchor kana iri miseve yapfuura/inotevera, kuti ubvise kuita kwekudzvanya uchichengeta masitaera akada.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" >
<span>
<span aria-hidden= "true" > « </span>
</span>
</li>
<li class= "active" >
<span> 1 <span class= "sr-only" > (current)</span></span>
</li>
...
</ul>
</nav>
Kukura
Fancy yakakura kana diki pagination? Wedzera .pagination-lg
kana .pagination-sm
kuwedzera saizi.
<nav aria-label= "..." ><ul class= "pagination pagination-lg" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination pagination-sm" > ...</ul></nav>
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.
<nav aria-label= "..." >
<ul class= "pager" >
<li><a href= "#" > Previous</a></li>
<li><a href= "#" > Next</a></li>
</ul>
</nav>
Aligned links
Neimwe nzira, unogona kuenzanisa chinongedzo chimwe nechimwe kumativi:
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
Optional disabled state
Pager zvinongedzo zvinoshandisawo general .disabled
utility kirasi kubva kupeji.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
Muenzaniso
Muenzaniso musoro New
Muenzaniso musoro New
Muenzaniso musoro New
Muenzaniso musoro New
Muenzaniso musoro New
Muenzaniso musoro New
<h3> Example heading <span class= "label label-default" > New</span></h3>
Misiyano iripo
Wedzera chero ipi zvayo yakataurwa pasi apa modifier makirasi kuti uchinje chitarisiko chezita.
Default
Primary
Success
Info
Warning
Danger
<span class= "label label-default" > Default</span>
<span class= "label label-primary" > Primary</span>
<span class= "label label-success" > Success</span>
<span class= "label label-info" > Info</span>
<span class= "label label-warning" > Warning</span>
<span class= "label label-danger" > Danger</span>
Une matani emavara?
Kupa matambudziko anogona kumuka kana iwe uine akawanda einline mavara mukati memudziyo nhete, imwe neimwe iine yayo inline-block
chinhu (senge icon). Nzira yakapoteredza iyi iri kugadzika display: inline-block;
. Kuti uwane mamiriro uye muenzaniso, ona #13219 .
Nyora zviri nyore zvinhu zvitsva kana zvisina kuverenga nekuwedzera <span class="badge">
kune zvinongedzo, Bootstrap navs, nezvimwe.
<a href= "#" > Inbox <span class= "badge" > 42</span></a>
<button class= "btn btn-primary" type= "button" >
Messages <span class= "badge" > 4</span>
</button>
Kuzviwisira pasi
Kana pasina zvinhu zvitsva kana zvisina kuverengwa, mabheji anongodonha (kuburikidza neCSS's :empty
selector) chero pasina zvirimo mukati.
Cross-browser kuenderana
Mabheji haazvipunzike ega muInternet Explorer 8 nekuti anoshaya rutsigiro kune :empty
anosarudza.
Inochinja kune inoshanda nav states
Zvitaera zvakavakwa zvinosanganisirwa zvekuisa mabheji munzvimbo dzinoshanda mukufamba kwemapiritsi.
<ul class= "nav nav-pills" role= "tablist" >
<li role= "presentation" class= "active" ><a href= "#" > Home <span class= "badge" > 42</span></a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages <span class= "badge" > 3</span></a></li>
</ul>
Chinhu chisina kuremerwa, chinochinjika chinogona kukwidziridza nzvimbo yese yekutarisa kuratidza zvakakosha zvemukati pane yako saiti.
Mhoro, nyika!
Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.
Dzidza zvimwe
<div class= "jumbotron" >
<h1> Hello, world!</h1>
<p> ...</p>
<p><a class= "btn btn-primary btn-lg" href= "#" role= "button" > Learn more</a></p>
</div>
Kuita kuti jumbotron izere nehupamhi, uye isina makona akatenderedzwa, isa kunze kwese .container
s uye panzvimbo pacho wedzera .container
mukati.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</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= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
Wedzera Giridhi yeBootstrap neiyo thumbnail chikamu kuratidza zviri nyore magiradhi emifananidzo, mavhidhiyo, zvinyorwa, nezvimwe.
Kana iwe uchitsvaga Pinterest-sekuratidzwa kwezvigunwe zvehurefu hwakasiyana uye/kana hupamhi, unozofanirwa kushandisa yechitatu-bato plugin yakadai Masonry , Isotope , kana Salvattore .
Default muenzaniso
Nekumisikidza, zvigunwe zveBootstrap zvakagadzirirwa kuratidza mifananidzo yakabatana ine shoma inodiwa markup.
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
Custom content
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.
Bhatani Bhatani
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.
Bhatani Bhatani
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.
Bhatani Bhatani
<div class= "row" >
<div class= "col-sm-6 col-md-4" >
<div class= "thumbnail" >
<img src= "..." alt= "..." >
<div class= "caption" >
<h3> Thumbnail label</h3>
<p> ...</p>
<p><a href= "#" class= "btn btn-primary" role= "button" > Button</a> <a href= "#" class= "btn btn-default" role= "button" > Button</a></p>
</div>
</div>
</div>
</div>
Ipa mamiriro emhinduro mameseji ezviitwa zvemushandisi ane mashoma anowanikwa uye anochinjika echenjedzo meseji.
Mienzaniso
Putira chero mavara uye bhatani raungasarudze rekudzinga mukati .alert
uye rimwe remakirasi mana emamiriro ezvinhu (semuenzaniso, .alert-success
) kune mameseji echenjedzo.
No default class
Yambiro haina makirasi ekutanga, makirasi egasi uye ekugadzirisa chete. Yekuyeverwa yegrey yambiro haiite yakawandisa, saka unosungirwa kutsanangura mhando kuburikidza nekirasi yemamiriro. Sarudza kubva pakubudirira, ruzivo, yambiro, kana njodzi.
Kuita zvakanaka! Iwe wakabudirira kuverenga iyi yakakosha meseji yekuzivisa.
Musoro! Yambiro iyi inoda kutariswa newe, asi haina kukosha zvakanyanya.
Yambiro! Zvirinani uzviongorore, hausi kunyanya kutaridzika zvakanaka.
Oh snap! Shandura zvinhu zvishoma uye edza kutumira zvakare.
<div class= "alert alert-success" role= "alert" > ...</div>
<div class= "alert alert-info" role= "alert" > ...</div>
<div class= "alert alert-warning" role= "alert" > ...</div>
<div class= "alert alert-danger" role= "alert" > ...</div>
Zviziviso zvinodzingwa
Gadzira pane chero yambiro nekuwedzera sarudzo .alert-dismissible
uye yekuvhara bhatani.
×
Yambiro! Zvirinani uzviongorore, hausi kunyanya kutaridzika zvakanaka.
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
Links muzviziviso
Shandisa .alert-link
utility kirasi kukurumidza kupa anoenderana mavara ekubatanidza mukati meyambiro ipi neipi.
<div class= "alert alert-success" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-info" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-warning" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-danger" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
Ipa mhinduro dzezvino-zvino pamusoro pekufambira mberi kwekufambiswa kwebasa kana chiitiko chine mabara akareruka asi anochinjika ekufambira mberi.
Cross-browser kuenderana
Mabhawa ekufambira mberi anoshandisa CSS3 shanduko uye animations kuti iwane zvimwe zvadzo. Aya maficha haatsigirwe muInternet Explorer 9 uye pazasi kana shanduro dzekare dzeFirefox. Opera 12 haitsigire mifananidzo.
Content Security Policy (CSP) inoenderana
Kana webhusaiti yako iine Content Security Policy (CSP) isingatenderi style-src 'unsafe-inline'
, saka hauzokwanisi kushandisa inline style
hunhu kuseta kufambira mberi kwebhawa upamhi sezvakaratidzwa mumienzaniso yedu pazasi. Dzimwe nzira dzekuseta hupamhi hunoenderana neCSP dzakasimba dzinosanganisira kushandisa katsika JavaScript (iyo inoseta element.style.width
) kana kushandisa makirasi eCSS etsika.
Basic muenzaniso
Default progress bar.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
<span class= "sr-only" > 60% Complete</span>
</div>
</div>
With label
Bvisa iyo <span>
ine .sr-only
kirasi kubva mukati mekufambira mberi bar kuratidza chikamu chinooneka.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
60%
</div>
</div>
Kuti uve nechokwadi chekuti mavara echinyorwa anoramba achinyoreka kunyangwe nezvikamu zvakaderera, funga kuwedzera a min-width
kune yekufambira mberi bar.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em;" >
0%
</div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "2" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em; width: 2%;" >
2%
</div>
</div>
Contextual dzimwe nzira
Mabhawa ekufambira mberi anoshandisa mamwe bhatani rimwe chete uye makirasi ekuzivisa kune anowirirana masitaera.
40% Yakakwana (kubudirira)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
Striped
Inoshandisa gradient kugadzira mitsetse. Haisi kuwanikwa muIE9 uye pazasi.
40% Yakakwana (kubudirira)
<div class= "progress" >
<div class= "progress-bar progress-bar-success progress-bar-striped" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info progress-bar-striped" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning progress-bar-striped" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger progress-bar-striped" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
Animated
Wedzera .active
kune .progress-bar-striped
kumutsa mitsetse kurudyi kuruboshwe. Haisi kuwanikwa muIE9 uye pazasi.
<div class= "progress" >
<div class= "progress-bar progress-bar-striped active" role= "progressbar" aria-valuenow= "45" aria-valuemin= "0" aria-valuemax= "100" style= "width: 45%" >
<span class= "sr-only" > 45% Complete</span>
</div>
</div>
Stacked
Isa mabhawa akawanda mune imwechete .progress
kuti aaise.
35% Yakakwana (kubudirira)
20% Yakakwana (yambiro)
10% Yakakwana (njodzi)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" style= "width: 35%" >
<span class= "sr-only" > 35% Complete (success)</span>
</div>
<div class= "progress-bar progress-bar-warning progress-bar-striped" style= "width: 20%" >
<span class= "sr-only" > 20% Complete (warning)</span>
</div>
<div class= "progress-bar progress-bar-danger" style= "width: 10%" >
<span class= "sr-only" > 10% Complete (danger)</span>
</div>
</div>
Abstract chinhu masitaera ekuvaka akasiyana marudzi ezvikamu (seblog blog, maTweets, nezvimwewo) ane mufananidzo wekuruboshwe- kana kurudyi-padivi pezvinyorwa.
Iyo yakasarudzika midhiya inoratidza chinhu chemedia (mifananidzo, vhidhiyo, odhiyo) kuruboshwe kana kurudyi rwemukati block.
<div class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</div>
Makirasi .pull-left
uye .pull-right
aripo uye aimboshandiswa sechikamu chezvenhau, asi akaregwa kushandiswa ikoko sev3.3.0. Iwo anenge akaenzana ne .media-left
uye .media-right
, kunze kwekunge .media-right
anofanirwa kuiswa mushure .media-body
meiyo muhtml.
Iyo mifananidzo kana imwe midhiya inogona kuenderana kumusoro, pakati, kana pasi. Iyo yekusarudzika yakamisikidzwa kumusoro.
<div class= "media" >
<div class= "media-left media-middle" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Middle aligned media</h4>
...
</div>
</div>
Neine imwe yekuwedzera markup, unogona kushandisa midhiya mukati rondedzero (inobatsira kune ekutaura tambo kana zvinyorwa zvinyorwa).
<ul class= "media-list" >
<li class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</li>
</ul>
Mapoka ezvirongwa chinhu chinochinjika uye chine simba chekuratidza kwete zvinyorwa zviri nyore zvezvinhu, asi zvakaoma zvine tsika yemukati.
Basic muenzaniso
Boka rinonyanya kukosha ingori rondedzero isina kurongeka ine zvinyorwa zvinhu, uye makirasi akakodzera. Vaka pamusoro payo nesarudzo dzinotevera, kana yako CSS sezvinodiwa.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum uye eros
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Mabheji
Wedzera chikamu chemabheji kune chero chinyorwa cheboka chinhu uye chinozoiswa kurudyi.
14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
Zvinhu zvakabatanidzwa
Batanidza zvinyorwa zveboka nekushandisa ma tag anchor pachinzvimbo chezvinyorwa zvinyorwa (zvinorevawo mubereki <div>
pachinzvimbo che <ul>
). Hapana chikonzero chevabereki vega pane chimwe chinhu.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
Rondedzera zvinhu zveboka zvinogona kunge zviri mabhatani pachinzvimbo chezvinyorwa zvinhu (zvinorevawo mubereki <div>
pachinzvimbo che <ul>
). Hapana chikonzero chevabereki vega pane chimwe chinhu. Usashandise .btn
makirasi akajairwa pano.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum uye eros
<div class= "list-group" >
<button type= "button" class= "list-group-item" > Cras justo odio</button>
<button type= "button" class= "list-group-item" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item" > Morbi leo risus</button>
<button type= "button" class= "list-group-item" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item" > Vestibulum at eros</button>
</div>
Zvinhu zvakaremara
Wedzera .disabled
kune a .list-group-item
kune grey kuti iite seyakaremara.
<div class= "list-group" >
<a href= "#" class= "list-group-item disabled" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
Contextual classes
Shandisa makirasi emamiriro ezvinhu kuita zvinyorwa zvinyorwa, zvimiro kana zvakabatanidzwa. Inosanganisirawo .active
nyika.
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum uye eros
<ul class= "list-group" >
<li class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</li>
<li class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</li>
<li class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</li>
<li class= "list-group-item list-group-item-danger" > Vestibulum at eros</li>
</ul>
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</a>
<a href= "#" class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-danger" > Vestibulum at eros</a>
</div>
Custom content
Wedzera ingangoita chero HTML mukati, kunyangwe yeakabatana rondedzero mapoka senge ari pazasi.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
<h4 class= "list-group-item-heading" > List group item heading</h4>
<p class= "list-group-item-text" > ...</p>
</a>
</div>
Kunyange zvisingawanzo kudikanwa, dzimwe nguva unofanirwa kuisa DOM yako mubhokisi. Kune iwo mamiriro, edza chikamu chepaneru.
Basic muenzaniso
Nekumisikidza, zvese .panel
zvinoitwa kushandisa imwe yakakosha muganho uye padding kuve nezvimwe zvirimo.
<div class= "panel panel-default" >
<div class= "panel-body" >
Basic panel example
</div>
</div>
Panel ine musoro
Wedzera zviri nyore mudziyo wemusoro kune yako pani ne .panel-heading
. Unogonawo kusanganisira chero <h1>
- <h6>
nekirasi .panel-title
yekuwedzera musoro wakanyorwa kare. Nekudaro, masaizi <h1>
efonti <h6>
e- anodarika ne .panel-heading
.
Kuti uwane mavara ekubatanidza akakodzera, iva nechokwadi chekuisa zvinongedzo mumisoro mukati me .panel-title
.
Panel musoro usina musoro
Panel content
Panel musoro
Panel content
<div class= "panel panel-default" >
<div class= "panel-heading" > Panel heading without title</div>
<div class= "panel-body" >
Panel content
</div>
</div>
<div class= "panel panel-default" >
<div class= "panel-heading" >
<h3 class= "panel-title" > Panel title</h3>
</div>
<div class= "panel-body" >
Panel content
</div>
</div>
Putira mabhatani kana rugwaro rwechipiri mu .panel-footer
. Ziva kuti matinji haagari nhaka yemavara nemiganhu kana uchishandisa misiyano yemamiriro ezvinhu sezvo isina kuitirwa kumberi.
<div class= "panel panel-default" >
<div class= "panel-body" >
Panel content
</div>
<div class= "panel-footer" > Panel footer</div>
</div>
Contextual dzimwe nzira
Kufanana nezvimwe zvikamu, nyore nyore kuti pani ive nechinangwa kune imwe mamiriro nekuwedzera chero yemamiriro emamiriro emakirasi.
Panel musoro
Panel content
Panel musoro
Panel content
Panel musoro
Panel content
Panel musoro
Panel content
Panel musoro
Panel content
<div class= "panel panel-primary" > ...</div>
<div class= "panel panel-success" > ...</div>
<div class= "panel panel-info" > ...</div>
<div class= "panel panel-warning" > ...</div>
<div class= "panel panel-danger" > ...</div>
Nematafura
Wedzera chero isina kuganhurwa .table
mukati mepaneru kuitira dhizaini isina musono. Kana paine .panel-body
, tinowedzera muganho wekuwedzera kumusoro kwetafura yekuparadzanisa.
Panel musoro
Zvimwe zvakagara zviripo pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id id nibh ultricies vehicula ut id elit.
#
Zita rokutanga
Zita rokupedzisa
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@mafuta
3
Larry
Shiri
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
Kana pasina mutumbi wepanera, chikamu chinofamba kubva pane musoro wepaneru kuenda kune tafura pasina kukanganisa.
Panel musoro
#
Zita rokutanga
Zita rokupedzisa
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@mafuta
3
Larry
Shiri
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
Nemapoka emazita
Batanidza zviri nyore-yakazara- mazita mapoka mukati mechero pani.
Panel musoro
Zvimwe zvakagara zviripo pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum uye eros
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- List group -->
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
</div>
Bvumira mabhurawuza kuti atarise mavhidhiyo kana masiraidhi zviyero zvichienderana nehupamhi hweiyo ine block nekugadzira yemukati reshiyo inozonyatso kuyera pane chero mudziyo.
Mitemo inoshandiswa zvakananga ku <iframe>
, <embed>
, <video>
, uye <object>
zvinhu; .embed-responsive-item
kana uchida kuenzanisa masitaera ezvimwe hunhu .
Pro-Tip! Iwe haufanire kusanganisa frameborder="0"
mune yako <iframe>
sezvo isu tichipfuura izvo kwauri.
<!-- 16:9 aspect ratio -->
<div class= "embed-responsive embed-responsive-16by9" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class= "embed-responsive embed-responsive-4by3" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
Default zvakanaka
Shandisa tsime seyakapusa mhedzisiro pane chinhu kuti upe iyo inset maitiro.
<div class= "well" > ...</div>
Optional makirasi
Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.
Tarirai, ndiri mutsime guru!
<div class= "well well-lg" > ...</div>
Tarirai, ndiri mutsime duku!
<div class= "well well-sm" > ...</div>