Bootstrap

Basis-CSS

Bovenop de steigers worden elementaire HTML-elementen gestyled en verbeterd met uitbreidbare klassen om een ​​frisse, consistente look en feel te bieden.

Typografie Koppen, alinea's, lijsten en andere inline type-elementen

Koppen en hoofdtekst

Typografische schaal

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.

Voorbeeld hoofdtekst

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.

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.

h1. Koptekst 1

h2. Kop 2

h3. Kop 3

h4. Rubriek 4

h5. Kop 5
h6. Kop 6

Nadruk, adres en afkorting

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 titlekenmerk opnemen voor uitgebreide tekst

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

nadruk gebruiken

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.

Voorbeeld adressen

Hier zijn twee voorbeelden van hoe de <address>tag kan worden gebruikt:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Volledige naam
[email protected]

Voorbeeld afkortingen

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 .

Blok citaten

Element Gebruik Optioneel
<blockquote> Element op blokniveau voor het citeren van inhoud uit een andere bron

Attribuut toevoegen citevoor bron-URL

Gebruik .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 &mdash;ervoor voor stylingdoeleinden.

  1. <blokquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3.   <small> Iemand beroemd </small>
  4. </blockquote>

Voorbeeld blokquotes

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

Lijsten

ongeordend

<ul>

  • 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

niet gestyled

<ul class="unstyled">

  • 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

Besteld

<ol>

  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

Beschrijving

<dl>

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.

Horizontale beschrijving

<dl class="dl-horizontal">

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.

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 Inline en codefragmenten blokkeren

In lijn

Wikkel inline codefragmenten in met <code>.

  1. De sectie < code> </ code > moet bijvoorbeeld 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>

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.

Google Pretify

Neem hetzelfde <pre>element en voeg twee optionele klassen toe voor verbeterde weergave.

  1. <p> Voorbeeldtekst hier... </p>
  1. <pre class = "mooie afdruk 
  2.      linnen" >
  3.   <p>Voorbeeldtekst hier...</p>
  4. </pre>

Download google-code-prettify en bekijk de leesmij voor gebruik.

Tabellen Voor, je raadt het al, tabelgegevens

Tabelopmaak

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 
  1. <tafel>
  2.   <thead>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </table>

Tafel opties

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

Voorbeeld tabellen

1. Standaard tabelstijlen

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.

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

2. Gestreepte tafel

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.

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

3. Begrensde tafel

Voeg randen toe rond de hele tafel en afgeronde hoeken voor esthetische doeleinden.

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

4. Gecondenseerde tabel

Maak uw tabellen compacter door de .table-condensedklasse toe te voegen om de celopvulling van tabellen te halveren (van 8px naar 4px).

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

5. Combineer ze allemaal!

Voel je vrij om een ​​van de tafelklassen te combineren om verschillende looks te bereiken door een van de beschikbare klassen te gebruiken.

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

Formulieren

Flexibele HTML en CSS

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.

Vier lay-outs inbegrepen

Bootstrap wordt geleverd met ondersteuning voor vier soorten formulierlay-outs:

  • Verticaal (standaard)
  • Zoeken
  • In lijn
  • Horizontaal

Verschillende soorten formulierlay-outs vereisen enkele wijzigingen in de opmaak, maar de besturingselementen zelf blijven en gedragen zich hetzelfde.

Controlestatussen en meer

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.

Vier soorten formulieren

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

Voorbeeldformulieren met alleen formulierbesturingselementen, geen extra opmaak

Basis vorm

Slimme en lichtgewicht standaardinstellingen zonder extra opmaak.

Voorbeeld helptekst op blokniveau hier.

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

Zoekformulier

Voeg toe .form-searchaan het formulier en .search-queryaan het input.

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

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

  1. <form class="well form-inline">
  2.   <input type="text" class="input-small" placeholder="Email">
  3.   <input type="password" class="input-small" placeholder="Password">
  4.   <label class="checkbox">
  5.     <input type="checkbox"> Remember me
  6.   </label>
  7.   <button type="submit" class="btn">Sign in</button>
  8. </form>

Horizontal forms

Shown on the right are all the default form controls we support. Here's the bulleted list:

  • text inputs (text, password, email, etc)
  • checkbox
  • radio
  • select
  • multiple select
  • file input
  • textarea

In addition to freeform text, any HTML5 text-based input appears like so.

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

  1. <form class="form-horizontal">
  2.   <fieldset>
  3.     <legend>Legend text</legend>
  4.     <div class="control-group">
  5.       <label class="control-label" for="input01">Text input</label>
  6.       <div class="controls">
  7.         <input type="text" class="input-xlarge" id="input01">
  8.         <p class="help-block">Supporting help text</p>
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

Form control states

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

  1. <fieldset
  2.   class="control-group error">
  3.   …
  4. </fieldset>
Some value here
Something may have gone wrong
Please correct the error
Woohoo!
Woohoo!

Extending form controls

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

Use the same .span* classes from the grid system for input sizes.

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

@

Here's some help text

.00
Here's more help text
$ .00

Note: Labels surround all the options for much larger click areas and a more usable form.

Buttons

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.


Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">
  3.   Button
  4. </button>
  5. <input class="btn" type="button"
  6.          value="Input">
  7. <input class="btn" type="submit"
  8.          value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Icons Graciously provided by Glyphicons

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Built as a sprite

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.

How to use

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:

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

There are also styles available for inverted (white) icons, made ready with one extra class:

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

There are 140 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.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

User

Refresh Checkout Delete

Comment Settings More Info