Beschikbare symbolen

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 .

glyphicon glyphicon-sterretje
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-wolk
glyphicon glyphicon-envelop
glyphicon glyphicon-potlood
glyphicon glyphicon-glas
glyphicon glyphicon-muziek
glyphicon glyphicon-zoeken
glyphicon glyphicon-hart
glyphicon glyphicon-ster
glyphicon glyphicon-ster-leeg
glyphicon glyphicon-gebruiker
glyphicon glyphicon-film
glyphicon glyphicon-th-groot
glyphicon glyphicon-th
glyphicon glyphicon-th-lijst
glyphicon glyphicon-oké
glyphicon glyphicon-verwijderen
glyphicon glyphicon-inzoomen
glyphicon glyphicon-uitzoomen
glyphicon glyphicon-uit
glyphicon glyphicon-signaal
glyphicon glyphicon-tandwiel
glyphicon glyphicon-prullenbak
glyphicon glyphicon-home
glyphicon glyphicon-bestand
glyphicon glyphicon-tijd
glyphicon glyphicon-weg
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-speelcirkel
glyphicon glyphicon-herhalen
glyphicon glyphicon-refresh
glyphicon glyphicon-lijst-alt
glyphicon glyphicon-lock
glyphicon glyphicon-vlag
glyphicon glyphicon-hoofdtelefoon
glyphicon glyphicon-volume-uit
glyphicon glyphicon-volume-omlaag
glyphicon glyphicon-volume omhoog
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-boek
glyphicon glyphicon-bladwijzer
glyphicon glyphicon-afdruk
glyphicon glyphicon-camera
glyphicon glyphicon-lettertype
glyphicon glyphicon-vet
glyphicon glyphicon-cursief
glyphicon glyphicon-teksthoogte
glyphicon glyphicon-tekstbreedte
glyphicon glyphicon-uitlijnen-links
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-uitlijnen-uitvullen
glyphicon glyphicon-lijst
glyphicon glyphicon-inspringing-links
glyphicon glyphicon-inspringing-rechts
glyphicon glyphicon-facetime-video
glyphicon glyphicon-afbeelding
glyphicon glyphicon-kaart-marker
glyphicon glyphicon-aanpassen
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-aandeel
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-stap achteruit
glyphicon glyphicon-snel achteruit
glyphicon glyphicon-achteruit
glyphicon glyphicon-play
glyphicon glyphicon-pauze
glyphicon glyphicon-stop
glyphicon glyphicon-vooruit
glyphicon glyphicon-snel vooruitspoelen
glyphicon glyphicon-stap-vooruit
glyphicon glyphicon-uitwerpen
glyphicon glyphicon-chevron-links
glyphicon glyphicon-chevron-rechts
glyphicon glyphicon-plus-teken
glyphicon glyphicon-minteken
glyphicon glyphicon-verwijder-teken
glyphicon glyphicon-ok-teken
glyphicon glyphicon-vraagteken
glyphicon glyphicon-info-teken
glyphicon glyphicon-screenshot
glyphicon glyphicon-cirkel verwijderen
glyphicon glyphicon-ok-cirkel
glyphicon glyphicon-ban-cirkel
glyphicon glyphicon-pijl-links
glyphicon glyphicon-pijl-rechts
glyphicon glyphicon-pijl-omhoog
glyphicon glyphicon-pijl-omlaag
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-uitroepteken
glyphicon glyphicon-geschenk
glyphicon glyphicon-blad
glyphicon glyphicon-vuur
glyphicon glyphicon-oog-open
glyphicon glyphicon-oog dichtbij
glyphicon glyphicon-waarschuwingsteken
glyphicon glyphicon-vlak
glyphicon glyphicon-kalender
glyphicon glyphicon-willekeurig
glyphicon glyphicon-commentaar
glyphicon glyphicon-magneet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-winkelwagentje
glyphicon glyphicon-map-close
glyphicon glyphicon-map-open
glyphicon glyphicon-formaat wijzigen-verticaal
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bel
glyphicon glyphicon-certificaat
glyphicon glyphicon-duim omhoog
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-rechts
glyphicon glyphicon-hand-links
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-cirkel-pijl-rechts
glyphicon glyphicon-cirkel-pijl-links
glyphicon glyphicon-cirkel-pijl-omhoog
glyphicon glyphicon-cirkel-pijl-omlaag
glyphicon glyphicon-globe
glyphicon glyphicon-sleutel
glyphicon glyphicon-taken
glyphicon glyphicon-filter
glyphicon glyphicon-aktetas
glyphicon glyphicon-volledig scherm
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-hart-leeg
glyphicon glyphicon-link
glyphicon glyphicon-telefoon
glyphicon glyphicon-punaise
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sorteren op alfabet
glyphicon glyphicon-sorteer-op-alfabet-alt
glyphicon glyphicon-sorteer-op-volgorde
glyphicon glyphicon-sorteer-op-volgorde-alt
glyphicon glyphicon-sorteren op attributen
glyphicon glyphicon-sorteer-op-kenmerken-alt
glyphicon glyphicon-uitgeschakeld
glyphicon glyphicon-uitbreiden
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-login
glyphicon glyphicon-flash
glyphicon glyphicon-uitloggen
glyphicon glyphicon-nieuw-venster
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-opgeslagen
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-verwijderen
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-creditcard
glyphicon glyphicon-overdracht
glyphicon glyphicon-bestek
glyphicon glyphicon-header
glyphicon glyphicon-gecomprimeerd
glyphicon glyphicon-oortelefoon
glyphicon glyphicon-telefoon-alt
glyphicon glyphicon-toren
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-ondertitels
glyphicon glyphicon-geluid-stereo
glyphicon glyphicon-geluid-dolby
glyphicon glyphicon-geluid-5-1
glyphicon glyphicon-geluid-6-1
glyphicon glyphicon-geluid-7-1
glyphicon glyphicon-copyright-merk
glyphicon glyphicon-registratiemerk
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-boom-conifeer
glyphicon glyphicon-boom-bladverliezend
glyphicon glyphicon-cd
glyphicon glyphicon-bestand opslaan
glyphicon glyphicon-open-bestand
glyphicon glyphicon-niveau omhoog
glyphicon glyphicon-kopie
glyphicon glyphicon-pasta
glyphicon glyphicon-waarschuwing
glyphicon glyphicon-equalizer
glyphicon glyphicon-koning
glyphicon glyphicon-koningin
glyphicon glyphicon-pion
glyphicon glyphicon-bisschop
glyphicon glyphicon-ridder
glyphicon glyphicon-baby-formule
glyphicon glyphicon-tent
glyphicon glyphicon-schoolbord
glyphicon glyphicon-bed
glyphicon glyphicon-appel
glyphicon glyphicon-wissen
glyphicon glyphicon-zandloper
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicaat
glyphicon glyphicon-spaarpot
glyphicon glyphicon-schaar
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-roebel
glyphicon glyphicon-rub
glyphicon glyphicon-schaal
glyphicon glyphicon-ijslolly
glyphicon glyphicon-ijs-lolly-geproefd
glyphicon glyphicon-onderwijs
glyphicon glyphicon-optie-horizontaal
glyphicon glyphicon-optie-verticaal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modaal-venster
glyphicon glyphicon-olie
glyphicon glyphicon-grain
glyphicon glyphicon-zonnebril
glyphicon glyphicon-tekstgrootte
glyphicon glyphicon-tekstkleur
glyphicon glyphicon-tekst-achtergrond
glyphicon glyphicon-object-uitlijnen-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-uitlijnen-horizontaal
glyphicon glyphicon-object-uitlijnen-links
glyphicon glyphicon-object-uitlijnen-verticaal
glyphicon glyphicon-object-uitlijnen-rechts
glyphicon glyphicon-driehoek-rechts
glyphicon glyphicon-driehoek-links
glyphicon glyphicon-driehoek-bodem
glyphicon glyphicon-driehoek-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-links
glyphicon glyphicon-menu-rechts
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Hoe te gebruiken

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.

Niet mengen met andere componenten

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>.

Alleen voor gebruik op lege elementen

Pictogramklassen mogen alleen worden gebruikt op elementen die geen tekstinhoud bevatten en geen onderliggende elementen hebben.

De locatie van het pictogramlettertype wijzigen

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:

Wijzig de @icon-font-pathen/of @icon-font-namevariabelen in de bron Less-bestanden.
Gebruik de optie voor relatieve URL's die wordt geboden door de Less-compiler.
Wijzig de url()paden in de gecompileerde CSS.

Gebruik de optie die het beste bij uw specifieke ontwikkelingsopstelling past.

Toegankelijke pictogrammen

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-onlyklas.

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-labelattribuut toevoegen aan het besturingselement zelf.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Voorbeelden

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-onlytekst om deze hint door te geven aan gebruikers van ondersteunende technologieën.

Voer een geldig e-mailadres in

<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 .

Voorbeeld

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 .dropupaan 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>

Uitlijning

Standaard wordt een vervolgkeuzemenu automatisch 100% vanaf de bovenkant en langs de linkerkant van het bovenliggende menu geplaatst. Voeg toe .dropdown-menu-rightaan een .dropdown-menuom het vervolgkeuzemenu rechts uit te lijnen.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Kopteksten

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>

scheidingslijn

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>

Uitgeschakelde menu-items

Voeg toe .disabledaan 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 .

Tooltips & popovers in knopgroepen vereisen een speciale instelling

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).

Zorg voor correct `role`en geef een label op

Om ervoor te zorgen dat ondersteunende technologieën – zoals schermlezers – kunnen aangeven dat een reeks knoppen is gegroepeerd, moet een geschikt roleattribuut 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 rolekenmerk. In de hier gegeven voorbeelden gebruiken we aria-label, maar alternatieven zoals die aria-labelledbykunnen ook worden gebruikt.

Basis voorbeeld

Wikkel een reeks knopen in met .btnin .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>

Maatvoering

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>

Nesten

Plaats een .btn-groupin een andere .btn-groupwanneer 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>

Verticale variatie

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>

Uitgevulde knopgroepen

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.

Grenzen hanteren

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: -1pxwordt het gebruikt om de randen te stapelen in plaats van ze te verwijderen. Werkt echter marginniet met display: table-cell. Als gevolg hiervan, afhankelijk van uw aanpassingen aan Bootstrap, wilt u misschien de randen verwijderen of opnieuw kleuren.

IE8 en grenzen

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.

Met `<a>`elementen

Wikkel gewoon een reeks .btns in .btn-group.btn-group-justified.

Links Midden Rechts

Links Midden

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links die als knoppen werken

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".

Met `<button>`elementen

Om 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-groupen de juiste menu-opmaak te geven.

Afhankelijkheid van plug-ins

Voor vervolgkeuzemenu's voor knoppen moet de vervolgkeuzeplug- in worden opgenomen in uw versie van Bootstrap.

Dropdownmenu's met één knop

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>

Vervolgkeuzemenu's voor splitsen

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>

Maatvoering

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>

Dropup-variatie

Activeer vervolgkeuzemenu's boven elementen door toe te voegen .dropupaan 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-groupmet een .input-group-addonof .input-group-btnom elementen toe te voegen aan of toe te voegen aan een enkel .form-control.

Alleen tekstuele `<input>`s

Vermijd 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 rowsattribuut in sommige gevallen niet wordt gerespecteerd.

Tooltips & popovers in invoergroepen vereisen een speciale instelling

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).

Niet mengen met andere componenten

Meng formuliergroepen of rasterkolomklassen niet rechtstreeks met invoergroepen. Nest in plaats daarvan de invoergroep binnen de formuliergroep of het rastergerelateerde element.

Altijd labels toevoegen

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-onlyklasse, of het gebruik van het , , of aria-labelattribuut aria-labelledby) aria-describedbyen 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.titleplaceholder

Basis voorbeeld

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-addonof .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>

Maatvoering

Voeg de relatieve formuliergrootteklassen toe aan de .input-groupzelf 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>

Selectievakjes en radio-add-ons

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 -->

Knop-add-ons

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-btnom 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 -->

Knoppen met vervolgkeuzelijsten

<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 -->

Gesegmenteerde knoppen

<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>

Meerdere knoppen

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.

Het gebruik van navigatie voor tabbladpanelen vereist de plug-in voor JavaScript-tabbladen

Voor tabbladen met tabgebieden moet u de JavaScript-plug- in voor tabbladen gebruiken . De opmaak vereist ook extra roleen ARIA-kenmerken – zie de voorbeeldopmaak van de plug-in voor meer details.

Navs die worden gebruikt als navigatie toegankelijk maken

Als u navs gebruikt om een navigatiebalk te bieden, zorg er dan voor dat u een a toevoegt role="navigation"aan de meest logische bovenliggende container van de <ul>, of een <nav>element rond de hele navigatie plaatst. Voeg de rol niet toe aan de functie <ul>zelf, omdat dit zou voorkomen dat deze door ondersteunende technologieën als een echte lijst wordt aangekondigd.

Tabbladen

Merk op dat de klasse de basisklasse .nav-tabsvereist ..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>

Pillen

Neem dezelfde HTML, maar gebruik .nav-pillsin 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>

gerechtvaardigd

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.

Safari en responsieve gerechtvaardigde navigatie

Vanaf v9.1.2 vertoont Safari een bug waarbij het horizontaal aanpassen van uw browser weergavefouten veroorzaakt in de gerechtvaardigde navigatie die bij het vernieuwen worden gewist. Deze bug wordt ook getoond in het voorbeeld van de gerechtvaardigde nav .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Uitgeschakelde links

Voor elke navigatiecomponent (tabbladen of pillen), voeg grijze links .disabledtoe en geen zweefeffecten .

Linkfunctionaliteit niet beïnvloed

Deze klasse verandert alleen het <a>uiterlijk, niet de functionaliteit. Gebruik aangepast JavaScript om links hier uit te schakelen.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Vervolgkeuzelijsten gebruiken

Voeg dropdown menu's toe met een beetje extra HTML en de dropdowns JavaScript plugin .

Tabbladen met vervolgkeuzelijsten

<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>

Pillen met vervolgkeuzelijsten

<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.

Overlopende inhoud

Omdat Bootstrap niet weet hoeveel ruimte de inhoud in uw navigatiebalk nodig heeft, kunt u problemen tegenkomen met het inpakken van inhoud in een tweede rij. Om dit op te lossen, kunt u:

Verminder het aantal of de breedte van navigatiebalkitems.
Verberg bepaalde navigatiebalkitems bij bepaalde schermformaten met behulp van responsieve hulpprogrammaklassen .
Wijzig het punt waarop uw navigatiebalk schakelt tussen ingeklapte en horizontale modus. Pas de @grid-float-breakpointvariabele aan of voeg uw eigen mediaquery toe.

<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-brandzijn 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-formvoor 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-formdeelt een groot deel van zijn code met .form-inlinevia 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>

Altijd labels toevoegen

Schermlezers zullen problemen hebben met uw formulieren als u niet voor elke invoer een label opneemt. Voor deze inline-formulieren kunt u de labels verbergen met behulp van de .sr-onlyklasse. Er zijn nog meer alternatieve methoden om een label te geven voor ondersteunende technologieën, zoals het attribuut aria-label, aria-labelledbyof . titleAls geen van deze aanwezig is, kunnen schermlezers hun toevlucht nemen tot het gebruik van het placeholderattribuut, indien aanwezig, maar houd er rekening mee dat het gebruik van placeholderals vervanging voor andere labelmethoden niet wordt aanbevolen.

Voeg de .navbar-btnklasse 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-linkklasse 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-leftof .navbar-rightutility-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-leften .pull-right, maar ze zijn gericht op mediaquery's voor eenvoudigere verwerking van navigatiebalkcomponenten voor verschillende apparaatgroottes.

Voeg .navbar-fixed-topeen .containerof toe en voeg deze toe om de .container-fluidinhoud van de navigatiebalk te centreren en op te vullen.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Lichaamsvulling vereist

De vaste navigatiebalk zal uw andere inhoud overlappen, tenzij u paddingbovenaan de <body>. Probeer uw eigen waarden uit of gebruik ons fragment hieronder. Tip: De navigatiebalk is standaard 50px hoog.

body { padding-top: 70px; }

Zorg ervoor dat u dit opneemt na de basis Bootstrap CSS.

Voeg .navbar-fixed-bottomeen .containerof toe en voeg deze toe om de .container-fluidinhoud van de navigatiebalk te centreren en op te vullen.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Lichaamsvulling vereist

De vaste navigatiebalk zal uw andere inhoud overlappen, tenzij u paddingonderaan de <body>. Probeer uw eigen waarden uit of gebruik ons fragment hieronder. Tip: De navigatiebalk is standaard 50px hoog.

body { padding-bottom: 70px; }

Zorg ervoor dat u dit opneemt na de basis Bootstrap CSS.

Maak een navigatiebalk over de volledige breedte die met de pagina meeschuift door een of toe te voegen .navbar-static-topen 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>

Paneermeel

Geef de locatie van de huidige pagina binnen een navigatiehiërarchie aan.

Scheidingstekens worden automatisch toegevoegd in CSS via :beforeen content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginering

Bied pagineringslinks voor uw site of app met de pagineringscomponent met meerdere pagina's, of het eenvoudigere pager-alternatief .

Standaard paginering

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">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

De pagineringscomponent labelen

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-labelvoor 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".

Uitgeschakelde en actieve toestanden

Links zijn aanpasbaar voor verschillende omstandigheden. Gebruik .disabledvoor niet-klikbare links en .activeom de huidige pagina aan te geven.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Maatvoering

Zin in grotere of kleinere paginering? Voeg toe .pagination-lgof .pagination-smvoor 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>

Pager

Snelle vorige en volgende links voor eenvoudige pagineringsimplementaties met lichte opmaak en stijlen. Het is geweldig voor eenvoudige sites zoals blogs of tijdschriften.

Standaard voorbeeld

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>

Uitgelijnde links

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Optionele uitgeschakelde staat

Pager-koppelingen gebruiken ook de algemene .disabledhulpprogrammaklasse van de paginering.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Voorbeeld

Voorbeeld kop Nieuw

<h3>Example heading <span class="label label-default">New</span></h3>

Beschikbare variaties

Voeg een van de onderstaande modificatieklassen toe om het uiterlijk van een label te wijzigen.

Standaard Primaire Succes Info Waarschuwing Gevaar

<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>

Heb je tonnen labels?

Renderproblemen kunnen optreden wanneer u tientallen inline-labels in een smalle container hebt, elk met een eigen inline-blockelement (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.

Postvak IN42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Zelf instortend

Als er geen nieuwe of ongelezen items zijn, zullen badges gewoon samenvouwen (via de CSS- :emptykiezer) op voorwaarde dat er geen inhoud in bestaat.

Compatibiliteit tussen browsers

Badges zullen niet vanzelf samenvouwen in Internet Explorer 8 omdat er geen ondersteuning is voor de :emptyselector.

Past zich aan aan actieve navigatiestatussen

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.

Hallo Wereld!

Dit is een eenvoudige hero-eenheid, een eenvoudige jumbotron-achtige component om extra aandacht te vragen voor aanbevolen inhoud of informatie.

Leer meer

<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 .containers en voegt u in plaats daarvan een .containerbinnen toe.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Een eenvoudige shell om h1delen van inhoud op een pagina op de juiste manier te verdelen en te segmenteren. Het kan het h1standaardelement '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 voorbeeld

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>

Aangepaste inhoud

Met een beetje extra opmaak is het mogelijk om elk soort HTML-inhoud, zoals koppen, alinea's of knoppen, toe te voegen aan miniaturen.

Miniatuurlabel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bij eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knop Knop

Miniatuurlabel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bij eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knop Knop

Miniatuurlabel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bij eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knop Knop

<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.

Voorbeelden

Wikkel elke tekst en een optionele sluitknop in .alerten een van de vier contextuele klassen (bijv. .alert-success) voor basiswaarschuwingsberichten.

Geen standaardklasse

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.

Goed gedaan! U hebt dit belangrijke waarschuwingsbericht met succes gelezen.

Kop op! Deze waarschuwing heeft uw aandacht nodig, maar is niet super belangrijk.

Waarschuwing! Je kunt jezelf beter controleren, je ziet er niet al te best uit.

Oh nee! Verander een paar dingen en probeer opnieuw te verzenden.

<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>

Afwijzende waarschuwingen

Bouw voort op elke waarschuwing door een optionele .alert-dismissibleen sluitknop toe te voegen.

Vereist JavaScript-waarschuwingsplug-in

Voor volledig functionerende, verwijderbare waarschuwingen moet u de JavaScript-plug- in voor waarschuwingen gebruiken .

Waarschuwing! Je kunt jezelf beter controleren, je ziet er niet al te best uit.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Zorg voor correct gedrag op alle apparaten

Zorg ervoor dat u het <button>element met het data-dismiss="alert"data-attribuut gebruikt.

Links in waarschuwingen

Gebruik de .alert-linkutility-klasse om snel bijpassende gekleurde links te geven binnen een alert.

Goed gedaan! U hebt dit belangrijke waarschuwingsbericht met succes gelezen .

Kop op! Deze waarschuwing heeft uw aandacht nodig , maar is niet super belangrijk.

Waarschuwing! Je kunt jezelf beter controleren, je ziet er niet al te best uit .

Oh nee! Verander een paar dingen en probeer opnieuw te verzenden.

<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.

Compatibiliteit tussen browsers

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.

Compatibiliteit met inhoudsbeveiligingsbeleid (CSP)

Als uw website een inhoudsbeveiligingsbeleid (CSP) heeft dat , niet toestaat style-src 'unsafe-inline', kunt u geen inline- stylekenmerken 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.

Basis voorbeeld

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>

Met etiket

Verwijder de <span>with .sr-onlyclass uit de voortgangsbalk om een zichtbaar percentage weer te geven.

60%

<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-widthaan de voortgangsbalk toe te voegen.

0%

2%

<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>

Contextuele alternatieven

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>

Gestreept

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>

geanimeerd

Toevoegen .activeaan .progress-bar-stripedom 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>

gestapeld

Plaats meerdere staven in dezelfde .progressom 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.

Standaard media

De standaard media toont een media-object (afbeeldingen, video, audio) links of rechts van een inhoudsblok.

Mediakop

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.

Mediakop

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.

Geneste mediakop

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.

Mediakop

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.

Mediakop

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.

<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-leften .pull-rightbestaan 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-leften .media-right, behalve dat .media-rightze na de .media-bodyin de html moeten worden geplaatst.

Media-uitlijning

De afbeeldingen of andere media kunnen bovenaan, in het midden of onderaan worden uitgelijnd. De standaard is boven uitgelijnd.

Bovenuit uitgelijnde media

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.

Midden uitgelijnde media

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.

Onder uitgelijnde media

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>

Medialijst

Met een beetje extra opmaak kun je media in de lijst gebruiken (handig voor discussielijnen met opmerkingen of lijsten met artikelen).

Mediakop

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.

Geneste mediakop
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.

Geneste mediakop
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.

Geneste mediakop
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.

Basis voorbeeld

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum bij eros

<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>

Insignes

Voeg de badge-component toe aan elk lijstgroepitem en het zal automatisch aan de rechterkant worden gepositioneerd.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Gelinkte items

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum bij eros

<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>

Knopitems

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 .btnhier 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>

Uitgeschakelde items

Voeg toe .disabledaan a .list-group-itemom het grijs te maken zodat het uitgeschakeld lijkt.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum bij eros

<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>

Contextuele lessen

Gebruik contextuele klassen om lijstitems op te maken, standaard of gekoppeld. Staat ook onder .active.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum bij eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum bij eros

<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>

Aangepaste inhoud

Voeg bijna elke HTML toe, zelfs voor gekoppelde lijstgroepen zoals die hieronder.

Kop van groepsitem weergeven

Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.

Kop van groepsitem weergeven

Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.

Kop van groepsitem weergeven

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.

Basis voorbeeld

Standaard .panelis het enige wat u moet doen een basisrand en opvulling toepassen om wat inhoud te bevatten.

Voorbeeld basispaneel

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Paneel met kop

Voeg eenvoudig een koptekstcontainer toe aan uw paneel met .panel-heading. U kunt ook elke <h1>- <h6>met een .panel-titleklasse 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.

Paneelkop zonder titel

Paneelinhoud

Paneeltitel

Paneelinhoud

<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>

Paneel met voettekst

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.

Paneelinhoud

Paneelvoettekst

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Contextuele alternatieven

Net als andere componenten kunt u een paneel eenvoudig zinvoller maken voor een bepaalde context door een van de contextuele statusklassen toe te voegen.

Paneeltitel

Paneelinhoud

Paneeltitel

Paneelinhoud

Paneeltitel

Paneelinhoud

Paneeltitel

Paneelinhoud

Paneeltitel

Paneelinhoud

<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>

Met tabellen

.tableVoeg 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.

Paneelkop

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	@twitter

<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.

Paneelkop

#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry	de vogel	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Met lijstgroepen

Voeg eenvoudig lijstgroepen over de volledige breedte toe aan elk paneel.

Paneelkop

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum bij eros

<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-itemwanneer 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>

Standaard goed

Gebruik de put als een eenvoudig effect op een element om het een ingevoegd effect te geven.

Kijk, ik zit in een put!

<div class="well">...</div>

Optionele lessen

Beheer de opvulling en afgeronde hoeken met twee optionele modificatieklassen.

Kijk, ik zit in een grote put!

<div class="well well-lg">...</div>

Kijk, ik zit in een kleine put!

<div class="well well-sm">...</div>

Componenten

glyphicons

Beschikbare symbolen

Hoe te gebruiken

Niet mengen met andere componenten

Alleen voor gebruik op lege elementen

De locatie van het pictogramlettertype wijzigen

Toegankelijke pictogrammen

Voorbeelden

Vervolgkeuzelijsten

Voorbeeld

Uitlijning

Mogelijk extra positionering vereist

Verouderde .pull-rightuitlijning

Kopteksten

scheidingslijn

Uitgeschakelde menu-items

Knop groepen

Tooltips & popovers in knopgroepen vereisen een speciale instelling

Zorg voor correct roleen geef een label op

Basis voorbeeld

Knop werkbalk

Maatvoering

Nesten

Verticale variatie

Uitgevulde knopgroepen

Grenzen hanteren

IE8 en grenzen

Met <a>elementen

Links die als knoppen werken

Met <button>elementen

Dropdownmenu's voor knoppen

Afhankelijkheid van plug-ins

Dropdownmenu's met één knop

Vervolgkeuzemenu's voor splitsen

Maatvoering

Dropup-variatie

Invoergroepen

Alleen tekstuele <input>s

Tooltips & popovers in invoergroepen vereisen een speciale instelling

Niet mengen met andere componenten

Altijd labels toevoegen

Basis voorbeeld

Maatvoering

Selectievakjes en radio-add-ons

Knop-add-ons

Knoppen met vervolgkeuzelijsten

Gesegmenteerde knoppen

Meerdere knoppen

navigatie

Het gebruik van navigatie voor tabbladpanelen vereist de plug-in voor JavaScript-tabbladen

Navs die worden gebruikt als navigatie toegankelijk maken

Tabbladen

Pillen

gerechtvaardigd

Safari en responsieve gerechtvaardigde navigatie

Uitgeschakelde links

Linkfunctionaliteit niet beïnvloed

Vervolgkeuzelijsten gebruiken

Tabbladen met vervolgkeuzelijsten

Pillen met vervolgkeuzelijsten

navigatiesysteem

Standaard navigatiebalk

Overlopende inhoud

Vereist JavaScript-plug-in

Het samengevouwen breekpunt van de mobiele navigatiebalk wijzigen

Navigatiebalken toegankelijk maken

Merkimago

Formulieren

Waarschuwingen voor mobiele apparaten

Altijd labels toevoegen

Toetsen

Contextspecifiek gebruik

Tekst

Niet-navigatielinks

Component uitlijning

Rechts uitlijnen van meerdere componenten

Vast naar boven

Lichaamsvulling vereist

Vast aan de onderkant

Verouderde `.pull-right`uitlijning

Zorg voor correct `role`en geef een label op

Met `<a>`elementen

Met `<button>`elementen

Alleen tekstuele `<input>`s