Components
Mear dan in tsiental werbrûkbere komponinten boud om ikonografy, dropdowns, ynfiergroepen, navigaasje, warskôgings, en folle mear te leverjen.
Mear dan in tsiental werbrûkbere komponinten boud om ikonografy, dropdowns, ynfiergroepen, navigaasje, warskôgings, en folle mear te leverjen.
Omfettet mear dan 250 glyphs yn lettertypeformaat fan 'e Glyphicon Halflings-set. Glyphicons Halflings binne normaal net fergees beskikber, mar har makker hat se fergees beskikber steld foar Bootstrap. As tank freegje wy jo allinich in keppeling werom nei Glyphicons as it mooglik is.
Foar prestaasjes redenen fereaskje alle ikoanen in basisklasse en yndividuele ikoanklasse. Om te brûken, pleats de folgjende koade sawat oeral. Wês der wis fan dat jo in spaasje litte tusken it ikoan en de tekst foar juste padding.
Ikoanklassen kinne net direkt kombineare wurde mei oare komponinten. Se moatte net brûkt wurde tegearre mei oare klassen op itselde elemint. Foegje ynstee in nested <span>
ta en tapasse de ikoanklassen oan 'e <span>
.
Ikoanklassen moatte allinich brûkt wurde op eleminten dy't gjin tekstynhâld befetsje en gjin berneleminten hawwe.
Bootstrap giet derfan út dat ikoanlettertypen yn 'e ../fonts/
map sille lizze, relatyf oan de kompilearre CSS-bestannen. It ferpleatsen of omneame fan dy lettertypebestannen betsjuttet it bywurkjen fan de CSS op ien fan trije manieren:
@icon-font-path
en / of @icon-font-name
fariabelen yn de boarne Minder triemmen.url()
paden yn 'e kompilearre CSS.Brûk hokker opsje it bêste past by jo spesifike ûntwikkelingsopset.
Moderne ferzjes fan assistinte technologyen sille CSS-generearre ynhâld oankundigje, lykas spesifike Unicode-karakters. Om ûnbedoelde en betiizjende útfier yn skermlêzers te foarkommen (benammen as ikoanen suver wurde brûkt foar dekoraasje), ferbergje wy se mei it aria-hidden="true"
attribút.
As jo in ikoan brûke om betsjutting oer te bringen (ynstee fan allinich as dekoratyf elemint), soargje derfoar dat dizze betsjutting ek wurdt oerdroegen oan assistinte technologyen - bygelyks ekstra ynhâld opnimme, visueel ferburgen mei de .sr-only
klasse.
As jo kontrôles meitsje sûnder oare tekst (lykas in <button>
dy't allinich in ikoan befettet), moatte jo altyd alternative ynhâld leverje om it doel fan 'e kontrôle te identifisearjen, sadat it sin sil meitsje foar brûkers fan assistinte technologyen. Yn dit gefal kinne jo in aria-label
attribút tafoegje oan 'e kontrôle sels.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.
<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>
In ikoan brûkt yn in warskôging om oer te bringen dat it in flaterberjocht is, mei ekstra .sr-only
tekst om dizze hint oer te bringen oan brûkers fan assistinte technologyen.
<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>
Wizigje, kontekstueel menu foar it werjaan fan listen mei keppelings. Ynteraktyf makke mei de dropdown JavaScript-plugin .
Wrap de trigger fan it dellûkmenu en it dellûkmenu binnen .dropdown
, of in oar elemint dat ferklearret position: relative;
. Foegje dan de HTML fan it menu ta.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Dropdown-menu's kinne feroare wurde om nei boppen (ynstee fan nei ûnderen) út te wreidzjen troch ta te foegjen .dropup
oan de âlder.
<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>
Standert wurdt in útklapmenu automatysk 100% fan boppen en lâns de linkerkant fan syn âlder pleatst. Taheakje .dropdown-menu-right
oan in .dropdown-menu
rjochts rjochtsje it dellûkmenu.
Dropdowns wurde automatysk pleatst fia CSS binnen de normale stream fan it dokumint. Dit betsjut dat dropdowns kinne wurde besnien troch âlders mei bepaalde overflow
eigenskippen of ferskine bûten de grinzen fan 'e viewport. Behannelje dizze problemen op jo eigen as se foarkomme.
.pull-right
alignmentFanôf v3.1.0 hawwe wy ôfkarre .pull-right
op dellûkmenu's. Om in menu rjochts út te lizzen, brûk .dropdown-menu-right
. Rjochts rjochte nav komponinten yn de navbar brûke in mixin ferzje fan dizze klasse foar in automatysk align it menu. Om it te oerskriuwen, brûk .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Foegje in koptekst ta om seksjes fan aksjes te markearjen yn elk útklapmenu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Foegje in skieding ta oan aparte searje keppelings yn in útklapmenu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Taheakje .disabled
oan in <li>
yn it útklapmenu om de keppeling út te skeakeljen.
<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>
Groepearje in searje knoppen tegearre op ien rigel mei de knopgroep. Foegje opsjoneel JavaScript-radio- en karfakjestylgedrach ta mei ús knopplugin .
By it brûken fan tooltips of popovers op eleminten binnen in .btn-group
, moatte jo de opsje opjaan container: 'body'
om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/of syn rûne hoeken ferliest as de tooltip of popover wurdt aktivearre).
role
en jouwe in labelOm helptechnologyen - lykas skermlêzers - oer te bringen dat in searje knoppen groepearre is, role
moat in passend attribút oanbean wurde. Foar knopgroepen soe dit wêze role="group"
, wylst arkbalken in role="toolbar"
.
Ien útsûndering binne groepen dy't mar ien kontrôle befetsje (bygelyks de rjochtfeardige knopgroepen mei <button>
eleminten) of in dropdown.
Dêrneist moatte groepen en arkbalken in eksplisyt label krije, om't de measte assistinte technologyen se oars net oankundigje, nettsjinsteande de oanwêzigens fan it juste role
attribút. Yn 'e hjirre levere foarbylden brûke wy aria-label
, mar alternativen lykas aria-labelledby
kinne ek brûkt wurde.
Wrap in rige fan knoppen mei .btn
yn .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>
Kombinearje sets fan <div class="btn-group">
yn in <div class="btn-toolbar">
foar mear komplekse komponinten.
<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>
Ynstee fan it tapassen fan klassen foar knopgrutte op elke knop yn in groep, foegje gewoan ta .btn-group-*
oan elk .btn-group
, ynklusyf by it nesteljen fan meardere groepen.
<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>
Pleats in .btn-group
yn in oar .btn-group
as jo útklapmenu's wolle mingd mei in searje knoppen.
<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>
Meitsje in set fan knoppen ferskine fertikaal steapele ynstee horizontaal. Dropdowns foar splitknop wurde hjir net stipe.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Meitsje in groep knoppen stretch op gelikense grutte te span de hiele breedte fan syn âlder. Wurket ek mei knop dropdowns binnen de knop groep.
Troch de spesifike HTML en CSS dy't brûkt wurde om knoppen te rjochtfeardigjen (nammentlik display: table-cell
), wurde de grinzen dertusken ferdûbele. Yn gewoane knopgroepen margin-left: -1px
wurdt brûkt om de grinzen te stapeljen ynstee fan se te ferwiderjen. It margin
wurket lykwols net mei display: table-cell
. As gefolch, ôfhinklik fan jo oanpassingen oan Bootstrap, kinne jo de grinzen ferwiderje of opnij kleurje.
Internet Explorer 8 jout gjin grinzen oan knoppen yn in rjochtfeardige knopgroep, of it no oan is <a>
of <button>
eleminten. Om dat te kommen, wikkel elke knop yn in oare .btn-group
.
Sjoch # 12476 foar mear ynformaasje.
<a>
elemintenKrekt wrap in rige fan .btn
s yn .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
As de <a>
eleminten wurde brûkt om te fungearjen as knoppen - aktivearje yn-side-funksjonaliteit, ynstee fan te navigearjen nei in oar dokumint of seksje binnen de hjoeddeistige side - moatte se ek in passende role="button"
.
<button>
elemintenOm rjochtfeardige knopgroepen mei <button>
eleminten te brûken, moatte jo elke knop yn in knopgroep ferpakke . De measte browsers tapasse ús CSS net goed foar rjochtfeardiging op <button>
eleminten, mar om't wy knopútklapmenu's stypje, kinne wy dat omgean.
<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>
Brûk elke knop om in útklapmenu te triggerjen troch it yn in te pleatsen .btn-group
en de juste menuopmaak te leverjen.
Button dropdowns fereaskje dat de dropdown-plugin opnommen is yn jo ferzje fan Bootstrap.
Feroarje in knop yn in dropdown-skeakel mei wat basale markupwizigingen.
<!-- 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>
Meitsje op deselde manier dropdowns foar splitknop mei deselde markupwizigingen, allinich mei in aparte knop.
<!-- 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>
Button dropdowns wurkje mei knoppen fan alle maten.
<!-- 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>
Trigger dropdown-menu's boppe eleminten troch ta te foegjen .dropup
oan 'e âlder.
<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>
Formkontrôles útwreidzje troch tekst of knoppen ta te foegjen foar, nei of oan beide kanten fan elke tekstbasearre <input>
. Brûk .input-group
mei in .input-group-addon
of .input-group-btn
om eleminten foar of taheakje oan in inkele .form-control
.
<input>
sMeitsje <select>
hjir eleminten te brûken, om't se net folslein kinne wurde styled yn WebKit-browsers.
Meitsje <textarea>
hjir eleminten te brûken, om't har rows
attribút yn guon gefallen net wurde respektearre.
By it brûken fan tooltips of popovers op eleminten binnen in .input-group
, moatte jo de opsje opjaan container: 'body'
om net winske side-effekten te foarkommen (lykas it elemint dat breder groeit en/of syn rûne hoeken ferliest as de tooltip of popover wurdt aktivearre).
Meitsje gjin formuliergroepen of rasterkolomklassen direkt mei ynfiergroepen. Ynstee, nêst de ynfier groep binnen fan de formulier groep of raster-relatearre elemint.
Skermlêzers sille problemen hawwe mei jo formulieren as jo gjin label foar elke ynfier opnimme. Soargje foar dizze ynfiergroepen dat alle ekstra label of funksjonaliteit wurdt oerbrocht nei assistinte technologyen.
De krekte te brûken technyk (sichtbere <label>
eleminten, <label>
eleminten dy't ferburgen binne mei de .sr-only
klasse, of gebrûk fan 'e aria-label
, aria-labelledby
, aria-describedby
, title
of placeholder
attribút) en hokker oanfoljende ynformaasje sil moatte wurde oerbrocht sille ferskille ôfhinklik fan it krekte type ynterface-widget dat jo ymplementearje. De foarbylden yn dizze seksje jouwe in pear foarstelde, saakspesifike oanpak.
Plak ien tafoeging of knop oan beide kanten fan in ynfier. Jo kinne ek ien oan beide kanten fan in ynfier pleatse.
Wy stypje gjin meardere tafoegings ( .input-group-addon
of .input-group-btn
) op ien kant.
Wy stypje gjin meardere formulierkontrôles yn ien ynfiergroep.
<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>
Foegje de relative formuliergrutteklassen ta oan it .input-group
sels en de ynhâld binnen sil automatysk de grutte feroarje - gjin ferlet fan it werheljen fan de formulierkontrôlegrutteklassen op elk elemint.
<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>
Plak elke karfakje as radio-opsje binnen de addon fan in ynfiergroep ynstee fan tekst.
<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 -->
Knoppen yn ynfiergroepen binne in bytsje oars en fereaskje ien ekstra nivo fan nêst. Ynstee fan .input-group-addon
, moatte jo brûke .input-group-btn
om de knoppen te wikkeljen. Dit is nedich fanwegen standert blêderstilen dy't net oerskreaun wurde kinne.
<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>
Wylst jo mar ien tafoeging per kant kinne hawwe, kinne jo meardere knoppen binnen ien hawwe .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 beskikber yn Bootstrap hawwe dield markup, begjinnend mei de basis .nav
klasse, likegoed as dielde steaten. Wissel modifierklassen om te wikseljen tusken elke styl.
Tink derom dat de klasse de basisklasse .nav-tabs
fereasket ..nav
<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>
Nim deselde HTML, mar brûk .nav-pills
ynstee:
<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>
Pillen binne ek fertikaal stapelber. Foegje gewoan ta .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Maklik meitsje ljeppers of pillen gelikense breedte fan harren âlder op skermen breder as 768px mei .nav-justified
. Op lytsere skermen wurde de nav-keppelings steapele.
Justified navbar nav keppelings wurde op it stuit net stipe.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Foar elke nav-komponint (ljeppers of pillen), tafoegje .disabled
foar grize keppelings en gjin hover-effekten .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Foegje dropdown-menu's ta mei in bytsje ekstra HTML en de dropdowns 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>
Navbars binne responsive meta-komponinten dy't tsjinje as navigaasjekoppen foar jo applikaasje of side. Se begjinne ynstoarten (en binne te wikseljen) yn mobile werjeften en wurde horizontaal as de beskikbere viewportbreedte ferheget.
Justified navbar nav keppelings wurde op it stuit net stipe.
<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>
Ferfang de navbar-merk mei jo eigen ôfbylding troch de tekst te wikseljen foar in <img>
. Sûnt de .navbar-brand
hat syn eigen padding en hichte, Jo moatte miskien oerskriuwe wat CSS ôfhinklik fan jo ôfbylding.
<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>
Plak formulierynhâld binnen .navbar-form
foar juste fertikale ôfstimming en ynstoarte gedrach yn smelle viewports. Brûk de ôfstimmingsopsjes om te besluten wêr't it leit binnen de navbar-ynhâld.
As heads up, .navbar-form
dielt in protte fan syn koade mei .form-inline
fia mixin. Guon formulierkontrôles, lykas ynfiergroepen, kinne fêste breedtes nedich wêze om goed te sjen yn in 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>
Foegje de .navbar-btn
klasse ta oan <button>
eleminten dy't net wenje yn in <form>
om se fertikaal te sintrum yn 'e navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Wrap strings fan tekst yn in elemint mei .navbar-text
, meastal op in <p>
tag foar goede lieding en kleur.
<p class="navbar-text">Signed in as Mark Otto</p>
Foar minsken dy't standertkeppelings brûke dy't net binnen de reguliere navigaasjekomponint binne, brûk de .navbar-link
klasse om de juste kleuren ta te foegjen foar de standert- en omkearde navigaasje-opsjes.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Align nav keppelings, formulieren, knoppen, of tekst, mei help fan de .navbar-left
of .navbar-right
nut klassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting. Bygelyks, foar align nav keppelings, set se yn in apart <ul>
mei de oanbelangjende nut klasse tapast.
Dizze klassen binne mixin-ed ferzjes fan .pull-left
en .pull-right
, mar se binne scoped nei mediafragen foar makliker ôfhanneljen fan navbar-komponinten oer apparaatgrutte.
Foegje .navbar-fixed-top
in .container
of ta en tafoegje .container-fluid
oan sintrum- en pad-navbar-ynhâld.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Foegje .navbar-fixed-bottom
in .container
of ta en tafoegje .container-fluid
oan sintrum- en pad-navbar-ynhâld.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Meitsje in navigaasjebalke mei folsleine breedte dy't mei de side fuort rôlet troch in of ta te foegjen .navbar-static-top
en op te nimmen om de ynhâld fan 'e navbalke sintrum en pad te meitsjen..container
.container-fluid
Oars as de .navbar-fixed-*
klassen, hoege jo net te feroarjen gjin padding op de body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Feroarje it uterlik fan 'e navigaasjebalke troch .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Jou de lokaasje fan de aktuele side oan binnen in navigaasjehierarchy.
Separators wurde automatysk tafoege yn CSS troch :before
en content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Jou pagineringslinks foar jo side of app mei de pagineringskomponint mei meardere siden, as it ienfâldiger pager-alternatyf .
Ienfâldige paginaasje ynspireare troch Rdio, geweldig foar apps en sykresultaten. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.
<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>
De pagineringskomponint moat yn in <nav>
elemint ferpakt wurde om it te identifisearjen as in navigaasjediel foar skermlêzers en oare assistinte technologyen. Derneist, om't in side wierskynlik al mear as ien sa'n navigaasje-seksje hat (lykas de primêre navigaasje yn 'e koptekst, of in sydbalke-navigaasje), is it oan te rieden om in beskriuwing te jaan aria-label
foar de <nav>
dy't it doel reflektearret. Bygelyks, as de pagineringskomponint wurdt brûkt om te navigearjen tusken in set sykresultaten, kin in passend label wêze aria-label="Search results pages"
.
Keppelings binne oanpasber foar ferskate omstannichheden. Brûk .disabled
foar net-klikbere keppelings en .active
om de aktuele side oan te jaan.
<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>
Wy riede oan dat jo aktive of útskeakele ankers útwikselje foar <span>
, of it anker oerlitte yn it gefal fan 'e foarige/folgjende pylken, om klikfunksjonaliteit te ferwiderjen, wylst jo bedoelde stilen behâlde.
<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>
Wolle jo in gruttere of lytsere paginaasje? Add .pagination-lg
of .pagination-sm
foar ekstra maten.
<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>
Snelle foarige en folgjende keppelings foar ienfâldige pagineringsimplementaasjes mei ljochte markup en stilen. It is geweldich foar ienfâldige siden lykas blogs of tydskriften.
Standert sintraat de pager keppelings.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
As alternatyf kinne jo elke keppeling oan 'e kanten rjochtsje:
<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-keppelings brûke ek de algemiene .disabled
nutklasse fan 'e paginaasje.
<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>
Foegje ien fan 'e hjirûnder neamde modifikaasjeklassen ta om it uterlik fan in label te feroarjen.
<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>
Renderingproblemen kinne ûntstean as jo tsientallen ynline labels hawwe binnen in smelle kontener, elk mei in eigen inline-block
elemint (lykas in ikoan). De manier om dit hinne is ynsteld display: inline-block;
. Foar kontekst en in foarbyld, sjoch #13219 .
Markearje maklik nije as net-lêzen items troch in ta te foegjen <span class="badge">
oan keppelings, Bootstrap-navs, en mear.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
As d'r gjin nije of net-lêzen items binne, sille badges gewoan ynstoarten (fia CSS's :empty
selector) mits der gjin ynhâld bestiet.
Badges sille net sels ynstoarten yn Internet Explorer 8, om't it gjin stipe foar de :empty
selector.
Ynboude stilen binne opnommen foar it pleatsen fan badges yn aktive steaten yn pilnavigaasje.
<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>
In lichtgewicht, fleksibel komponint dat opsjoneel de heule viewport kin útwreidzje om wichtige ynhâld op jo side te werjaan.
Dit is in ienfâldige helde-ienheid, in ienfâldige komponint yn jumbotron-styl om ekstra omtinken te freegjen foar featured ynhâld of ynformaasje.
<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>
Om de jumbotron folsleine breedte, en sûnder ôfrûne hoeken, pleats it bûten alle .container
s en ynstee foegjen in .container
binnen.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
In ienfâldige shell foar in h1
passend romte út en segment seksjes fan ynhâld op in side. It kin it h1
standertelemint fan ' e brûke small
, lykas de measte oare komponinten (mei ekstra stilen).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Wreidzje it rastersysteem fan Bootstrap út mei de thumbnail-komponint om maklik rasters fan ôfbyldings, fideo's, tekst, en mear te werjaan.
As jo op syk binne nei Pinterest-like presintaasje fan thumbnails fan wikseljende hichten en/of breedtes, dan moatte jo in plugin fan tredden brûke lykas Masonry , Isotope , of Salvattore .
Standert binne de thumbnails fan Bootstrap ûntworpen om keppele ôfbyldings wer te jaan mei minimale fereaske markup.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Mei in bytsje ekstra opmaak is it mooglik om elke soart HTML-ynhâld lykas kopteksten, paragrafen of knoppen ta te foegjen oan thumbnails.
<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>
Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.
Wrap eltse tekst en in opsjoneel ôfwize knop yn .alert
en ien fan de fjouwer kontekstuele klassen (bgl, .alert-success
) foar basis alert berjochten.
Alerts hawwe gjin standertklassen, allinich basis- en modifikaasjeklassen. In standert grize warskôging makket net te folle sin, dus jo binne ferplichte om in type op te jaan fia kontekstuele klasse. Kies út súkses, ynfo, warskôging of gefaar.
<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>
Bou op elke warskôging troch in opsjonele .alert-dismissible
en slute knop ta te foegjen.
Foar folslein funksjonearjende, dismissible warskôgings, moatte jo de warskôgings JavaScript-plugin brûke .
<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>
Wês wis dat jo it <button>
elemint brûke mei it data-dismiss="alert"
data-attribút.
Brûk de .alert-link
nutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.
<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>
Jou aktuele feedback oer de fuortgong fan in workflow of aksje mei ienfâldige noch fleksibele foarútgongsbalken.
Foarútgongsbalken brûke CSS3-transysjes en animaasjes om guon fan har effekten te berikken. Dizze funksjes wurde net stipe yn Internet Explorer 9 en ûnder of âldere ferzjes fan Firefox. Opera 12 stipet gjin animaasjes.
As jo webside in Content Security Policy (CSP) hat dat net tastiet style-src 'unsafe-inline'
, dan kinne jo gjin ynline style
-attributen brûke om de breedte fan 'e foarútgongbalke yn te stellen lykas werjûn yn ús foarbylden hjirûnder. Alternative metoaden foar it ynstellen fan de breedtes dy't kompatibel binne mei strikte CSP's omfetsje it brûken fan in bytsje oanpast JavaScript (dat stelt element.style.width
) of it brûken fan oanpaste CSS-klassen.
Standert foarútgong 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>
Fuortsmite de <span>
mei .sr-only
-klasse út 'e foarútgongbalke om in sichtber persintaazje te sjen.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Om derfoar te soargjen dat de labeltekst lêsber bliuwt sels foar lege persintaazjes, beskôgje dan in tafoegje min-width
oan 'e foarútgongbalke.
<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>
Foarútgongsbalken brûke guon fan deselde knop- en warskôgingsklassen foar konsekwinte stilen.
<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>
Brûkt in gradient om in striped effekt te meitsjen. Net beskikber yn IE9 en hjirûnder.
<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>
Taheakje .active
oan .progress-bar-striped
om de strepen fan rjochts nei lofts te animearjen. Net beskikber yn IE9 en hjirûnder.
<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>
Plak meardere balken yn itselde .progress
om se te stapeljen.
<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>
Abstrakte objektstilen foar it bouwen fan ferskate soarten komponinten (lykas blogkommentaar, Tweets, ensfh.)
De standert media toant in mediaobjekt (ôfbyldings, fideo, audio) links of rjochts fan in ynhâldblok.
<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>
De klassen .pull-left
en .pull-right
ek bestean en waarden earder brûkt as ûnderdiel fan de media komponint, mar wurde ôfret foar dat gebrûk as fan v3.3.0. Se binne likernôch lykweardich oan .media-left
en .media-right
, útsein dat .media-right
moat wurde pleatst nei de .media-body
yn de html.
De ôfbyldings of oare media kinne boppe, midden of ûnder wurde ôfstimd. De standert is top ôfstimd.
Cras sit amet nibh libero, yn 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 yn 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, yn 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 yn 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, yn 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 yn 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>
Mei in bytsje ekstra opmaak kinne jo media yn 'e list brûke (nuttich foar kommentaar threads of artikellisten).
Cras sit amet nibh libero, yn 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>
Listgroepen binne in fleksibele en krêftige komponint foar it werjaan fan net allinich ienfâldige listen mei eleminten, mar komplekse mei oanpaste ynhâld.
De meast basale listgroep is gewoan in net-oardere list mei listitems, en de juste klassen. Bou derop mei de opsjes dy't folgje, of jo eigen CSS as nedich.
<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>
Foegje de badges-komponint ta oan elk listgroepitem en it sil automatysk rjochts wurde pleatst.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Linkify list groep items troch it brûken fan anker tags ynstee fan list items (dat betsjut ek in âlder <div>
ynstee fan in <ul>
). Gjin ferlet fan yndividuele âlden om elk elemint.
<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>
List groep items kinne knoppen wêze ynstee fan list items (dat betsjut ek in âlder <div>
ynstee fan in <ul>
). Gjin ferlet fan yndividuele âlden om elk elemint. Brûk de standertklassen .btn
hjir net.
<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>
Taheakje .disabled
oan in .list-group-item
om grize it út te ferskinen útskeakele.
<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>
Brûk kontekstuele klassen foar styllist items, standert as keppele. Omfettet ek .active
steat.
<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>
Foegje hast elke HTML ta binnen, sels foar keppele listgroepen lykas de hjirûnder.
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>
Hoewol net altyd nedich, moatte jo soms jo DOM yn in doaze pleatse. Foar dy situaasjes, besykje it paniel komponint.
Standert is alles wat jo .panel
docht wat basisrâne en padding tapasse om wat ynhâld te befetsjen.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Foegje maklik in koptekstcontainer ta oan jo paniel mei .panel-heading
. Jo kinne ek elk opnimme <h1>
- <h6>
mei in .panel-title
klasse om in foarôfgeande koptekst ta te foegjen. De lettertypegrutte fan <h1>
- <h6>
wurde lykwols oerskreaun troch .panel-heading
.
Foar juste keppelingskleuring, wês wis dat jo keppelings pleatse yn kopteksten binnen .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>
Wrap knoppen as sekundêre tekst yn .panel-footer
. Tink derom dat panielfuotteksten gjin kleuren en rânen erfje by it brûken fan kontekstuele fariaasjes, om't se net bedoeld binne om op 'e foargrûn te stean.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Lykas oare komponinten, meitsje in paniel maklik sinfoller foar in bepaalde kontekst troch ien fan 'e kontekstuele steatklassen ta te foegjen.
<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>
Foegje alle net-grinzen ta .table
binnen in paniel foar in naadloos ûntwerp. As d'r in is .panel-body
, foegje wy in ekstra râne ta oan 'e boppekant fan' e tafel foar skieding.
Guon standert paniel ynhâld hjir. Nulla vitae elit libero, in 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.
# | Foarnamme | Achternamme | Brûkersnamme |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jacob | Thornton | @fet |
3 | Larry | de fûgel |
<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>
As der gjin paniel lichem, de komponint beweecht fan paniel kop nei tafel sûnder ûnderbrekking.
# | Foarnamme | Achternamme | Brûkersnamme |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jacob | Thornton | @fet |
3 | Larry | de fûgel |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Meitsje maklik listgroepen mei folsleine breedte op yn elk paniel.
Guon standert paniel ynhâld hjir. Nulla vitae elit libero, in 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>
Tastean browsers de dimensjes fan fideo of diashow te bepalen op basis fan 'e breedte fan har befetsjende blok troch in yntrinsike ferhâlding te meitsjen dy't goed sil skaalje op elk apparaat.
Regels wurde direkt tapast op <iframe>
, <embed>
, <video>
, en <object>
eleminten; opsjoneel brûke in eksplisite neiteam klasse .embed-responsive-item
as jo wolle oerienkomme mei de styling foar oare attributen.
Pro-Tip! Jo hoege jo net op te nimmen frameborder="0"
yn jo <iframe>
s, om't wy dat foar jo oerskriuwe.
<!-- 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>
Brûk de put as in ienfâldich effekt op in elemint om it in ynset effekt te jaan.
<div class="well">...</div>
Kontrolearje padding en rûne hoeken mei twa opsjonele modifier klassen.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>