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> Iemand beroemd </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">
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 leesmij 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 tdenth |
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 |
Met v2.0 hebben we lichtere en slimmere standaardinstellingen voor formulierstijlen. Geen extra opmaak, alleen formulierbesturingselementen.
- <form class = "goed" >
- <label> Labelnaam </label>
- <input type = "text" class = "span3" placeholder = "Type iets..." >
- <span class = "help-inline" > Bijbehorende helptekst! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Check me out
- </label>
- <button type = "submit" class = "btn" > Verzenden </button>
- </form>
Weerspiegelt standaard WebKit-stijlen, voeg gewoon toe .form-searchvoor extra afgeronde zoekvelden.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Zoeken </button>
- </form>
Ingangen zijn blokniveau om te starten. Voor .form-inlineen .form-horizontalgebruiken we inline-block.
- <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" >
- <invoertype = " checkbox" > Onthoud mij
- </label>
- <button type = "submit" class = "btn" > Aanmelden </button>
- </form>
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>
Links worden alle standaardformulierbesturingselementen weergegeven die we ondersteunen. Hier is de lijst met opsommingstekens:
Tot v1.4 gebruikten de standaard formulierstijlen van Bootstrap de horizontale lay-out. Met Bootstrap 2 hebben we die beperking verwijderd om slimmere, meer schaalbare standaardinstellingen voor elke vorm te hebben.
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 vereiste Bootstrap extra markeringen 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.
In plaats van van elk pictogram een extra verzoek te maken, hebben we ze gecompileerd tot een sprite: een aantal afbeeldingen in één bestand dat CSS gebruikt om de afbeeldingen te positioneren met background-position. Dit is dezelfde methode die we gebruiken op Twitter.com en het heeft goed gewerkt voor ons.
Alle pictogrammenklassen worden voorafgegaan door .icon-voor de juiste naamruimte en scoping, net als onze andere componenten. Dit helpt conflicten met andere tools te voorkomen.
Glyphicons heeft ons het gebruik van de Halflings-set in onze open-source toolkit verleend, zolang we een link en vermelding hier in de documenten verstrekken. Overweeg om hetzelfde te doen in uw projecten.
Bootstrap gebruikt een <i>tag voor alle pictogrammen, maar ze hebben geen hoofdlettertype - alleen een gedeeld voorvoegsel. Plaats de volgende code zo ongeveer overal om te gebruiken:
- <i class = "icon-search" ></i>
Er zijn ook stijlen beschikbaar voor omgekeerde (witte) pictogrammen, klaargemaakt met één extra klasse:
- <i class = "icon-search icon-white" ></i>
Er zijn 120 klassen om uit te kiezen voor uw pictogrammen. Voeg gewoon een <i>tag toe met de juiste klassen en je bent klaar. Je kunt de volledige lijst vinden in sprites.less of hier in dit document.
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.
Pictogrammen zijn geweldig, maar waar zou je ze gebruiken? Hier zijn een paar ideeën:
In wezen, overal waar u een <i>tag kunt plaatsen, kunt u een pictogram plaatsen.
Gebruik ze in knoppen, knopgroepen voor een werkbalk, navigatie of invoer in voorgevoegde formulieren.