Bovenop de steigers worden elementaire HTML-elementen gestyled en verbeterd met uitbreidbare klassen om een frisse, consistente look en feel te bieden.
Het hele typografische raster is gebaseerd op twee Less-variabelen in ons bestand 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 wiskunde, om de marges, opvullingen en regelhoogtes van al ons type en meer te maken.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Element | Gebruik | Optioneel |
|---|---|---|
<strong> |
Voor het benadrukken van een tekstfragment met belangrijk | Geen |
<em> |
Voor het benadrukken van een tekstfragment met klemtoon | Geen |
<abbr> |
Wikkelt afkortingen en acroniemen in om de uitgebreide versie weer te geven bij het zweven | Optioneel .initialismklasse voor afkortingen in hoofdletters. |
<address> |
Voor contactgegevens voor de naaste voorouder of het hele oeuvre | Opmaak behouden door alle regels te beëindigen met<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, een pharetra augue.
Opmerking: Voel je vrij om <b>en <i>in HTML5 te gebruiken, maar hun gebruik is een beetje veranderd. <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.
Hier zijn twee voorbeelden van hoe de <address>tag kan worden gebruikt:
Afkortingen met een titleattribuut hebben een licht gestippelde onderrand en een helpcursor bij het aanwijzen. Dit geeft gebruikers een extra indicatie dat er iets getoond zal worden bij de hover.
Voeg de initialismklasse toe aan een afkorting om de typografische harmonie te vergroten door deze een iets kleinere tekstgrootte te geven.
HTML is het beste sinds gesneden brood.
Een afkorting van het woord attribuut is attr .
| Element | Gebruik | Optioneel |
|---|---|---|
<blockquote> |
Element op blokniveau voor het citeren van inhoud uit een andere bron | Attribuut toevoegen .pull-leften .pull-rightklassen voor zwevende opties |
<small> |
Optioneel element voor het toevoegen van een naar de gebruiker gerichte bronvermelding, meestal een auteur met de titel van het werk | Plaats de <cite>rond de titel of naam van de bron |
Om een blokcitaat op te nemen, wikkel je <blockquote>om een willekeurige HTML heen als het citaat. Voor rechte citaten raden we een <p>.
Voeg een optioneel <small>element toe om je bron te citeren en je krijgt een em-streepje —ervoor voor stylingdoeleinden.
- <blokquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Een beroemd iemand </small>
- </blockquote>
Standaard blockquotes zijn als volgt gestileerd:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Iemand beroemd in Body of work
Om je blockquote naar rechts te laten zweven, voeg je toe class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Iemand beroemd in Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Kop op! Horizontale beschrijvingslijsten kappen termen af die te lang zijn om in de fix in de linkerkolom te passen text-overflow. In smallere viewports veranderen ze in de standaard gestapelde lay-out.
Wikkel inline codefragmenten in met <code>.
- De sectie < code> </ code > moet bijvoorbeeld als inline worden ingepakt .
Gebruik <pre>voor meerdere regels code. Zorg ervoor dat u eventuele punthaken in de code ontwijkt voor een juiste weergave.
<p>Voorbeeldtekst hier...</p>
- <pre>
- <p>Voorbeeldtekst hier...</p>
- </pre>
Opmerking: 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.
Neem hetzelfde <pre>element en voeg twee optionele klassen toe voor verbeterde weergave.
- <p> Voorbeeldtekst hier... </p>
- <pre class = "mooie afdruk
- linnen" >
- <p>Voorbeeldtekst hier...</p>
- </pre>
Download google-code-prettify en bekijk de readme voor gebruik.
| 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 Moet worden gebruikt binnen a <thead> |
<caption> |
Beschrijving of samenvatting van wat er in de tabel staat, vooral handig voor schermlezers |
- <tafel>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Naam | Klas | Beschrijving |
|---|---|---|
| Standaard | Geen | Geen stijlen, alleen kolommen en rijen |
| Basis | .table |
Alleen horizontale lijnen tussen rijen |
| begrensd | .table-bordered |
Rondt hoeken af en voegt buitenrand toe |
| Zebra-streep | .table-striped |
Voegt een lichtgrijze achtergrondkleur toe aan oneven rijen (1, 3, 5, enz.) |
| gecondenseerd | .table-condensed |
Snijdt verticale opvulling doormidden, van 8px naar 4px, binnen alle elementen tden thelementen |
Tabellen worden automatisch opgemaakt met slechts een paar randen om de leesbaarheid te garanderen en de structuur te behouden. Bij 2.0 is de .tableklasse verplicht.
- <table class = "table" >
- …
- </table>
| # | Voornaam | Achternaam | gebruikersnaam |
|---|---|---|---|
| 1 | Markering | Otto | @mdo |
| 2 | Jakob | Thornton | @dik |
| 3 | Larry | de vogel |
Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .table-stripedklasse toe.
Opmerking: Gestreepte tabellen gebruiken de :nth-childCSS-selector en zijn niet beschikbaar in IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Voornaam | Achternaam | gebruikersnaam |
|---|---|---|---|
| 1 | Markering | Otto | @mdo |
| 2 | Jakob | Thornton | @dik |
| 3 | Larry | de vogel |
Voeg randen toe rond de hele tafel en afgeronde hoeken voor esthetische doeleinden.
- <table class = "table table-bordered" >
- …
- </table>
| # | Voornaam | Achternaam | gebruikersnaam |
|---|---|---|---|
| 1 | Markering | Otto | @mdo |
| Markering | Otto | @getbootstrap | |
| 2 | Jakob | Thornton | @dik |
| 3 | Larry de vogel | ||
Maak uw tabellen compacter door de .table-condensedklasse toe te voegen om de celopvulling van tabellen te halveren (van 8px naar 4px).
- <table class = "table table-condensed" >
- …
- </table>
| # | Voornaam | Achternaam | gebruikersnaam |
|---|---|---|---|
| 1 | Markering | Otto | @mdo |
| 2 | Jakob | Thornton | @dik |
| 3 | Larry de vogel | ||
Voel je vrij om een van de tafelklassen te combineren om verschillende looks te bereiken door een van de beschikbare klassen te gebruiken.
- <table class = "table table-striped table-randed table-condensed" >
- ...
- </table>
| Voor-en achternaam | |||
|---|---|---|---|
| # | Voornaam | Achternaam | gebruikersnaam |
| 1 | Markering | Otto | @mdo |
| 2 | Jakob | Thornton | @dik |
| 3 | Larry de vogel | ||
Het beste van formulieren in Bootstrap is dat al uw invoer en bedieningselementen er geweldig uitzien, ongeacht hoe u ze in uw opmaak bouwt. Er is geen overbodige HTML vereist, maar we bieden de patronen voor degenen die het nodig hebben.
Meer gecompliceerde lay-outs worden geleverd met beknopte en schaalbare klassen voor eenvoudige styling en evenementbinding, zodat u bij elke stap gedekt bent.
Bootstrap wordt geleverd met ondersteuning voor vier soorten formulierlay-outs:
Verschillende soorten formulierlay-outs vereisen enkele wijzigingen in de opmaak, maar de besturingselementen zelf blijven en gedragen zich hetzelfde.
De formulieren van Bootstrap bevatten stijlen voor alle basisformulierbesturingselementen zoals invoer, tekstgebied en selecteren die u zou verwachten. Maar het wordt ook geleverd met een aantal aangepaste componenten zoals toegevoegde en voorgevoegde invoer en ondersteuning voor lijsten met selectievakjes.
Statussen zoals fout, waarschuwing en succes zijn opgenomen voor elk type formulierbesturingselement. Ook inbegrepen zijn stijlen voor uitgeschakelde bedieningselementen.
Bootstrap biedt eenvoudige opmaak en stijlen voor vier stijlen van veelvoorkomende webformulieren.
| Naam | Klas | Beschrijving |
|---|---|---|
| Verticaal (standaard) | .form-vertical (niet verplicht) |
Gestapelde, links uitgelijnde labels over bedieningselementen |
| In lijn | .form-inline |
Links uitgelijnd label en inline-blokknoppen voor een compacte stijl |
| Zoeken | .form-search |
Extra afgeronde tekstinvoer voor een typische zoekesthetiek |
| Horizontaal | .form-horizontal |
Zwevende links, rechts uitgelijnde labels op dezelfde regel als bedieningselementen |
Slimme en lichtgewicht standaardinstellingen zonder extra opmaak.
- <form class = "goed" >
- <label> Labelnaam </label>
- <input type = "text" class = "span3" placeholder = "Type iets..." >
- <span class = "help-block" > Voorbeeld helptekst op blokniveau hier. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Check me out
- </label>
- <button type = "submit" class = "btn" > Verzenden </button>
- </form>
Voeg toe .form-searchaan het formulier en .search-queryaan het input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Zoeken </button>
- </form>
Voeg toe .form-inlineom de verticale uitlijning en afstand van formulierbesturingselementen te verfijnen.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "E-mail" >
- <input type = "password" class = "input-small" placeholder = "Wachtwoord" >
- <label class = "checkbox" >
- <input type = "checkbox" > Onthoud mij
- </label>
- <button type = "submit" class = "btn" > Aanmelden </button>
- </form>
Aan de rechterkant worden alle standaardformulierbesturingselementen weergegeven die we ondersteunen. Hier is de lijst met opsommingstekens:
Gezien de bovenstaande voorbeeldindeling van het formulier, is hier de opmaak die is gekoppeld aan de eerste invoer- en stuurgroep. De klassen .control-group, .control-label, en .controlszijn allemaal vereist voor styling.
- <form class = "form-horizontal" >
- <veldset>
- <legend> Legendatekst </legend>
- <div class = "controlegroep" >
- <label class = "control-label" for = "input01" > Tekstinvoer </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Ondersteunende helptekst </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap biedt stijlen voor door de browser ondersteunde focus en disabledtoestanden. We verwijderen de standaard Webkit outlineen passen een box-shadowin plaats daarvan toe voor :focus.
Het bevat ook validatiestijlen voor fouten, waarschuwingen en succes. Om te gebruiken, voegt u de foutklasse toe aan de omringende .control-group.
- <veldset
- class = "controlegroepfout" >
- …
- </fieldset>
Invoergroepen (met toegevoegde of voorgevoegde tekst) bieden een gemakkelijke manier om meer context te geven aan uw invoer. Goede voorbeelden zijn het @-teken voor Twitter-gebruikersnamen of $ voor financiën.
Tot v1.4 had Bootstrap extra markeringen nodig rond selectievakjes en radio's om ze te stapelen. Nu is het een kwestie van het herhalen van <label class="checkbox">het <input type="checkbox">.
Inline selectievakjes en radio's worden ook ondersteund. Voeg gewoon .inlineof .checkboxtoe .radioen je bent klaar.
Als u prepend- of append-invoer in een inline-vorm wilt gebruiken, moet u de .add-onen inputop dezelfde regel plaatsen, zonder spaties.
Om helptekst voor uw formulierinvoer toe te voegen, voegt u inline helptekst toe met <span class="help-inline">of een helptekstblok met <p class="help-block">na het invoerelement.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an <i> tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.