Componenten
Meer dan een dozijn herbruikbare componenten gebouwd om iconografie, vervolgkeuzelijsten, invoergroepen, navigatie, waarschuwingen en nog veel meer te bieden.
Meer dan een dozijn herbruikbare componenten gebouwd om iconografie, vervolgkeuzelijsten, invoergroepen, navigatie, waarschuwingen en nog veel meer te bieden.
Bevat meer dan 250 glyphs in lettertype-indeling uit de Glyphicon Halflings-set. Glyphicons Halflings zijn normaal gesproken niet gratis beschikbaar, maar hun maker heeft ze gratis beschikbaar gesteld voor Bootstrap. Als dank vragen we u alleen waar mogelijk een link naar Glyphicons op te nemen .
Om prestatieredenen hebben alle pictogrammen een basisklasse en een individuele pictogramklasse nodig. Plaats de volgende code zo ongeveer overal om te gebruiken. Zorg ervoor dat u een spatie laat tussen het pictogram en de tekst voor een goede opvulling.
Icoonklassen kunnen niet direct worden gecombineerd met andere componenten. Ze mogen niet samen met andere klassen op hetzelfde element worden gebruikt. Voeg in plaats daarvan een geneste toe <span>
en pas de pictogramklassen toe op het <span>
.
Pictogramklassen mogen alleen worden gebruikt op elementen die geen tekstinhoud bevatten en geen onderliggende elementen hebben.
Bootstrap gaat ervan uit dat pictogramlettertypebestanden zich in de ../fonts/
map bevinden, relatief aan de gecompileerde CSS-bestanden. Het verplaatsen of hernoemen van die lettertypebestanden betekent het bijwerken van de CSS op een van de volgende drie manieren:
@icon-font-path
en/of @icon-font-name
variabelen in de bron Less-bestanden.url()
paden in de gecompileerde CSS.Gebruik de optie die het beste bij uw specifieke ontwikkelingsopstelling past.
Moderne versies van ondersteunende technologieën zullen door CSS gegenereerde inhoud aankondigen, evenals specifieke Unicode-tekens. Om onbedoelde en verwarrende uitvoer in schermlezers te voorkomen (vooral wanneer pictogrammen puur voor decoratie worden gebruikt), verbergen we ze met het aria-hidden="true"
attribuut.
Als je een pictogram gebruikt om betekenis over te brengen (in plaats van alleen als decoratief element), zorg er dan voor dat deze betekenis ook wordt overgebracht naar ondersteunende technologieën – voeg bijvoorbeeld extra inhoud toe die visueel verborgen is bij de .sr-only
klas.
Als u besturingselementen maakt zonder andere tekst (zoals een <button>
die alleen een pictogram bevat), moet u altijd alternatieve inhoud bieden om het doel van het besturingselement te identificeren, zodat het begrijpelijk is voor gebruikers van ondersteunende technologieën. In dit geval kunt u een aria-label
attribuut toevoegen aan het besturingselement zelf.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Gebruik ze in knoppen, knopgroepen voor een werkbalk, navigatie of invoer in voorgevoegde formulieren.
<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>
Een pictogram dat in een waarschuwing wordt gebruikt om aan te geven dat het een foutmelding is, met aanvullende .sr-only
tekst om deze hint door te geven aan gebruikers van ondersteunende technologieën.
<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>
Schakelbaar, contextueel menu voor het weergeven van lijsten met links. Interactief gemaakt met de dropdown JavaScript plugin .
Wikkel de trigger van de vervolgkeuzelijst en het vervolgkeuzemenu in .dropdown
, of een ander element dat declareert position: relative;
. Voeg vervolgens de HTML van het menu toe.
<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>
Vervolgkeuzemenu's kunnen worden gewijzigd om naar boven uit te breiden (in plaats van naar beneden) door toe te voegen .dropup
aan de bovenliggende.
<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>
Standaard wordt een vervolgkeuzemenu automatisch 100% vanaf de bovenkant en langs de linkerkant van het bovenliggende menu geplaatst. Voeg toe .dropdown-menu-right
aan een .dropdown-menu
om het vervolgkeuzemenu rechts uit te lijnen.
Dropdowns worden automatisch gepositioneerd via CSS binnen de normale stroom van het document. Dit betekent dat vervolgkeuzelijsten kunnen worden bijgesneden door ouders met bepaalde overflow
eigenschappen of buiten de grenzen van de viewport verschijnen. Pak deze problemen zelf aan zodra ze zich voordoen.
.pull-right
uitlijningVanaf v3.1.0 hebben we de .pull-right
vervolgkeuzemenu's beëindigd. Gebruik om een menu rechts uit te lijnen .dropdown-menu-right
. Rechts uitgelijnde navigatiecomponenten in de navigatiebalk gebruiken een mixin-versie van deze klasse om het menu automatisch uit te lijnen. Gebruik om het te negeren .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Voeg een koptekst toe om secties van acties in een vervolgkeuzemenu te labelen.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Voeg een scheidingslijn toe om reeksen links te scheiden in een vervolgkeuzemenu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Voeg toe .disabled
aan een <li>
in de vervolgkeuzelijst om de link uit te schakelen.
<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 een reeks knoppen op een enkele regel met de knopgroep. Voeg optioneel JavaScript-radio en checkbox-stijlgedrag toe met onze plug-in voor knoppen .
Wanneer u tooltips of popovers gebruikt voor elementen binnen een .btn-group
, moet u de optie specificeren container: 'body'
om ongewenste neveneffecten te voorkomen (zoals het element dat breder wordt en/of zijn afgeronde hoeken verliest wanneer de tooltip of popover wordt geactiveerd).
role
en geef een label opOm ervoor te zorgen dat ondersteunende technologieën – zoals schermlezers – kunnen aangeven dat een reeks knoppen is gegroepeerd, moet een geschikt role
attribuut worden verstrekt. Voor knopgroepen is dit role="group"
, terwijl werkbalken een role="toolbar"
.
Een uitzondering zijn groepen die slechts één besturingselement bevatten (bijvoorbeeld de uitgevulde knopgroepen met <button>
elementen) of een dropdown.
Daarnaast moeten groepen en werkbalken een expliciet label krijgen, omdat de meeste hulptechnologieën ze anders niet zullen aankondigen, ondanks de aanwezigheid van het juiste role
kenmerk. In de hier gegeven voorbeelden gebruiken we aria-label
, maar alternatieven zoals die aria-labelledby
kunnen ook worden gebruikt.
Wikkel een reeks knopen in 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>
Combineer sets van <div class="btn-group">
tot een <div class="btn-toolbar">
voor meer complexe componenten.
<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 plaats van klassen voor knopgrootte toe te passen op elke knop in een groep, voegt u gewoon toe .btn-group-*
aan elke .btn-group
, ook wanneer u meerdere groepen nest.
<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>
Plaats een .btn-group
in een andere .btn-group
wanneer u vervolgkeuzemenu's wilt vermengen met een reeks 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>
Laat een set knoppen verticaal gestapeld lijken in plaats van horizontaal. Dropdownmenu's met gesplitste knoppen worden hier niet ondersteund.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Laat een groep knoppen even groot uitrekken om de volledige breedte van het bovenliggende element te overspannen. Werkt ook met vervolgkeuzemenu's binnen de knopgroep.
Vanwege de specifieke HTML en CSS die worden gebruikt om knoppen te rechtvaardigen (namelijk display: table-cell
), worden de randen ertussen verdubbeld. In gewone knopgroepen margin-left: -1px
wordt het gebruikt om de randen te stapelen in plaats van ze te verwijderen. Werkt echter margin
niet met display: table-cell
. Als gevolg hiervan, afhankelijk van uw aanpassingen aan Bootstrap, wilt u misschien de randen verwijderen of opnieuw kleuren.
Internet Explorer 8 geeft geen randen weer van knoppen in een uitgevulde knopgroep, of deze nu op <a>
of op <button>
elementen staat. Om dat te omzeilen, wikkel je elke knop in een andere .btn-group
.
Zie #12476 voor meer informatie.
<a>
elementenWikkel gewoon een reeks .btn
s in .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Als de <a>
elementen worden gebruikt om als knoppen te fungeren – waardoor in-page-functionaliteit wordt geactiveerd, in plaats van naar een ander document of sectie binnen de huidige pagina te navigeren – moeten ze ook een geschikt role="button"
.
<button>
elementenOm uitgevulde knopgroepen met <button>
elementen te gebruiken, moet u elke knop in een knopgroep plaatsen . De meeste browsers passen onze CSS voor uitvulling niet goed toe op <button>
elementen, maar aangezien we vervolgkeuzelijsten voor knoppen ondersteunen, kunnen we daar omheen werken.
<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 een willekeurige knop om een vervolgkeuzemenu te activeren door het in a te plaatsen .btn-group
en de juiste menu-opmaak te geven.
Voor vervolgkeuzemenu's voor knoppen moet de vervolgkeuzeplug- in worden opgenomen in uw versie van Bootstrap.
Verander een knop in een vervolgkeuzeknop met enkele basisopmaakwijzigingen.
<!-- 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>
Maak op dezelfde manier vervolgkeuzemenu's voor gesplitste knoppen met dezelfde opmaakwijzigingen, alleen met een 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>
Dropdownmenu's voor knoppen werken met knoppen van alle formaten.
<!-- 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>
Activeer vervolgkeuzemenu's boven elementen door toe te voegen .dropup
aan de bovenliggende.
<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>
Breid formulierbesturingselementen uit door tekst of knoppen toe te voegen voor, na of aan beide zijden van een tekstgebaseerd <input>
. Gebruik .input-group
met een .input-group-addon
of .input-group-btn
om elementen toe te voegen aan of toe te voegen aan een enkel .form-control
.
<input>
sVermijd het gebruik van <select>
elementen hier omdat ze niet volledig kunnen worden gestileerd in WebKit-browsers.
Vermijd <textarea>
hier het gebruik van elementen, omdat hun rows
attribuut in sommige gevallen niet wordt gerespecteerd.
Wanneer u tooltips of popovers gebruikt voor elementen binnen een .input-group
, moet u de optie specificeren container: 'body'
om ongewenste neveneffecten te voorkomen (zoals het element dat breder wordt en/of zijn afgeronde hoeken verliest wanneer de tooltip of popover wordt geactiveerd).
Meng formuliergroepen of rasterkolomklassen niet rechtstreeks met invoergroepen. Nest in plaats daarvan de invoergroep binnen de formuliergroep of het rastergerelateerde element.
Schermlezers zullen problemen hebben met uw formulieren als u niet voor elke invoer een label opneemt. Zorg er voor deze invoergroepen voor dat eventuele aanvullende labels of functies worden doorgegeven aan ondersteunende technologieën.
De exacte techniek die moet worden gebruikt (zichtbare <label>
elementen, <label>
verborgen elementen met behulp van de .sr-only
klasse, of het gebruik van het , , of aria-label
attribuut aria-labelledby
) aria-describedby
en welke aanvullende informatie moet worden overgebracht, is afhankelijk van het exacte type interface-widget dat u implementeert. De voorbeelden in deze sectie bieden een paar voorgestelde, casusspecifieke benaderingen.title
placeholder
Plaats een add-on of knop aan weerszijden van een ingang. U kunt er ook een aan beide zijden van een ingang plaatsen.
We ondersteunen niet meerdere add-ons ( .input-group-addon
of .input-group-btn
) aan één kant.
We ondersteunen niet meerdere formulierbesturingselementen in één invoergroep.
<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 de relatieve formuliergrootteklassen toe aan de .input-group
zelf en de inhoud binnenin wordt automatisch aangepast - het is niet nodig om de formuliercontrolegrootteklassen op elk element te herhalen.
<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>
Plaats een selectievakje of radio-optie in de add-on van een invoergroep in plaats van 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 in invoergroepen zijn een beetje anders en vereisen een extra niveau van nesten. In plaats van .input-group-addon
, moet u gebruiken .input-group-btn
om de knoppen in te pakken. Dit is vereist vanwege standaard browserstijlen die niet kunnen worden overschreven.
<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>
Hoewel u slechts één add-on per zijde kunt hebben, kunt u meerdere knoppen in één .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 die beschikbaar zijn in Bootstrap hebben gedeelde opmaak, beginnend met de basisklasse .nav
, evenals gedeelde statussen. Wissel modificatieklassen om tussen elke stijl te schakelen.
Merk op dat de klasse de basisklasse .nav-tabs
vereist ..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>
Neem dezelfde HTML, maar gebruik .nav-pills
in plaats daarvan:
<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 zijn ook verticaal stapelbaar. Voeg gewoon toe .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Maak eenvoudig tabbladen of pillen even breed als hun ouder op schermen die breder zijn dan 768px met .nav-justified
. Op kleinere schermen zijn de nav-links gestapeld.
Uitgevulde navbar-nav-links worden momenteel niet ondersteund.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Voor elke navigatiecomponent (tabbladen of pillen), voeg grijze links .disabled
toe en geen zweefeffecten .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Voeg dropdown menu's toe met een beetje extra 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 zijn responsieve metacomponenten die dienen als navigatieheaders voor uw applicatie of site. Ze beginnen samengevouwen (en kunnen worden omgeschakeld) in mobiele weergaven en worden horizontaal naarmate de beschikbare breedte van de viewport toeneemt.
Uitgevulde navbar-nav-links worden momenteel niet ondersteund.
<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 het merk van de navigatiebalk door uw eigen afbeelding door de tekst te verwisselen voor een <img>
. Aangezien het .navbar-brand
zijn eigen opvulling en hoogte heeft, moet u mogelijk wat CSS overschrijven, afhankelijk van uw afbeelding.
<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>
Plaats formulierinhoud binnen .navbar-form
voor een juiste verticale uitlijning en samengevouwen gedrag in smalle viewports. Gebruik de uitlijningsopties om te bepalen waar het zich binnen de inhoud van de navigatiebalk bevindt.
Als een heads-up, .navbar-form
deelt een groot deel van zijn code met .form-inline
via mixin. Sommige formulierbesturingselementen, zoals invoergroepen, vereisen mogelijk vaste breedten om correct te worden weergegeven in een navigatiebalk.
<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 de .navbar-btn
klasse toe aan <button>
elementen die zich niet in a <form>
bevinden om ze verticaal in de navigatiebalk te centreren.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Wikkel tekstreeksen in een element met .navbar-text
, meestal op een <p>
tag voor de juiste regelafstand en kleur.
<p class="navbar-text">Signed in as Mark Otto</p>
Voor mensen die standaardkoppelingen gebruiken die niet binnen de reguliere navigatiecomponent van de navigatiebalk vallen, gebruikt u de .navbar-link
klasse om de juiste kleuren toe te voegen voor de standaard- en inverse navigatiebalkopties.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Lijn nav-links, formulieren, knoppen of tekst uit met behulp van de .navbar-left
of .navbar-right
utility-klassen. Beide klassen voegen een CSS-float toe in de opgegeven richting. Als u bijvoorbeeld nav-links wilt uitlijnen, plaatst u ze in een aparte map <ul>
met de respectievelijke toepassingsklasse.
Deze klassen zijn gemengde versies van .pull-left
en .pull-right
, maar ze zijn gericht op mediaquery's voor eenvoudigere verwerking van navigatiebalkcomponenten voor verschillende apparaatgroottes.
Voeg .navbar-fixed-top
een .container
of toe en voeg deze toe om de .container-fluid
inhoud van de navigatiebalk te centreren en op te vullen.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Voeg .navbar-fixed-bottom
een .container
of toe en voeg deze toe om de .container-fluid
inhoud van de navigatiebalk te centreren en op te vullen.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Maak een navigatiebalk over de volledige breedte die met de pagina meeschuift door een of toe te voegen .navbar-static-top
en op te nemen om de inhoud van de navigatiebalk te centreren en op te vullen..container
.container-fluid
In tegenstelling tot de .navbar-fixed-*
klassen, hoeft u geen opvulling op de body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Pas het uiterlijk van de navigatiebalk aan door toe te voegen .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Geef de locatie van de huidige pagina binnen een navigatiehiërarchie aan.
Scheidingstekens worden automatisch toegevoegd in CSS via :before
en content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Bied pagineringslinks voor uw site of app met de pagineringscomponent met meerdere pagina's, of het eenvoudigere pager-alternatief .
Eenvoudige paginering geïnspireerd door Rdio, ideaal voor apps en zoekresultaten. Het grote blok is moeilijk te missen, gemakkelijk schaalbaar en biedt grote klikgebieden.
<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 pagineringcomponent moet in een <nav>
element worden verpakt om het te identificeren als een navigatiesectie voor schermlezers en andere ondersteunende technologieën. Bovendien, aangezien een pagina waarschijnlijk al meer dan één van dergelijke navigatiesecties heeft (zoals de primaire navigatie in de koptekst of een zijbalknavigatie), is het raadzaam om een beschrijving te geven aria-label
voor de pagina <nav>
die het doel ervan weerspiegelt. Als de pagineringscomponent bijvoorbeeld wordt gebruikt om tussen een reeks zoekresultaten te navigeren, kan een geschikt label zijn aria-label="Search results pages"
.
Links zijn aanpasbaar voor verschillende omstandigheden. Gebruik .disabled
voor niet-klikbare links en .active
om de huidige pagina aan te geven.
<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>
We raden u aan actieve of uitgeschakelde ankers om te wisselen voor <span>
, of het anker weg te laten in het geval van de vorige/volgende pijlen, om de klikfunctionaliteit te verwijderen met behoud van de beoogde stijlen.
<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>
Zin in grotere of kleinere paginering? Voeg toe .pagination-lg
of .pagination-sm
voor extra 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 vorige en volgende links voor eenvoudige pagineringsimplementaties met lichte opmaak en stijlen. Het is geweldig voor eenvoudige sites zoals blogs of tijdschriften.
Standaard centreert de pager links.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Als alternatief kunt u elke link op de zijkanten uitlijnen:
<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-koppelingen gebruiken ook de algemene .disabled
hulpprogrammaklasse van de 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 een van de onderstaande modificatieklassen toe om het uiterlijk van een label te wijzigen.
<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>
Renderproblemen kunnen optreden wanneer u tientallen inline-labels in een smalle container hebt, elk met een eigen inline-block
element (zoals een pictogram). De manier om dit te omzeilen is instellen display: inline-block;
. Zie #13219 voor context en een voorbeeld .
Markeer eenvoudig nieuwe of ongelezen items door a toe te voegen <span class="badge">
aan links, Bootstrap-navigatiesystemen en meer.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Als er geen nieuwe of ongelezen items zijn, zullen badges gewoon samenvouwen (via de CSS- :empty
kiezer) op voorwaarde dat er geen inhoud in bestaat.
Badges zullen niet vanzelf samenvouwen in Internet Explorer 8 omdat er geen ondersteuning is voor de :empty
selector.
Ingebouwde stijlen zijn inbegrepen voor het plaatsen van badges in actieve toestanden in pilnavigatie.
<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>
Een lichtgewicht, flexibel onderdeel dat optioneel de hele viewport kan uitbreiden om belangrijke inhoud op uw site te presenteren.
Dit is een eenvoudige hero-eenheid, een eenvoudige jumbotron-achtige component om extra aandacht te vragen voor aanbevolen inhoud of informatie.
<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 over de volle breedte en zonder afgeronde hoeken te maken, plaatst u deze buiten alle .container
s en voegt u in plaats daarvan een .container
binnen toe.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Een eenvoudige shell om h1
delen van inhoud op een pagina op de juiste manier te verdelen en te segmenteren. Het kan het h1
standaardelement 's gebruiken small
, evenals de meeste andere componenten (met extra stijlen).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Breid het rastersysteem van Bootstrap uit met de miniatuurcomponent om eenvoudig rasters van afbeeldingen, video's, tekst en meer weer te geven.
Als u op zoek bent naar een Pinterest-achtige presentatie van miniaturen van verschillende hoogtes en/of breedtes, moet u een plug-in van derden gebruiken, zoals Masonry , Isotope of Salvattore .
Standaard zijn de miniaturen van Bootstrap ontworpen om gekoppelde afbeeldingen te laten zien 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 een beetje extra opmaak is het mogelijk om elk soort HTML-inhoud, zoals koppen, alinea's of knoppen, toe te voegen aan miniaturen.
<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>
Bied contextuele feedbackberichten voor typische gebruikersacties met een handvol beschikbare en flexibele waarschuwingsberichten.
Wikkel elke tekst en een optionele sluitknop in .alert
en een van de vier contextuele klassen (bijv. .alert-success
) voor basiswaarschuwingsberichten.
Waarschuwingen hebben geen standaardklassen, alleen basis- en modificatieklassen. Een standaard grijze waarschuwing is niet zo logisch, dus u moet een type opgeven via contextuele klasse. Kies uit succes, info, waarschuwing 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>
Bouw voort op elke waarschuwing door een optionele .alert-dismissible
en sluitknop toe te voegen.
Voor volledig functionerende, verwijderbare waarschuwingen moet u de JavaScript-plug- in voor waarschuwingen gebruiken .
<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>
Zorg ervoor dat u het <button>
element met het data-dismiss="alert"
data-attribuut gebruikt.
Gebruik de .alert-link
utility-klasse om snel bijpassende gekleurde links te geven binnen een alert.
<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>
Geef up-to-date feedback over de voortgang van een workflow of actie met eenvoudige maar flexibele voortgangsbalken.
Voortgangsbalken gebruiken CSS3-overgangen en animaties om sommige van hun effecten te bereiken. Deze functies worden niet ondersteund in Internet Explorer 9 en lager of oudere versies van Firefox. Opera 12 ondersteunt geen animaties.
Als uw website een inhoudsbeveiligingsbeleid (CSP) heeft dat , niet toestaat style-src 'unsafe-inline'
, kunt u geen inline- style
kenmerken gebruiken om de breedte van de voortgangsbalk in te stellen, zoals weergegeven in onze onderstaande voorbeelden. Alternatieve methoden voor het instellen van de breedtes die compatibel zijn met strikte CSP's zijn onder meer het gebruik van een beetje aangepast JavaScript (dat stelt element.style.width
) of het gebruik van aangepaste CSS-klassen.
Standaard voortgangsbalk.
<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>
Verwijder de <span>
with .sr-only
class uit de voortgangsbalk om een zichtbaar percentage weer te geven.
<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 ervoor te zorgen dat de labeltekst zelfs bij lage percentages leesbaar blijft, kunt u overwegen een min-width
aan de voortgangsbalk toe te voegen.
<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>
Voortgangsbalken gebruiken enkele van dezelfde knop- en waarschuwingsklassen voor consistente stijlen.
<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>
Gebruikt een verloop om een gestreept effect te creëren. Niet beschikbaar in IE9 en lager.
<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>
Toevoegen .active
aan .progress-bar-striped
om de strepen van rechts naar links te animeren. Niet beschikbaar in IE9 en lager.
<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>
Plaats meerdere staven in dezelfde .progress
om ze te stapelen.
<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>
Abstracte objectstijlen voor het bouwen van verschillende soorten componenten (zoals blogopmerkingen, Tweets, enz.) met een links of rechts uitgelijnde afbeelding naast tekstuele inhoud.
De standaard media toont een media-object (afbeeldingen, video, audio) links of rechts van een inhoudsblok.
<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
bestaan ook en werden eerder gebruikt als onderdeel van de mediacomponent, maar zijn voor dat gebruik vanaf v3.3.0 verouderd. Ze zijn ongeveer gelijk aan .media-left
en .media-right
, behalve dat .media-right
ze na de .media-body
in de html moeten worden geplaatst.
De afbeeldingen of andere media kunnen bovenaan, in het midden of onderaan worden uitgelijnd. De standaard is boven uitgelijnd.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputaat bij, 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 vulputaat bij, 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 vulputaat bij, 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 een beetje extra opmaak kun je media in de lijst gebruiken (handig voor discussielijnen met opmerkingen of lijsten met artikelen).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputaat bij, 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>
Lijstgroepen zijn een flexibel en krachtig onderdeel voor het weergeven van niet alleen eenvoudige lijsten met elementen, maar ook complexe met aangepaste inhoud.
De meest elementaire lijstgroep is gewoon een ongeordende lijst met lijstitems en de juiste klassen. Bouw erop voort met de opties die volgen, of uw eigen CSS indien 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 de badge-component toe aan elk lijstgroepitem en het zal automatisch aan de rechterkant worden gepositioneerd.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Koppel lijstgroepsitems door ankertags te gebruiken in plaats van lijstitems (dat betekent ook een bovenliggende <div>
in plaats van een <ul>
). Geen behoefte aan individuele ouders rond elk element.
<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>
Lijstgroepitems kunnen knoppen zijn in plaats van lijstitems (dat betekent ook een bovenliggende <div>
in plaats van een <ul>
). Geen behoefte aan individuele ouders rond elk element. Gebruik .btn
hier niet de standaard klassen.
<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 toe .disabled
aan a .list-group-item
om het grijs te maken zodat het uitgeschakeld lijkt.
<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 contextuele klassen om lijstitems op te maken, standaard of gekoppeld. Staat ook onder .active
.
<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 bijna elke HTML toe, zelfs voor gekoppelde lijstgroepen zoals die hieronder.
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida bij 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>
Hoewel het niet altijd nodig is, moet je soms je DOM in een doos stoppen. Probeer in die situaties de paneelcomponent.
Standaard .panel
is het enige wat u moet doen een basisrand en opvulling toepassen om wat inhoud te bevatten.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Voeg eenvoudig een koptekstcontainer toe aan uw paneel met .panel-heading
. U kunt ook elke <h1>
- <h6>
met een .panel-title
klasse opnemen om een vooraf opgemaakte kop toe te voegen. De lettergroottes van <h1>
- <h6>
worden echter overschreven door .panel-heading
.
Voor de juiste kleur van de link, zorg ervoor dat u links in kopjes 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>
Wikkel knoppen of secundaire tekst in .panel-footer
. Merk op dat paneelvoetteksten geen kleuren en randen erven bij gebruik van contextuele variaties, aangezien ze niet op de voorgrond horen te staan.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Net als andere componenten kunt u een paneel eenvoudig zinvoller maken voor een bepaalde context door een van de contextuele statusklassen toe te voegen.
<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>
.table
Voeg binnen een paneel niet-begrensd toe voor een naadloos ontwerp. Als er een is .panel-body
, voegen we een extra rand toe aan de bovenkant van de tabel voor scheiding.
Hier wat standaard paneelinhoud. Nulla vitae elit libero, een 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.
# | Voornaam | Achternaam | gebruikersnaam |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<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>
Als er geen paneellichaam is, wordt het onderdeel zonder onderbreking van de paneelkop naar de tabel verplaatst.
# | Voornaam | Achternaam | gebruikersnaam |
---|---|---|---|
1 | Markering | Otto | @mdo |
2 | Jakob | Thornton | @dik |
3 | Larry | de vogel |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Voeg eenvoudig lijstgroepen over de volledige breedte toe aan elk paneel.
Hier wat standaard paneelinhoud. Nulla vitae elit libero, een 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 browsers de afmetingen van video's of diavoorstellingen bepalen op basis van de breedte van hun bevattende blok door een intrinsieke verhouding te creëren die op elk apparaat correct kan worden geschaald.
Regels worden direct toegepast op <iframe>
, <embed>
, <video>
, en <object>
elementen; gebruik optioneel een expliciete afstammelingsklasse .embed-responsive-item
wanneer u de styling voor andere attributen wilt matchen.
Pro-tip! U hoeft deze niet frameborder="0"
in uw <iframe>
s op te nemen, omdat we die voor u overschrijven.
<!-- 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 de put als een eenvoudig effect op een element om het een ingevoegd effect te geven.
<div class="well">...</div>
Beheer de opvulling en afgeronde hoeken met twee optionele modificatieklassen.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>