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" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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 »

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.

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>

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.

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.

<div class = "btn-groep" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu links -->
  </ul>
</div>

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" > 
  <button class = "btn" > Actie </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <ul class = "vervolgkeuzemenu" > 
    <!-- dropdown menu links -->
  </ul>
</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.

<div class = "btn-groep drop-up" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <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-tabs" > 
  <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
• Helpen
• Laten vallen
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <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
• Helpen
• Laten vallen
  • Action
  • Another action
  • Something else here
  • Separated 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.

Horizontale verdelers

Voeg een horizontale scheidingslijn toe door een leeg lijstitem te maken met de klasse .divider, zoals zo:

<ul class = "nav nav-lijst" > 
  ...
  <li class = "verdeler" ></li> 
  ...
</ul>

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.

Tabbladen infaden

.fadeVoeg aan elk toe om tabbladen te laten infaden .tab-pane.

Vereist jQuery-plug-in

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

Download het javascript →

Tabblad voorbeeld

Om tabbladen tabbaar te maken, maakt u een .tab-paneunieke ID voor elk tabblad en plaatst u ze in .tab-content.

Voor rechts of links uitgelijnde tabbladen, wikkel de .nav-tabsen .tab-contentin .tabbable.

Eenvoudige opmaak

Het gebruik van tabbable tabs vereist een inpak-div, een set tabs en een set tabbable deelvensters met inhoud.

<div class = "tabtable" > <!-- Alleen vereist voor links/rechts tabbladen -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sectie 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sectie 2 </a></li>  
  </ul>
  <div class = "tab-inhoud" > 
    <div class = "tab-venster actief" id = "tab1" >  
      <p> Ik zit in sectie 1. </p>
    </div>
    <div class = "tab-venster" id = "tab2" >  
      <p> Hallo, ik ben in sectie 2. </p>
    </div>
  </div>
</div>

Tabbladen aan de onderkant

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

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

Tabbladen aan de linkerkant

Verwissel de klas om tabbladen aan de linkerkant te plaatsen.

<div class = "tabbladen-links" > 
  <ul class = "nav nav-tabs" > 
    ...
  </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-tabs" > 
    ...
  </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

Bevestig de navigatiebalk aan de boven- of onderkant van de viewport met een extra klasse op de buitenste div, .navbar.

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

<div class = "navbar navbar-vaste-bodem" > 
  ...
</div>

Houd bij het aanbrengen van de navigatiebalk rekening met het verborgen gebied eronder. Voeg 40px of meer opvulling toe aan het <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>

Formulieren in navbar

Om een ​​formulier correct op te maken en te positioneren in de navigatiebalk, voegt u de juiste klassen toe, zoals hieronder wordt weergegeven. Voeg voor een standaardformulier .navbar-formen een van beide toe .pull-leftof .pull-rightom het correct uit te lijnen.

<form class = "navbar-form pull-links" > 
  < invoertype = "tekst" class = " span2 " >  
</form>

Voeg voor een meer aangepast zoekformulier toe .navbar-searchaan de formen .search-queryaan de invoer voor gespecialiseerde stijlen in de navigatiebalk.

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

Vervolgkeuzemenu's toevoegen

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

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

Download het javascript →

Tekst in de navigatiebalk

Wikkel tekstreeksen in een <.navbar-text>, meestal op een <p>tag voor de juiste regelafstand en kleur.

Waarom ze gebruiken?

Breadcrumb-navigatie wordt gebruikt als een manier om gebruikers te laten zien waar ze zich binnen 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" > Gegevens  </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.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>.

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

Optionele uitgeschakelde staat

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

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>

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

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

<div class = "page-header" > 
  <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.

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 :

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

<div class = "alert" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Waarschuwing! </strong> Kijk zelf maar, je ziet er niet al te best uit.
</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.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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 (geen IE).

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

geanimeerd

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

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

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.

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

Pictogram sluiten

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

×

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

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

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