Voorbeeld

Schakelbaar, contextueel menu voor het weergeven van lijsten met links. Interactief gemaakt met de dropdown JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Actie </a></li>  
  <li><a tabindex = "-1" href = "#" > Nog een actie </a></li>  
  <li><a tabindex = "-1" href = "#" > Hier nog iets </a></li>  
  <li class = "verdeler" ></li> 
  <li><a tabindex = "-1" href = "#" > Aparte link </a></li>  
</ul>

Markup

Kijkend naar alleen het vervolgkeuzemenu, hier is de vereiste HTML. U moet de trigger van de vervolgkeuzelijst en het vervolgkeuzemenu inpakken .dropdown, of een ander element dat declareert position: relative;. Maak dan gewoon het menu aan.

<div class = "dropdown" > 
  <!-- Link of knop om te schakelen tussen dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Actie </a></li>  
    <li><a tabindex = "-1" href = "#" > Nog een actie </a></li>  
    <li><a tabindex = "-1" href = "#" > Hier nog iets </a></li>  
    <li class = "verdeler" ></li> 
    <li><a tabindex = "-1" href = "#" > Aparte link </a></li>  
  </ul>
</div>

Opties

Lijn menu's naar rechts uit en voeg extra vervolgkeuzemenu's toe.

De menu's uitlijnen

Voeg toe .pull-rightaan een .dropdown-menuom het vervolgkeuzemenu rechts uit te lijnen.

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

Uitgeschakelde menu-opties

Voeg toe .disabledaan een <li>in de vervolgkeuzelijst om de link uit te schakelen.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Normale link </a></li>  
  <li class = "uitgeschakeld" ><a tabindex = "-1" href = "#" > Uitgeschakelde link </a></li>   
  <li><a tabindex = "-1" href = "#" > Nog een link </a></li>  
</ul>

Submenu's in vervolgkeuzelijsten

Voeg een extra niveau van vervolgkeuzemenu's toe, die verschijnen bij zweven zoals die van OS X, met enkele eenvoudige opmaaktoevoegingen. Voeg toe .dropdown-submenuaan lieen bestaand vervolgkeuzemenu voor automatische styling.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Meer opties </a>  
    <ul class = "vervolgkeuzemenu" > 
      ...
    </ul>
  </li>
</ul>

Voorbeelden

Twee basisopties, samen met twee meer specifieke variaties.

Enkele knop groep

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

<div class = "btn-groep" > 
  <button class = "btn" > Links </button> 
  <button class = "btn" > Midden </button> 
  <button class = "btn" > Rechts </button> 
</div>

Meerdere knopgroepen

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>

Verticale knopgroepen

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

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

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

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

Maten

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

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

Lichtgewicht standaardinstellingen Zelfde opmaak, verschillende klassen

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

Basistabbladen

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

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

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

Uitgeschakelde staat

Voor elke navigatiecomponent (tabbladen, pillen of lijst), voeg grijze links .disabledtoe en geen zweefeffecten . Links blijven echter klikbaar, tenzij u het hrefkenmerk verwijdert. Als alternatief kunt u aangepast JavaScript implementeren om die klikken te voorkomen.

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

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.

Stapelbaar

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

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

Gestapelde pillen

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

Vervolgkeuzelijsten

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

Tabbladen met vervolgkeuzelijsten

<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

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

Navigatielijsten

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.

Voorbeeld navigatielijst

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

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

OpmerkingOm te nesten binnen een navigatielijst, voeg je class="nav nav-list"op een geneste <ul>.

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>

Navigatie met tabs

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.

Tabblad voorbeeld

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

Ik zit in sectie 1.

Hallo, ik ben in sectie 2.

Wat is er meid, dit is sectie 3.

<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 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 tabbladen met tabs tot leven kunt brengen op de JavaScript-documentpagina .

Tabbable in elke richting

Tabbladen aan de onderkant

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

Ik zit in sectie A.

Hallo, ik ben in sectie B.

Wat is er meid, dit is Sectie C.

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

Ik zit in sectie A.

Hallo, ik ben in sectie B.

Wat is er meid, dit is Sectie C.

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

Ik zit in sectie A.

Hallo, ik ben in sectie B.

Wat is er meid, dit is Sectie C.

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

Basis navigatiebalk

Om te beginnen zijn navigatiebalken statisch (niet vast aan de bovenkant) en bieden ze ondersteuning voor een projectnaam en basisnavigatie. Plaats er een ergens binnen een .container, waarmee de breedte van uw site en inhoud wordt ingesteld.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titel </a>  
    <ul class = "nav" > 
      <li class = "actief" ><a href = "#" > Startpagina </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Navbar-componenten

Merk

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

<a class = "brand" href = "#" > Projectnaam </a>

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>

Formulieren

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 " >  
  <button type = "submit" class = "btn" > Verzenden </button>  
</form>

Zoekformulier

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>

Component uitlijning

Lijn nav-links, zoekformulier of tekst uit, gebruik de .pull-leftof.pull-right utility-klassen. Beide klassen voegen een CSS-float toe in de opgegeven richting.

Vervolgkeuzelijsten gebruiken

Voeg dropdowns en drop-ups toe aan de nav met een beetje opmaak en de dropdowns 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>

Bezoek de JavaScript-dropdowndocumentatie voor meer markeringen en informatie over het bellen van dropdowns.

Tekst

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

Optionele weergavevariaties

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

Vast naar boven

Voeg toe .navbar-fixed-topen onthoud om rekening te houden met het verborgen gebied eronder door ten minste 40px toe te voegen paddingaan het <body>. Zorg ervoor dat u dit toevoegt na de basis Bootstrap CSS en vóór de optionele responsieve CSS.

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

Vast aan de onderkant

Voeg .navbar-fixed-bottomin plaats daarvan toe.

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

Statische navigatiebalk bovenaan

Maak een navigatiebalk over de volledige breedte die met de pagina meeschuift door .navbar-static-top. In tegenstelling tot de .navbar-fixed-topklasse, hoeft u geen opvulling op de body.

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

Responsieve navigatiebalk

Om een samenvouwende responsieve navigatiebalk te implementeren, wikkelt u de inhoud van uw navigatiebalk 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 ineenstorting" > 
        <!-- .nav, .navbar-zoeken, .navbar-formulier, enz -->
      </div>
 
    </div>
  </div>
</div>

Kop op! De responsieve navigatiebalk vereist de inklapplug -in en het responsieve Bootstrap CSS-bestand .

Omgekeerde variatie

Pas het uiterlijk van de navigatiebalk aan door toe te voegen .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Voorbeelden

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

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

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.

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

<div class = "paginering" > 
  <ul>
    <li class = "uitgeschakeld" ><a href = "#" > « </a></li>  
    <li class = "actief" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "paginering" > 
  <ul>
    <li class = "uitgeschakeld" ><span> « </span></li> 
    <li class = "actief" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Maten

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

<div class = "paginering paginering-groot" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering" > 
  <ul>
    ...
  </ul>
</div>
<div class = "Paginering paginering-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-mini" > 
  <ul>
    ...
  </ul>
</div>

Uitlijning

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

<div class = "Paginering paginering-gecentreerd" > 
  ...
</div>

<div class = "Paginering paginering-rechts" > 
  ...
</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.

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

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

Optionele uitgeschakelde staat

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

<ul class = "pager" > 
  <li class = "vorige uitgeschakeld" > 
    <a href = "#" > ← Ouder </a> 
  </li>
  ...
</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

<div class = "held-eenheid" > 
  <h1> Kop </h1>
  <p> slogan </p>
  <p>
    <a class = "btn btn-primair btn-groot" > 
      Leer meer
    </a>
  </p>
</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).

<div class = "page-header" > 
  <h1> Voorbeeld paginakop <small> Subtekst voor kop </small></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
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-grid tot 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 thumbnails 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 :

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

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.

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

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

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

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </knop>   
  <h4> Waarschuwing! </h4>
  Je kunt het beste zelf controleren, je bent niet...
</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.

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

Succes

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

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

Informatie

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

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

Voorbeelden en opmaak

Basis

Standaard voortgangsbalk met een verticaal verloop.

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

Gestreept

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

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

geanimeerd

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

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

gestapeld

Plaats meerdere staven in dezelfde .progressom ze te stapelen.

<div class = "vooruitgang" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Opties

Extra kleuren

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

<div class = "voortgang voortgangsinfo" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "vooruitgang vooruitgang-succes" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "vooruitgang voortgangswaarschuwing" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "vooruitgang voortgang-gevaar" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Gestreepte staven

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-succes progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</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.

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

<div class = "media" > 
  <a class = "naar links trekken" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Mediatitel </h4> 
    ...
 
    <!-- Genest media-object -->
    <div class = "media" > 
      ...
    </div>
  </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.
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 = "medialijst" > 
  <li class = "media" > 
    <a class = "naar links trekken" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Mediatitel </h4> 
      ...
 
      <!-- Genest media-object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</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!

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

Optionele lessen

Beheer de opvulling en afgeronde hoeken met twee optionele modificatieklassen.

Kijk, ik zit in een put!

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

Kijk, ik zit in een put!

<div class = "wel goed-klein" > 
  ...
</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 klikgebeurtenis als u liever een anker gebruikt.

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

Helper klassen

Eenvoudige, gerichte lessen voor kleine weergave- of gedragsaanpassingen.

.naar links trekken

Een element naar links laten zweven

class = "naar links trekken"

. trekken - links {
  zweven : links ;
}

.naar rechts trekken

Een element naar rechts laten zweven

class = "naar rechts trekken"

. trek - rechts {
  zweven : rechts ;
}

.gedempt

Verander de kleur van een element in#999

class = "gedempt"

. gedempt {
  kleur : #999; 
}

.clearfix

Wis het floatop elk element

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: voor ,
  &: na {
    weergave : tafel ;
    inhoud : "" ; 
  }
  &: na {
    duidelijk : beide ;
  }
}

Vervolgkeuzemenu's

Voorbeeld

Markup

Opties

De menu's uitlijnen

Uitgeschakelde menu-opties

Submenu's in vervolgkeuzelijsten

Knop groepen

Voorbeelden

Enkele knop groep

Meerdere knopgroepen

Verticale knopgroepen

Selectievakje en radiosmaken

Dropdownmenu's in knopgroepen

Vervolgkeuzemenu's voor knoppen

Overzicht en voorbeelden

Werkt met alle knopformaten

Vereist JavaScript

Vervolgkeuzemenu's voor splitsen

Maten

Vervolgmenu's

Nav: tabbladen, pillen en lijsten

Lichtgewicht standaardinstellingen Zelfde opmaak, verschillende klassen

Basistabbladen

Basis pillen

Uitgeschakelde staat

Component uitlijning

Stapelbaar

Gestapelde tabbladen

Gestapelde pillen

Vervolgkeuzelijsten

Tabbladen met vervolgkeuzelijsten

Pillen met vervolgkeuzelijsten

Navigatielijsten

Voorbeeld navigatielijst

Horizontale verdelers

Navigatie met tabs

Tabblad voorbeeld

Tabbladen infaden

Vereist jQuery-plug-in

Tabbable in elke richting

Tabbladen aan de onderkant

Tabbladen aan de linkerkant

Tabbladen aan de rechterkant

navigatiesysteem

Basis navigatiebalk

Navbar-componenten

Merk

Nav-links

Formulieren

Zoekformulier

Component uitlijning

Vervolgkeuzelijsten gebruiken

Tekst

Optionele weergavevariaties

Vast naar boven

Vast aan de onderkant

Statische navigatiebalk bovenaan

Responsieve navigatiebalk

Omgekeerde variatie

Paneermeel

Voorbeelden

Paginering Twee opties om door inhoud te bladeren

Standaard paginering

Opties

Uitgeschakelde en actieve toestanden

Maten

Uitlijning

Pager

Standaard voorbeeld

Uitgelijnde links

Optionele uitgeschakelde staat

Etiketten en insignes

Etiketten

Insignes

Gemakkelijk inklapbaar

Typografische componenten

Heldeneenheid

Hallo Wereld!

Pagina hoofd