Komponentoj
Pli ol dekduo reuzeblaj komponantoj konstruitaj por provizi ikonografion, menuojn, enigajn grupojn, navigadon, atentigojn kaj multe pli.
Pli ol dekduo reuzeblaj komponantoj konstruitaj por provizi ikonografion, menuojn, enigajn grupojn, navigadon, atentigojn kaj multe pli.
Inkluzivas pli ol 250 glifojn en tiparo de la aro Glyphicon Halflings. Glyphicons Halflings kutime ne haveblas senpage, sed ilia kreinto disponigis ilin por Bootstrap senkoste. Kiel dankon, ni nur petas, ke vi enmetu ligon reen al Glyphicons kiam ajn eblas.
Pro agado-kialoj, ĉiuj ikonoj postulas bazan klason kaj individuan ikonklason. Por uzi, metu la sekvan kodon preskaŭ ie ajn. Nepre lasu spacon inter la ikono kaj teksto por taŭga kompletigo.
Ikonoklasoj ne povas esti rekte kombinitaj kun aliaj komponantoj. Ili ne estu uzataj kune kun aliaj klasoj sur la sama elemento. Anstataŭe, aldonu nestitan <span>
kaj apliku la ikonklasojn al la <span>
.
Ikonoklasoj devus esti uzataj nur sur elementoj kiuj enhavas neniun tekstan enhavon kaj havas neniujn filajn elementojn.
Bootstrap supozas ke ikonotiparaj dosieroj troviĝos en la ../fonts/
dosierujo, rilate al la kompilitaj CSS-dosieroj. Movi aŭ renomi tiujn tipardosierojn signifas ĝisdatigi la CSS en unu el tri manieroj:
@icon-font-path
kaj/aŭ @icon-font-name
variablojn en la fonto Malpli dosieroj.url()
vojojn en la kompilita CSS.Uzu kian ajn elekton plej taŭgas por via specifa disvolva agordo.
Modernaj versioj de helpaj teknologioj anoncos CSS generitan enhavon, same kiel specifajn Unikodajn signojn. Por eviti neintencitan kaj konfuzan eliron en ekranlegiloj (precipe kiam ikonoj estas uzataj nur por ornamado), ni kaŝas ilin per la aria-hidden="true"
atributo.
Se vi uzas ikonon por transdoni signifon (anstataŭ nur kiel ornama elemento), certigu, ke ĉi tiu signifo ankaŭ estas transdonita al helpaj teknologioj - ekzemple, inkludu plian enhavon, videble kaŝitan kun la .sr-only
klaso.
Se vi kreas kontrolojn kun neniu alia teksto (kiel ekzemple <button>
kiu enhavas nur ikonon), vi ĉiam devus provizi alternativan enhavon por identigi la celon de la kontrolo, por ke ĝi havu sencon por uzantoj de helpaj teknologioj. En ĉi tiu kazo, vi povus aldoni aria-label
atributon al la kontrolo mem.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.
<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>
Ikono uzata en atentigo por sciigi, ke ĝi estas erarmesaĝo, kun plia .sr-only
teksto por transdoni ĉi tiun sugeston al uzantoj de helpaj teknologioj.
<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>
Ŝaltigebla, kunteksta menuo por montri listojn de ligiloj. Farita interaga kun la falmenuo JavaScript-kromaĵo .
Envolvu la ellasilon de la falmenuo kaj la falmenuon ene de .dropdown
, aŭ alia elemento kiu deklaras position: relative;
. Poste aldonu la HTML de la menuo.
<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>
Falmenuoj povas esti ŝanĝitaj por pligrandigi supren (anstataŭ malsupren) per aldonado .dropup
al la gepatro.
<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>
Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Aldonu .dropdown-menu-right
al .dropdown-menu
dekstre vicigi la falmenuon.
Dropdowns estas aŭtomate poziciigitaj per CSS ene de la normala fluo de la dokumento. Ĉi tio signifas, ke gemenuoj povas esti tranĉitaj de gepatroj kun certaj overflow
trajtoj aŭ aperi ekster limoj de la vidfenestro. Pritraktu ĉi tiujn problemojn memstare kiam ili aperas.
.pull-right
vicigoEkde v3.1.0, ni malrekomendis .pull-right
la falmenuojn. Por dekstre vicigi menuon, uzu .dropdown-menu-right
. Dekstre vicigitaj navkomponentoj en la navigadbreto uzas miksan version de ĉi tiu klaso por aŭtomate vicigi la menuon. Por anstataŭi ĝin, uzu .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Aldonu dividilon por apartigi seriojn de ligiloj en falmenuo.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Aldonu .disabled
al <li>
en la menuo por malŝalti la ligilon.
<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>
Grupigu serion da butonoj kune sur unu linio kun la butongrupo. Aldonu laŭvolan JavaScript-radion kaj markobuton-stilan konduton per nia butonaldonaĵo .
Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .btn-group
, vi devos specifi la opcion container: 'body'
por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).
role
kaj provizi etikedonPor ke helpaj teknologioj - kiel ekranlegiloj - peri ke serio de butonoj estas grupigitaj, taŭga role
atributo devas esti provizita. Por butongrupoj, ĉi tio estus role="group"
, dum ilobretoj devus havi role="toolbar"
.
Unu escepto estas grupoj kiuj enhavas nur ununuran kontrolon (ekzemple la pravigitaj butongrupoj kun <button>
elementoj) aŭ falmenuon.
Krome, grupoj kaj ilobretoj devus ricevi eksplicitan etikedon, ĉar la plej multaj helpaj teknologioj alie ne anoncos ilin, malgraŭ la ĉeesto de la ĝusta role
atributo. En la ekzemploj provizitaj ĉi tie, ni uzas aria-label
, sed alternativoj kiel ekzemple aria-labelledby
ankaŭ povas esti uzataj.
Envolvu serion da butonoj per .btn
en .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>
Kombinu arojn <div class="btn-group">
en a <div class="btn-toolbar">
por pli kompleksaj komponantoj.
<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>
Anstataŭ apliki butonajn grandecoklasojn al ĉiu butono en grupo, simple aldonu .btn-group-*
al ĉiu .btn-group
, inkluzive kiam nestumas plurajn grupojn.
<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>
Metu a .btn-group
en alian .btn-group
kiam vi volas falmenuojn miksitajn kun serio de butonoj.
<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>
Faru aron da butonoj aperi vertikale stakitaj prefere ol horizontale. Dividitaj butonfalumoj ne estas subtenataj ĉi tie.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Faru grupon de butonoj etendiĝi je egalaj grandecoj por etendi la tutan larĝon de sia gepatro. Ankaŭ funkcias kun butonfalumoj ene de la butongrupo.
Pro la specifaj HTML kaj CSS uzataj por pravigi butonojn (nome display: table-cell
), la limoj inter ili estas duobligitaj. En regulaj butongrupoj, margin-left: -1px
estas uzata por stakigi la randojn anstataŭ forigi ilin. Tamen, margin
ne funkcias kun display: table-cell
. Rezulte, depende de viaj personigoj al Bootstrap, vi eble volas forigi aŭ rekolorigi la randojn.
Interreto Explorer 8 ne bildigas randojn sur butonoj en pravigita butongrupo, ĉu ĝi estas ŝaltita <a>
aŭ <button>
elementoj. Por ĉirkaŭiri tion, envolvu ĉiun butonon en alian .btn-group
.
Vidu #12476 por pliaj informoj.
<a>
elementojNur envolvu serion de .btn
s en .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Se la <a>
elementoj estas uzataj por funkcii kiel butonoj - ekigante enpaĝan funkcion, anstataŭ navigi al alia dokumento aŭ sekcio ene de la nuna paĝo - ili ankaŭ devus ricevi taŭgan role="button"
.
<button>
elementojPor uzi pravigitajn butongrupojn kun <button>
elementoj, vi devas envolvi ĉiun butonon en butongrupon . Plej multaj retumiloj ne taŭge aplikas nian CSS por pravigo al <button>
elementoj, sed ĉar ni subtenas butonfalumojn, ni povas ĉirkaŭlabori tion.
<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>
Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-group
kaj disponigante la taŭgan menuan markadon.
Butonaj falmenuoj postulas, ke la falmenuo-kromaĵo estu inkluzivita en via versio de Bootstrap.
Transformu butonon en falmenuman baskulon kun iuj bazaj markadaj ŝanĝoj.
<!-- 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>
Simile, kreu dividitajn butonajn falmenuojn kun la samaj markaj ŝanĝoj, nur per aparta butono.
<!-- 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>
Butonfalumoj funkcias kun butonoj de ĉiuj grandecoj.
<!-- 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>
Ekfunkciigu falmenuojn super elementoj aldonante .dropup
al la gepatro.
<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>
Plilongigu formularajn kontrolojn aldonante tekston aŭ butonojn antaŭ, post aŭ ambaŭflanke de iu tekst-bazita <input>
. Uzu .input-group
kun .input-group-addon
aŭ .input-group-btn
por antaŭmeti aŭ almeti elementojn al unuopa .form-control
.
<input>
sEvitu uzi <select>
elementojn ĉi tie ĉar ili ne povas esti plene stilitaj en WebKit-retumiloj.
Evitu uzi <textarea>
elementojn ĉi tie ĉar ilia rows
atributo ne estos respektata en iuj kazoj.
Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .input-group
, vi devos specifi la opcion container: 'body'
por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).
Ne miksu formgrupojn aŭ kradkolumnklasojn rekte kun eniggrupoj. Anstataŭe, nestu la eniggrupon interne de la formogrupo aŭ krad-rilata elemento.
Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj eniggrupoj, certigu, ke ajna aldona etikedo aŭ funkcieco estas transdonita al helpaj teknologioj.
La preciza tekniko uzota (videblaj <label>
elementoj, <label>
elementoj kaŝitaj uzante la .sr-only
klason, aŭ uzo de la aria-label
, aria-labelledby
, aria-describedby
, title
aŭ placeholder
atributo) kaj kiaj aldonaj informoj devos esti transdonitaj varias depende de la preciza speco de interfaca fenestraĵo, kiun vi efektivigas. La ekzemploj en ĉi tiu sekcio disponigas kelkajn proponitajn, kaz-specifajn alirojn.
Metu unu aldonaĵon aŭ butonon ambaŭflanke de enigo. Vi ankaŭ povas meti unu ambaŭflanke de enigo.
Ni ne subtenas plurajn aldonaĵojn ( .input-group-addon
aŭ .input-group-btn
) unuflanke.
Ni ne subtenas plurajn formularajn kontrolojn en ununura eniga grupo.
<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>
Aldonu la relativajn formo-grandecklasojn al la .input-group
mem kaj enhavo ene aŭtomate regrandiĝos—ne necesas ripeti la formo-kontrolgrandecklasojn sur ĉiu 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>
Metu ajnan markobutonon aŭ radio-opcion en la aldonaĵon de eniga grupo anstataŭ tekston.
<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 -->
Butonoj en eniggrupoj estas iom malsamaj kaj postulas unu ekstran nivelon de nestado. Anstataŭ .input-group-addon
, vi devos uzi .input-group-btn
por envolvi la butonojn. Ĉi tio estas postulata pro defaŭltaj retumstiloj, kiuj ne povas esti anstataŭitaj.
<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>
Dum vi povas nur havi unu aldonaĵon per flanko, vi povas havi plurajn butonojn ene de unu .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 disponeblaj en Bootstrap havas komunan markadon, komencante de la baza .nav
klaso, same kiel komunaj ŝtatoj. Interŝanĝu modifklasojn por ŝanĝi inter ĉiu stilo.
Notu, ke la .nav-tabs
klaso postulas la .nav
bazan klason.
<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>
Prenu tiun saman HTML, sed uzu .nav-pills
anstataŭe:
<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>
Piloloj ankaŭ estas vertikale stakeblaj. Nur aldonu .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Facile faru langetojn aŭ pilolojn egalajn larĝojn de sia gepatro ĉe ekranoj pli larĝaj ol 768px kun .nav-justified
. Sur pli malgrandaj ekranoj, la nav-ligiloj estas stakigitaj.
Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Por iu ajn navkomponento (langetoj aŭ piloloj), aldonu .disabled
por grizaj ligiloj kaj neniuj ŝvebaj efikoj .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Aldonu falmenuojn kun iom kroma HTML kaj la falmenuojn JavaScript kromaĵo .
<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>
Navbaroj estas respondemaj metakomponentoj, kiuj funkcias kiel navigaj kaplinioj por via aplikaĵo aŭ retejo. Ili komencas kolapsitaj (kaj estas ŝanĝeblaj) en moveblaj vidoj kaj iĝas horizontalaj kiam la disponebla vidfenestro-larĝo pliiĝas.
Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.
<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>
Anstataŭigu la navbarmarkon per via propra bildo interŝanĝante la tekston por <img>
. Ĉar la .navbar-brand
havas sian propran remburaĵon kaj altecon, eble vi devos anstataŭi iujn CSS depende de via bildo.
<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>
Metu formenhavon interne .navbar-form
por taŭga vertikala vicigo kaj kolapsitan konduton en mallarĝaj vidfenestroj. Uzu la alineajn opciojn por decidi kie ĝi loĝas ene de la navbar enhavo.
Kiel atentigo, .navbar-form
dividas grandan parton de sia kodo .form-inline
per mixin. Iuj formularaj kontroloj, kiel eniggrupoj, povas postuli fiksajn larĝojn aperigi ĝuste ene de navigadbreto.
<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>
Aldonu la .navbar-btn
klason al <button>
elementoj ne loĝantaj en a <form>
por vertikale centri ilin en la navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Envolvu ŝnurojn de teksto en elemento kun .navbar-text
, kutime sur <p>
etikedo por ĝusta gvidado kaj koloro.
<p class="navbar-text">Signed in as Mark Otto</p>
Por homoj uzantaj normajn ligilojn, kiuj ne estas ene de la regula navigad-naviga komponento, uzu la .navbar-link
klason por aldoni la taŭgajn kolorojn por la defaŭltaj kaj inversaj navbar-opcioj.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Vicigu nav-ligilojn, formojn, butonojn aŭ tekston, uzante la .navbar-left
aŭ .navbar-right
utilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto. Ekzemple, por vicigi nav-ligilojn, metu ilin en apartan <ul>
kun la respektiva utila klaso aplikita.
Ĉi tiuj klasoj estas miksitaj versioj de .pull-left
kaj .pull-right
, sed ili estas ampleksitaj al amaskomunikilaj demandoj por pli facila uzado de navbar-komponentoj trans aparataj grandecoj.
Aldonu .navbar-fixed-top
kaj inkluzivu .container
aŭ .container-fluid
al centro kaj kuseneto navbar enhavo.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Aldonu .navbar-fixed-bottom
kaj inkluzivu .container
aŭ .container-fluid
al centro kaj kuseneto navbar enhavo.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Kreu plenlarĝan navbaron, kiu rulumas for kun la paĝo aldonante .navbar-static-top
kaj inkluzivi .container
aŭ .container-fluid
al centra kaj kuseneto navbar enhavo.
Male al la .navbar-fixed-*
klasoj, vi ne bezonas ŝanĝi ajnan kompletigo sur la body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Modifi la aspekton de la navbar aldonante .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Indiku la lokon de la aktuala paĝo ene de navigacia hierarkio.
Apartigiloj estas aŭtomate aldonitaj en CSS per :before
kaj content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Provizu paĝigajn ligilojn por via retejo aŭ aplikaĵo per la plurpaĝa paĝiga komponanto, aŭ la pli simpla paĝiga alternativo .
Simpla paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.
<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>
La paĝiga komponanto devas esti envolvita en <nav>
elemento por identigi ĝin kiel navigada sekcio por ekranlegantoj kaj aliaj helpaj teknologioj. Krome, ĉar paĝo verŝajne jam havas pli ol unu tian navigadan sekcion (kiel la ĉefa navigado en la kaplinio aŭ flanka navigado), estas konsilinde provizi priskriban aria-label
por la <nav>
kiu reflektas ĝian celon. Ekzemple, se la paĝiga komponanto estas uzata por navigi inter aro de serĉrezultoj, taŭga etikedo povus esti aria-label="Search results pages"
.
Ligiloj estas agordeblaj por malsamaj cirkonstancoj. Uzu .disabled
por neklakeblaj ligiloj kaj .active
por indiki la nunan paĝon.
<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>
Ni rekomendas ke vi interŝanĝu aktivajn aŭ malebligitajn ankrojn por <span>
, aŭ preterlasu la ankron en la kazo de la antaŭaj/sekvaj sagoj, por forigi klakfunkciecon konservante celitajn stilojn.
<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>
Ĉu vi volas pli grandan aŭ pli malgrandan paĝigon? Aldonu .pagination-lg
aŭ .pagination-sm
por pliaj grandecoj.
<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>
Rapidaj antaŭaj kaj sekvaj ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.
Defaŭlte, la paginador centras ligilojn.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternative, vi povas vicigi ĉiun ligilon al la flankoj:
<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>
Pager-ligiloj ankaŭ uzas la ĝeneralan .disabled
utilecan klason de la paĝigo.
<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>
Aldonu iun el la sube menciitaj modifklasoj por ŝanĝi la aspekton de etikedo.
<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>
Problemoj de bildado povas aperi kiam vi havas dekojn da enliniaj etikedoj ene de mallarĝa ujo, ĉiu enhavante sian propran inline-block
elementon (kiel ikono). La vojo ĉirkaŭ ĉi tio fiksiĝas display: inline-block;
. Por kunteksto kaj ekzemplo, vidu #13219 .
Facile reliefigu novajn aŭ nelegitajn erojn aldonante <span class="badge">
al ligiloj, Bootstrap-nav-ojn kaj pli.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Kiam ne estas novaj aŭ nelegitaj eroj, insignoj simple kolapsos (per la :empty
elektilo de CSS) kondiĉe ke neniu enhavo ekzistas ene.
Insignoj ne mem kolapsos en Internet Explorer 8 ĉar mankas subteno por la :empty
elektilo.
Enkonstruitaj stiloj estas inkluzivitaj por meti insignojn en aktivajn ŝtatojn en pilo-navigacioj.
<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>
Malpeza, fleksebla komponanto, kiu povas laŭvole etendi la tutan vidpunkton por montri ŝlosilan enhavon en via retejo.
Ĉi tio estas simpla herounuo, simpla jumbotron-stila komponento por nomi ekstran atenton al elstara enhavo aŭ informoj.
<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>
Por fari la jumbotron plenan larĝon, kaj sen rondigitaj anguloj, metu ĝin ekster ĉiuj .container
s kaj anstataŭe aldonu .container
ene.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Simpla ŝelo por h1
taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas utiligi la h1
defaŭltan small
elementon, same kiel plej multajn aliajn komponantojn (kun pliaj stiloj).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Etendi la kradsistemon de Bootstrap kun la bildeto-komponento por facile montri kradojn de bildoj, filmetoj, tekstoj kaj pli.
Se vi serĉas Pinterest-similan prezenton de bildetoj de diversaj altecoj kaj/aŭ larĝoj, vi devos uzi aldonaĵon de triaj kiel ekzemple Masonry , Isotope , aŭ Salvattore .
Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.
<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>
Provizu kontekstajn sugestajn mesaĝojn por tipaj uzant-agoj per la manpleno da disponeblaj kaj flekseblaj atentaj mesaĝoj.
Envolvu ajnan tekston kaj laŭvolan forĵetbutonon en .alert
kaj unu el la kvar kuntekstaj klasoj (ekz. .alert-success
) por bazaj atentaj mesaĝoj.
Atentigoj ne havas defaŭltajn klasojn, nur bazajn kaj modifklasojn. Defaŭlta griza alarmo ne havas tro da senco, do vi devas specifi tipon per kunteksta klaso. Elektu el sukceso, informoj, averto aŭ danĝero.
<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>
Konstruu sur iu ajn atentigo aldonante laŭvolan .alert-dismissible
kaj fermbutonon.
Por plene funkciaj, malakcepteblaj atentigoj, vi devas uzi la alarmojn JavaScript-kromaĵon .
<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>
Nepre uzu la <button>
elementon kun la data-dismiss="alert"
datuma atributo.
Uzu la .alert-link
utilan klason por rapide provizi kongruajn kolorajn ligilojn ene de ajna atentigo.
<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>
Provizu ĝisdatigitajn komentojn pri la progreso de laborfluo aŭ ago per simplaj sed flekseblaj progresbrikoj.
Progresdrinkejoj uzas CSS3-transirojn kaj kuraĝigojn por atingi kelkajn el siaj efikoj. Ĉi tiuj funkcioj ne estas subtenataj en Internet Explorer 9 kaj sub aŭ pli malnovaj versioj de Firefox. Opera 12 ne subtenas kuraĝigojn.
Se via retejo havas Enhavan Sekurecpolitikon (CSP) kiu ne permesas style-src 'unsafe-inline'
, tiam vi ne povos uzi enliniajn style
atributojn por agordi larĝojn de progresbreto kiel montrite en niaj ekzemploj sube. Alternativaj metodoj por agordi la larĝojn, kiuj estas kongruaj kun striktaj CSP-oj, inkluzivas uzi iom laŭmendan JavaScript (tio starigas element.style.width
) aŭ uzi kutimajn CSS-klasojn.
Defaŭlta progresbreto.
<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>
Forigu la <span>
kun .sr-only
klason el la progresbreto por montri videblan procenton.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Por certigi, ke la etikedo teksto restas legebla eĉ por malaltaj procentoj, konsideru aldoni a min-width
al la progresbreto.
<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>
Progresbrikoj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.
<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>
Uzas gradienton por krei strian efikon. Ne havebla en IE9 kaj sube.
<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>
Aldonu .active
al .progress-bar-striped
por animi la striojn dekstren al maldekstre. Ne havebla en IE9 kaj sube.
<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>
Metu plurajn stangojn en la saman .progress
por staki ilin.
<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>
Abstraktaj objektostiloj por konstrui diversajn specojn de komponantoj (kiel blogaj komentoj, Tweets, ktp) kiuj prezentas maldekstren aŭ dekstren vicigitan bildon kune kun teksta enhavo.
La defaŭlta amaskomunikilaro montras amaskomunikilaron (bildojn, vidbendon, aŭdion) maldekstre aŭ dekstre de enhavbloko.
<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>
La klasoj .pull-left
kaj .pull-right
ankaŭ ekzistas kaj antaŭe estis uzataj kiel parto de la amaskomunikilaro, sed estas malrekomenditaj por tiu uzo ekde v3.3.0. Ili estas proksimume ekvivalentaj al .media-left
kaj .media-right
, krom tio .media-right
devus esti metitaj post la .media-body
en la html.
La bildoj aŭ aliaj rimedoj povas esti vicigitaj supre, meze aŭ malsupre. La defaŭlto estas supre vicigita.
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 in 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 in 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 in 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>
Kun iom da ekstra markado, vi povas uzi amaskomunikilaron ene de listo (utila por komentfadenoj aŭ artikoloj-listoj).
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>
Listogrupoj estas fleksebla kaj potenca komponanto por montri ne nur simplajn listojn de elementoj, sed kompleksajn kun kutima enhavo.
La plej baza listogrupo estas simple neordigita listo kun listeroj, kaj la taŭgaj klasoj. Konstruu sur ĝi per la ebloj kiuj sekvas, aŭ via propra CSS laŭbezone.
<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>
Aldonu la komponenton de insignoj al iu ajn listgrupo kaj ĝi estos aŭtomate poziciigita dekstre.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Ligi listgrupajn erojn uzante ankrajn etikedojn anstataŭ listaĵojn (tio ankaŭ signifas gepatron <div>
anstataŭ <ul>
). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu 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>
Listo-grupo-eroj povas esti butonoj anstataŭ list-eroj (tio ankaŭ signifas gepatron <div>
anstataŭ <ul>
). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu elemento. Ne uzu la normajn .btn
klasojn ĉi tie.
<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>
Aldonu .disabled
al .list-group-item
por grizi ĝin por aperi malŝaltita.
<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>
Uzu kuntekstajn klasojn por stiligi listaĵojn, defaŭltajn aŭ ligitajn. Ankaŭ inkluzivas .active
ŝtaton.
<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>
Aldonu preskaŭ ajnan HTML ene, eĉ por ligitaj listogrupoj kiel tiu ĉi sube.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas 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>
Kvankam ne ĉiam necesas, foje vi devas meti vian DOM en skatolon. Por tiuj situacioj, provu la panelan komponanton.
Defaŭlte, ĉiuj .panel
faroj estas apliki iun bazan randon kaj remburaĵon por enhavi iom da enhavo.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Facile aldonu titolon al via panelo per .panel-heading
. Vi ankaŭ povas inkluzivi ajnan <h1>
- <h6>
kun .panel-title
klaso por aldoni antaŭstilan titolon. Tamen, la tiparograndoj de <h1>
- <h6>
estas anstataŭitaj de .panel-heading
.
Por taŭga ligokolorigo, nepre metu ligilojn en rubrikojn ene de .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>
Envolvi butonojn aŭ malĉefajn tekstojn en .panel-footer
. Notu, ke panelpiedoj ne heredas kolorojn kaj randojn kiam oni uzas kontekstajn variojn, ĉar ili ne estas intencitaj esti en la malfono.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Kiel aliaj komponantoj, facile faru panelon pli signifa al aparta kunteksto aldonante iun ajn el la kuntekstaj ŝtatklasoj.
<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>
Aldonu ajnan neborditan .table
ene de panelo por senjunta dezajno. Se estas .panel-body
, ni aldonas kroman randon al la supro de la tablo por apartigo.
Iu defaŭlta panelenhavo ĉi tie. 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.
# | Antaŭnomo | Familia nomo | Uzantnomo |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jakobo | Thornton | @graso |
3 | Larry | la birdo |
<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>
Se ne ekzistas panela korpo, la komponanto moviĝas de panela kaplinio al tablo sen interrompo.
# | Antaŭnomo | Familia nomo | Uzantnomo |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jakobo | Thornton | @graso |
3 | Larry | la birdo |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Facile inkluzivi plenlarĝajn listgrupojn ene de ajna panelo.
Iu defaŭlta panelenhavo ĉi tie. 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>
Permesu al retumiloj determini dimensiojn de video aŭ lumbildoj laŭ la larĝo de sia entena bloko kreante internan rilatumon, kiu taŭge skalos en iu ajn aparato.
Reguloj estas rekte aplikataj al <iframe>
, <embed>
, <video>
, kaj <object>
elementoj; laŭvole uzu eksplicitan posteulklason .embed-responsive-item
kiam vi volas kongrui kun la stilo por aliaj atributoj.
Por-Konsileto! Vi ne bezonas inkluzivi frameborder="0"
en viaj <iframe>
s ĉar ni superregas tion por vi.
<!-- 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>
Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.
<div class="well">...</div>
Kontrolu remburaĵon kaj rondigitajn angulojn kun du laŭvolaj modifklasoj.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>