Kuboneka glyphs
Harimo glyphs zirenga 250 muburyo bwimyandikire uhereye kuri Glyphicon Halflings. Glyphicons Halflings mubusanzwe ntabwo iboneka kubuntu, ariko uwashizeho yabashizeho kuboneka kuri Bootstrap kubusa. Nkurakoze , turasaba gusa ko washyiramo umurongo ugaruka kuri Glyphicons igihe cyose bishoboka.
Uburyo bwo gukoresha
Kubwimpamvu zimikorere, amashusho yose akenera urwego shingiro hamwe nicyiciro cyihariye. Gukoresha, shyira kode ikurikira hafi aho ariho hose. Wemeze gusiga umwanya hagati yigishushanyo ninyandiko kugirango padi ikwiye.
Ntukavange nibindi bice
Agashusho k'ishusho ntigashobora guhuzwa nibindi bice. Ntibagomba gukoreshwa hamwe nandi masomo kubintu bimwe. Ahubwo, ongeramo icyari <span>
kandi ushyire mugishushanyo cyamasomo kuri <span>
.
Gusa kugirango ukoreshe kubintu byubusa
Agashushondanga kagomba gukoreshwa gusa kubintu bitarimo inyandiko kandi bidafite abana.
Guhindura igishushanyo cyimyandikire
Bootstrap ifata amashusho yimyandikire yimyandikire izaba iri mububiko ../fonts/
, ugereranije na dosiye ya CSS yakozwe. Kwimura cyangwa guhindura amazina yimyandikire yimyandikire bisobanura kuvugurura CSS murimwe muburyo butatu:
Hindura i @icon-font-path
na / cyangwa @icon-font-name
impinduka mumasoko make dosiye.
Koresha isano ya URL ihitamo itangwa na Mukusanya.
Hindura url()
inzira muri CSS yakozwe.
Koresha uburyo ubwo aribwo bwose bukwiranye niterambere ryihariye.
Udushushondanga
Uburyo bugezweho bwa tekinoroji ifasha izatangaza CSS ibyakozwe, kimwe na Unicode yihariye. Kugirango wirinde ibyateganijwe kandi bitesha umutwe ibisomwa bya ecran (cyane cyane iyo amashusho akoreshwa gusa mugushushanya), turabihisha hamwe na aria-hidden="true"
kiranga.
Niba ukoresha igishushanyo kugirango ugaragaze ibisobanuro (aho kuba nkibintu bishushanya gusa), menya neza ko ubu busobanuro bwanagejejwe kubuhanga bufasha - urugero, shyiramo ibintu byongeweho, bigaragara neza hamwe .sr-only
nishuri.
Niba urimo gukora igenzura ntayindi nyandiko (nkiyi <button>
irimo igishushanyo gusa), ugomba guhora utanga ubundi buryo kugirango umenye intego yubugenzuzi, kugirango byumvikane kubakoresha ikorana buhanga. Muri iki kibazo, ushobora kongeramo aria-label
ikiranga kugenzura ubwacyo.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
Ingero
Koresha muri buto, buto ya matsinda kubikoresho byabigenewe, kugendagenda, cyangwa ifishi yateguwe.
Inyenyeri
Inyenyeri
Inyenyeri
Inyenyeri
<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>
Agashusho gakoreshwa muburyo bwo kwerekana ko ari ubutumwa bwibeshya, hamwe .sr-only
ninyandiko yinyongera kugirango utange iki gitekerezo kubakoresha ikoranabuhanga rifasha.
Ikosa: Injiza imeri yemewe
<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>
Toggleable, menu ya menu yo kwerekana urutonde rwihuza. Byakozwe bikorana na plagin ya JavaScript .
Urugero
Kuzuza ibimanuka byamanutse na menu yamanutse imbere .dropdown
, cyangwa ikindi kintu gitangaza position: relative;
. Noneho ongeraho HTML ya menu.
<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>
Ibitonyanga byamanutse birashobora guhinduka kugirango byaguke hejuru (aho kumanuka) wongeyeho .dropup
kubabyeyi.
<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>
Guhuza
Mburabuzi, menu yamanutse ihita ishyirwa 100% uhereye hejuru no kuruhande rwibumoso rwababyeyi. Ongeraho iburyo .dropdown-menu-right
kugirango .dropdown-menu
uhuze menu yamanutse.
Birashobora gusaba imyanya yinyongera
Ibitonyanga bihita bishyirwa kuri CSS muburyo busanzwe bwinyandiko. Ibi bivuze ko ibitonyanga bishobora guhingwa nababyeyi bafite overflow
imitungo runaka cyangwa kugaragara kurenga imipaka. Kemura ibyo bibazo wenyine wenyine uko bivutse.
Guhuza .pull-right
agaciro
Nko kuri v3.1.0, twataye agaciro .pull-right
kuri menu yamanutse. Kugirango uhuze iburyo, koresha .dropdown-menu-right
. Iburyo-buhuza ibice bigize navbar ukoreshe mixin verisiyo yiri shuri kugirango uhite uhuza menu. Kurenga, koresha .dropdown-menu-left
.
<ul class= "dropdown-menu dropdown-menu-right" aria-labelledby= "dLabel" >
...
</ul>
Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu3" >
...
<li class= "dropdown-header" > Dropdown header</li>
...
</ul>
Gutandukanya
Ongeramo ibice kugirango utandukane urukurikirane rwihuza muri menu yamanutse.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenuDivider" >
...
<li role= "separator" class= "divider" ></li>
...
</ul>
Ibintu byahagaritswe
Ongeraho .disabled
kuri a <li>
kumanuka kugirango uhagarike umurongo.
<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>
Itsinda urukurikirane rwa buto hamwe kumurongo umwe hamwe na buto itsinda. Ongeraho kuri radio JavaScript itabishaka hamwe na cheque yisanduku yimyitwarire hamwe na buto yacu plugin .
Menya neza role
kandi utange ikirango
Kugirango tekinoroji ifasha - nk'abasoma ecran - kwerekana ko urukurikirane rwa buto rwashyizwe hamwe, role
ikiranga gikwiye gutangwa. Kuri buto ya matsinda, ibi byaba role="group"
, mugihe ibikoresho byabigenewe bigomba kugira a role="toolbar"
.
Ikintu kimwe kidasanzwe ni amatsinda arimo igenzura rimwe gusa (urugero nkamatsinda ya buto yemewe afite <button>
ibintu) cyangwa ibitonyanga.
Mubyongeyeho, amatsinda hamwe nibikoresho byabigenewe bigomba guhabwa ikirango cyeruye, kuko tekinoroji nyinshi zifasha ubundi ntizitangaze, nubwo hariho role
ikiranga gikwiye. Mu ngero zitangwa hano, turakoresha aria-label
, ariko ubundi nkibishobora aria-labelledby
gukoreshwa.
Urugero rwibanze
Kuzuza urukurikirane rwa buto hamwe .btn
na .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>
Huza <div class="btn-group">
ibice bya a <div class="btn-toolbar">
kubintu byinshi bigoye.
<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>
Ingano
Aho kugirango ushyireho buto ingero zamasomo kuri buri buto mumatsinda, gusa ongeraho .btn-group-*
kuri buri .btn-group
, harimo mugihe utera amatsinda menshi.
Ibumoso
Hagati
Iburyo
Ibumoso
Hagati
Iburyo
Ibumoso
Hagati
Iburyo
Ibumoso
Hagati
Iburyo
<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>
Icyari
Shira a .btn-group
mubindi .btn-group
mugihe ushaka ibitonyanga bivanze nurukurikirane rwa buto.
<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>
Guhindagurika
Kora urutonde rwa buto rugaragara ruhagaritse aho gutambuka. Gutandukanya buto yamanutse ntabwo ashyigikiwe hano.
Button
Button
Kumanuka
Button
Button
Kumanuka
Kumanuka
Kumanuka
<div class= "btn-group-vertical" role= "group" aria-label= "..." >
...
</div>
Amatsinda ya buto yemewe
Kora itsinda rya buto urambure ku bunini bungana kugirango ugabanye ubugari bwose bwababyeyi. Ikora kandi hamwe na buto yamanutse mumatsinda ya buto.
Gukemura imipaka
Bitewe na HTML yihariye na CSS bikoreshwa mugusobanura buto (aribyo display: table-cell
), imipaka hagati yabo ikubye kabiri. Mu matsinda asanzwe ya buto, margin-left: -1px
akoreshwa muguhuza imipaka aho kuyakuraho. Ariko, margin
ntabwo ikorana nayo display: table-cell
. Nkigisubizo, ukurikije ibyo wihitiyemo kuri Bootstrap, urashobora gukuraho cyangwa kongera kurangi imipaka.
IE8 n'imbibi
Internet Explorer 8 ntabwo itanga imipaka kuri buto mumatsinda ya buto yemewe, yaba iri <a>
cyangwa <button>
ibice. Kugirango uzenguruke, uzenguruke buri buto murindi .btn-group
.
Reba # 12476 kubindi bisobanuro.
Hamwe <a>
nibintu
Kuzuza urukurikirane rwa .btn
s .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
Ihuza ikora nka buto
Niba <a>
ibintu bikoreshwa mugukora buto - gukurura page-page imikorere, aho kugana kurundi nyandiko cyangwa igice kiri kurupapuro rwubu - bagomba no guhabwa ibikwiye role="button"
.
Kugirango ukoreshe amatsinda ya buto afite ishingiro <button>
, ugomba kuzinga buri buto mumatsinda ya buto . Mucukumbuzi nyinshi ntabwo zikoresha neza CSS yacu kugirango yemeze <button>
ibintu, ariko kubera ko dushyigikiye buto yamanutse, dushobora gukora hafi yibyo.
<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>
Koresha buto iyariyo yose kugirango utere menu yamanutse uyishyire muri a .btn-group
hanyuma utange menu ikwiye.
Amacomeka
Ibitonyanga bya buto bisaba plugin yamanutse kugirango ishyirwe muri verisiyo yawe ya Bootstrap.
Akabuto kamwe kamanuka
Hindura buto mumanuka uhindagurika hamwe nibintu byingenzi byahinduwe.
Mburabuzi
Ibanze
Intsinzi
Amakuru
Iburira
Akaga
<!-- 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>
Gutandukanya buto yamanutse
Na none, kora ibice bitandukanya ibice byamanutse hamwe nibimenyetso bimwe bihinduka, gusa hamwe na buto itandukanye.
Mburabuzi
Toggle Ibitonyanga
Ibanze
Toggle Ibitonyanga
Intsinzi
Toggle Ibitonyanga
Amakuru
Toggle Ibitonyanga
Iburira
Toggle Ibitonyanga
Akaga
Toggle Ibitonyanga
<!-- 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>
Ingano
Utubuto duto dukora hamwe na buto yubunini bwose.
<!-- 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>
Gutandukana kw'ibitonyanga
Imbarutso yo guta ibice hejuru yibintu wongeyeho .dropup
kubabyeyi.
<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>
Ongera ifishi igenzura wongeyeho inyandiko cyangwa buto mbere, nyuma, cyangwa kumpande zombi zinyandiko zishingiye <input>
. Koresha .input-group
hamwe na .input-group-addon
cyangwa .input-group-btn
kugirango witegure cyangwa wongere ibintu kuri kimwe .form-control
.
Inyandiko <input>
gusa
Irinde gukoresha <select>
ibintu hano kuko bidashobora kuba byuzuye muburyo bwa mushakisha ya WebKit.
Irinde gukoresha <textarea>
ibintu hano nkuko rows
ibiranga bitazubahwa mubihe bimwe.
Ibikoresho & popovers mumatsinda yinjiza bisaba gushiraho bidasanzwe
Mugihe ukoresheje ibikoresho cyangwa popovers kubintu biri muri an .input-group
, ugomba kwerekana uburyo container: 'body'
bwo kwirinda ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza inguni zazengurutse mugihe ibikoresho cyangwa popover byatewe).
Shyira kongeramo imwe cyangwa buto kumpande zombi zinjiza. Urashobora kandi gushyira imwe kumpande zombi zinjiza.
Ntabwo dushyigikiye ibyongeweho byinshi ( .input-group-addon
cyangwa .input-group-btn
) kuruhande rumwe.
Ntabwo dushyigikiye uburyo bwinshi-bugenzura mumatsinda imwe yinjiza.
<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>
Ongeraho ifishi igereranya ibyiciro .input-group
ubwabyo nibirimo imbere bizahita bihinduka - nta mpamvu yo gusubiramo ifishi yo kugenzura ingano kuri buri kintu.
<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>
Shira agasanduku ako ari ko kose cyangwa radio ihitamo mumatsinda yinjiza ya addon aho kwandika.
<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 -->
Utubuto mumatsinda yinjiza aratandukanye gato kandi bisaba urwego rumwe rwinyongera rwo guturamo. Aho kugirango .input-group-addon
, uzakenera gukoresha .input-group-btn
kugirango uzingire buto. Ibi birasabwa bitewe nuburyo busanzwe bwa mushakisha budashobora kurengerwa.
<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>
Mugihe ushobora kugira inyongera imwe kuruhande, urashobora kugira buto nyinshi imbere murimwe .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 iboneka muri Bootstrap basangiye marike, bahereye kumurongo shingiro .nav
, kimwe na leta zisangiwe. Swap modifier ibyiciro kugirango uhindure hagati yuburyo bwose.
Gukoresha navs kumwanya wibisobanuro bisaba JavaScript tabs plugin
Kubisobanuro hamwe nibice byimbonerahamwe, ugomba gukoresha tabs ya JavaScript plugin . Ikimenyetso kizakenera kandi role
ibiranga ARIA - reba urugero rwa plugin kurugero rwibindi bisobanuro.
Kora amato akoreshwa nkigendagenda neza
Niba ukoresha navs kugirango utange inzira yo kugendagenda, menya neza ko wongeramo a role="navigation"
kubintu byumvikana byababyeyi byabigenewe <ul>
, cyangwa <nav>
uzenguruke ikintu hafi yikigenda cyose. Ntukongere uruhare <ul>
rwonyine, kuko ibi byakubuza gutangazwa nkurutonde nyarwo hakoreshejwe ikoranabuhanga rifasha.
Tab
Menyako .nav-tabs
icyiciro gisaba icyiciro .nav
shingiro.
<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>
Ibinini
Fata iyo HTML imwe, ariko ukoreshe .nav-pills
aho:
<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>
Ibinini nabyo birahagaritse. Ongeraho .nav-stacked
.
<ul class= "nav nav-pills nav-stacked" >
...
</ul>
Bifite ishingiro
Byoroshye gukora tabs cyangwa ibinini ubugari bungana bwababyeyi babo kuri ecran yagutse kurenza 768px hamwe .nav-justified
. Kuri ecran ntoya, imiyoboro ya nav irashyizwe hamwe.
Imiyoboro ya navbar ifite ishingiro ntabwo ishyigikiwe.
Safari kandi yishura neza bifite ishingiro
Kuva kuri v9.1.2, Safari yerekana ikosa aho guhindura imiterere ya mushakisha yawe mu buryo butambitse bitera gutanga amakosa muri nav yemewe yemejwe neza. Aka gakosa kandi karerekanwa murugero rufite ishingiro .
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
Guhuza
Kubintu byose bya nav (tabs cyangwa ibinini), ongeraho imvi .disabled
zumuhondo kandi nta ngaruka zigenda .
Imikorere ihuza ntabwo igira ingaruka
Urwego ruzahindura gusa <a>
isura, ntabwo imikorere yayo. Koresha JavaScript yihariye kugirango uhagarike amahuza hano.
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "disabled" ><a href= "#" > Disabled link</a></li>
...
</ul>
Gukoresha ibitonyanga
Ongeraho ibimanuka hamwe na HTML yongeyeho na plugin ya JavaScript .
Tab hamwe nibitonyanga
<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>
Ibinini hamwe nibitonyanga
<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>
Mburabuzi
Navbars isubiza meta ibice bikora nkimitwe yo kugendana porogaramu yawe cyangwa urubuga. Batangira gusenyuka (kandi birashobora guhindurwa) muburyo bwa mobile hanyuma bigahinduka horizontal nkuko ubugari bwaboneka bwiyongera.
Imiyoboro ya navbar ifite ishingiro ntabwo ishyigikiwe.
Ibirimo byuzuye
Kubera ko Bootstrap itazi umwanya wibirimo muri navbar yawe ikeneye, urashobora guhura nibibazo birimo ibintu bipfunyitse kumurongo wa kabiri. Kugira ngo iki kibazo gikemuke, urashobora:
Mugabanye umubare cyangwa ubugari bwibintu bya navbar.
Hisha ibintu bimwe na bimwe bya navbar mubunini bwa ecran ukoresheje amasomo yingirakamaro .
Hindura ingingo aho navbar yawe ihinduranya hagati yaguye nuburyo butambitse. Hindura @grid-float-breakpoint
impinduka cyangwa ongeraho ikibazo cyawe cyitangazamakuru.
Irasaba plugin ya JavaScript
Niba JavaScript ihagaritswe kandi kureba ni bigufi bihagije kuburyo navbar isenyuka, ntibizashoboka kwagura navbar no kureba ibiri muri .navbar-collapse
.
Navbar isubiza isaba gusenyuka plugin kugirango ishyirwe muri verisiyo yawe ya Bootstrap.
Guhindura mobile mobile navbar yaguye
Navbar isenyuka muburyo bwa verisiyo igendanwa iyo ibona ari ndende kuruta @grid-float-breakpoint
, kandi ikaguka muri horizontal yayo itari mobile igendanwa iyo ibiboneka byibuze @grid-float-breakpoint
mubugari. Hindura iyi variable mumasoko make yo kugenzura mugihe navbar yaguye / yagutse. Agaciro gasanzwe ni 768px
(ecran "ntoya" cyangwa "tablet" ecran).
Kora ubwato buboneka
Wemeze gukoresha ikintu <nav>
cyangwa, niba ukoresheje ibintu rusange nka a <div>
, ongeramo a role="navigation"
kuri buri navbar kugirango ubigaragaze neza nkakarere k’ingenzi kubakoresha ikoranabuhanga rifasha.
<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>
Ishusho
Simbuza ikirango cya navbar nishusho yawe bwite uhinduranya inyandiko kuri an <img>
. Kubera ko .navbar-brand
Uwiteka afite padi nuburebure bwacyo, urashobora gukenera kurenga CSS bitewe nishusho yawe.
<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>
Shyira ibirimo muburyo .navbar-form
bukwiye kugirango uhuze neza kandi imyitwarire yaguye muburyo buboneye. Koresha uburyo bwo guhuza kugirango uhitemo aho ituye mubirimo navbar.
Nkumutwe hejuru, .navbar-form
ugabana byinshi muri code yawo .form-inline
ukoresheje mixin. Ifishi imwe nimwe igenzura, nkitsinda ryinjiza, irashobora gusaba ubugari buhamye kugirango yerekanwe neza muri navbar.
<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>
Ongeraho urwego .navbar-btn
kubintu <button>
bitaba muri a <form>
kugirango uhagarike hagati muri navbar.
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
Imikoreshereze yihariye
Nka buto isanzwe ya buto , irashobora .navbar-btn
gukoreshwa kubintu . Ariko, ntanubwo cyangwa ibyiciro bisanzwe byamasomo bigomba gukoreshwa kubintu biri imbere .<a>
<input>
.navbar-btn
<a>
.navbar-nav
Inyandiko
Gupfundikanya imirongo yinyandiko mubintu hamwe .navbar-text
, mubisanzwe kumurongo <p>
kugirango uyobore neza nibara.
<p class= "navbar-text" > Signed in as Mark Otto</p>
Imiyoboro itari nav
Kubantu mukoresheje amahuza asanzwe atari murwego rusanzwe rwo kugendana nogukoresha, koresha urwego .navbar-link
kugirango wongere amabara akwiye kubisanzwe nibisanzwe bya navbar.
<p class= "navbar-text navbar-right" > Signed in as <a href= "#" class= "navbar-link" > Mark Otto</a></p>
Guhuza ibice
.navbar-left
Huza nav ihuza, imiterere, buto, cyangwa inyandiko, ukoresheje .navbar-right
ibyiciro byingirakamaro. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe. Kurugero, guhuza nav ihuza, ubishyire muburyo butandukanye <ul>
hamwe nibikorwa byingirakamaro byashyizwe mu bikorwa.
Aya masomo ni mixin-ed verisiyo ya .pull-left
na .pull-right
, ariko zashyizwe mubibazo byibitangazamakuru kugirango byoroshye gukemura ibice bya navbar mubunini bwibikoresho.
Guhuza iburyo ibice byinshi
Navbars kuri ubu ifite aho igarukira hamwe .navbar-right
namasomo menshi. Kugirango ibirimo umwanya neza, dukoresha margin kubintu byanyuma .navbar-right
. Iyo hari ibintu byinshi ukoresheje urwo rwego, iyi marge ntabwo ikora nkuko byateganijwe.
Tuzabisubiramo mugihe dushobora kongera kwandika kiriya gice muri v4.
Bishyizwe hejuru
Ongeraho .navbar-fixed-top
kandi ushiremo .container
cyangwa cyangwa .container-fluid
hagati na pad navbar ibirimo.
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
Umubiri ukenewe
Navbar ihamye izarenga ibindi bikubiyemo, keretse niba wongeyeho padding
hejuru ya <body>
. Gerageza indangagaciro zawe cyangwa ukoreshe agace kacu hepfo. Impanuro: Mubisanzwe, navbar ni 50px hejuru.
body { padding-top : 70px ; }
Witondere gushyiramo ibi nyuma yibanze ya Bootstrap CSS.
Bishyizwe hasi
Ongeraho .navbar-fixed-bottom
kandi ushiremo .container
cyangwa cyangwa .container-fluid
hagati na pad navbar ibirimo.
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
Umubiri ukenewe
Navbar ihamye izarenga ibindi bikubiyemo, keretse niba wongeyeho padding
hepfo ya <body>
. Gerageza indangagaciro zawe cyangwa ukoreshe agace kacu hepfo. Impanuro: Mubisanzwe, navbar ni 50px hejuru.
body { padding-bottom : 70px ; }
Witondere gushyiramo ibi nyuma yibanze ya Bootstrap CSS.
Hejuru
Kora ubugari bwuzuye navbar izenguruka hamwe nurupapuro wongeyeho .navbar-static-top
kandi ushizemo a .container
cyangwa .container-fluid
kuri centre na pad navbar.
Bitandukanye .navbar-fixed-*
n'amasomo, ntukeneye guhindura padi iyo ari yo yose kuri body
.
<nav class= "navbar navbar-default navbar-static-top" >
<div class= "container" >
...
</div>
</nav>
Imiyoboro ihindagurika
Hindura isura ya navbar wongeyeho .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
Erekana urupapuro rwubu ruri murwego rwo kuyobora.
Abitandukanya bahita bongerwaho muri CSS binyuze :before
na content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
Tanga amahuza ya paji kurubuga rwawe cyangwa porogaramu hamwe nimpapuro nyinshi zo kugereranya, cyangwa ubundi buryo bworoshye bwa pager .
Kwiyoroshya byoroshye byahumetswe na Rdio, byiza kuri porogaramu n'ibisubizo by'ishakisha. Inzitizi nini iragoye kubura, byoroshye kugereranywa, kandi itanga ahantu hanini ho gukanda.
<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>
Abamugaye kandi bakora
Ihuza rirashobora guhinduka mubihe bitandukanye. Koresha .disabled
imiyoboro idahinduka no .active
kwerekana urupapuro rwubu.
<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>
Turagusaba ko wasimbuza inanga zikora cyangwa zamugaye kuri <span>
, cyangwa kureka inanga mugihe cyibihe byabanjirije / ubutaha, kugirango ukureho imikorere mugihe ugumanye uburyo bugenewe.
<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>
Ingano
Ibyiza binini cyangwa bito? Ongeraho .pagination-lg
cyangwa .pagination-sm
kubunini bwinyongera.
<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>
Byihuse byambere nibikurikira bihuza byoroshye pagination gushyira mubikorwa hamwe nurumuri nuburyo. Nibyiza kurubuga rworoshye nka blog cyangwa ibinyamakuru.
Urugero rusanzwe
Mburabuzi, pager hagati ihuza.
<nav aria-label= "..." >
<ul class= "pager" >
<li><a href= "#" > Previous</a></li>
<li><a href= "#" > Next</a></li>
</ul>
</nav>
Guhuza
Ubundi, urashobora guhuza buri murongo kumpande:
<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>
Leta ihitamo ubumuga
Ipaji ihuza kandi ikoresha icyiciro rusange .disabled
cyingirakamaro kuva kuri pagination.
<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>
Urugero
Urugero umutwe mushya
Urugero umutwe mushya
Urugero umutwe mushya
Urugero umutwe mushya
Urugero umutwe mushya
Urugero umutwe mushya
<h3> Example heading <span class= "label label-default" > New</span></h3>
Kuboneka bitandukanye
Ongeramo icyaricyo cyose cyavuzwe haruguru cyo guhindura ibyiciro kugirango uhindure isura yikirango.
Mburabuzi
Intsinzi Yibanze Amakuru Yumuburo
_
<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>
Ufite toni ya labels?
Gutanga ibibazo birashobora kuvuka mugihe ufite ibirango byinshi byumurongo mubikoresho bigufi, buri kimwe kirimo inline-block
ikintu cyacyo (nkigishushanyo). Inzira ikikije iyi ni gushiraho display: inline-block;
. Kubireba nurugero, reba # 13219 .
Byoroshye kwerekana ibintu bishya cyangwa bidasomwe wongeyeho <span class="badge">
ahuza, Bootstrap navs, nibindi byinshi.
<a href= "#" > Inbox <span class= "badge" > 42</span></a>
<button class= "btn btn-primary" type= "button" >
Messages <span class= "badge" > 4</span>
</button>
Kwikubita hasi
Mugihe nta kintu gishya cyangwa kidasomwe, badge izasenyuka gusa (binyuze kumutoranya wa CSS :empty
) mugihe nta kintu kirimo imbere.
Guhuza-mushakisha
Badges ntizishobora gusenyuka muri Internet Explorer 8 kuko ibuze inkunga ya:empty
kubatoranya.
Ihuza na leta ikora
Imyubakire yubatswe irimo gushyiramo badge muri reta ikora mubiyobora ibinini.
<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>
Ikintu cyoroshye, cyoroshye gishobora guhitamo kwagura ibintu byose kugirango werekane ibintu byingenzi kurubuga rwawe.
Mwaramutse, isi!
Nibintu byintwari byoroheje, byoroshye jumbotron-yuburyo bwo guhamagarira kwitondera cyane ibintu bigaragara cyangwa amakuru.
Wige byinshi
<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>
Gukora jumbotron ubugari bwuzuye, kandi nta mpande zegeranye, shyira hanze .container
ya s zose hanyuma wongere .container
imbere.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
Igikonoshwa cyoroheje h1
kugirango kibe umwanya ukwiye hamwe nigice cyibigize kurupapuro. Irashobora gukoresha h1
'i Mburabuzi small
Ikintu, Nka Ibindi Byinshi (hamwe n’inyongera).
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
Ongera sisitemu ya gride ya Bootstrap hamwe na thumbnail kugirango ugaragaze byoroshye gride yamashusho, videwo, inyandiko, nibindi byinshi.
Niba ushakisha Pinterest-yerekana kwerekana igikumwe cyuburebure butandukanye na / cyangwa ubugari, uzakenera gukoresha plugin-y-igice nka Masonry , Isotope , cyangwa Salvattore .
Urugero rusanzwe
Mburabuzi, Bootstrap's thumbnail yagenewe kwerekana amashusho ahujwe nibimenyetso bike bisabwa.
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
Ibirimo
Hamwe na bike byongeweho, birashoboka kongeramo ubwoko ubwo aribwo bwose bwa HTML nkimitwe, paragarafu, cyangwa buto muri thumbnail.
Ikimenyetso cya Thumbnail
Cras justo odio, dapibus ac facilisis muri, egestas eget quam. Donec id elit non mi porta gravida kuri eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Button Button
Ikimenyetso cya Thumbnail
Cras justo odio, dapibus ac facilisis muri, egestas eget quam. Donec id elit non mi porta gravida kuri eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Button Button
Ikimenyetso cya Thumbnail
Cras justo odio, dapibus ac facilisis muri, egestas eget quam. Donec id elit non mi porta gravida kuri eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Button Button
<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>
Tanga ibitekerezo byubutumwa bwibikorwa kubikorwa bisanzwe byabakoresha hamwe nubutumwa buboneka kandi bworoshye bwo kumenyesha.
Ingero
Kuzuza inyandiko iyariyo yose hamwe na buto yo kwirukana muburyo .alert
bumwe hamwe muribyiciro bine byerekeranye (urugero, .alert-success
) kubutumwa bwibanze bwo kumenyesha.
Nta cyiciro gisanzwe
Imenyesha ntirigira ibyiciro bisanzwe, gusa shingiro nicyiciro cyo guhindura. Mburabuzi imvi zidasanzwe ntabwo zumvikana cyane, urasabwa rero kwerekana ubwoko ukoresheje icyiciro gikubiyemo. Hitamo kubitsinzi, amakuru, kuburira, cyangwa akaga.
Muraho neza! Urasoma neza ubu butumwa bwingenzi bwo kumenyesha.
Umutwe! Uku kumenyesha gukeneye kwitabwaho, ariko ntabwo ari ngombwa cyane.
Iburira! Byiza kwisuzumisha, ntabwo ureba neza.
Yoo! Hindura ibintu bike hanyuma ugerageze kongera gutanga.
<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>
Kumenyesha
Wubake kubimenyesha byose wongeyeho kubushake .alert-dismissible
no gufunga buto.
×
Iburira! Byiza kwisuzumisha, ntabwo ureba neza.
<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>
Ihuza mubimenyesha
Koresha urwego .alert-link
rwingirakamaro kugirango utange byihuse guhuza amabara muburyo ubwo aribwo bwose.
<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>
Tanga ibitekerezo bigezweho kubijyanye niterambere ryakazi cyangwa ibikorwa hamwe niterambere ryoroshye ariko ryoroshye.
Guhuza-mushakisha
Utubari twiterambere dukoresha inzibacyuho ya CSS3 na animasiyo kugirango tugere ku ngaruka zimwe na zimwe. Ibiranga ntibishyigikiwe muri Internet Explorer 9 no munsi cyangwa verisiyo ishaje ya Firefox. Opera 12 ntabwo ishigikira animasiyo.
Politiki yumutekano yibirimo (CSP) guhuza
Niba urubuga rwawe rufite Politiki yumutekano (CSP) itabemerera style-src 'unsafe-inline'
, ntushobora gukoresha style
ibiranga umurongo kugirango ushireho ubugari bwiterambere nkuko bigaragara murugero rwacu hepfo. Ubundi buryo bwo gushiraho ubugari bujyanye na CSP zikomeye zirimo gukoresha JavaScript yihariye (ishyiraho element.style.width
) cyangwa gukoresha amasomo yihariye ya CSS.
Urugero rwibanze
Ibisanzwe byiterambere.
<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>
Na label
Kuraho icyiciro <span>
hamwe .sr-only
murwego rwo gutera imbere kugirango werekane ijanisha rigaragara.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
60%
</div>
</div>
Kugirango umenye neza ko ikirango cyanditse kiguma gisomeka nubwo kiri hasi yijana, tekereza kongeramo a min-width
kumurongo witerambere.
<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>
Ibindi bisobanuro
Utubari twiterambere dukoresha bimwe mubuto bumwe no kumenyesha ibyiciro kuburyo buhoraho.
<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>
Yanditse
Koresha icyiciro kugirango ukore ingaruka. Ntiboneka muri IE9 no hepfo.
<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
Ongeraho .active
kugirango .progress-bar-striped
ushushanye imirongo iburyo cyangwa ibumoso. Ntiboneka muri IE9 no hepfo.
<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>
Bishyizwe hamwe
Shira utubari twinshi murimwe .progress
kugirango ubishyire hamwe.
35% Byuzuye (intsinzi)
20% Byuzuye (kuburira)
10% Byuzuye (akaga)
<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>
Uburyo bukuramo ibintu byubaka ubwoko butandukanye bwibigize (nkibitekerezo bya blog, Tweets, nibindi) biranga ishusho ibumoso cyangwa iburyo-ihuza ishusho hamwe nibirimo.
Itangazamakuru risanzwe ryerekana ikintu cyitangazamakuru (amashusho, videwo, amajwi) ibumoso cyangwa iburyo bwibice.
<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>
Amasomo .pull-left
kandi .pull-right
nayo arahari kandi mbere yakoreshejwe nkigice cyitangazamakuru, ariko arateshwa agaciro kugirango akoreshwe guhera v3.3.0. Bingana hafi .media-left
na .media-right
, usibye ibyo .media-right
bigomba gushyirwa nyuma ya .media-body
muri html.
Amashusho cyangwa ibindi bitangazamakuru birashobora guhuzwa hejuru, hagati, cyangwa hepfo. Mburabuzi ni hejuru.
<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>
Hamwe na marike yinyongera, urashobora gukoresha itangazamakuru imbere murutonde (ingirakamaro kubitekerezo cyangwa ibitekerezo byurutonde).
<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>
Amatsinda yurutonde nibintu byoroshye kandi bikomeye kugirango yerekane gusa urutonde rworoshye rwibintu, ariko nibintu bigoye hamwe nibirimo byihariye.
Urugero rwibanze
Urutonde rwibanze rwitsinda ni urutonde rudafite urutonde rwibintu, hamwe nibyiciro bikwiye. Wiyubakire hamwe namahitamo akurikira, cyangwa CSS yawe nkuko bikenewe.
Cras justo odio
Dapibus ac facilisis muri
Morbi leo risus
Porta ac consectetur ac
Vestibulum kuri 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>
Ikarita
Ongeraho ibirango kubintu byose byurutonde rwitsinda kandi bizahita bihagarara iburyo.
14 Cras justo odio
2 Dapibus ac facilisis muri
1 Morbi leo risus
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
Ibintu bihujwe
Huza urutonde rwibintu ukoresheje ibimenyetso bya ankeri aho gukoresha urutonde (bivuze kandi umubyeyi <div>
aho kuba an <ul>
). Ntibikenewe kubabyeyi kugiti cyabo hafi ya buri kintu.
<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>
Andika ibintu mumatsinda bishobora kuba buto aho kuba urutonde (bivuze kandi umubyeyi <div>
aho kuba an <ul>
). Ntibikenewe kubabyeyi kugiti cyabo hafi ya buri kintu. Ntukoreshe .btn
amasomo asanzwe hano.
Cras justo odio
Dapibus ac facilisis muri
Morbi leo risus
Porta ac consectetur ac
Vestibulum kuri 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>
Ibintu byahagaritswe
Ongeraho .disabled
kumurongo .list-group-item
kugirango ugaragare ko wamugaye.
<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>
Amasomo ajyanye
Koresha amasomo ajyanye nuburyo bwo gutondekanya ibintu, bisanzwe cyangwa bihujwe. Harimo na .active
leta.
Dapibus ac facilisis muri
Cras bicara amet nibh libero
Porta ac consectetur ac
Vestibulum kuri 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>
Ibirimo
Ongeraho hafi HTML yose imbere, ndetse no kumurwi uhuza urutonde nkurwo hepfo.
<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>
Nubwo atari ngombwa buri gihe, rimwe na rimwe ugomba gushyira DOM yawe mu gasanduku. Kuri ibyo bihe, gerageza ibice bigize akanama.
Urugero rwibanze
Mburabuzi, ibyakozwe byose .panel
ni ugukoresha imipaka shingiro na padding kugirango bikubiyemo ibintu bimwe.
<div class= "panel panel-default" >
<div class= "panel-body" >
Basic panel example
</div>
</div>
Ikibaho gifite umutwe
Byoroshye kongeramo ikintu cyumutwe kumwanya wawe hamwe .panel-heading
. Urashobora kandi gushiramo icyaricyo cyose <h1>
- <h6>
hamwe .panel-title
nishuri ryo kongeramo imitwe yabanjirije. Nyamara, Imyandikire ingano ya <h1>
- <h6>
irengerwa na .panel-heading
.
Kugirango uhuze neza amabara, menya neza gushyira amahuza mumutwe imbere .panel-title
.
Umutwe wumutwe udafite umutwe
Ibirimo
<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>
Gupfunyika buto cyangwa inyandiko ya kabiri muri .panel-footer
. Menya neza ko ikibaho cyumurage kitaragwa amabara nimbibi mugihe ukoresheje itandukaniro ryimiterere nkuko bitagenewe kuba imbere.
<div class= "panel panel-default" >
<div class= "panel-body" >
Panel content
</div>
<div class= "panel-footer" > Panel footer</div>
</div>
Ibindi bisobanuro
Kimwe nibindi bice, byoroshye gukora akanama karushijeho gusobanura kumurongo runaka wongeyeho icyaricyo cyose cyamasomo ya leta.
<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>
Hamwe nameza
Ongeraho icyaricyo cyose kitagira umupaka .table
muburyo bwo gushushanya. Niba hari a .panel-body
, twongeyeho umupaka wongeyeho kumeza yo gutandukana.
Umutwe
Ibice bimwe bidasanzwe hano. 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 dolor id nibh ultricies vehicula ut id elit.
#
Izina
Izina ryanyuma
Izina ryukoresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@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>
Niba ntamwanya uhari, ibice byimuka biva kumutwe ujya kumeza nta nkomyi.
Umutwe
#
Izina
Izina ryanyuma
Izina ryukoresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
Hamwe nitsinda ryamatsinda
Byoroshe gushyiramo ubugari bwuzuye urutonde mumatsinda yose.
Umutwe
Ibice bimwe bidasanzwe hano. 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 dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis muri
Morbi leo risus
Porta ac consectetur ac
Vestibulum kuri 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>
Emerera mushakisha kumenya ibipimo bya videwo cyangwa slideshow ukurikije ubugari bwibihagaritse birimo gukora igipimo cyimbere kizapima neza igikoresho icyo aricyo cyose.
Amategeko akoreshwa muburyo butaziguye <iframe>
,,, nibintu <embed>
; guhitamo koresha ibyiciro byabakomokaho mugihe ushaka guhuza styling kubindi biranga.<video>
<object>
.embed-responsive-item
Impanuro! Ntugomba gushyiramo frameborder="0"
muri <iframe>
s nkuko tubirengaho kubwawe.
<!-- 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>
Mburabuzi neza
Koresha neza nkibintu byoroshye kubintu kugirango utange inset.
<div class= "well" > ...</div>
Amasomo atabishaka
Igenzura padding hamwe nu mpande zegeranye hamwe nibyiciro bibiri byahinduwe.
Reba, ndi mu iriba rinini!
<div class= "well well-lg" > ...</div>
<div class= "well well-sm" > ...</div>