Bootstrap

Basis-CSS

Fundamentele HTML-elementen gestyled en verbeterd met uitbreidbare klassen.

Typografie

Koppen

Alle HTML-koppen, <h1>door <h6>zijn beschikbaar.

h1. Koptekst 1

h2. Kop 2

h3. Kop 3

h4. Rubriek 4

h5. Kop 5
h6. Kop 6

Lichaamskopie

De algemene standaardwaarde van Bootstrap font-sizeis 14px , met een line-heightvan 20px . Dit wordt toegepast op de <body>en alle paragrafen. Bovendien <p>krijgen (alinea's) een ondermarge van de helft van hun regelhoogte (standaard 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida bij eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopie hoofdtekst

Laat een alinea opvallen door toe te voegen .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Gebouwd met minder

De typografische schaal is gebaseerd op twee LESS variabelen in variables.less : @baseFontSizeen @baseLineHeight. De eerste is de basislettergrootte die overal wordt gebruikt en de tweede is de basisregelhoogte. We gebruiken die variabelen en wat eenvoudige wiskunde om de marges, opvullingen en regelhoogten van al ons type en meer te maken. Pas ze aan en Bootstrap past zich aan.

Nadruk

Maak gebruik van HTML's standaard nadruktags met lichtgewicht stijlen.

<small>

Gebruik de kleine tag om de nadruk te leggen op inline of tekstblokken .

Deze regel tekst is bedoeld als kleine lettertjes.

<p> <small> Deze regel tekst is bedoeld als kleine lettertjes. </klein> </p>

Vetgedrukt

Voor het benadrukken van een tekstfragment met een zwaarder lettertype.

Het volgende tekstfragment wordt weergegeven als vetgedrukte tekst .

<strong> weergegeven als vetgedrukte tekst </strong>

Cursief

Voor het cursief benadrukken van een tekstfragment.

Het volgende tekstfragment wordt weergegeven als cursieve tekst .

<em> weergegeven als cursieve tekst </em>

Kop op!Voel je vrij om <b>en <i>in HTML5 te gebruiken. <b>is bedoeld om woorden of zinsdelen te markeren zonder extra belang over te brengen, terwijl <i>het meestal is voor stem, technische termen, enz.

Uitlijningsklassen

Lijn tekst eenvoudig opnieuw uit op componenten met tekstuitlijningsklassen.

Links uitgelijnde tekst.

Gecentreerde tekst.

Rechts uitgelijnde tekst.

  1. <p class = "text-left" > Links uitgelijnde tekst. </p> 
  2. <p class = "text-center" > Gecentreerde tekst. </p> 
  3. <p class = "text-right" > Rechts uitgelijnde tekst. </p>

Nadruk lessen

Breng betekenis over door middel van kleur met een handvol nadruk-utiliteitsklassen.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "tekstwaarschuwing" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Afkortingen

Gestileerde implementatie van het HTML- <abbr>element voor afkortingen en acroniemen om de uitgebreide versie bij hover te tonen. Afkortingen met een titleattribuut hebben een licht gestippelde onderrand en een helpcursor bij het zweven, wat extra context geeft bij het zweven.

<abbr>

Voor uitgebreide tekst bij lang zweven van een afkorting, neemt u het titleattribuut op.

Een afkorting van het woord attribuut is attr .

<abbr title = "attribuut" > attr </abbr>

<abbr class="initialism">

Voeg .initialismeen afkorting toe voor een iets kleinere lettergrootte.

HTML is het beste sinds gesneden brood.

<abbr title = "HyperText Markup Language" class = "initialisme" > HTML </abbr>

Adressen

Presenteer contactgegevens voor de dichtstbijzijnde voorouder of het hele oeuvre.

<address>

Behoud de opmaak door alle regels te beëindigen met <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Volledige naam
[email protected] 
  1. <adres>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefoon" > P: </abbr> (123) 456-7890 
  6. </adres>
  7.  
  8. <adres>
  9.   <strong> Volledige naam </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </adres>

Blok citaten

Voor het citeren van inhoudsblokken uit een andere bron in uw document.

Standaard blokquote

Wikkel <blockquote>rond elke HTML als het citaat. Voor rechte citaten raden we een <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

  1. <blokquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante. </p>
  3. </blockquote>

Opties voor blokcitaten

Stijl- en inhoudswijzigingen voor eenvoudige variaties op een standaard blockquote.

Een bron noemen

<small>Tag toevoegen om de bron te identificeren. Wikkel de naam van het bronwerk in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

Iemand die beroemd is in Brontitel 
  1. <blokquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante. </p>
  3.   <small> Een beroemd iemand <cite title = "Brontitel" > Brontitel </cite></small> 
  4. </blockquote>

Alternatieve weergaven

Gebruik .pull-rightvoor een zwevend, rechts uitgelijnd blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

Iemand die beroemd is in Brontitel 
  1. <blockquote class = "naar rechts trekken" > 
  2.   ...
  3. </blockquote>

Lijsten

ongeordend

Een lijst met items waarbij de volgorde er niet expliciet toe doet.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem bij massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricieën
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Besteld

Een lijst met items waarbij de volgorde er expliciet toe doet.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem bij massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

niet gestyled

Verwijder de standaard list-styleen linker opvulling op lijstitems (alleen directe kinderen).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem bij massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricieën
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

In lijn

Plaats alle lijstitems op een enkele regel met inline-blocken wat lichte opvulling.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Beschrijving

Een lijst met termen met de bijbehorende beschrijvingen.

Beschrijvingslijsten
Een beschrijvingslijst is perfect voor het definiëren van termen.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida bij eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontale beschrijving

Maak termen en beschrijvingen <dl>naast elkaar.

Beschrijvingslijsten
Een beschrijvingslijst is perfect voor het definiëren van termen.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida bij eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontaal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Kop op!Horizontale beschrijvingslijsten zullen termen die te lang zijn om in de fix in de linkerkolom te passen, afkappen text-overflow. In smallere viewports veranderen ze in de standaard gestapelde lay-out.

Code

In lijn

Wikkel inline codefragmenten in met <code>.

Moet bijvoorbeeld <section>als inline worden verpakt. 
  1. Bijvoorbeeld , < code> & lt ; sectie & gt ;</ code > moet als inline worden ingepakt .

Basisblok

Gebruik <pre>voor meerdere regels code. Zorg ervoor dat u eventuele punthaken in de code ontwijkt voor een juiste weergave.

<p>Voorbeeldtekst hier...</p>
  1. <pre>
  2.   <p>Voorbeeldtekst hier...</p>
  3. </pre>

Kop op!Zorg ervoor dat u de code binnen <pre>de tags zo dicht mogelijk links houdt; het zal alle tabbladen weergeven.

U kunt optioneel de .pre-scrollableklasse toevoegen die een maximale hoogte van 350px instelt en een schuifbalk op de y-as biedt.

Tafels

Standaard stijlen

Voor basisstyling - lichte vulling en alleen horizontale verdelers - voegt u de basisklasse toe .tableaan elk <table>.

# Voornaam Achternaam gebruikersnaam
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Optionele lessen

Voeg een van de volgende klassen toe aan de .tablebasisklasse.

.table-striped

Voegt zebra-striping toe aan elke tabelrij binnen de <tbody>via de :nth-childCSS-selector (niet beschikbaar in IE7-8).

# Voornaam Achternaam gebruikersnaam
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Voeg randen en afgeronde hoeken toe aan de tafel.

# Voornaam Achternaam gebruikersnaam
1 Markering Otto @mdo
Markering Otto @getbootstrap
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Schakel een zweefstatus in op tabelrijen binnen een <tbody>.

# Voornaam Achternaam gebruikersnaam
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Maakt tafels compacter door de celvulling te halveren.

# Voornaam Achternaam gebruikersnaam
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Optionele rijklassen

Gebruik contextuele klassen om tabelrijen te kleuren.

Klas Beschrijving
.success Geeft een succesvolle of positieve actie aan.
.error Geeft een gevaarlijke of mogelijk negatieve actie aan.
.warning Geeft een waarschuwing aan die mogelijk aandacht behoeft.
.info Gebruikt als alternatief voor de standaardstijlen.
# Product Betaling gedaan Toestand
1 TB - maandelijks 01/04/2012 Goedgekeurd
2 TB - maandelijks 02/04/2012 Afgewezen
3 TB - maandelijks 03/04/2012 In afwachting
4 TB - maandelijks 04/04/2012 Bel om te bevestigen 
  1. ...
  2.   < tr class = "succes" >
  3.     <td> 1 < /td>
  4.     <td>TB - maandelijks</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Goedgekeurd</ td >
  7.   </ tr >
  8. ...

Ondersteunde tabelopmaak

Lijst met ondersteunde tabel-HTML-elementen en hoe ze moeten worden gebruikt.

Label Beschrijving
<table> Wrapping-element voor het weergeven van gegevens in tabelvorm
<thead> Containerelement voor tabelkoprijen ( <tr>) om tabelkolommen te labelen
<tbody> Containerelement voor tabelrijen ( <tr>) in de hoofdtekst van de tabel
<tr> Containerelement voor een set tabelcellen ( <td>of <th>) die op een enkele rij verschijnen
<td> Standaard tabelcel
<th> Speciale tabelcel voor kolom- (of rij, afhankelijk van bereik en plaatsing) labels
<caption> Beschrijving of samenvatting van wat er in de tabel staat, vooral handig voor schermlezers 
  1. <tafel>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Formulieren

Standaard stijlen

Individuele formulierbesturingselementen krijgen een opmaak, maar zonder enige vereiste basisklasse op de <form>of grote wijzigingen in opmaak. Resultaten in gestapelde, links uitgelijnde labels bovenop formulierbesturingselementen.

Legende Voorbeeld helptekst op blokniveau hier. 
  1. <formulier>
  2.   <veldset>
  3.     <legend> Legende </legend>
  4.     <label> Labelnaam </label>
  5.     <input type = "text" placeholder = "Type iets..." >  
  6.     <span class = "help-block" > Voorbeeld helptekst op blokniveau hier. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Check me out 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Verzenden </button>  
  11.   </fieldset>
  12. </form>

Optionele lay-outs

Inbegrepen bij Bootstrap zijn drie optionele formulierlay-outs voor veelvoorkomende gebruiksscenario's.

Zoekformulier

Voeg toe .form-searchaan het formulier en .search-queryaan de <input>voor een extra afgeronde tekstinvoer.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Zoeken </button>  
  4. </form>

Inline formulier

Voeg toe .form-inlinevoor links uitgelijnde labels en inline-block-besturingselementen voor een compacte lay-out.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-mail" >   
  3.   <input type = "password" class = "input-small" placeholder = "Wachtwoord" >   
  4.   <label class = "checkbox" > 
  5.     <invoertype = " checkbox" > Onthoud mij 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Aanmelden </button>  
  8. </form>

Horizontale vorm

Lijn labels rechts uit en laat ze naar links zweven om ze op dezelfde regel als besturingselementen te laten verschijnen. Vereist de meeste opmaakwijzigingen van een standaardformulier:

  • Voeg toe .form-horizontalaan het formulier
  • Wikkel labels en bedieningselementen in.control-group
  • Toevoegen .control-labelaan het label
  • Wikkel alle bijbehorende bedieningselementen in .controlsvoor een juiste uitlijning
  1. <form class = "form-horizontal" > 
  2.   <div class = "controlegroep" > 
  3.     <label class = "control-label" for = "inputEmail" > E- mail </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "controlegroep" > 
  9.     <label class = "control-label" for = "inputPassword" > Wachtwoord </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Wachtwoord" >   
  12.     </div>
  13.   </div>
  14.   <div class = "controlegroep" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <invoertype = " checkbox" > Onthoud mij 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Aanmelden </button>  
  20.     </div>
  21.   </div>
  22. </form>

Ondersteunde formulierbesturingselementen

Voorbeelden van standaardformulierbesturingselementen die worden ondersteund in een voorbeeldformulierlay-out.

Ingangen

Meest voorkomende formulierbesturing, op tekst gebaseerde invoervelden. Bevat ondersteuning voor alle HTML5-typen: tekst, wachtwoord, datetime, datetime-local, datum, maand, tijd, week, nummer, e-mail, url, zoeken, tel en kleur.

Vereist het gebruik van een opgegeven typete allen tijde.

  1. <invoertype = " tekst" placeholder = "Tekstinvoer" >

Tekstgebied

Formulierbesturing die meerdere regels tekst ondersteunt. Wijzig rowshet kenmerk indien nodig.

  1. <textarea rows = "3" ></textarea>

Selectievakjes en radio's

Selectievakjes zijn voor het selecteren van een of meerdere opties in een lijst, terwijl radio's zijn voor het selecteren van één optie uit vele.

Standaard (gestapeld)


  1. <label class = "checkbox" > 
  2.   <invoertype = " checkbox" waarde = "" >  
  3.   Optie één is dit en dat - vergeet niet te vermelden waarom het geweldig is
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" aangevinkt >     
  8.   Optie één is dit en dat - vergeet niet te vermelden waarom het geweldig is
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Optie twee kan iets anders zijn en als u deze selecteert, wordt optie één ongedaan gemaakt
  13. </label>

Inline selectievakjes

Voeg de .inlineklas toe aan een reeks selectievakjes of radio's voor bedieningselementen die op dezelfde regel verschijnen.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Selecteert

Gebruik de standaardoptie of geef a multiple="multiple"op om meerdere opties tegelijk weer te geven.


  1. <select>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Formulierbesturing uitbreiden

Naast de bestaande browserbesturingselementen, bevat Bootstrap andere handige formuliercomponenten.

Voorgevoegde en toegevoegde ingangen

Voeg tekst of knoppen toe voor of na op tekst gebaseerde invoer. Houd er rekening mee dat selectelementen hier niet worden ondersteund.

Standaard opties

Wikkel an .add-onen an inputin met een van de twee klassen om tekst aan een invoer voor te voegen of toe te voegen.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Gebruikersnaam" >    
  4. </div>
  5. <div class = "invoer-toevoegen" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

gecombineerd

Gebruik beide klassen en twee instanties van .add-onom een ​​invoer toe te voegen en toe te voegen.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Knoppen in plaats van tekst

Gebruik a in plaats van een <span>met tekst .btnom een ​​knop (of twee) aan een ingang te koppelen.

  1. <div class = "invoer-toevoegen" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Ga! </knop>  
  4. </div>
  1. <div class = "invoer-toevoegen" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Zoeken </button>  
  4.   <button class = "btn" type = "button" > Opties </button>  
  5. </div>

Dropdownmenu's voor knoppen

  1. <div class = "invoer-toevoegen" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-groep" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Actie
  6.       <span class = "caret" ></span> 
  7.     </knop>
  8.     <ul class = "vervolgkeuzemenu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-groep" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Actie
  5.       <span class = "caret" ></span> 
  6.     </knop>
  7.     <ul class = "vervolgkeuzemenu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-groep" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Actie
  5.       <span class = "caret" ></span> 
  6.     </knop>
  7.     <ul class = "vervolgkeuzemenu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-groep" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Actie
  15.       <span class = "caret" ></span> 
  16.     </knop>
  17.     <ul class = "vervolgkeuzemenu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Gesegmenteerde vervolgkeuzelijsten

  1. <formulier>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <invoertype = " tekst" > 
  5.   </div>
  6.   <div class = "invoer-toevoegen" > 
  7.     <invoertype = " tekst" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Zoekformulier

  1. <form class = "form-search" > 
  2.   <div class = "invoer-toevoegen" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Zoeken </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Zoeken </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Maatvoering regelen:

Gebruik klassen voor relatieve grootte zoals .input-largeof stem uw invoer af op de grootte van de rasterkolommen met behulp van .span*klassen.

Ingangen op blokniveau

Laat elk element <input>of <textarea>element zich gedragen als een element op blokniveau.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Relatieve maatvoering

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Kop op!In toekomstige versies zullen we het gebruik van deze relatieve invoerklassen aanpassen aan onze knopgroottes. Verhoogt bijvoorbeeld .input-largede opvulling en lettergrootte van een invoer.

Rastergrootte

Gebruik .span1to .span12voor invoer die overeenkomt met dezelfde afmetingen van de rasterkolommen.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Gebruik voor meerdere rasterinvoeren per lijn de .controls-rowmodificatieklasse voor de juiste spatiëring . Het laat de invoer zweven om de witruimte samen te vouwen, stelt de juiste marges in en wist de zwevende beweging.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Niet-bewerkbare ingangen

Presenteer gegevens in een formulier dat niet kan worden bewerkt zonder gebruik te maken van de werkelijke formulieropmaak.

Enige waarde hier 
  1. <span class = "input-xlarge uneditable-input" > Enige waarde hier </span>

Formulieracties

Beëindig een formulier met een groep acties (knoppen). Wanneer ze binnen een worden geplaatst .form-actions, zullen de knoppen automatisch inspringen om op één lijn te komen met de formulierbesturingselementen.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Wijzigingen opslaan </button>  
  3.   <button type = "button" class = "btn" > Annuleren </button>  
  4. </div>

Hulp tekst

Ondersteuning op inline- en blokniveau voor helptekst die verschijnt rond formulierbesturingselementen.

Inline hulp

Inline helptekst 
  1. <input type = "text" ><span class = "help-inline" > Inline helptekst </span>

Hulp blokkeren

Een langer blok helptekst dat op een nieuwe regel valt en mogelijk verder reikt dan één regel. 
  1. <input type = "text" ><span class = "help-block" > Een langer blok helptekst dat op een nieuwe regel valt en mogelijk verder reikt dan één regel. </span>

Formulierbesturingsstatussen

Geef feedback aan gebruikers of bezoekers met basisfeedbackstatussen over formulierbesturingselementen en labels.

Invoerfocus

We verwijderen de standaardstijlen outlinevan sommige formulierbesturingselementen en passen box-shadowop zijn plaats een a toe voor :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Dit is gericht..." >

Ongeldige invoer

Stijlinvoer via standaard browserfunctionaliteit met :invalid. Specificeer een type, voeg het requiredattribuut toe als het veld niet optioneel is, en (indien van toepassing) specificeer een pattern.

Dit is niet beschikbaar in versies van Internet Explorer 7-9 vanwege gebrek aan ondersteuning voor CSS-pseudo-selectors.

  1. <input class = "span3" type = "e-mail" vereist >

Uitgeschakelde ingangen

Voeg het disabledkenmerk toe aan een invoer om invoer door de gebruiker te voorkomen en een iets andere look te activeren.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Invoer hier uitgeschakeld..." uitgeschakeld >

Validatiestatussen

Bootstrap bevat validatiestijlen voor fout-, waarschuwings-, info- en succesberichten. Om te gebruiken, voegt u de juiste klasse toe aan de omringende .control-group.

Er kan iets fout zijn gegaan
Corrigeer de fout a.u.b.
Gebruikersnaam is in gebruik
Woehoe! 
  1. <div class = "controlegroepwaarschuwing" > 
  2.   <label class = "control-label" for = "inputWarning" > Invoer met waarschuwing </label>  
  3.   <div class = "controls" > 
  4.     < invoertype = "tekst" id = "invoerwaarschuwing" >  
  5.     <span class = "help-inline" > Er kan iets mis zijn gegaan </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "controlegroepfout" > 
  10.   <label class = "control-label" for = "inputError" > Invoer met fout </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Corrigeer de fout </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "controlegroep info" > 
  18.   <label class = "control-label" for = "inputInfo" > Invoer met info </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Gebruikersnaam is al in gebruik </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "controlegroepsucces" > 
  26.   <label class = "control-label" for = "inputSuccess" > Invoer met succes </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Toetsen

Standaardknoppen

Knopstijlen kunnen op alles worden toegepast waarop de .btnklasse is toegepast. Meestal wilt u deze echter alleen toepassen op <a>en <button>elementen voor de beste weergave.

Knop klasse="" Beschrijving
btn Standaard grijze knop met verloop
btn btn-primary Biedt extra visueel gewicht en identificeert de primaire actie in een reeks knoppen
btn btn-info Gebruikt als alternatief voor de standaardstijlen
btn btn-success Geeft een succesvolle of positieve actie aan
btn btn-warning Geeft aan dat voorzichtigheid moet worden betracht bij deze actie
btn btn-danger Geeft een gevaarlijke of mogelijk negatieve actie aan
btn btn-inverse Alternatieve donkergrijze knop, niet gebonden aan een semantische actie of gebruik
btn btn-link Leg de nadruk op een knop door deze op een link te laten lijken, terwijl het gedrag van de knop behouden blijft

Cross-browser compatibiliteit

IE9 snijdt achtergrondverlopen op afgeronde hoeken niet bij, dus we verwijderen het. Gerelateerd, IE9 verpest uitgeschakelde buttonelementen, waardoor tekst grijs wordt met een vervelende tekstschaduw die we niet kunnen repareren.

Knop maten

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Grote knop </button>  
  3.   <button class = "btn btn-large" type = "button" > Grote knop </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standaardknop </button>  
  7.   <button class = "btn" type = "button" > Standaardknop </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Kleine knop </button>  
  11.   <button class = "btn btn-small" type = "button" > Kleine knop </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini-knop </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini-knop </button>  
  16. </p>

Maak knoppen op blokniveau (die de volledige breedte van een bovenliggend element beslaan) door toe te voegen .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blokniveau-knop </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Blokniveau-knop </button>

Uitgeschakelde staat

Maak knoppen onklikbaar door ze 50% terug te laten vervagen.

Ankerelement

Voeg de .disabledklasse toe aan <a>knoppen.

Primaire link Koppeling 

  1. <a href = "#" class = "btn btn-large btn-primary uitgeschakeld" > Primaire link </a>  
  2. <a href = "#" class = "btn btn-large uitgeschakeld" > Link </a>

Kop op!We gebruiken .disabledhier als een hulpprogrammaklasse, vergelijkbaar met de gewone .activeklasse, dus er is geen voorvoegsel vereist. Deze klasse is ook alleen voor esthetiek; u moet aangepast JavaScript gebruiken om links hier uit te schakelen.

Knopelement

Voeg het disabledkenmerk toe aan <button>knoppen.

  1. <button type = "button" class = "btn btn-large btn-primary uitgeschakeld" uitgeschakeld = "uitgeschakeld" > Primaire knop </button>   
  2. <button type = "button" class = "btn btn-large" uitgeschakeld > Knop </button>

Eén klas, meerdere tags

Gebruik de .btnklasse op een <a>, <button>, of <input>element.

Koppeling 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit" > Knop </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Probeer bij wijze van best practice het element af te stemmen op uw context om te zorgen voor een overeenkomende weergave in verschillende browsers. Als je een hebt input, gebruik dan een <input type="submit">voor je knop.

Afbeeldingen

Voeg klassen toe aan een <img>element om afbeeldingen in elk project gemakkelijk te stylen.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-afgerond" >  
  2. <img src = "..." class = "img-cirkel" >  
  3. <img src = "..." class = "img-polaroid" >

Kop op! .img-roundeden .img-circlewerken niet in IE7-8 vanwege gebrek aan border-radiusondersteuning.

Pictogrammen door Glyphicons

Pictogramglyphs

140 pictogrammen in sprite-vorm, beschikbaar in donkergrijs (standaard) en wit, geleverd door Glyphicons .

  • icoon-glas
  • icon-muziek
  • icoon-zoeken
  • pictogram-envelop
  • icoon-hart
  • icoon-ster
  • icoon-ster-leeg
  • icoon-gebruiker
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-oké
  • icoon-verwijderen
  • icoon-inzoomen
  • icoon-uitzoomen
  • icoon-uit
  • icoon-signaal
  • icon-cog
  • icon-prullenbak
  • icon-home
  • icon-bestand
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • pictogram-upload
  • icon-inbox
  • icoon-speel-cirkel
  • icoon-herhalen
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • pictogram-vlag
  • icoon-hoofdtelefoon
  • pictogram-volume-uit
  • pictogram-volume-omlaag
  • pictogram-volume omhoog
  • pictogram-qrcode
  • pictogram-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icoon-bladwijzer
  • icon-print
  • icon-camera
  • pictogram-lettertype
  • icon-bold
  • icoon-cursief
  • pictogram-tekst-hoogte
  • pictogram-tekst-breedte
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-lijst
  • icon-inspringing-links
  • icon-inspringing-rechts
  • icon-facetime-video
  • icoon-foto
  • pictogram-potlood
  • icon-map-marker
  • icon-adjust
  • icoon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • pictogram-stap-achteruit
  • icon-snel-achteruit
  • pictogram-achteruit
  • icon-play
  • icon-pauze
  • icon-stop
  • icoon-vooruit
  • icoon-snel vooruitspoelen
  • pictogram-stap-vooruit
  • pictogram-uitwerpen
  • icon-chevron-links
  • icon-chevron-right
  • icoon-plus-teken
  • pictogram-minteken
  • pictogram-verwijder-teken
  • icon-ok-teken
  • icoon-vraag-teken
  • icon-info-teken
  • icoon-screenshot
  • icoon-verwijder-cirkel
  • icoon-ok-cirkel
  • icon-ban-circle
  • icoon-pijl-links
  • icoon-pijl-rechts
  • icoon-pijl-omhoog
  • icoon-pijl-omlaag
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icoon-minus
  • icoon-sterretje
  • icoon-uitroepteken
  • icoon-cadeau
  • icon-blad
  • icoon-vuur
  • icon-eye-open
  • icon-eye-close
  • pictogram-waarschuwingsbord
  • icon-plane
  • icoon-kalender
  • pictogram-willekeurig
  • icon-commentaar
  • icoon-magneet
  • pictogram-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-winkelwagentje
  • icon-map-close
  • icon-map-open
  • icon-resize-verticaal
  • icon-resize-horizontal
  • icoon-hdd
  • icoon-bullhorn
  • icoon-bel
  • icon-certificaat
  • pictogram-duim omhoog
  • icon-thumbs-down
  • icoon-hand-rechts
  • icoon-hand-links
  • icon-hand-up
  • icoon-hand-down
  • pictogram-cirkel-pijl-rechts
  • pictogram-cirkel-pijl-links
  • pictogram-cirkel-pijl-omhoog
  • pictogram-cirkel-pijl-omlaag
  • icon-globe
  • pictogram-sleutel
  • icoon-taken
  • icoon-filter
  • icon-aktetas
  • pictogram-volledig scherm

Glyphicons-toeschrijving

Glyphicons Halflings zijn normaal gesproken niet gratis beschikbaar, maar een overeenkomst tussen Bootstrap en de makers van Glyphicons heeft dit voor u als ontwikkelaars gratis mogelijk gemaakt. Als dank vragen we je om een ​​optionele link terug naar Glyphicons op te nemen wanneer dat praktisch is.

Hoe te gebruiken

Alle pictogrammen vereisen een <i>tag met een unieke klasse, voorafgegaan door icon-. Plaats de volgende code zo ongeveer overal om te gebruiken:

  1. <i class = "icon-search" ></i>

Er zijn ook stijlen beschikbaar voor omgekeerde (witte) pictogrammen, klaargemaakt met een extra klasse. We zullen deze klasse specifiek afdwingen bij zweven en actieve statussen voor navigatie- en dropdown-links.

  1. <i class = "icon-search icon-white" ></i>

Kop op!Wanneer u naast tekstreeksen gebruikt, zoals in knoppen of nav-links, zorg er dan voor dat u een spatie achter de <i>tag laat voor de juiste spatiëring.

Voorbeelden van pictogrammen

Gebruik ze in knoppen, knopgroepen voor een werkbalk, navigatie of invoer in voorgevoegde formulieren.

Toetsen

Knopgroep in een knoppenbalk
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-groep" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Dropdown in een knopgroep
Gebruiker 
  1. <div class = "btn-groep" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Gebruiker </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "vervolgkeuzemenu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Bewerken </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Verwijderen </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Verbannen </a></li>  
  8.     <li class = "verdeler" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Beheerder maken </a></li>  
  10.   </ul>
  11. </div>
Knop maten
Ster Ster Ster 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Ster </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Ster </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Ster </a>

Navigatie

  1. <ul class = "nav nav-lijst" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Bibliotheek </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Toepassingen </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Diversen </a></li>  
  6. </ul>

Formuliervelden

  1. <div class = "controlegroep" > 
  2.   <label class = "control-label" for = "inputIcon" > E-mailadres </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>