Komponente
Meer as 'n dosyn herbruikbare komponente wat gebou is om ikonografie, aftreklys, invoergroepe, navigasie, waarskuwings en nog baie meer te verskaf.
Meer as 'n dosyn herbruikbare komponente wat gebou is om ikonografie, aftreklys, invoergroepe, navigasie, waarskuwings en nog baie meer te verskaf.
Sluit meer as 250 glyfe in lettertipe-formaat van die Glyphicon Halflings-stel in. Glyphicons Halflings is gewoonlik nie gratis beskikbaar nie, maar hul skepper het dit gratis vir Bootstrap beskikbaar gestel. As 'n dankie, vra ons net dat jy 'n skakel terug na Glyphicons insluit waar moontlik.
Om prestasieredes vereis alle ikone 'n basisklas en individuele ikoonklas. Om te gebruik, plaas die volgende kode omtrent enige plek. Maak seker dat jy 'n spasie tussen die ikoon en teks laat vir behoorlike opvulling.
Ikoonklasse kan nie direk met ander komponente gekombineer word nie. Hulle moet nie saam met ander klasse op dieselfde element gebruik word nie. Voeg eerder 'n geneste by <span>
en pas die ikoonklasse toe op die <span>
.
Ikoonklasse moet slegs gebruik word op elemente wat geen teksinhoud bevat nie en geen kinderelemente het nie.
Bootstrap neem aan dat ikoonlettertipelêers in die ../fonts/
gids geleë sal wees, relatief tot die saamgestelde CSS-lêers. Om daardie fontlêers te skuif of te hernoem, beteken om die CSS op een van drie maniere op te dateer:
@icon-font-path
en/of @icon-font-name
veranderlikes in die bron Minder lêers.url()
paaie in die saamgestelde CSS.Gebruik enige opsie wat die beste by jou spesifieke ontwikkelingsopset pas.
Moderne weergawes van ondersteunende tegnologieë sal CSS-gegenereerde inhoud aankondig, sowel as spesifieke Unicode-karakters. Om onbedoelde en verwarrende uitset in skermlesers te vermy (veral wanneer ikone suiwer vir versiering gebruik word), versteek ons dit met die aria-hidden="true"
kenmerk.
As jy 'n ikoon gebruik om betekenis oor te dra (eerder as net as 'n dekoratiewe element), maak seker dat hierdie betekenis ook aan ondersteunende tegnologieë oorgedra word – sluit byvoorbeeld bykomende inhoud in, visueel versteek met die .sr-only
klas.
As jy kontroles met geen ander teks skep nie (soos 'n <button>
wat net 'n ikoon bevat), moet jy altyd alternatiewe inhoud verskaf om die doel van die beheer te identifiseer, sodat dit sin sal maak vir gebruikers van ondersteunende tegnologieë. In hierdie geval kan jy 'n aria-label
kenmerk by die kontrole self byvoeg.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.
<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>
'n Ikoon wat in 'n waarskuwing gebruik word om oor te dra dat dit 'n foutboodskap is, met bykomende .sr-only
teks om hierdie wenk aan gebruikers van ondersteunende tegnologieë oor te dra.
<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>
Wisselbare, kontekstuele kieslys vir die vertoon van lyste skakels. Interaktief gemaak met die aftreklys JavaScript-inprop .
Draai die aftreklys se sneller en die aftreklys in .dropdown
, of 'n ander element wat verklaar position: relative;
. Voeg dan die menu se HTML by.
<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>
Aftrekkieslyste kan verander word om opwaarts (in plaas van afwaarts) uit te brei deur by .dropup
die ouer by te voeg.
<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>
By verstek word 'n aftreklys outomaties 100% van bo en langs die linkerkant van sy ouer geposisioneer. Voeg .dropdown-menu-right
by 'n .dropdown-menu
na regs-belyn die aftreklys.
Dropdowns word outomaties geposisioneer via CSS binne die normale vloei van die dokument. Dit beteken aftrekkies kan deur ouers met sekere overflow
eienskappe gesny word of buite die grense van die kykport verskyn. Pak hierdie kwessies op jou eie aan soos hulle opduik.
.pull-right
belyningVanaf v3.1.0 het ons die aftrekkieslys opgeskort .pull-right
. Gebruik om 'n spyskaart regs te belyn .dropdown-menu-right
. Regs-belynde nav-komponente in die navigasiebalk gebruik 'n mengweergawe van hierdie klas om die spyskaart outomaties in lyn te bring. Om dit te ignoreer, gebruik .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Voeg 'n kopskrif by om afdelings van handelinge in enige aftreklys te benoem.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Voeg 'n verdeler by 'n aparte reeks skakels in 'n aftreklys.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Voeg .disabled
by 'n <li>
in die aftreklys om die skakel te deaktiveer.
<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>
Groepeer 'n reeks knoppies saam op 'n enkele reël met die knoppiesgroep. Voeg opsionele JavaScript-radio- en merkblokkie-stylgedrag by met ons knoppies-inprop .
Wanneer jy gereedskapwenke of opspringers op elemente binne 'n .btn-group
gebruik, sal jy die opsie moet spesifiseer container: 'body'
om ongewenste newe-effekte te vermy (soos die element wat wyer word en/of sy afgeronde hoeke verloor wanneer die nutswenk of opspringer geaktiveer word).
role
en verskaf 'n etiketTen einde hulptegnologieë – soos skermlesers – oor te dra dat 'n reeks knoppies gegroepeer is, moet 'n toepaslike role
kenmerk verskaf word. Vir knoppiegroepe sal dit wees role="group"
, terwyl nutsbalke 'n role="toolbar"
.
Een uitsondering is groepe wat slegs 'n enkele kontrole bevat (byvoorbeeld die geregverdigde knoppiegroepe met <button>
elemente) of 'n aftreklys.
Daarbenewens moet groepe en nutsbalke 'n eksplisiete etiket gegee word, aangesien die meeste hulptegnologieë hulle andersins nie sal aankondig nie, ten spyte van die teenwoordigheid van die korrekte role
eienskap. In die voorbeelde wat hier verskaf word, gebruik ons aria-label
, maar alternatiewe soos aria-labelledby
kan ook gebruik word.
Draai 'n reeks knoppies toe met .btn
in .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Kombineer stelle <div class="btn-group">
in 'n <div class="btn-toolbar">
vir meer komplekse komponente.
<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>
In plaas daarvan om knoppiegrootteklasse op elke knoppie in 'n groep toe te pas, voeg net by .btn-group-*
elkeen .btn-group
, insluitend wanneer verskeie groepe nesgemaak word.
<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>
Plaas 'n .btn-group
in 'n ander .btn-group
wanneer jy aftrekkieslys gemeng wil hê met 'n reeks knoppies.
<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>
Laat 'n stel knoppies vertikaal gestapel vertoon eerder as horisontaal. Verdeelknoppie-aftrekkies word nie hier ondersteun nie.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Laat 'n groep knoppies ewe groot strek om oor die hele breedte van sy ouer te strek. Werk ook met knoppie-aftrekkies binne die knoppie-groep.
As gevolg van die spesifieke HTML en CSS wat gebruik word om knoppies te regverdig (naamlik display: table-cell
), word die grense tussen hulle verdubbel. In gewone knoppiegroepe margin-left: -1px
word dit gebruik om die grense te stapel in plaas daarvan om dit te verwyder. Werk egter margin
nie met display: table-cell
. As gevolg hiervan, afhangende van jou aanpassings aan Bootstrap, wil jy dalk die grense verwyder of herkleur.
Internet Explorer 8 gee nie grense aan knoppies in 'n geregverdigde knoppiegroep nie, of dit nou aan <a>
of <button>
elemente is. Om dit te vermy, draai elke knoppie in 'n ander .btn-group
.
Sien #12476 vir meer inligting.
<a>
elementeDraai net 'n reeks .btn
s in .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
As die <a>
elemente gebruik word om as knoppies op te tree - wat in-bladsy-funksionaliteit aktiveer, eerder as om na 'n ander dokument of afdeling binne die huidige bladsy te navigeer - moet hulle ook 'n toepaslike role="button"
.
<button>
elementeOm geregverdigde knoppiegroepe met <button>
elemente te gebruik, moet jy elke knoppie in 'n knoppiegroep toevou . Die meeste blaaiers pas nie ons CSS behoorlik toe om <button>
elemente te regverdig nie, maar aangesien ons knoppie-aftrekkies ondersteun, kan ons dit omseil.
<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>
Gebruik enige knoppie om 'n aftreklys te aktiveer deur dit binne 'n te plaas .btn-group
en die regte spyskaartopmaak te verskaf.
Knoppie-aftrekkies vereis dat die aftrek-inprop by jou weergawe van Bootstrap ingesluit moet word.
Verander 'n knoppie in 'n aftrek-skakelaar met 'n paar basiese opmaakveranderinge.
<!-- 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>
Skep eweneens verdeelknoppie-aftrekkies met dieselfde opmaakveranderinge, net met 'n aparte knoppie.
<!-- 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>
Knoppie-aftrekkies werk met knoppies van alle groottes.
<!-- 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>
Sneller aftrekkieslys bo elemente deur by .dropup
die ouer te voeg.
<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>
Brei vormkontroles uit deur teks of knoppies voor, na of aan beide kante van enige teksgebaseerde <input>
. Gebruik .input-group
saam met 'n .input-group-addon
of .input-group-btn
om elemente voor of by 'n enkele aan te voeg .form-control
.
<input>
sVermy die gebruik van <select>
elemente hier aangesien dit nie volledig in WebKit-blaaiers gestileer kan word nie.
Vermy die gebruik van <textarea>
elemente hier aangesien hul rows
kenmerk in sommige gevalle nie gerespekteer sal word nie.
Wanneer jy gereedskapwenke of opspringers op elemente binne 'n .input-group
gebruik, moet jy die opsie spesifiseer container: 'body'
om ongewenste newe-effekte te vermy (soos die element wat wyer word en/of sy afgeronde hoeke verloor wanneer die nutswenk of omspringer geaktiveer word).
Moenie vormgroepe of roosterkolomklasse direk met invoergroepe meng nie. In plaas daarvan, nes die invoergroep binne-in die vormgroep of roosterverwante element.
Skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie insetgroepe, maak seker dat enige bykomende etiket of funksionaliteit aan ondersteunende tegnologieë oorgedra word.
Die presiese tegniek wat gebruik moet word (sigbare <label>
elemente, elemente wat deur die klas <label>
versteek is, of die gebruik van die , , , of kenmerk) en watter bykomende inligting oorgedra moet word, sal wissel na gelang van die presiese tipe koppelvlaklegstuk wat jy implementeer. Die voorbeelde in hierdie afdeling verskaf 'n paar voorgestelde, gevalspesifieke benaderings..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
Plaas een byvoeging of knoppie aan weerskante van 'n invoer. Jy kan ook een aan beide kante van 'n invoer plaas.
Ons ondersteun nie veelvuldige byvoegings ( .input-group-addon
of .input-group-btn
) aan 'n enkele kant nie.
Ons ondersteun nie veelvuldige vormkontroles in 'n enkele invoergroep nie.
<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>
Voeg die relatiewe vormgrootteklasse by die .input-group
self en inhoud binne sal outomaties die grootte verander - dit is nie nodig om die vormbeheergrootteklasse op elke element te herhaal nie.
<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>
Plaas enige merkblokkie of radio-opsie binne 'n invoergroep se byvoeging in plaas van teks.
<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 -->
Knoppies in insetgroepe is 'n bietjie anders en vereis een ekstra vlak van nes. In plaas van .input-group-addon
, sal jy moet gebruik .input-group-btn
om die knoppies te draai. Dit word vereis weens verstekblaaierstyle wat nie oorskryf kan word nie.
<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>
Alhoewel jy net een byvoeging per kant kan hê, kan jy veelvuldige knoppies in 'n enkele .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 beskikbaar in Bootstrap het gedeelde opmaak, wat begin met die basisklas .nav
, sowel as gedeelde state. Ruil wysigerklasse om tussen elke styl te wissel.
Let op die .nav-tabs
klas vereis die .nav
basisklas.
<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>
Neem dieselfde HTML, maar gebruik .nav-pills
eerder:
<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>
Pille is ook vertikaal stapelbaar. Voeg net by .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Maak maklik oortjies of pille gelyke breedtes van hul ouer by skerms breër as 768px met .nav-justified
. Op kleiner skerms is die navigasieskakels gestapel.
Geregverdigde navigasiebalk-navigasieskakels word tans nie ondersteun nie.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Vir enige nav-komponent (oortjies of pille), voeg by .disabled
vir grys skakels en geen hover-effekte nie .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Voeg aftrekkieslyste by met 'n bietjie ekstra HTML en die aftreklys JavaScript-inprop .
<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 is responsiewe metakomponente wat as navigasieopskrifte vir jou toepassing of werf dien. Hulle begin ineengevou (en is wisselbaar) in mobiele aansigte en word horisontaal soos die beskikbare kykpoortwydte toeneem.
Geregverdigde navigasiebalk-navigasieskakels word tans nie ondersteun nie.
<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>
Vervang die navbar-handelsmerk met jou eie beeld deur die teks vir 'n <img>
. Aangesien .navbar-brand
dit sy eie vulling en hoogte het, sal jy dalk sekere CSS moet ignoreer, afhangende van jou beeld.
<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>
Plaas vorminhoud binne .navbar-form
vir behoorlike vertikale belyning en ineengestorte gedrag in nou uitsigpoorte. Gebruik die belyningsopsies om te besluit waar dit binne die navigasiebalkinhoud is.
As 'n kop op, .navbar-form
deel baie van sy kode met .form-inline
via mixin. Sommige vormkontroles, soos invoergroepe, mag vereis dat vaste breedtes behoorlik in 'n navigasiebalk vertoon word.
<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>
Voeg die .navbar-btn
klas by <button>
elemente wat nie in a woon nie <form>
om hulle vertikaal in die navigasiebalk te sentreer.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Draai stringe teks toe in 'n element met .navbar-text
, gewoonlik op 'n <p>
merker vir behoorlike leiding en kleur.
<p class="navbar-text">Signed in as Mark Otto</p>
Vir mense wat standaardskakels gebruik wat nie binne die gewone navigasiebalk-komponent is nie, gebruik die .navbar-link
klas om die regte kleure by te voeg vir die verstek- en omgekeerde navigasiebalkopsies.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Belyn navigasieskakels, vorms, knoppies of teks deur die .navbar-left
of .navbar-right
nutsklasse te gebruik. Beide klasse sal 'n CSS-float in die gespesifiseerde rigting byvoeg. Byvoorbeeld, om nav-skakels in lyn te bring, plaas hulle in 'n aparte <ul>
met die onderskeie nutsklas toegepas.
Hierdie klasse is gemengde weergawes van .pull-left
en .pull-right
, maar hulle is gemik op medianavrae vir makliker hantering van navigasiebalk-komponente oor toestelgroottes.
Voeg 'n of by .navbar-fixed-top
en sluit 'n .container
of .container-fluid
in by die inhoud van die navigasiebalk in die middel en die pad.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Voeg 'n of by .navbar-fixed-bottom
en sluit 'n .container
of .container-fluid
in by die inhoud van die navigasiebalk in die middel en die pad.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Skep 'n volle wydte navigasiebalk wat saam met die bladsy wegrol deur ' n of by te voeg .navbar-static-top
en in te sluit om die inhoud van die navigasiebalk te sentreer en in te vul..container
.container-fluid
In teenstelling met die .navbar-fixed-*
klasse, hoef jy nie enige vulling op die body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Verander die voorkoms van die navigasiebalk deur by te voeg .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan.
Skeiers word outomaties bygevoeg in CSS deur :before
en content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Verskaf pagineringskakels vir jou werf of program met die multi-bladsy paginering komponent, of die eenvoudiger pager alternatief .
Eenvoudige paginering geïnspireer deur Rdio, ideaal vir toepassings en soekresultate. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.
<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>
Die pagineringskomponent moet in 'n element toegedraai <nav>
word om dit as 'n navigasie-afdeling vir skermlesers en ander ondersteunende tegnologieë te identifiseer. Daarbenewens, aangesien 'n bladsy waarskynlik reeds meer as een so 'n navigasie-afdeling sal hê (soos die primêre navigasie in die kopskrif, of 'n sybalknavigasie), is dit raadsaam om 'n beskrywing aria-label
daarvoor te verskaf <nav>
wat die doel daarvan weerspieël. Byvoorbeeld, as die paginering-komponent gebruik word om tussen 'n stel soekresultate te navigeer, kan 'n gepaste etiket wees aria-label="Search results pages"
.
Skakels is aanpasbaar vir verskillende omstandighede. Gebruik .disabled
vir onklikbare skakels en .active
om die huidige bladsy aan te dui.
<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>
Ons beveel aan dat jy aktiewe of gedeaktiveerde ankers uitruil vir <span>
, of die anker weglaat in die geval van die vorige/volgende pyle, om klikfunksionaliteit te verwyder terwyl beoogde style behou word.
<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>
Lus vir groter of kleiner paginering? Voeg by .pagination-lg
of .pagination-sm
vir addisionele groottes.
<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>
Vinnige vorige en volgende skakels vir eenvoudige paginering-implementerings met ligte opmaak en style. Dit is ideaal vir eenvoudige werwe soos blogs of tydskrifte.
By verstek sentreer die pager skakels.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternatiewelik kan jy elke skakel na die kante in lyn bring:
<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-skakels gebruik ook die algemene .disabled
nutsklas vanaf die paginering.
<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>
Voeg enige van die wysigerklasse hieronder by om die voorkoms van 'n etiket te verander.
<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>
Weergaveprobleme kan ontstaan wanneer jy dosyne inlyn-etikette binne 'n smal houer het, wat elkeen sy eie inline-block
element bevat (soos 'n ikoon). Die manier om dit is opset display: inline-block;
. Vir konteks en 'n voorbeeld, sien #13219 .
Merk maklik nuwe of ongeleesde items deur 'n <span class="badge">
by skakels, Bootstrap navs, en meer by te voeg.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Wanneer daar geen nuwe of ongeleesde items is nie, sal kentekens eenvoudig ineenstort (via CSS se :empty
keurder) mits geen inhoud binne bestaan nie.
Kentekens sal nie self ineenstort in Internet Explorer 8 nie omdat dit nie ondersteuning vir die :empty
kieser het nie.
Ingeboude style is ingesluit vir die plasing van kentekens in aktiewe toestande in pilnavigasie.
<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>
'n Liggewig, buigsame komponent wat opsioneel die hele uitsigpoort kan uitbrei om sleutelinhoud op jou werf ten toon te stel.
Dit is 'n eenvoudige held-eenheid, 'n eenvoudige jumbotron-styl komponent om ekstra aandag te vestig op uitgesproke inhoud of inligting.
<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 die jumbotron volle breedte te maak, en sonder afgeronde hoeke, plaas dit buite alle .container
s en voeg eerder 'n .container
binne by.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
'n Eenvoudige dop om h1
gedeeltes van inhoud op 'n bladsy behoorlik uit te spasieer en te segmenteer. Dit kan die h1
se verstekelement small
gebruik, sowel as die meeste ander komponente (met bykomende style).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Brei Bootstrap se roosterstelsel uit met die duimnael-komponent om maklik roosters van beelde, video's, teks en meer te vertoon.
As jy op soek is na Pinterest-agtige aanbieding van duimnaels van verskillende hoogtes en/of breedtes, sal jy 'n derdeparty-inprop soos Masonry , Isotope of Salvattore moet gebruik .
Bootstrap se duimnaels is by verstek ontwerp om gekoppelde beelde te vertoon met minimale vereiste opmaak.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Met 'n bietjie ekstra opmaak is dit moontlik om enige soort HTML-inhoud soos opskrifte, paragrawe of knoppies by kleinkiekies by te voeg.
<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>
Verskaf kontekstuele terugvoerboodskappe vir tipiese gebruikeraksies met die handvol beskikbare en buigsame waarskuwingsboodskappe.
Vou enige teks en 'n opsionele afwys-knoppie in .alert
en een van die vier kontekstuele klasse (bv. .alert-success
) vir basiese waarskuwingsboodskappe toe.
Waarskuwings het nie verstekklasse nie, slegs basis- en wysigerklasse. 'n Standaard grys waarskuwing maak nie te veel sin nie, so daar word van jou verwag om 'n tipe via kontekstuele klas te spesifiseer. Kies uit sukses, inligting, waarskuwing of gevaar.
<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 enige waarskuwing deur 'n opsionele .alert-dismissible
en toemaakknoppie by te voeg.
Vir ten volle funksionerende, weglaatbare waarskuwings, moet jy die waarskuwings JavaScript-inprop gebruik .
<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>
Maak seker dat jy die <button>
element met die data-dismiss="alert"
data-kenmerk gebruik.
Gebruik die .alert-link
nutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.
<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>
Verskaf bygewerkte terugvoer oor die vordering van 'n werkvloei of aksie met eenvoudige dog buigsame vorderingstawe.
Vorderingstawe gebruik CSS3-oorgange en animasies om sommige van hul effekte te bereik. Hierdie kenmerke word nie in Internet Explorer 9 en laer of ouer weergawes van Firefox ondersteun nie. Opera 12 ondersteun nie animasies nie.
As jou webwerf 'n inhoudsekuriteitsbeleid (CSP) het wat nie toelaat nie style-src 'unsafe-inline'
, sal jy nie inlyn style
-kenmerke kan gebruik om vorderingstaafwydtes te stel soos in ons voorbeelde hieronder getoon nie. Alternatiewe metodes vir die opstel van die breedtes wat versoenbaar is met streng CSP's sluit in die gebruik van 'n bietjie pasgemaakte JavaScript (wat stel element.style.width
) of die gebruik van pasgemaakte CSS-klasse.
Verstek vorderingsbalk.
<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>
Verwyder die <span>
met .sr-only
-klas van binne die vorderingsbalk om 'n sigbare persentasie te wys.
<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 te verseker dat die etiketteks leesbaar bly selfs vir lae persentasies, oorweeg dit om 'n min-width
by die vorderingsbalk te voeg.
<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>
Vorderingstawe gebruik sommige van dieselfde knoppie- en waarskuwingsklasse vir konsekwente style.
<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>
Gebruik 'n gradiënt om 'n gestreepte effek te skep. Nie beskikbaar in IE9 en onder nie.
<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>
Voeg .active
by .progress-bar-striped
om die strepe regs na links te animeer. Nie beskikbaar in IE9 en onder nie.
<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>
Plaas verskeie stawe in dieselfde .progress
om hulle te stapel.
<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 voorwerpstyle vir die bou van verskillende soorte komponente (soos blogopmerkings, tweets, ens.) wat 'n links- of regs-belynde prent langs tekstuele inhoud bevat.
Die verstekmedia vertoon 'n media-voorwerp (prente, video, oudio) links of regs van 'n inhoudblok.
<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>
Die klasse .pull-left
en .pull-right
bestaan ook en is voorheen gebruik as deel van die mediakomponent, maar word opgeskort vir daardie gebruik vanaf v3.3.0. Hulle is ongeveer gelykstaande aan .media-left
en .media-right
, behalwe dat .media-right
dit na die .media-body
in die html geplaas moet word.
Die beelde of ander media kan bo, middel of onder in lyn gebring word. Die verstek is bobelyn.
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>
Met 'n bietjie ekstra opmaak, kan jy media binne lys gebruik (nuttig vir kommentaar drade of artikellyste).
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>
Lysgroepe is 'n buigsame en kragtige komponent vir die vertoon van nie net eenvoudige lyste van elemente nie, maar komplekse met persoonlike inhoud.
Die mees basiese lysgroep is bloot 'n ongeordende lys met lysitems en die regte klasse. Bou daarop met die opsies wat volg, of jou eie CSS soos nodig.
<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>
Voeg die kentekens-komponent by enige lysgroepitem en dit sal outomaties aan die regterkant geposisioneer word.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Koppel lysgroepitems deur ankermerkers in plaas van lysitems te gebruik (dit beteken ook 'n ouer <div>
in plaas van 'n <ul>
). Geen behoefte aan individuele ouers rondom elke element nie.
<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>
Lys groepitems kan knoppies wees in plaas van lysitems (dit beteken ook 'n ouer <div>
in plaas van 'n <ul>
). Geen behoefte aan individuele ouers rondom elke element nie. Moenie die standaardklasse .btn
hier gebruik nie.
<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>
Voeg .disabled
by 'n .list-group-item
om dit uit te grys om gedeaktiveer te lyk.
<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>
Gebruik kontekstuele klasse om items te styl, verstek of gekoppel. Sluit ook .active
staat in.
<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>
Voeg byna enige HTML binne, selfs vir gekoppelde lysgroepe soos die een hieronder.
Donec id elit non mi porta gravida by eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida by eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida by 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>
Alhoewel dit nie altyd nodig is nie, moet jy soms jou DOM in 'n boks plaas. Vir daardie situasies, probeer die paneelkomponent.
By verstek is al .panel
wat nodig is om 'n paar basiese rand en opvulling toe te pas om 'n bietjie inhoud te bevat.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Voeg maklik 'n opskrifhouer by jou paneel met .panel-heading
. Jy kan ook enige <h1>
- <h6>
met 'n .panel-title
klas insluit om 'n vooraf-gestileerde opskrif by te voeg. Die lettergroottes van <h1>
- <h6>
word egter deur .panel-heading
.
Vir behoorlike skakelkleur, maak seker dat jy skakels in opskrifte binne plaas .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>
Wikkel knoppies of sekondêre teks in .panel-footer
. Let daarop dat paneelvoettekste nie kleure en grense erf wanneer kontekstuele variasies gebruik word nie, aangesien dit nie bedoel is om op die voorgrond te wees nie.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Soos ander komponente, maak maklik 'n paneel meer betekenisvol vir 'n spesifieke konteks deur enige van die kontekstuele staatsklasse by te voeg.
<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>
Voeg enige nie-begrensde .table
binne 'n paneel by vir 'n naatlose ontwerp. As daar 'n .panel-body
is, voeg ons 'n ekstra rand aan die bokant van die tabel vir skeiding.
Sommige standaardpaneelinhoud hier. Nulla vitae elit libero, 'n 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.
# | Eerste naam | Van | Gebruikersnaam |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<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 daar geen paneelliggaam is nie, beweeg die komponent van paneelkop na tabel sonder onderbreking.
# | Eerste naam | Van | Gebruikersnaam |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Sluit maklik volwydte lysgroepe binne enige paneel in.
Sommige standaardpaneelinhoud hier. Nulla vitae elit libero, 'n 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>
Laat blaaiers toe om video- of skyfievertoning-afmetings te bepaal op grond van die breedte van hul inhoudblok deur 'n intrinsieke verhouding te skep wat behoorlik op enige toestel sal skaal.
Reëls word direk toegepas op <iframe>
, <embed>
, <video>
, en <object>
elemente; gebruik opsioneel 'n eksplisiete afstammelingklas .embed-responsive-item
wanneer jy die stilering vir ander eienskappe wil pas.
Pro-wenk! Jy hoef nie frameborder="0"
by jou <iframe>
s in te sluit nie, want ons ignoreer dit vir jou.
<!-- 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>
Gebruik die put as 'n eenvoudige effek op 'n element om dit 'n inset effek te gee.
<div class="well">...</div>
Beheer vulling en afgeronde hoeke met twee opsionele wysigingsklasse.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>