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: @baseFontSize
en @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 opnemen title voor uitgebreide tekst |
<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 zijn opgemaakt met hoofdletters en een licht gestippelde onderrand. Ze hebben ook een helpcursor bij het zweven, zodat gebruikers een extra indicatie hebben dat er iets wordt weergegeven bij het zweven.
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-left en .pull-right klassen 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>
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-scrollable
klasse 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 td en th elementen |
Tabellen worden automatisch opgemaakt met slechts een paar randen om de leesbaarheid te garanderen en de structuur te behouden. Bij 2.0 is de .table
klasse verplicht.
- <table class = "table" >
- …
- </table>
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Markering | Otto | CSS |
2 | Jakob | Thornton | Javascript |
3 | Stu | Deuk | HTML |
Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .table-striped
klasse toe.
Opmerking: Gestreepte tabellen gebruiken de :nth-child
CSS-selector en zijn niet beschikbaar in IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Markering | Otto | CSS |
2 | Jakob | Thornton | Javascript |
3 | Stu | Deuk | HTML |
Voeg randen toe rond de hele tafel en afgeronde hoeken voor esthetische doeleinden.
- <table class = "table table-bordered" >
- …
- </table>
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jakob | Thornton | Javascript |
3 | Stu | Deuk | |
3 | Brosef | Stalin | HTML |
Maak uw tabellen compacter door de .table-condensed
klasse toe te voegen om de celopvulling van tabellen te halveren (van 8px naar 4px).
- <table class = "table table-condensed" >
- …
- </table>
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Markering | Otto | CSS |
2 | Jakob | Thornton | Javascript |
3 | Stu | Deuk | HTML |
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>
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Markering | Otto | CSS |
2 | Jakob | Thornton | Javascript |
3 | Stu | Deuk | HTML |
4 | Brosef | Stalin | HTML |
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 selectie die u zou verwachten. Maar het wordt ook geleverd met een aantal aangepaste componenten zoals toegevoegde en vooraf geplaatste 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-search
voor 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-inline
en .form-horizontal
gebruiken 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" >
- <button type = "submit" class = "btn" > Ga </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 .controls
zijn 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 disabled
toestanden. We verwijderen de standaard Webkit outline
en passen een box-shadow
in 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 .inline
of .checkbox
toe .radio
en je bent klaar.
Als u prepend- of append-invoer in een inline-vorm wilt gebruiken, moet u de .add-on
en input
op 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.
:after
. In de documenten tonen we een lichtrode achtergrondkleur bij het aanwijzen om de grootte van het pictogram te markeren.
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.
Met v2.0.1 hebben we ervoor gekozen om een <i>
tag te gebruiken voor al onze pictogrammen, maar ze hebben geen hoofdlettergebruik, 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.
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.