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:

<div class = "btn-groep" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Voorbeeld van werkbalk

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

<div class = "btn-toolbar" > 
  <div class = "btn-groep" > 
    ...
  </div>
</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 »

Let op

CSS voor knopgroepen staat in een apart bestand, button-groups.less.

Dropdownmenu's voor knoppen

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

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

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.

<div class = "btn-groep" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Actie
    <span class = "caret" ></span> 
  </a>
  <ul class = "vervolgkeuzemenu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

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.

Voorbeeld opmaak

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

<div class = "btn-groep" > 
  <a class = "btn" href = "#" > Actie </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "vervolgkeuzemenu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Krachtige basisklasse

Alle navigatiecomponenten hier - tabbladen, pillen en lijsten - delen dezelfde basisopmaak en stijlen in de .navklas.

Wanneer te gebruiken

Tabbladen en pillen zijn geweldig voor gedeelten van inhoud of het navigeren tussen pagina's met gerelateerde inhoud.

Component uitlijning

Gebruik de .pull-leftof .pull-rightutility-klassen om nav-links uit te lijnen. Beide klassen voegen een CSS-float toe in de opgegeven richting.

Basistabbladen

Neem regelmatig <ul>links en voeg toe .nav-tabs:

• Huis
• Profiel
• Berichten

<ul class = "nav nav-tabbladen" > 
  <li class = "actief" > 
    <a href = "#" > Startpagina </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basis pillen

Neem dezelfde HTML, maar gebruik .nav-pillsin plaats daarvan:

• Huis
• Profiel
• Berichten

<ul class = "nav nav-pillen" > 
  <li class = "actief" > 
    <a href = "#" > Startpagina </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Hoe ze te stapelen

Omdat tabbladen en pillen standaard horizontaal zijn, hoeft u alleen maar een tweede klasse toe te voegen, .nav-stacked, om ze verticaal gestapeld te laten lijken.

Gestapelde tabbladen

• Huis
• Profiel
• Berichten

<ul class = "nav nav-tabs nav-gestapeld" > 
  ...
</ul>

Gestapelde pillen

• Huis
• Profiel
• Berichten

<ul class = "nav nav-pillen nav-gestapeld" > 
  ...
</ul>

Uitgebreide menu's gemakkelijk gemaakt

Vervolgkeuzemenu's in Bootstrap-tabbladen en -pillen zijn supereenvoudig en vereisen slechts een beetje extra HTML en een lichtgewicht jQuery-plug-in.

Ga naar de Javascript-pagina om de documenten te lezen over het initialiseren van vervolgkeuzemenu 's in Bootstrap.

Tabbladen met vervolgkeuzelijsten

• Huis
• Profiel
• Laten vallen
  • Actie
  • Nog een actie
  • Iets anders hier
  • Gescheiden link

<ul class = "nav nav-tabbladen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Laten vallen
        <b class = "caret" ></b> 
      </a>
    <ul class = "vervolgkeuzemenu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Pillen met vervolgkeuzelijsten

• Huis
• Profiel
• Laten vallen
  • Actie
  • Nog een actie
  • Iets anders hier
  • Gescheiden link

<ul class = "nav nav-pillen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Laten vallen
        <b class = "caret" ></b> 
      </a>
    <ul class = "vervolgkeuzemenu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Navigatie in applicatiestijl

Nav-lijsten bieden een eenvoudige en gemakkelijke manier om groepen nav-links te bouwen met optionele headers. Ze kunnen het best worden gebruikt in zijbalken zoals de Finder in OS X.

Structureel zijn ze gebouwd op dezelfde basisnavigatiestijlen als tabbladen en pillen, dus gebruik en aanpassing zijn eenvoudig.

Met pictogrammen

Nav-lijsten zijn ook eenvoudig uit te rusten met pictogrammen. Voeg de juiste <i>tag toe met klasse en je bent klaar.

Voorbeeld navigatielijst

Maak een lijst met links en voeg toe class="nav nav-list":

<ul class = "nav nav-lijst" > 
  <li class = "nav-header" > 
    Lijstkoptekst
  </li>
  <li class = "actief" > 
    <a href = "#" > Startpagina </a> 
  </li>
  <li>
    <a href = "#" > Bibliotheek </a> 
  </li>
  ...
</ul>

Voorbeeld met pictogrammen

Hetzelfde voorbeeld, maar met <i>tags voor pictogrammen.

<ul class = "nav nav-lijst" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Bibliotheek
    </a>
  </li>
  ...
</ul>

Wat is inbegrepen

Breng uw tabbladen tot leven met een eenvoudige plug-in om via tabbladen tussen inhoud te schakelen. Bootstrap integreert tabbare tabbladen in vier stijlen: boven (standaard), rechts, onder en links.

Wisselen tussen deze is eenvoudig en vereist slechts heel weinig opmaak.

Tabblad voorbeeld

Om tabs tabbaar te maken, wikkel de .nav-tabsin een andere div met class .tabbable.

Aangepaste jQuery-plug-in

Alle tabbable-tabbladen worden mogelijk gemaakt door onze lichtgewicht jQuery-plug-in. Lees meer over hoe u tabbable-tabbladen tot leven kunt brengen op de javascript-documentpagina.

Download het javascript →

Tabbladen aan de onderkant

Draai de volgorde van de HTML om en voeg een klasse toe om onderaan tabbladen te plaatsen.

<div class = "tabbladen-onderaan" > 
  <div class = "tab-inhoud" > 
    ...
  </div>
  <ul class = "nav nav-tabbladen" > 
    ...
  </ul>
</div>

Tabbladen aan de linkerkant

Verwissel de klas om tabbladen aan de linkerkant te plaatsen.

<div class = "tabbladen-links" > 
  <ul class = "nav nav-tabbladen" > 
    ...
  </ul>
  <div class = "tab-inhoud" > 
    ...
  </div>
</div>

Tabbladen aan de rechterkant

Verwissel de klas om tabbladen aan de rechterkant te plaatsen.

<div class = "tabbladen-rechts" > 
  <ul class = "nav nav-tabbladen" > 
    ...
  </ul>
  <div class = "tab-inhoud" > 
    ...
  </div>
</div>

Navbar-steiger

De navigatiebalk heeft slechts een paar divs nodig om hem goed te structureren voor statische of vaste weergave.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Vaste navigatiebalk

Om de navigatiebalk vast te maken aan de bovenkant van de viewport, voegt u toe .navbar-fixed-topaan de buitenste div, .navbar.

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

In je CSS moet je ook rekening houden met de overlap die het veroorzaakt door 40px of meer opvulling toe te voegen aan je <body>. Zorg ervoor dat u dit toevoegt na de basis Bootstrap CSS en vóór de optionele responsieve CSS.

Merknaam

Een eenvoudige link om uw merk- of projectnaam te tonen, vereist alleen een ankertag.

<a class = "merk" href = "#" >  
  Naam van het project
</a>

Zoekformulier

Zoekformulieren ontvangen aangepaste stijlen in de navigatiebalk met de .navbar-searchklas. Omvatten .pull-leftof .pull-rightop de om het formuit te lijnen.

<form class = "navbar-zoeken pull-links" > 
  <invoertype = " tekst" class = "zoekopdracht" placeholder = "Zoeken" >   
</form>

Optionele responsieve variant

Afhankelijk van de hoeveelheid inhoud in je topbalk, wil je misschien de responsieve opties implementeren. Om dit te doen, plaatst u uw navigatie-inhoud in een bevattende div, .nav-collapse.collapse, en voegt u de navigatieknop toe, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar wordt gebruikt als schakelaar voor samengevouwen navigatiebalkinhoud -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Zorg ervoor dat je het merk laat staan ​​als je het wilt laten zien -->
      <a class = "brand" href = "#" > Projectnaam </a>  
 
      <!-- Alles wat je verborgen wilt hebben op 940px of minder, plaats hier -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-zoeken, .navbar-formulier, enz -->
      </div>
 
    </div>
  </div>
</div>

Nav-links

Nav-items zijn eenvoudig toe te voegen via ongeordende lijsten.

<ul class = "nav" > 
  <li class = "actief" > 
    <a href = "#" > Startpagina </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

U kunt eenvoudig scheidingslijnen aan uw navigatielinks toevoegen met een leeg lijstitem en een eenvoudige klasse. Voeg dit gewoon toe tussen links:

<ul class = "nav" > 
  ...
  <li class = "divider-verticaal" ></li> 
  ...
</ul>

Component uitlijning

.pull-leftGebruik de of .pull-rightutility-klassen om een ​​navigatie, zoekformulier of tekst uit te lijnen . Beide klassen voegen een CSS-float toe in de opgegeven richting.

Dropdownmenu's toevoegen

Het toevoegen van vervolgkeuzelijsten aan de nav is supereenvoudig, maar vereist wel het gebruik van onze javascript-plug- in .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Account
          <b class = "caret" ></b> 
    </a>
    <ul class = "vervolgkeuzemenu" > 
      ...
    </ul>
  </li>
</ul>

Download het javascript →

Waarom ze gebruiken?

Breadcrumb-navigatie wordt gebruikt om gebruikers te laten zien waar ze zich in een app of een site bevinden, maar niet voor primaire navigatie. Houd het gebruik ervan spaarzaam en beknopt om het meest effectief te zijn.

Voorbeelden

Een enkel voorbeeld getoond zoals het op meerdere pagina's kan worden weergegeven.

• Huis

• Home /
• Bibliotheek

• Home /
• Bibliotheek /
• Gegevens

Markup

HTML is uw standaard ongeordende lijst met links.

<ul class = "broodkruimel" > 
  <li>
    <a href = "#" > Startpagina </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotheek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "actief" > 
    <a href = "#" > Gegevens </a> 
  </li>
</ul>

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

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Vorige </a></li> 
    <li class = "actief" > 
      <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 = "#" > Volgende </a></li> 
  </ul>
</div>

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.

Standaard voorbeeld

Standaard centreert de pager links.

• Vorig
• Volgende

<ul class = "pager" > 
  <li>
    <a href = "#" > Vorige </a> 
  </li>
  <li>
    <a href = "#" > Volgende </a> 
  </li>
</ul>

Uitgelijnde links

Als alternatief kunt u elke link op de zijkanten uitlijnen:

• ← Ouder
• Nieuwer →

<ul class = "pager" > 
  <li class = "vorige" > 
    <a href = "#" > ← Ouder </a> 
  </li>
  <li class = "volgende" > 
    <a href = "#" > Nieuwer → </a> 
  </li>
</ul>

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:

<div class = "held-eenheid" > 
  <h1> Kop </h1>
  <p> slogan </p>
  <p>
    <a class = "btn btn-primair btn-groot" > 
      Leer meer
    </a>
  </p>
</div>

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

<div class = "page-haeder" > 
  <h1> Voorbeeld paginakop </h1>
</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.

Gebruikt rasterkolomgroottes

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 :

<ul class = "miniaturen" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "miniaturen" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatuurlabel </h5>
      <p> Miniatuuronderschrift hier... </p>
    </div>
  </li>
  ...
</ul>

Meer voorbeelden

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

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

<div class = "waarschuwing" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Waarschuwing! </strong> Kijk zelf maar, je ziet er niet al te best uit.
</div>

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

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

Fout of gevaar

<div class = "alert alert-error" > 
  ...
</div>

Succes

<div class = "alert alert-succes" > 
  ...
</div>

Informatie

<div class = "alert alert-info" > 
  ...
</div>

Basis

Standaard voortgangsbalk met een verticaal verloop.

<div class = "vooruitgang" > 
  <div class = "bar" 
       style = " breedte : 60 %; " ></div> 
</div>

Gestreept

Gebruikt een verloop om een ​​gestreept effect te creëren.

<div class = "voortgang voortgangsinfo 
     progress-striped" >
  <div class = "bar" 
       style = " breedte : 20 %; " ></div> 
</div>

geanimeerd

Neemt het gestreepte voorbeeld en animeert het.

<div class = "vooruitgang voortgang-gevaar 
     progress-striped actief" >
  <div class = "bar" 
       style = " breedte : 40 %; " ></div> 
</div>

Extra kleuren

Voortgangsbalken gebruiken enkele van dezelfde klassenamen als knoppen en waarschuwingen voor een vergelijkbare stijl.

• .progress-info
• .progress-success
• .progress-danger

Als alternatief kunt u de LESS-bestanden aanpassen en uw eigen kleuren en maten rollen.

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-8 of oudere versies van Firefox.

Opera ondersteunt momenteel geen animaties.

Wells

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

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

Insignes

Gebruik een badge op een element voor een ongelezen telling of als een eenvoudige indicator.

<span class = "badge" > 3 </div> 

Pictogram sluiten

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

×

<a class = "close" > × </a>