Mga bahagi
Mahigit sa isang dosenang reusable na bahagi na binuo upang magbigay ng iconography, dropdown, input group, navigation, alerto, at marami pang iba.
Mahigit sa isang dosenang reusable na bahagi na binuo upang magbigay ng iconography, dropdown, input group, navigation, alerto, at marami pang iba.
May kasamang mahigit 250 glyph sa format ng font mula sa Glyphicon Halflings set. Karaniwang hindi available nang libre ang Glyphicons Halflings, ngunit ginawa silang available ng kanilang tagalikha para sa Bootstrap nang walang bayad. Bilang pasasalamat, hinihiling lang namin na magsama ka ng link pabalik sa Glyphicons hangga't maaari.
Para sa mga dahilan ng pagganap, ang lahat ng mga icon ay nangangailangan ng isang batayang klase at indibidwal na klase ng icon. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan. Tiyaking mag-iwan ng espasyo sa pagitan ng icon at teksto para sa wastong padding.
Ang mga klase ng icon ay hindi maaaring direktang pagsamahin sa iba pang mga bahagi. Hindi sila dapat gamitin kasama ng iba pang mga klase sa parehong elemento. Sa halip, magdagdag ng nested <span>
at ilapat ang mga klase ng icon sa <span>
.
Ang mga klase ng icon ay dapat lamang gamitin sa mga elemento na walang nilalamang teksto at walang mga elemento ng bata.
Ipinapalagay ng Bootstrap na ang mga file ng font ng icon ay matatagpuan sa ../fonts/
direktoryo, na nauugnay sa mga pinagsama-samang CSS file. Ang paglipat o pagpapalit ng pangalan sa mga font file ay nangangahulugan ng pag-update ng CSS sa isa sa tatlong paraan:
@icon-font-path
at/o @icon-font-name
mga variable sa pinagmulan Mas kaunting mga file.url()
landas sa pinagsama-samang CSS.Gumamit ng anumang opsyon na pinakaangkop sa iyong partikular na setup ng development.
Ang mga modernong bersyon ng mga pantulong na teknolohiya ay mag-aanunsyo ng nilalamang nabuo ng CSS, pati na rin ang mga partikular na Unicode na character. Upang maiwasan ang hindi sinasadya at nakakalito na output sa mga screen reader (lalo na kapag ang mga icon ay ginagamit lamang para sa dekorasyon), itinatago namin ang mga ito gamit ang aria-hidden="true"
katangian.
Kung gumagamit ka ng icon para ipahiwatig ang kahulugan (sa halip na bilang isang elementong pampalamuti lamang), tiyaking ang kahulugan na ito ay ipinaparating din sa mga pantulong na teknolohiya – halimbawa, magsama ng karagdagang nilalaman, na biswal na nakatago sa .sr-only
klase.
Kung lumilikha ka ng mga kontrol na walang ibang text (tulad ng <button>
isang icon na naglalaman lamang), dapat kang palaging magbigay ng alternatibong nilalaman upang matukoy ang layunin ng kontrol, upang magkaroon ito ng kahulugan sa mga gumagamit ng mga pantulong na teknolohiya. Sa kasong ito, maaari kang magdagdag aria-label
ng katangian sa mismong kontrol.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Gamitin ang mga ito sa mga button, mga grupo ng button para sa isang toolbar, navigation, o mga naka-prepend na form input.
<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>
Isang icon na ginagamit sa isang alerto upang ipahiwatig na ito ay isang mensahe ng error, na may karagdagang .sr-only
teksto upang ihatid ang pahiwatig na ito sa mga gumagamit ng mga pantulong na teknolohiya.
<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, contextual na menu para sa pagpapakita ng mga listahan ng mga link. Ginawang interactive gamit ang dropdown na JavaScript plugin .
I-wrap ang trigger ng dropdown at ang dropdown na menu sa loob ng .dropdown
, o isa pang elementong nagdedeklara ng position: relative;
. Pagkatapos ay idagdag ang HTML ng 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>
Maaaring baguhin ang mga dropdown na menu upang palawakin pataas (sa halip na pababa) sa pamamagitan ng pagdaragdag .dropup
sa parent.
<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>
Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Idagdag.dropdown-menu-right
sa isang .dropdown-menu
i-align sa kanan ang dropdown na menu.
Ang mga dropdown ay awtomatikong nakaposisyon sa pamamagitan ng CSS sa loob ng normal na daloy ng dokumento. Nangangahulugan ito na ang mga dropdown ay maaaring i-crop ng mga magulang na may ilang partikular na overflow
katangian o lumabas sa labas ng mga hangganan ng viewport. Tugunan ang mga isyung ito nang mag-isa kapag lumitaw ang mga ito.
.pull-right
pagkakahanaySimula sa v3.1.0, hindi na namin ginagamit ang mga .pull-right
dropdown na menu. Upang i-right-align ang isang menu, gamitin ang .dropdown-menu-right
. Ang mga bahagi ng nav na nakahanay sa kanan sa navbar ay gumagamit ng mixin na bersyon ng klase na ito upang awtomatikong i-align ang menu. Upang i-override ito, gamitin ang .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Magdagdag ng divider sa hiwalay na serye ng mga link sa isang dropdown na menu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Idagdag .disabled
sa a <li>
sa dropdown para i-disable ang link.
<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>
Pagsama-samahin ang isang serye ng mga pindutan sa isang linya kasama ang pangkat ng pindutan. Idagdag sa opsyonal na JavaScript radio at pag-uugali sa istilo ng checkbox gamit ang aming mga button na plugin .
Kapag gumagamit ng mga tooltip o popover sa mga elemento sa loob ng .btn-group
, kakailanganin mong tukuyin ang opsyon container: 'body'
upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).
role
at magbigay ng labelUpang maiparating ng mga pantulong na teknolohiya - tulad ng mga screen reader - na nakagrupo ang isang serye ng mga button, role
kailangang magbigay ng naaangkop na katangian. Para sa mga pangkat ng button, ito ay magiging role="group"
, habang ang mga toolbar ay dapat may role="toolbar"
.
Ang isang pagbubukod ay mga pangkat na naglalaman lamang ng iisang kontrol (halimbawa, ang mga pangkat ng justified na button na may mga <button>
elemento) o isang dropdown.
Bilang karagdagan, ang mga pangkat at toolbar ay dapat na bigyan ng isang tahasang label, dahil karamihan sa mga teknolohiyang pantulong ay kung hindi man ay hindi ipahayag ang mga ito, sa kabila ng pagkakaroon ng tamang role
katangian. Sa mga halimbawang ibinigay dito, ginagamit namin ang aria-label
, ngunit magagamit din ang mga alternatibo tulad ng aria-labelledby
.
I-wrap ang isang serye ng mga button na may .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>
Pagsamahin ang mga set ng sa <div class="btn-group">
isang <div class="btn-toolbar">
para sa mas kumplikadong mga bahagi.
<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>
Sa halip na ilapat ang mga klase sa pag-size ng button sa bawat button sa isang grupo, idagdag lang .btn-group-*
sa bawat isa .btn-group
, kabilang ang kapag naglalagay ng maraming grupo.
<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>
Maglagay ng isang sa .btn-group
loob ng isa pa .btn-group
kapag gusto mo ang mga dropdown na menu na may halong serye ng mga button.
<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>
Gawing patayong nakasalansan ang isang hanay ng mga button sa halip na pahalang. Hindi sinusuportahan dito ang mga split button na dropdown.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Gumawa ng isang pangkat ng mga pindutan na mag-abot sa pantay na laki upang sumasaklaw sa buong lapad ng magulang nito. Gumagana rin sa mga dropdown ng button sa loob ng pangkat ng button.
Dahil sa partikular na HTML at CSS na ginamit upang bigyang-katwiran ang mga pindutan (ibig sabihin display: table-cell
), ang mga hangganan sa pagitan ng mga ito ay nadoble. Sa mga regular na grupo ng button, margin-left: -1px
ay ginagamit upang i-stack ang mga hangganan sa halip na alisin ang mga ito. Gayunpaman, margin
hindi gumagana sa display: table-cell
. Bilang resulta, depende sa iyong mga pagpapasadya sa Bootstrap, maaari mong hilingin na alisin o muling kulayan ang mga hangganan.
Ang Internet Explorer 8 ay hindi nagre-render ng mga hangganan sa mga button sa isang justified na pangkat ng button, ito man ay naka-on <a>
o mga <button>
elemento. Upang makayanan iyon, balutin ang bawat pindutan sa isa pa.btn-group
.
Tingnan ang #12476 para sa karagdagang impormasyon.
<a>
mga elementoI-wrap lang ang isang serye ng mga .btn
s sa .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Kung ang mga <a>
elemento ay ginagamit upang kumilos bilang mga pindutan - na nagti-trigger ng in-page na functionality, sa halip na mag-navigate sa isa pang dokumento o seksyon sa loob ng kasalukuyang pahina - dapat din silang bigyan ng naaangkop na role="button"
.
<button>
mga elementoUpang gumamit ng mga makatwirang pangkat ng button na may <button>
mga elemento, dapat mong balutin ang bawat button sa isang pangkat ng button . Karamihan sa mga browser ay hindi maayos na inilalapat ang aming CSS para sa pagbibigay-katwiran sa mga <button>
elemento, ngunit dahil sinusuportahan namin ang mga dropdown ng button, magagawa namin iyon.
<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>
Gumamit ng anumang button upang mag-trigger ng dropdown na menu sa pamamagitan ng paglalagay nito sa loob ng isang .btn-group
at pagbibigay ng wastong markup ng menu.
Ang mga dropdown ng button ay nangangailangan ng dropdown na plugin na isama sa iyong bersyon ng Bootstrap.
Gawing dropdown toggle ang isang button na may ilang pangunahing pagbabago sa markup.
<!-- 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>
Katulad nito, lumikha ng mga dropdown ng split button na may parehong mga pagbabago sa markup, gamit lamang ang isang hiwalay na button.
<!-- 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>
Gumagana ang mga dropdown ng button sa mga button ng lahat ng laki.
<!-- 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>
I-trigger ang mga dropdown na menu sa itaas ng mga elemento sa pamamagitan ng pagdaragdag .dropup
sa parent.
<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>
Palawakin ang mga kontrol sa form sa pamamagitan ng pagdaragdag ng text o mga button bago, pagkatapos, o sa magkabilang panig ng anumang text-based <input>
. Gumamit ng .input-group
isang .input-group-addon
o .input-group-btn
para i-prepend o idagdag ang mga elemento sa isang solong .form-control
.
<input>
lamangIwasang gumamit <select>
ng mga elemento dito dahil hindi sila ganap na mai-istilo sa mga browser ng WebKit.
Iwasan ang paggamit <textarea>
ng mga elemento dito dahil ang kanilang rows
katangian ay hindi igagalang sa ilang mga kaso.
Kapag gumagamit ng mga tooltip o popovers sa mga elemento sa loob ng isang .input-group
, kakailanganin mong tukuyin ang opsyon container: 'body'
upang maiwasan ang mga hindi gustong side effect (tulad ng lumalawak na elemento at/o nawawala ang mga bilugan nitong sulok kapag na-trigger ang tooltip o popover).
Huwag direktang paghaluin ang mga pangkat ng form o grid column sa mga pangkat ng input. Sa halip, ilagay ang pangkat ng input sa loob ng pangkat ng form o elementong nauugnay sa grid.
Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga input group na ito, tiyaking ang anumang karagdagang label o functionality ay naihatid sa mga pantulong na teknolohiya.
Ang eksaktong pamamaraan na gagamitin (nakikitang mga <label>
elemento, <label>
mga elementong nakatago gamit ang .sr-only
klase, o paggamit ng aria-label
, aria-labelledby
, aria-describedby
, title
o placeholder
attribute) at kung anong karagdagang impormasyon ang kailangang maihatid ay mag-iiba depende sa eksaktong uri ng interface widget na iyong ipinapatupad. Ang mga halimbawa sa seksyong ito ay nagbibigay ng ilang iminungkahing paraan na partikular sa kaso.
Maglagay ng isang add-on o button sa magkabilang gilid ng isang input. Maaari mo ring ilagay ang isa sa magkabilang panig ng isang input.
Hindi namin sinusuportahan ang maramihang mga add-on ( .input-group-addon
o .input-group-btn
) sa iisang panig.
Hindi namin sinusuportahan ang maramihang mga form-control sa iisang input group.
<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>
Idagdag ang mga kamag-anak na klase ng pagpapalaki ng form sa .input-group
sarili nito at ang mga nilalaman sa loob ay awtomatikong magre-resize—hindi na kailangang ulitin ang mga klase sa laki ng control ng form sa bawat elemento.
<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>
Ilagay ang anumang checkbox o opsyon sa radyo sa loob ng addon ng isang input group sa halip na text.
<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 -->
Ang mga pindutan sa mga pangkat ng pag-input ay medyo naiiba at nangangailangan ng isang dagdag na antas ng nesting. Sa halip na .input-group-addon
, kakailanganin mong gamitin .input-group-btn
upang i-wrap ang mga button. Kinakailangan ito dahil sa mga default na istilo ng browser na hindi ma-override.
<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>
Bagama't maaari ka lamang magkaroon ng isang add-on sa bawat panig, maaari kang magkaroon ng maraming button sa loob ng iisang .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>
Ang mga Nav na available sa Bootstrap ay may nakabahaging markup, simula sa batayang .nav
klase, gayundin sa mga nakabahaging estado. Magpalit ng mga klase ng modifier upang lumipat sa pagitan ng bawat istilo.
Tandaan na ang .nav-tabs
klase ay nangangailangan ng .nav
batayang klase.
<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>
Kunin ang parehong HTML, ngunit gamitin .nav-pills
sa halip ang:
<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>
Ang mga tabletas ay patayong nasasalansan din. Idagdag mo lang .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Madaling gumawa ng mga tab o tableta na katumbas ng lapad ng kanilang magulang sa mga screen na mas malawak kaysa sa 768px na may .nav-justified
. Sa mas maliliit na screen, nakasalansan ang mga nav link.
Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Para sa anumang bahagi ng nav (mga tab o tableta), magdagdag .disabled
para sa mga gray na link at walang hover effect .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Magdagdag ng mga dropdown na menu na may kaunting dagdag na HTML at ang dropdown na JavaScript plugin .
<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>
<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>
Ang mga Navbar ay tumutugon na mga bahagi ng meta na nagsisilbing mga header ng nabigasyon para sa iyong application o site. Nagsisimula silang mag-collapse (at maaaring i-toggle) sa mga mobile view at maging pahalang habang tumataas ang lapad ng available na viewport.
Kasalukuyang hindi sinusuportahan ang mga justified navbar nav link.
<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>
Palitan ang navbar brand ng sarili mong larawan sa pamamagitan ng pagpapalit ng text para sa isang <img>
. Dahil ang .navbar-brand
may sariling padding at taas, maaaring kailanganin mong i-override ang ilang CSS depende sa iyong larawan.
<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>
Ilagay ang nilalaman ng form sa loob .navbar-form
para sa tamang patayong pagkakahanay at pag-collapse na gawi sa makitid na viewport. Gamitin ang mga opsyon sa pag-align upang magpasya kung saan ito nakatira sa loob ng nilalaman ng navbar.
Bilang isang ulo, .navbar-form
ibinabahagi ang karamihan sa code nito sa .form-inline
pamamagitan ng mixin. Ang ilang mga kontrol sa form, tulad ng mga pangkat ng pag-input, ay maaaring mangailangan ng mga nakapirming lapad upang maipakita nang maayos sa loob ng isang 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>
Idagdag ang .navbar-btn
klase sa mga <button>
elementong hindi naninirahan sa isang <form>
upang patayong isentro ang mga ito sa navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
I-wrap ang mga string ng text sa isang elemento na may .navbar-text
, kadalasan sa isang <p>
tag para sa wastong pangunguna at kulay.
<p class="navbar-text">Signed in as Mark Otto</p>
Para sa mga taong gumagamit ng mga karaniwang link na wala sa regular na bahagi ng navigation ng navbar, gamitin ang .navbar-link
klase upang magdagdag ng mga wastong kulay para sa default at inverse na mga opsyon sa navbar.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
I-align ang mga nav link, form, button, o text, gamit ang .navbar-left
o .navbar-right
utility classes. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon. Halimbawa, upang ihanay ang mga link sa nav, ilagay ang mga ito sa isang hiwalay <ul>
na may naaangkop na klase ng utility.
Ang mga klase na ito ay mga mixin-ed na bersyon ng .pull-left
at .pull-right
, ngunit saklaw ang mga ito sa mga query sa media para sa mas madaling pangangasiwa ng mga bahagi ng navbar sa mga laki ng device.
Magdagdag .navbar-fixed-top
at magsama ng nilalaman ng .container
o .container-fluid
sa gitna at pad navbar.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Magdagdag .navbar-fixed-bottom
at magsama ng nilalaman ng .container
o .container-fluid
sa gitna at pad navbar.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Gumawa ng full-width navbar na nag-i-scroll palayo sa page sa pamamagitan ng pagdaragdag .navbar-static-top
at pagsasama ng nilalaman ng .container
o .container-fluid
sa gitna at pad navbar.
Hindi tulad ng mga .navbar-fixed-*
klase, hindi mo kailangang baguhin ang anumang padding sa body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Baguhin ang hitsura ng navbar sa pamamagitan ng pagdaragdag ng .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Ipahiwatig ang lokasyon ng kasalukuyang pahina sa loob ng isang hierarchy sa pag-navigate.
Awtomatikong idinaragdag ang mga separator sa CSS sa pamamagitan ng :before
at content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Magbigay ng mga link ng pagination para sa iyong site o app gamit ang bahagi ng pagination ng maraming pahina, o ang mas simpleng alternatibong pager .
Simpleng pagination na inspirasyon ng Rdio, mahusay para sa mga app at resulta ng paghahanap. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.
<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>
Ang bahagi ng pagination ay dapat na nakabalot sa isang <nav>
elemento upang matukoy ito bilang isang seksyon ng nabigasyon para sa mga screen reader at iba pang mga pantulong na teknolohiya. Bilang karagdagan, dahil ang isang pahina ay malamang na mayroon nang higit sa isang seksyon ng nabigasyon (tulad ng pangunahing nabigasyon sa header, o isang sidebar navigation), ipinapayong magbigay ng isang mapaglarawang aria-label
kung <nav>
saan sumasalamin sa layunin nito. Halimbawa, kung ang bahagi ng pagination ay ginagamit upang mag-navigate sa pagitan ng isang hanay ng mga resulta ng paghahanap, ang isang naaangkop na label ay maaaring aria-label="Search results pages"
.
Nako-customize ang mga link para sa iba't ibang pagkakataon. Gamitin .disabled
para sa mga hindi naki-click na link at .active
upang ipahiwatig ang kasalukuyang pahina.
<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>
Inirerekomenda namin na magpalit ka ng aktibo o hindi pinaganang mga anchor para sa <span>
, o alisin ang anchor sa kaso ng nauna/susunod na mga arrow, upang alisin ang pag-andar ng pag-click habang pinapanatili ang mga nilalayong istilo.
<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>
Gusto mo ba ng mas malaki o mas maliit na pagination? Magdagdag .pagination-lg
o .pagination-sm
para sa mga karagdagang laki.
<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>
Mabilis na nakaraan at susunod na mga link para sa mga simpleng pagpapatupad ng pagination na may magaan na markup at mga istilo. Ito ay mahusay para sa mga simpleng site tulad ng mga blog o magazine.
Bilang default, ang pager ay nakasentro sa mga link.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Bilang kahalili, maaari mong ihanay ang bawat link sa mga gilid:
<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>
Ginagamit din ng mga link ng pager ang pangkalahatang .disabled
klase ng utility mula sa 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>
<h3>Example heading <span class="label label-default">New</span></h3>
Magdagdag ng alinman sa mga nabanggit na klase ng modifier sa ibaba upang baguhin ang hitsura ng isang label.
<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>
Maaaring lumitaw ang mga problema sa pag-render kapag mayroon kang dose-dosenang mga inline na label sa loob ng isang makitid na lalagyan, bawat isa ay naglalaman ng sarili nitong inline-block
elemento (tulad ng isang icon). Ang paraan sa paligid na ito ay setting display: inline-block;
. Para sa konteksto at isang halimbawa, tingnan ang #13219 .
Madaling i-highlight ang mga bago o hindi pa nababasang mga item sa pamamagitan ng pagdaragdag ng <span class="badge">
sa mga link, Bootstrap navs, at higit pa.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Kapag walang bago o hindi pa nababasang mga item, babagsak lang ang mga badge (sa pamamagitan ng :empty
tagapili ng CSS) kung walang nilalamang umiiral sa loob.
Hindi magko-collapse ang mga badge sa Internet Explorer 8 dahil kulang ito ng suporta para sa :empty
selector.
Kasama ang mga built-in na istilo para sa paglalagay ng mga badge sa mga aktibong estado sa mga nabigasyon ng tableta.
<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>
Isang magaan, flexible na bahagi na maaaring opsyonal na mapalawak ang buong viewport upang maipakita ang pangunahing nilalaman sa iyong site.
Ito ay isang simpleng yunit ng bayani, isang simpleng sangkap na istilo ng jumbotron para sa pagtawag ng karagdagang atensyon sa itinatampok na nilalaman o impormasyon.
<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>
Upang gawing buong lapad ang jumbotron, at walang mga bilugan na sulok, ilagay ito sa labas ng lahat .container
ng s at sa halip ay magdagdag ng .container
loob.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Isang simpleng shell para sa isang h1
naaangkop na espasyo at i-segment ang mga seksyon ng nilalaman sa isang pahina. Maaari nitong gamitin ang h1
default small
na elemento ng 's, pati na rin ang karamihan sa iba pang mga bahagi (na may mga karagdagang istilo).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Palawakin ang grid system ng Bootstrap gamit ang thumbnail component para madaling magpakita ng mga grid ng mga larawan, video, text, at higit pa.
Kung naghahanap ka ng mala- Pinterest na presentasyon ng mga thumbnail na may iba't ibang taas at/o lapad, kakailanganin mong gumamit ng third-party na plugin gaya ng Masonry , Isotope , o Salvattore .
Bilang default, ang mga thumbnail ng Bootstrap ay idinisenyo upang ipakita ang mga naka-link na larawan na may kaunting kinakailangang markup.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Sa kaunting dagdag na markup, posibleng magdagdag ng anumang uri ng nilalamang HTML tulad ng mga heading, talata, o mga button sa mga thumbnail.
<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>
Magbigay ng mga mensahe ng feedback ayon sa konteksto para sa mga karaniwang pagkilos ng user na may kakaunting available at flexible na mensahe ng alerto.
I-wrap ang anumang text at isang opsyonal na dismiss button .alert
at isa sa apat na contextual classes (hal, .alert-success
) para sa mga basic alert messages.
Ang mga alerto ay walang mga default na klase, tanging mga base at modifier na klase lamang. Ang isang default na gray na alerto ay hindi masyadong makabuluhan, kaya kailangan mong tumukoy ng isang uri sa pamamagitan ng contextual class. Pumili mula sa tagumpay, impormasyon, babala, o panganib.
<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>
Bumuo sa anumang alerto sa pamamagitan ng pagdaragdag ng opsyonal .alert-dismissible
at close na button.
Para sa ganap na paggana, mga natatanggal na alerto, dapat mong gamitin ang alerto JavaScript plugin .
<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>
Tiyaking gamitin ang <button>
elementong may data-dismiss="alert"
katangian ng data.
Gamitin ang .alert-link
utility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.
<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>
Magbigay ng up-to-date na feedback sa pag-usad ng isang workflow o aksyon na may simple ngunit flexible na progress bar.
Gumagamit ang mga progress bar ng CSS3 na mga transition at animation upang makamit ang ilan sa kanilang mga epekto. Ang mga tampok na ito ay hindi suportado sa Internet Explorer 9 at mas mababa o mas lumang mga bersyon ng Firefox. Hindi sinusuportahan ng Opera 12 ang mga animation.
Kung ang iyong website ay may Content Security Policy (CSP) na hindi pinapayagan ang style-src 'unsafe-inline'
, hindi mo magagamit ang mga inline style
na katangian upang magtakda ng mga lapad ng progress bar gaya ng ipinapakita sa aming mga halimbawa sa ibaba. Kasama sa mga alternatibong paraan para sa pagtatakda ng mga lapad na katugma sa mga mahigpit na CSP ang paggamit ng kaunting custom na JavaScript (na nagtatakda element.style.width
) o paggamit ng mga custom na klase ng CSS.
Default na 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>
Alisin ang <span>
with .sr-only
class mula sa progress bar para magpakita ng nakikitang porsyento.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Upang matiyak na ang teksto ng label ay mananatiling nababasa kahit na sa mababang porsyento, isaalang-alang ang pagdaragdag ng a min-width
sa progress 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>
Gumagamit ang mga progress bar ng ilan sa parehong button at mga alertong klase para sa mga pare-parehong istilo.
<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>
Gumagamit ng gradient para gumawa ng striped effect. Hindi available sa IE9 at sa ibaba.
<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>
Idagdag .active
sa .progress-bar-striped
upang i-animate ang mga guhit mula kanan pakaliwa. Hindi available sa IE9 at sa ibaba.
<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>
Maglagay ng maramihang mga bar sa pareho .progress
upang i-stack ang mga ito.
<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>
Mga abstract na istilo ng object para sa pagbuo ng iba't ibang uri ng mga bahagi (tulad ng mga komento sa blog, Tweet, atbp) na nagtatampok ng kaliwa o kanang-align na larawan kasama ng textual na nilalaman.
Ang default na media ay nagpapakita ng isang media object (mga imahe, video, audio) sa kaliwa o kanan ng isang block ng nilalaman.
<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>
Ang mga klase .pull-left
at .pull-right
mayroon ding at dati nang ginamit bilang bahagi ng bahagi ng media, ngunit hindi na ginagamit para sa paggamit na iyon simula sa v3.3.0. Ang mga ito ay humigit-kumulang katumbas ng .media-left
at .media-right
, maliban na .media-right
dapat ilagay pagkatapos ng .media-body
sa html.
Ang mga larawan o iba pang media ay maaaring ihanay sa itaas, gitna, o ibaba. Ang default ay nakahanay sa itaas.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis sa faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<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>
Sa kaunting dagdag na markup, maaari mong gamitin ang media sa loob ng listahan (kapaki-pakinabang para sa mga thread ng komento o listahan ng mga artikulo).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<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>
Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita hindi lamang ng mga simpleng listahan ng mga elemento, kundi ng mga kumplikadong may custom na nilalaman.
Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga item sa listahan, at ang mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o ang iyong sariling CSS kung kinakailangan.
<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>
Idagdag ang bahagi ng mga badge sa anumang item ng pangkat ng listahan at awtomatiko itong ipoposisyon sa kanan.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
I-link ang mga item ng pangkat ng listahan sa pamamagitan ng paggamit ng mga anchor tag sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>
sa halip na isang <ul>
). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento.
<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>
Ang mga item sa listahan ng pangkat ay maaaring mga pindutan sa halip na mga item sa listahan (na nangangahulugan din ng isang magulang <div>
sa halip na isang <ul>
). Hindi na kailangan para sa mga indibidwal na magulang sa paligid ng bawat elemento. Huwag gamitin ang mga karaniwang .btn
klase dito.
<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>
Idagdag .disabled
sa isang .list-group-item
upang i-gray ito upang lumitaw na hindi pinagana.
<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>
Gumamit ng mga contextual class para mag-istilo ng mga item sa listahan, default o naka-link. Kasama rin ang .active
estado.
<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>
Magdagdag ng halos anumang HTML sa loob, kahit para sa mga naka-link na pangkat ng listahan tulad ng nasa ibaba.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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>
Bagama't hindi palaging kinakailangan, minsan kailangan mong ilagay ang iyong DOM sa isang kahon. Para sa mga sitwasyong iyon, subukan ang bahagi ng panel.
Bilang default, ang lahat ng .panel
ginagawa ay ilapat ang ilang pangunahing hangganan at padding upang maglaman ng ilang nilalaman.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Madaling magdagdag ng heading container sa iyong panel na may .panel-heading
. Maaari mo ring isama ang anuman <h1>
- na <h6>
may .panel-title
klase upang magdagdag ng paunang istilong heading. Gayunpaman, ang mga laki ng font ng <h1>
- <h6>
ay na-override ng .panel-heading
.
Para sa wastong pangkulay ng link, tiyaking maglagay ng mga link sa mga heading sa loob ng .panel-title
.
<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>
I-wrap ang mga button o pangalawang text sa .panel-footer
. Tandaan na ang mga footer ng panel ay hindi nagmamana ng mga kulay at hangganan kapag gumagamit ng mga pagkakaiba-iba ayon sa konteksto dahil hindi nila inilaan na nasa harapan.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Tulad ng iba pang mga bahagi, madaling gawing mas makabuluhan ang isang panel sa isang partikular na konteksto sa pamamagitan ng pagdaragdag ng alinman sa mga klase ng estado sa konteksto.
<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>
Magdagdag ng anumang non-bordered .table
sa loob ng isang panel para sa isang seamless na disenyo. Kung mayroong .panel-body
, nagdaragdag kami ng dagdag na hangganan sa tuktok ng talahanayan para sa paghihiwalay.
Ilang default na nilalaman ng panel dito. Nulla vitae elit libero, a 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.
# | Pangalan | Huling pangalan | Username |
---|---|---|---|
1 | marka | Otto | @mdo |
2 | Jacob | Thornton | @mataba |
3 | Larry | ang ibon |
<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>
Kung walang panel body, ang component ay lilipat mula sa panel header papunta sa table nang walang pagkaantala.
# | Pangalan | Huling pangalan | Username |
---|---|---|---|
1 | marka | Otto | @mdo |
2 | Jacob | Thornton | @mataba |
3 | Larry | ang ibon |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Madaling isama ang buong lapad na mga pangkat ng listahan sa loob ng anumang panel.
Ilang default na nilalaman ng panel dito. Nulla vitae elit libero, a 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.
<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>
Pahintulutan ang mga browser na tukuyin ang mga dimensyon ng video o slideshow batay sa lapad ng kanilang naglalaman ng block sa pamamagitan ng paggawa ng intrinsic ratio na wastong magsusukat sa anumang device.
Direktang inilalapat ang mga panuntunan sa <iframe>
, <embed>
, <video>
, at mga <object>
elemento; opsyonal na gumamit ng tahasang descendant class .embed-responsive-item
kapag gusto mong itugma ang styling para sa iba pang attribute.
Pro-Tip! Hindi mo na kailangang isama frameborder="0"
sa iyong <iframe>
s dahil ine-override namin iyon para sa iyo.
<!-- 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>
Gamitin ang balon bilang simpleng epekto sa isang elemento upang bigyan ito ng inset na epekto.
<div class="well">...</div>
Kontrolin ang padding at mga bilugan na sulok na may dalawang opsyonal na klase ng modifier.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>