Componenten

Tientallen herbruikbare componenten die zijn gebouwd om navigatie, waarschuwingen, popovers en meer te bieden.

Voorbeelden

Twee basisopties, samen met twee meer specifieke variaties.

Enkele knop groep

Wikkel een reeks knopen in met .btnin .btn-group.

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

Meerdere knopgroepen

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>

Verticale knopgroepen

Laat een set knoppen verticaal gestapeld lijken in plaats van horizontaal.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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 .

Dropdownmenu's in knopgroepen

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

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.

  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 in elke grootte: .btn-large, .btn-small, of .btn-mini.

Vereist JavaScript

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

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.

  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>

Maten

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

  1. <div class = "btn-groep" >
  2. <button class = "btn btn-mini" > Actie </button>
  3. <button class = "btn btn-mini 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>

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.

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

Opties

Uitgeschakelde en actieve toestanden

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

  1. <div class = "paginering" >
  2. <ul>
  3. <li class = "uitgeschakeld" ><a href = "#" > « </a></li>
  4. <li class = "actief" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

U kunt optioneel actieve of uitgeschakelde ankers verwisselen voor spans om de klikfunctionaliteit te verwijderen terwijl de beoogde stijlen behouden blijven.

  1. <div class = "paginering" >
  2. <ul>
  3. <li class = "uitgeschakeld" ><span> « </span></li>
  4. <li class = "actief" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Maten

Zin in grotere of kleinere paginering? Voeg .pagination-large, .pagination-small, of toe .pagination-minivoor extra maten.

  1. <div class = "paginering paginering-groot" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "paginering" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "Paginering paginering-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "paginering paginering-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Uitlijning

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

  1. <div class = "Paginering paginering-gecentreerd" >
  2. ...
  3. </div>
  1. <div class = "Paginering paginering-rechts" >
  2. ...
  3. </div>

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.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Vorige </a></li>
  3. <li><a href = "#" > Volgende </a></li>
  4. </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>

Optionele uitgeschakelde staat

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

  1. <ul class = "pager" >
  2. <li class = "vorige uitgeschakeld" >
  3. <a href = "#" > Ouder </a>
  4. </li>
  5. ...
  6. </ul>

Etiketten

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>

Insignes

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>

Gemakkelijk inklapbaar

Voor eenvoudige implementatie zullen labels en badges eenvoudig samenvouwen (via de CSS- :emptyselector) als er geen inhoud in bestaat.

Heldeneenheid

Een lichtgewicht, flexibel onderdeel om belangrijke inhoud op uw site te presenteren. Het werkt goed op marketing- en content-zware sites.

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

  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>

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 <small> Subtekst voor kop </small></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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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

Opmaak van miniaturen is eenvoudig: een ulmet een willekeurig aantalli elementen 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.

Markup

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 = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Miniatuurlabel </h3>
  6. <p> Miniatuurbijschrift... </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.

Standaardwaarschuwing

Wikkel elke tekst en een optionele sluitknop in .alertvoor een standaard waarschuwingsbericht.

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

Knoppen sluiten

Mobiele Safari- en Mobile Opera-browsers vereisen, naast het data-dismiss="alert"kenmerk, een href="#"voor het negeren van waarschuwingen bij het gebruik van een <a>tag.

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

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.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </knop>

Meldingen via JavaScript negeren

Gebruik de jQuery-plug- in voor waarschuwingen om waarschuwingen snel en eenvoudig te verwijderen.


Opties

Verhoog voor langere berichten de opvulling aan de boven- en onderkant van de waarschuwingswrapper door toe te voegen .alert-block.

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. <button type = "button" class = "close" data-dismiss = "alert" > × </knop>
  3. <h4> 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" style = " width : 60 %; " ></div>
  3. </div>

Gestreept

Gebruikt een verloop om een ​​gestreept effect te creëren. Niet beschikbaar in IE7-8.

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

geanimeerd

Toevoegen .activeaan .progress-stripedom de strepen van rechts naar links te animeren. Niet beschikbaar in alle versies van IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

gestapeld

Plaats meerdere staven in dezelfde .progressom ze te stapelen.

  1. <div class = "vooruitgang" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Opties

Extra kleuren

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

  1. <div class = "voortgang voortgangsinfo" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "vooruitgang vooruitgang-succes" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "vooruitgang voortgangswaarschuwing" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "vooruitgang voortgang-gevaar" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Gestreepte staven

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-succes progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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.

Eerdere versies dan Internet Explorer 10 en Opera 12 ondersteunen geen animaties.

Abstracte objectstijlen voor het bouwen van verschillende soorten componenten (zoals blogopmerkingen, Tweets, enz.) met een links of rechts uitgelijnde afbeelding naast tekstuele inhoud.

Standaard voorbeeld

De standaard media maken het mogelijk om een ​​media-object (afbeeldingen, video, audio) links of rechts van een inhoudsblok te laten zweven.

64x64

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

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

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.
  1. <div class = "media" >
  2. <a class = "naar links trekken" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Mediatitel </h4>
  7. ...
  8.  
  9. <!-- Genest media-object -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Medialijst

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

  • 64x64

    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.

    64x64

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

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

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

    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.
  1. <ul class = "medialijst" >
  2. <li class = "media" >
  3. <a class = "naar links trekken" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Mediatitel </h4>
  8. ...
  9.  
  10. <!-- Genest media-object -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Optionele lessen

Beheer de opvulling en afgeronde hoeken met twee optionele modificatieklassen.

Kijk, ik zit in een put!
  1. <div class = "goed goed groot" >
  2. ...
  3. </div>
Kijk, ik zit in een put!
  1. <div class = "wel goed-klein" >
  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 klikgebeurtenis als u liever een anker gebruikt.

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

Helper klassen

Eenvoudige, gerichte lessen voor kleine weergave- of gedragsaanpassingen.

.naar links trekken

Een element naar links laten zweven

  1. class = "naar links trekken"
  1. . trekken - links {
  2. zweven : links ;
  3. }

.naar rechts trekken

Een element naar rechts laten zweven

  1. class = "naar rechts trekken"
  1. . trek - rechts {
  2. zweven : rechts ;
  3. }

.gedempt

Verander de kleur van een element in#999

  1. class = "gedempt"
  1. . gedempt {
  2. kleur : #999;
  3. }

.clearfix

Wis het floatop elk element

  1. class = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: voor ,
  4. &: na {
  5. weergave : tafel ;
  6. inhoud : "" ;
  7. }
  8. &: na {
  9. duidelijk : beide ;
  10. }
  11. }