Componenten

In Bootstrap zijn tientallen herbruikbare componenten ingebouwd om navigatie, waarschuwingen, popovers en nog veel meer te bieden.

Knop groepen

Gebruik knopgroepen om meerdere knoppen samen te voegen als één samengesteld onderdeel. Bouw ze met een reeks <a>of <button>elementen.

Praktische tips

We raden de volgende richtlijnen aan voor het gebruik van knopgroepen en werkbalken:

  • Gebruik altijd hetzelfde element in een enkele knopgroep, <a>of <button>.
  • Combineer geen knoppen van verschillende kleuren in dezelfde knopgroep.
  • Gebruik pictogrammen naast of in plaats van tekst, maar zorg ervoor dat u waar nodig alt- en titeltekst opneemt.

Gerelateerde Button-groepen met dropdownmenu's (zie hieronder) moeten apart worden opgeroepen en moeten altijd een dropdown-caret bevatten om het beoogde gedrag aan te geven.

Standaard voorbeeld

Hier ziet u hoe de HTML eruitziet voor een standaard knopgroep die is gebouwd met ankertag-knoppen:

  1. <div class = "btn-groep" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Voorbeeld van werkbalk

Combineer sets van <div class="btn-group">tot een <div class="btn-toolbar">voor meer complexe componenten.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-groep" >
  3. ...
  4. </div>
  5. </div>

Selectievakje en radiosmaken

Knopgroepen kunnen ook functioneren als radio's, waarbij slechts één knop actief mag zijn, of selectievakjes, waar een willekeurig aantal knoppen actief mag zijn. Bekijk daarvoor de Javascript-documenten .

Download het javascript »

Dropdownmenu's in knopgroepen

Kop op! Knoppen met vervolgkeuzelijsten moeten afzonderlijk in hun eigen verpakking worden verpakt voor .btn-groupeen .btn-toolbargoede weergave.

Dropdownmenu's voor knoppen

Overzicht en voorbeelden

Gebruik een willekeurige knop om een ​​vervolgkeuzemenu te activeren door het in a te plaatsen .btn-groupen de juiste menu-opmaak te geven.

Voorbeeld opmaak

Net als bij een knopgroep, gebruikt onze opmaak gewone knopopmaak, maar met een handvol toevoegingen om de stijl te verfijnen en de jQuery-plug-in van Bootstrap te ondersteunen.

  1. <div class = "btn-groep" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Actie
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "vervolgkeuzemenu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Werkt met alle knopformaten

Dropdownmenu's voor knoppen werken op elk formaat. uw knopgroottes tot .btn-large, .btn-small, of .btn-mini.

Javascript vereist

Dropdown-knoppen voor knoppen vereisen dat de Bootstrap-dropdown-plug- in werkt.

In sommige gevallen, zoals bij mobiel, zullen vervolgkeuzemenu's buiten het kijkvenster worden weergegeven. U moet de uitlijning handmatig of met aangepast javascript oplossen.


Vervolgkeuzemenu's voor splitsen

Overzicht en voorbeelden

Voortbouwend op de knopgroepstijlen en markeringen, kunnen we eenvoudig een gesplitste knop maken. Splitsknoppen hebben een standaardactie aan de linkerkant en een vervolgkeuzeknop aan de rechterkant met contextuele links.

Maten

Gebruik de extra knopklassen .btn-mini, .btn-small, of .btn-largevoor de maatvoering.

  1. <div class = "btn-groep" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- dropdown menu links -->
  5. </ul>
  6. </div>

Voorbeeld opmaak

We breiden de normale vervolgkeuzelijsten met knoppen uit om een ​​tweede knopactie te bieden die werkt als een afzonderlijke vervolgkeuzelijst.

  1. <div class = "btn-groep" >
  2. <button class = "btn" > Actie </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knop>
  6. <ul class = "vervolgkeuzemenu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Vervolgmenu's

Vervolgkeuzemenu's kunnen ook van onder naar boven worden omgeschakeld door een enkele klasse toe te voegen aan de directe bovenliggende van .dropdown-menu. Het zal de richting van het menu omdraaien .careten het menu zelf verplaatsen om van onder naar boven te bewegen in plaats van van boven naar beneden.

  1. <div class = "btn-groep drop-up" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knop>
  6. <ul class = "vervolgkeuzemenu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Paginering met meerdere pagina's

Wanneer te gebruiken

Ultrasimplistische en minimaal gestileerde paginering geïnspireerd door Rdio, ideaal voor apps en zoekresultaten. Het grote blok is moeilijk te missen, gemakkelijk schaalbaar en biedt grote klikgebieden.

Stateful paginalinks

Links zijn aanpasbaar en werken in een aantal omstandigheden met de juiste klasse. .disabledvoor niet-klikbare links en.active voor de huidige pagina.

Flexibele uitlijning

Voeg een van de twee optionele klassen toe om de uitlijning van pagineringslinks te wijzigen: .pagination-centereden .pagination-right.

Voorbeelden

De standaard pagineringscomponent is flexibel en werkt in een aantal variaties.

Markup

Verpakt in een <div>, is paginering slechts een <ul>.

  1. <div class = "paginering" >
  2. <ul>
  3. <li><a href = "#" > Vorige </a></li>
  4. <li class = "actief" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Volgende </a></li>
  11. </ul>
  12. </div>

Pager Voor snelle vorige en volgende links

Over pager

De pagercomponent is een set links voor eenvoudige pagineringsimplementaties met lichte opmaak en zelfs lichtere stijlen. Het is geweldig voor eenvoudige sites zoals blogs of tijdschriften.

Optionele uitgeschakelde staat

Pager-links gebruiken ook de algemene .disabledklasse van de paginering.

Standaard voorbeeld

Standaard centreert de pager links.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Vorige </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Volgende </a>
  7. </li>
  8. </ul>

Uitgelijnde links

Als alternatief kunt u elke link op de zijkanten uitlijnen:

  1. <ul class = "pager" >
  2. <li class = "vorige" >
  3. <a href = "#" > Ouder </a>
  4. </li>
  5. <li class = "volgende" >
  6. <a href = "#" > Nieuwer → </a>
  7. </li>
  8. </ul>
Etiketten Markup
Standaard <span class="label">Default</span>
Succes <span class="label label-success">Success</span>
Waarschuwing <span class="label label-warning">Warning</span>
Belangrijk <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Over

Badges zijn kleine, eenvoudige componenten voor het weergeven van een indicator of een soort van telling. Ze worden vaak aangetroffen in e-mailclients zoals Mail.app of in mobiele apps voor pushmeldingen.

Beschikbare lessen

Naam Voorbeeld Markup
Standaard 1 <span class="badge">1</span>
Succes 2 <span class="badge badge-success">2</span>
Waarschuwing 4 <span class="badge badge-warning">4</span>
Belangrijk 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Heldeneenheid

Bootstrap biedt een lichtgewicht, flexibel onderdeel, een zogenaamde hero-eenheid, om inhoud op uw site te presenteren. Het werkt goed op marketing- en content-zware sites.

Markup

Verpak je inhoud in een divlike:

  1. <div class = "held-eenheid" >
  2. <h1> Kop </h1>
  3. <p> slogan </p>
  4. <p>
  5. <a class = "btn btn-primair btn-groot" >
  6. Leer meer
  7. </a>
  8. </p>
  9. </div>

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

Pagina hoofd

Een eenvoudige shell om h1delen van inhoud op een pagina op de juiste manier te verdelen en te segmenteren. Het kan het h1standaard smallelement , evenals de meeste andere componenten gebruiken (met extra stijlen).

  1. <div class = "page-header" >
  2. <h1> Voorbeeld paginakop </h1>
  3. </div>

Standaardminiaturen

Standaard zijn de miniaturen van Bootstrap ontworpen om gekoppelde afbeeldingen te laten zien met minimale vereiste opmaak.

Zeer aanpasbaar

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.

    Actie Actie

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

    Actie Actie

Waarom miniaturen gebruiken?

Miniaturen (voorheen .media-gridtot v1.4) zijn geweldig voor rasters van foto's of video's, zoekresultaten voor afbeeldingen, winkelproducten, portfolio's en nog veel meer. Dit kunnen links of statische inhoud zijn.

Eenvoudige, flexibele opmaak

Het opmaken van miniaturen is eenvoudig: een ulwillekeurig aantal lielementen is alles wat nodig is. Het is ook superflexibel, waardoor elk type inhoud mogelijk is met net iets meer opmaak om uw inhoud in te pakken.

Maakt gebruik van rasterkolommen

Ten slotte gebruikt de component miniaturen bestaande klassen van het rastersysteem, zoals .span2of .span3, voor het regelen van de afmetingen van de miniatuur.

de opmaak

Zoals eerder vermeld, is de vereiste opmaak voor miniaturen licht en eenvoudig. Hier is een overzicht van de standaardinstellingen voor gekoppelde afbeeldingen :

  1. <ul class = "miniaturen" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Voor aangepaste HTML-inhoud in miniaturen verandert de opmaak enigszins. Om inhoud op blokniveau overal toe te staan, ruilen we de <a>voor een <div>like:

  1. <ul class = "miniaturen" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Miniatuurlabel </h5>
  6. <p> Miniatuurbijschrift hier... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Meer voorbeelden

Verken al uw opties met de verschillende rasterklassen die voor u beschikbaar zijn. Je kunt ook verschillende maten mixen en matchen.

Lichtgewicht standaardinstellingen

Herschreven basisklasse

Met Bootstrap 2 hebben we de basisklasse vereenvoudigd: .alertin plaats van .alert-message. We hebben ook de minimaal vereiste opmaak verminderd: <p>standaard is nee vereist, alleen de buitenste <div>.

Eén waarschuwingsbericht

Voor een duurzamer onderdeel met minder code hebben we de onderscheidende look voor blokkeringswaarschuwingen, berichten met meer opvulling en doorgaans meer tekst verwijderd. De klasse is ook veranderd in .alert-block.


Gaat geweldig met javascript

Bootstrap wordt geleverd met een geweldige jQuery-plug-in die waarschuwingsberichten ondersteunt, waardoor ze snel en gemakkelijk kunnen worden verwijderd.

Download de plug-in »

Voorbeeldwaarschuwingen

Verpak uw bericht en een optioneel sluitpictogram in een div met eenvoudige klasse.

Waarschuwing! U kunt het beste zelf controleren, u ziet er niet al te best uit.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Waarschuwing! </strong> Kijk zelf maar, je ziet er niet al te best uit.
  4. </div>

Kop op! iOS-apparaten vereisen een href="#"voor het afwijzen van waarschuwingen. Zorg ervoor dat u het en het gegevensattribuut voor pictogrammen voor sluiten van anker opneemt. Als alternatief kunt u een <button>element met het data-attribuut gebruiken, wat we hebben gekozen om te doen voor onze documenten. Bij het gebruik van <button>, moet u de formulieren opnemen, type="button"anders mogen uw formulieren niet worden ingediend.

Breid het standaard waarschuwingsbericht eenvoudig uit met twee optionele klassen: .alert-blockvoor meer opvulling en tekstbesturing en .alert-headingvoor een bijpassende kop.

Waarschuwing!

U kunt het beste zelf controleren, u ziet er niet al te best uit. Nulla vitae elit libero, een pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Waarschuwing! </h4>
  4. Je kunt het beste zelf controleren, je bent niet...
  5. </div>

Contextuele alternatieven Voeg optionele klassen toe om de connotatie van een waarschuwing te wijzigen

Fout of gevaar

Oh nee! Verander een paar dingen en probeer opnieuw te verzenden.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Succes

Goed gedaan! U hebt dit belangrijke waarschuwingsbericht met succes gelezen.
  1. <div class = "alert alert-succes" >
  2. ...
  3. </div>

Informatie

Kop op! Deze waarschuwing heeft uw aandacht nodig, maar is niet super belangrijk.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Voorbeelden en opmaak

Basis

Standaard voortgangsbalk met een verticaal verloop.

  1. <div class = "vooruitgang" >
  2. <div class = "bar"
  3. style = " breedte : 60 %; " ></div>
  4. </div>

Gestreept

Gebruikt een verloop om een ​​gestreept effect te creëren (geen IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " breedte : 20 %; " ></div>
  4. </div>

geanimeerd

Neemt het gestreepte voorbeeld en animeert het (geen IE).

  1. <div class = "progress progress-striped
  2. actief" >
  3. <div class = "bar"
  4. style = " breedte : 40 %; " ></div>
  5. </div>

Opties en browserondersteuning

Extra kleuren

Voortgangsbalken gebruiken enkele van dezelfde knop- en waarschuwingsklassen voor consistente stijlen.

Gestreepte staven

Net als bij de effen kleuren hebben we gevarieerde gestreepte voortgangsbalken.

Gedrag

Voortgangsbalken gebruiken CSS3-overgangen, dus als u de breedte dynamisch aanpast via javascript, wordt het formaat soepel gewijzigd.

Als u de .activeklas gebruikt, .progress-stripedzullen uw voortgangsbalken de strepen van links naar rechts animeren.

Browserondersteuning

Voortgangsbalken gebruiken CSS3-verlopen, overgangen en animaties om al hun effecten te bereiken. Deze functies worden niet ondersteund in IE7-9 of oudere versies van Firefox.

Opera en IE ondersteunen op dit moment geen animaties.

Wells

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

Kijk, ik zit in een put!
  1. <div class = "goed" >
  2. ...
  3. </div>

Pictogram sluiten

Gebruik het algemene sluitpictogram om inhoud zoals modals en waarschuwingen te sluiten.

  1. <button class = "close" > × </knop>

iOS-apparaten vereisen een href="#" voor klikgebeurtenissen als u liever een anker gebruikt.

  1. <a class = "close" href = "#" > × </a>