Krijg inzicht in de belangrijkste onderdelen van Bootstrap's infrastructuur, inclusief onze benadering van betere, snellere en sterkere webontwikkeling.

HTML5-documenttype

Bootstrap maakt gebruik van bepaalde HTML-elementen en CSS-eigenschappen die het gebruik van het HTML5-doctype vereisen. Voeg het toe aan het begin van al uw projecten.

<!doctype html>
<html lang="en">
  ...
</html>

Mobiel eerst

Met Bootstrap 2 hebben we optionele mobielvriendelijke stijlen toegevoegd voor belangrijke aspecten van het framework. Met Bootstrap 3 hebben we het project vanaf het begin herschreven om mobielvriendelijk te zijn. In plaats van optionele mobiele stijlen toe te voegen, zijn ze tot in de kern ingebakken. In feite is Bootstrap eerst mobiel . Mobile first-stijlen zijn door de hele bibliotheek te vinden in plaats van in afzonderlijke bestanden.

Voeg de viewport -metatag toe aan uw <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

U kunt zoommogelijkheden op mobiele apparaten uitschakelen door toe te voegen user-scalable=noaan de viewport-metatag. Hierdoor wordt zoomen uitgeschakeld, wat inhoudt dat gebruikers alleen kunnen scrollen, waardoor uw site een beetje meer op een native applicatie lijkt. Over het algemeen raden we dit niet op elke site aan, dus wees voorzichtig!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Typografie en links

Bootstrap stelt algemene algemene weergave-, typografie- en linkstijlen in. Specifiek, wij:

Zet background-color: #fff;op debody
Gebruik de @font-family-base, @font-size-base, en @line-height-baseattributen als onze typografische basis
Stel de algemene linkkleur in via @link-coloren pas linkonderstrepingen alleen toe op:hover

Deze stijlen zijn te vinden binnen scaffolding.less.

Normaliseren.css

Voor verbeterde weergave tussen browsers gebruiken we Normalize.css , een project van Nicolas Gallagher en Jonathan Neal .

containers

Bootstrap vereist een bevattend element om de inhoud van de site in te pakken en ons rastersysteem te huisvesten. U kunt een van de twee containers kiezen om in uw projecten te gebruiken. Merk op dat vanwege paddingen meer geen van beide containers nestbaar is.

Gebruik .containervoor een responsieve container met vaste breedte.

<div class="container">
  ...
</div>

Gebruik .container-fluidvoor een container over de volledige breedte, die de volledige breedte van uw viewport beslaat.

<div class="container-fluid">
  ...
</div>

Bootstrap bevat een responsief, mobiel eerste vloeistofrastersysteem dat op de juiste manier kan worden geschaald tot 12 kolommen naarmate het apparaat of de viewport groter wordt. Het bevat vooraf gedefinieerde klassen voor eenvoudige lay-outopties, evenals krachtige mixins voor het genereren van meer semantische lay-outs .

Invoering

Rastersystemen worden gebruikt voor het maken van paginalay-outs via een reeks rijen en kolommen die uw inhoud bevatten. Zo werkt het Bootstrap-rastersysteem:

Rijen moeten binnen een .container(vaste breedte) of .container-fluid(volledige breedte) worden geplaatst voor een juiste uitlijning en opvulling.
Gebruik rijen om horizontale groepen kolommen te maken.
Inhoud moet in kolommen worden geplaatst en alleen kolommen mogen directe onderliggende rijen zijn.
Voorgedefinieerde rasterklassen zoals .rowen .col-xs-4zijn beschikbaar voor het snel maken van rasterlay-outs. Minder mixins kunnen ook worden gebruikt voor meer semantische lay-outs.
Kolommen creëren goten (gaten tussen kolominhoud) via padding. Die opvulling wordt in rijen voor de eerste en laatste kolom gecompenseerd via een negatieve marge op .rows.
De negatieve marge is de reden waarom de onderstaande voorbeelden zijn uitgesprongen. Het is zo dat inhoud binnen rasterkolommen wordt uitgelijnd met inhoud die niet in het raster staat.
Rasterkolommen worden gemaakt door het aantal van twaalf beschikbare kolommen op te geven dat u wilt overspannen. Drie gelijke kolommen zouden bijvoorbeeld drie gebruiken .col-xs-4.
Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.
Rasterklassen zijn van toepassing op apparaten met schermbreedtes die groter zijn dan of gelijk aan de breekpuntgrootten, en overschrijven rasterklassen die zijn gericht op kleinere apparaten. Daarom heeft het toepassen van een .col-md-*klasse op een element niet alleen invloed op de stijl op middelgrote apparaten, maar ook op grote apparaten als een .col-lg-*klasse niet aanwezig is.

Bekijk de voorbeelden om deze principes op uw code toe te passen.

Mediaquery's

We gebruiken de volgende mediaquery's in onze Less-bestanden om de belangrijkste onderbrekingspunten in ons rastersysteem te maken.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We breiden deze mediaquery's af en toe uit met een max-widthom CSS te beperken tot een beperkter aantal apparaten.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Rasteropties

Bekijk hoe aspecten van het Bootstrap-rastersysteem werken op meerdere apparaten met een handige tabel.

	Extra kleine apparaten Telefoons (<768px)	Kleine apparaten Tablets (≥768px)	Middelgrote apparaten Desktops (≥992px)	Grote apparaten Desktops (≥1200px)
Rastergedrag	Altijd horizontaal	Samengevouwen om te starten, horizontaal boven breekpunten
Containerbreedte	Geen (automatisch)	750px	970px	1170px
Klasse voorvoegsel	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# kolommen	12
Kolombreedte	Auto	~62px	~81px	~97px
breedte van de goot	30px (15px aan elke kant van een kolom)
Nestbaar	Ja
compensaties	Ja
Kolomvolgorde	Ja

Voorbeeld: gestapeld-naar-horizontaal

Met behulp van een enkele set .col-md-*rasterklassen kunt u een basisrastersysteem maken dat gestapeld begint op mobiele apparaten en tablets (het extra kleine tot kleine bereik) voordat het horizontaal wordt op desktop (middelgrote) apparaten. Plaats rasterkolommen in een .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Voorbeeld: Vloeistofreservoir

Verander elke rasterlay-out met vaste breedte in een lay-out over de volledige breedte door uw buitenste .containerte wijzigen in .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Voorbeeld: mobiel en desktop

Wilt u niet dat uw kolommen eenvoudig op kleinere apparaten worden gestapeld? Gebruik de extra kleine en middelgrote apparaatrasterklassen door toe te voegen .col-xs-* .col-md-*aan uw kolommen. Zie het onderstaande voorbeeld voor een beter idee van hoe het allemaal werkt.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Voorbeeld: mobiel, tablet, desktop

Bouw voort op het vorige voorbeeld door nog dynamischere en krachtigere lay-outs te maken met tabletklassen .col-sm-*.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Voorbeeld: Kolomterugloop

Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.

.col-xs-9

.col-xs-4
Aangezien 9 + 4 = 13 > 12, wordt deze 4-koloms brede div als één aaneengesloten eenheid op een nieuwe regel gewikkeld.

.col-xs-6
Volgende kolommen gaan verder langs de nieuwe regel.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsieve kolom resets

Met de vier beschikbare rasterlagen zult u ongetwijfeld problemen tegenkomen waarbij uw kolommen op bepaalde breekpunten niet helemaal goed worden weergegeven, omdat de ene hoger is dan de andere. Om dat op te lossen, gebruikt u een combinatie van a .clearfixen onze responsieve hulpprogrammaklassen .

.col-xs-6 .col-sm-3
Pas het formaat van je viewport aan of bekijk het op je telefoon voor een voorbeeld.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Naast het wissen van kolommen bij responsieve breekpunten, moet u mogelijk offsets, pushes of pulls opnieuw instellen . Zie dit in actie in het rastervoorbeeld .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Dakgoten verwijderen

Verwijder de dakgoten van een rij en het zijn kolommen met de .row-no-guttersklasse.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Kolommen compenseren

Verplaats kolommen naar rechts met behulp van .col-md-offset-*klassen. Deze klassen vergroten de linkermarge van een kolom met *kolommen. .col-md-offset-4Beweegt bijvoorbeeld .col-md-4over vier kolommen.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

U kunt ook offsets van lagere rasterlagen overschrijven met .col-*-offset-0klassen.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Kolommen nesten

Als u uw inhoud wilt nesten met het standaardraster, voegt u een nieuwe .rowen een reeks .col-sm-*kolommen toe binnen een bestaande .col-sm-*kolom. Geneste rijen moeten een set kolommen bevatten die optellen tot 12 of minder (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt).

Niveau 1: .col-sm-9

Niveau 2: .col-xs-8 .col-sm-6

Niveau 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Kolomvolgorde

Verander eenvoudig de volgorde van onze ingebouwde rasterkolommen met .col-md-push-*en .col-md-pull-*modificatieklassen.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Minder mixins en variabelen

Naast vooraf gebouwde rasterklassen voor snelle lay-outs, bevat Bootstrap Less-variabelen en mixins om snel uw eigen eenvoudige, semantische lay-outs te genereren.

Variabelen

Variabelen bepalen het aantal kolommen, de gootbreedte en het mediaquerypunt waarop zwevende kolommen moeten beginnen. We gebruiken deze om de vooraf gedefinieerde rasterklassen te genereren die hierboven zijn gedocumenteerd, evenals voor de aangepaste mixins die hieronder worden vermeld.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins worden gebruikt in combinatie met de rastervariabelen om semantische CSS voor individuele rasterkolommen te genereren.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Voorbeeld gebruik

U kunt de variabelen wijzigen in uw eigen aangepaste waarden of gewoon de mixins gebruiken met hun standaardwaarden. Hier is een voorbeeld van het gebruik van de standaardinstellingen om een lay-out met twee kolommen te maken met een tussenruimte.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Koppen

Alle HTML-koppen, <h1>via <h6>, zijn beschikbaar. .h1through .h6-klassen zijn ook beschikbaar, voor wanneer u de lettertypestijl van een kop wilt aanpassen, maar toch wilt dat uw tekst inline wordt weergegeven.

h1. Bootstrap-kop	Halfvet 36px
h2. Bootstrap-kop	Halfvet 30px
h3. Bootstrap-kop	Halfvet 24px
h4. Bootstrap-kop	Halfvet 18px
h5. Bootstrap-kop	Halfvet 14px
h6. Bootstrap-kop	Halfvet 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Maak lichtere, secundaire tekst in elke kop met een algemene <small>tag of de .smallklasse.

h1. Bootstrap-kop Secundaire tekst

h2. Bootstrap-kop Secundaire tekst

h3. Bootstrap-kop Secundaire tekst

h4. Bootstrap-kop Secundaire tekst

h5. Bootstrap-kop Secundaire tekst

h6. Bootstrap-kop Secundaire tekst

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Lichaamskopie

De algemene standaardwaarde van Bootstrap font-sizeis 14px , met een waarde line-heightvan 1.428 . Dit wordt toegepast op de <body>en alle paragrafen. Bovendien <p>krijgen (alinea's) een ondermarge van de helft van hun berekende 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 : @font-size-baseen @line-height-base. 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.

Inline tekstelementen

Gemarkeerde tekst

Gebruik de <mark>tag om een tekstblok te markeren vanwege de relevantie ervan in een andere context.

U kunt de markeringstag gebruiken omhoogtepunttekst.

You can use the mark tag to <mark>highlight</mark> text.

verwijderde tekst

<del>Gebruik de tag om tekstblokken aan te duiden die zijn verwijderd .

~~Deze regel tekst is bedoeld om te worden behandeld als verwijderde tekst.~~

<del>This line of text is meant to be treated as deleted text.</del>

Doorgestreepte tekst

<s>Gebruik de tag om tekstblokken aan te duiden die niet meer relevant zijn .

~~Het is de bedoeling dat deze regel tekst als niet langer nauwkeurig wordt beschouwd.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Ingevoegde tekst

Gebruik de <ins>tag om toevoegingen aan het document aan te geven.

Deze regel tekst is bedoeld als aanvulling op het document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Onderstreepte tekst

Gebruik de <u>tag om tekst te onderstrepen.

Deze tekstregel wordt onderstreept weergegeven

<u>This line of text will render as underlined</u>

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

Kleine tekst

Gebruik de <small>tag om tekst in te stellen op 85% van de grootte van de bovenliggende tekst om de nadruk te leggen op inline of tekstblokken. Kopelementen krijgen hun eigen font-sizevoor geneste <small>elementen.

U kunt ook een inline-element gebruiken met .smallin plaats van een <small>.

Deze regel tekst is bedoeld als kleine lettertjes.

<small>This line of text is meant to be treated as fine print.</small>

Vetgedrukt

Voor het benadrukken van een tekstfragment met een zwaarder lettertype.

Het volgende tekstfragment wordt weergegeven als vetgedrukte tekst .

<strong>rendered as bold text</strong>

Cursief

Voor het cursief benadrukken van een tekstfragment.

Het volgende tekstfragment wordt weergegeven als cursieve tekst .

<em>rendered as italicized text</em>

Alternatieve elementen

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.

Uitgevulde tekst.

Geen omlooptekst.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformatie lessen

Transformeer tekst in componenten met hoofdletterklassen.

Tekst in kleine letters.

Tekst in hoofdletters.

Tekst met hoofdletter.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</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, waardoor extra context wordt geboden bij het zweven en voor gebruikers van ondersteunende technologieën.

Basisafkorting

Een afkorting van het woord attribuut is attr .

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

initialisme

Voeg .initialismeen afkorting toe voor een iets kleinere lettergrootte.

HTML is het beste sinds gesneden brood.

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

Adressen

Presenteer contactgegevens voor de dichtstbijzijnde voorouder of het hele oeuvre. Behoud de opmaak door alle regels te beëindigen met <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Volledige naam
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

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.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Opties voor blokcitaten

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

Een bron noemen

Voeg een toe <footer>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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternatieve weergaven

Voeg toe .blockquote-reversevoor een blockquote met rechts uitgelijnde inhoud.

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

Iemand die beroemd is in Brontitel

<blockquote class="blockquote-reverse">
  ...
</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

<ul>
  <li>...</li>
</ul>

Besteld

Een lijst met items waarbij de volgorde er 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
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

niet gestyled

Verwijder de standaard- list-styleen linkermarge op lijstitems (alleen directe kinderen). Dit is alleen van toepassing op items in de directe onderliggende lijst , wat betekent dat u de klasse ook voor geneste lijsten moet toevoegen.

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

In lijn

Plaats alle lijstitems op een enkele regel met display: inline-block;en wat lichte opvulling.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontale beschrijving

Maak termen en beschrijvingen <dl>naast elkaar. Begint gestapeld zoals standaard <dl>s, maar wanneer de navigatiebalk uitzet, doen deze dat ook.

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.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Automatisch afkappen

Horizontale beschrijvingslijsten kappen termen af die te lang zijn om in de linkerkolom te passen met text-overflow. In smallere viewports veranderen ze in de standaard gestapelde lay-out.

In lijn

Wikkel inline codefragmenten in met <code>.

Moet bijvoorbeeld <section>als inline worden verpakt.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Gebruikers invoer

Gebruik de <kbd>om invoer aan te geven die doorgaans via het toetsenbord wordt ingevoerd.

Om van directory te wisselen, typt u cdgevolgd door de naam van de directory.
Om instellingen te bewerken, druk op ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

Variabelen

Gebruik de <var>tag om variabelen aan te duiden.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Voorbeelduitvoer

Gebruik de <samp>tag om blokken aan te geven voor voorbeelduitvoer van een programma.

Deze tekst is bedoeld om te worden behandeld als voorbeelduitvoer van een computerprogramma.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Basis voorbeeld

Voor basisstyling - lichte vulling en alleen horizontale verdelers - voegt u de basisklasse toe .tableaan elk <table>. Het lijkt misschien super overbodig, maar gezien het wijdverbreide gebruik van tabellen voor andere plug-ins zoals kalenders en datumkiezers, hebben we ervoor gekozen om onze aangepaste tabelstijlen te isoleren.

Optioneel bijschrift bij de tabel.
#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry	de vogel	@twitter

<table class="table">
  ...
</table>

Gestreepte rijen

Gebruik .table-stripedom zebra-striping toe te voegen aan elke tabelrij binnen het <tbody>.

Compatibiliteit tussen verschillende browsers

Gestreepte tabellen worden opgemaakt via de :nth-childCSS-selector, die niet beschikbaar is in Internet Explorer 8.

#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry	de vogel	@twitter

<table class="table table-striped">
  ...
</table>

Begrensde tafel

Voeg toe .table-borderedvoor randen aan alle kanten van de tabel en cellen.

#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry	de vogel	@twitter

<table class="table table-bordered">
  ...
</table>

Beweeg rijen

Toevoegen .table-hoverom een hover-status in te schakelen op tabelrijen binnen een <tbody>.

#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry	de vogel	@twitter

<table class="table table-hover">
  ...
</table>

Verkorte tafel

Voeg .table-condensedtoe om tabellen compacter te maken door de celopvulling in tweeën te snijden.

#	Voornaam	Achternaam	gebruikersnaam
1	Markering	Otto	@mdo
2	Jakob	Thornton	@dik
3	Larry de vogel		@twitter

<table class="table table-condensed">
  ...
</table>

Contextuele lessen

Gebruik contextuele klassen om tabelrijen of afzonderlijke cellen te kleuren.

Klas	Beschrijving
`.active`	Past de zweefkleur toe op een bepaalde rij of cel
`.success`	Geeft een succesvolle of positieve actie aan
`.info`	Geeft een neutrale informatieve verandering of actie aan
`.warning`	Geeft een waarschuwing aan die mogelijk aandacht behoeft
`.danger`	Geeft een gevaarlijke of mogelijk negatieve actie aan

#	Kolomkop	Kolomkop	Kolomkop
1	Kolominhoud	Kolominhoud	Kolominhoud
2	Kolominhoud	Kolominhoud	Kolominhoud
3	Kolominhoud	Kolominhoud	Kolominhoud
4	Kolominhoud	Kolominhoud	Kolominhoud
5	Kolominhoud	Kolominhoud	Kolominhoud
6	Kolominhoud	Kolominhoud	Kolominhoud
7	Kolominhoud	Kolominhoud	Kolominhoud
8	Kolominhoud	Kolominhoud	Kolominhoud
9	Kolominhoud	Kolominhoud	Kolominhoud

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen aan een tabelrij of individuele cel biedt alleen een visuele indicatie, die niet wordt overgebracht naar gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat de informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (de zichtbare tekst in de relevante tabelrij/cel), ofwel wordt opgenomen op alternatieve manieren, zoals extra tekst die verborgen is bij de .sr-onlyklasse.

Responsieve tabellen

Maak responsieve tabellen door ze .tablein .table-responsivete pakken om ze horizontaal te laten scrollen op kleine apparaten (minder dan 768px). Wanneer u iets groter dan 768px breed bekijkt, ziet u geen verschil in deze tabellen.

Verticaal knippen/afknotten

Responsieve tabellen maken gebruik van overflow-y: hidden, dat alle inhoud afsnijdt die verder gaat dan de onder- of bovenrand van de tabel. Dit kan met name vervolgkeuzemenu's en andere widgets van derden afsnijden.

Firefox en veldenets

Firefox heeft een onhandige fieldset-styling die widthde responsieve tabel verstoort. Dit kan niet worden overschreven zonder een Firefox-specifieke hack die we niet bieden in Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Lees dit Stack Overflow-antwoord voor meer informatie .

#	Tabelkop	Tabelkop	Tabelkop	Tabelkop	Tabelkop	Tabelkop
1	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel
2	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel
3	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel

#	Tabelkop	Tabelkop	Tabelkop	Tabelkop	Tabelkop	Tabelkop
1	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel
2	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel
3	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel	Tabel cel

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Basis voorbeeld

Individuele formulierbesturingselementen krijgen automatisch een algemene stijl. Alle tekstuele <input>, <textarea>, en <select>elementen met .form-controlzijn width: 100%;standaard ingesteld op. Wikkel labels en bedieningselementen in .form-groupvoor optimale tussenruimte.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Meng formuliergroepen niet met invoergroepen

Meng formuliergroepen niet rechtstreeks met invoergroepen . Nest in plaats daarvan de invoergroep in de formuliergroep.

Inline formulier

Voeg toe .form-inlineaan uw formulier (wat geen <form>) hoeft te zijn voor links uitgelijnde en inline-blokbesturingselementen. Dit is alleen van toepassing op formulieren binnen viewports die ten minste 768px breed zijn.

Mogelijk aangepaste breedtes nodig

Invoer en selectie zijn width: 100%;standaard toegepast in Bootstrap. Binnen inline-formulieren stellen we dat opnieuw in, width: auto;zodat meerdere besturingselementen op dezelfde regel kunnen staan. Afhankelijk van uw lay-out kunnen extra aangepaste breedtes nodig zijn.

Altijd labels toevoegen

Schermlezers zullen problemen hebben met uw formulieren als u niet voor elke invoer een label opneemt. Voor deze inline-formulieren kunt u de labels verbergen met behulp van de .sr-onlyklasse. Er zijn nog meer alternatieve methoden om een label te geven voor ondersteunende technologieën, zoals het attribuut aria-label, aria-labelledbyof . titleAls geen van deze aanwezig is, kunnen schermlezers hun toevlucht nemen tot het gebruik van het placeholderattribuut, indien aanwezig, maar houd er rekening mee dat het gebruik van placeholderals vervanging voor andere labelmethoden niet wordt aanbevolen.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Horizontale vorm

Gebruik de vooraf gedefinieerde rasterklassen van Bootstrap om labels en groepen formulierbesturingselementen in een horizontale lay-out uit te lijnen door .form-horizontalaan het formulier toe te voegen (wat geen <form>) hoeft te zijn. Hierdoor verandert .form-groups om zich te gedragen als rasterrijen, dus geen behoefte aan .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Ondersteunde besturingselementen

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

Ingangen

Meest voorkomende formulierbesturing, op tekst gebaseerde invoervelden. Bevat ondersteuning voor alle HTML5-typen: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, en color.

Type aangifte vereist

Ingangen worden alleen volledig gestyled als ze typecorrect zijn gedeclareerd.

<input type="text" class="form-control" placeholder="Text input">

Invoergroepen

Om geïntegreerde tekst of knoppen toe te voegen voor en/of na een tekstgebaseerd <input>, bekijk de inputgroepcomponent .

Tekstgebied

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

<textarea class="form-control" 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.

Uitgeschakelde selectievakjes en radio's worden ondersteund, maar om een "niet-toegestane" cursor te geven bij het aanwijzen van de bovenliggende <label>, moet u de .disabledklasse toevoegen aan de bovenliggende .radio, .radio-inline, .checkbox, of .checkbox-inline.

Standaard (gestapeld)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline selectievakjes en radio's

Gebruik de .checkbox-inlineof .radio-inlineklassen op een reeks selectievakjes of radio's voor bedieningselementen die op dezelfde regel verschijnen.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Selectievakjes en radio's zonder labeltekst

Als u geen tekst binnen de <label>, is de invoer gepositioneerd zoals u zou verwachten. Werkt momenteel alleen op niet-inline selectievakjes en radio's. Vergeet niet om nog steeds een of ander label op te geven voor ondersteunende technologieën (bijvoorbeeld het gebruik van aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selecteert

Merk op dat veel native select-menu's, namelijk in Safari en Chrome, afgeronde hoeken hebben die niet kunnen worden gewijzigd via border-radiuseigenschappen.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Voor <select>besturingselementen met het multipleattribuut worden standaard meerdere opties weergegeven.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Statische controle

Wanneer u platte tekst naast een formulierlabel in een formulier moet plaatsen, gebruikt u de .form-control-staticklasse op een <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus staat

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

Demostatus `:focus`_

De bovenstaande voorbeeldinvoer gebruikt aangepaste stijlen in onze documentatie om de :focusstatus op een .form-control.

Uitgeschakelde staat

Voeg het disabledbooleaanse kenmerk toe aan een invoer om gebruikersinteracties te voorkomen. Uitgeschakelde ingangen lijken lichter en voegen een not-allowedcursor toe.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Uitgeschakelde veldensets

Voeg het disabledattribuut toe aan a <fieldset>om alle besturingselementen binnen de <fieldset>tegelijk uit te schakelen.

Waarschuwing over linkfunctionaliteit van`<a>`

Standaard behandelen browsers alle native formulierbesturingselementen ( <input>, <select>en <button>elementen) binnen a <fieldset disabled>als uitgeschakeld, waardoor zowel toetsenbord- als muisinteracties worden voorkomen. Als uw formulier echter ook <a ... class="btn btn-*">elementen bevat, krijgen deze alleen de stijl pointer-events: none. Zoals opgemerkt in de sectie over de uitgeschakelde status voor knoppen (en specifiek in de subsectie voor ankerelementen), is deze CSS-eigenschap nog niet gestandaardiseerd en wordt deze niet volledig ondersteund in Opera 18 en lager, of in Internet Explorer 11, en won niet voorkomen dat toetsenbordgebruikers zich kunnen concentreren op deze koppelingen of deze kunnen activeren. Gebruik dus voor de zekerheid aangepast JavaScript om dergelijke links uit te schakelen.

Compatibiliteit tussen verschillende browsers

Hoewel Bootstrap deze stijlen in alle browsers zal toepassen, ondersteunen Internet Explorer 11 en lager het disabledkenmerk op een <fieldset>. Gebruik aangepast JavaScript om de veldset in deze browsers uit te schakelen.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Alleen-lezen status

Voeg het readonlybooleaanse kenmerk toe aan een invoer om wijziging van de invoerwaarde te voorkomen. Alleen-lezen ingangen lijken lichter (net als uitgeschakelde ingangen), maar behouden de standaardcursor.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Hulp tekst

Help-tekst op blokniveau voor formulierbesturingselementen.

Help-tekst koppelen aan formulierbesturingselementen

Help-tekst moet expliciet worden geassocieerd met het formulierbesturingselement waarop het betrekking heeft met behulp van het aria-describedbyattribuut. Dit zorgt ervoor dat ondersteunende technologieën – zoals schermlezers – deze helptekst zullen aankondigen wanneer de gebruiker zich concentreert of de besturing betreedt.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validatiestatussen

Bootstrap bevat validatiestijlen voor fout-, waarschuwings- en successtatussen op formulierbesturingselementen. Om te gebruiken, voegt u .has-warning, .has-errorof .has-successtoe aan het bovenliggende element. Elke .control-label, .form-control, en .help-blockbinnen dat element krijgt de validatiestijlen.

Validatiestatus doorgeven aan ondersteunende technologieën en kleurenblinde gebruikers

Het gebruik van deze validatiestijlen om de status van een formulierbesturingselement aan te geven, biedt alleen een visuele, op kleuren gebaseerde indicatie, die niet wordt doorgegeven aan gebruikers van ondersteunende technologieën - zoals schermlezers - of aan kleurenblinde gebruikers.

Zorg ervoor dat er ook een alternatieve indicatie van de staat wordt gegeven. U kunt bijvoorbeeld een hint over status opnemen in de <label>tekst van het formulierbesturingselement zelf (zoals het geval is in het volgende codevoorbeeld), een Glyphicon opnemen (met geschikte alternatieve tekst met behulp van de .sr-onlyklasse - zie de Glyphicon-voorbeelden ), of door een extra helptekstblok . Specifiek voor hulptechnologieën kan aan ongeldige formulierbesturingselementen ook een aria-invalid="true"attribuut worden toegewezen.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Met optionele pictogrammen

U kunt ook optionele feedbackpictogrammen toevoegen met de toevoeging van .has-feedbacken het rechterpictogram.

Feedbackpictogrammen werken alleen met tekstuele <input class="form-control">elementen.

Pictogrammen, labels en invoergroepen

Handmatige positionering van feedbackpictogrammen is vereist voor ingangen zonder label en voor ingangsgroepen met een add-on aan de rechterkant. Om toegankelijkheidsredenen wordt u ten zeerste aangemoedigd om labels te geven voor alle invoer. Als je wilt voorkomen dat labels worden weergegeven, verberg ze dan bij de .sr-onlyklas. Als u het zonder labels moet stellen, past u de topwaarde van het feedbackpictogram aan. Pas voor invoergroepen de rightwaarde aan naar een geschikte pixelwaarde, afhankelijk van de breedte van uw add-on.

De betekenis van het pictogram overbrengen op ondersteunende technologieën

Om ervoor te zorgen dat ondersteunende technologieën, zoals schermlezers, de betekenis van een pictogram correct overbrengen, moet extra verborgen tekst worden opgenomen in de .sr-onlyklasse en expliciet worden gekoppeld aan het formulierbesturingselement waarop het betrekking heeft aria-describedby. U kunt er ook voor zorgen dat de betekenis (bijvoorbeeld het feit dat er een waarschuwing is voor een bepaald tekstinvoerveld) in een andere vorm wordt overgebracht, zoals het wijzigen van de tekst van het werkelijke <label>dat is gekoppeld aan het formulierbesturingselement.

Hoewel de volgende voorbeelden de validatiestatus van hun respectievelijke formulierbesturingselementen al in de <label>tekst zelf vermelden, is de bovenstaande techniek (met .sr-onlytekst en aria-describedby) opgenomen voor illustratieve doeleinden.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optionele pictogrammen in horizontale en inline formulieren

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optionele pictogrammen met verborgen `.sr-only`labels

Als je de .sr-onlyklasse gebruikt om de besturingselementen van een formulier te verbergen <label>(in plaats van andere labelopties te gebruiken, zoals het aria-labelattribuut), zal Bootstrap automatisch de positie van het pictogram aanpassen zodra het is toegevoegd.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Maatvoering regelen:

Stel hoogten in met klassen zoals .input-lg, en stel breedten in met rasterkolomklassen zoals .col-lg-*.

Hoogte maatvoering

Maak grotere of kortere formulierbesturingselementen die overeenkomen met de grootte van de knoppen.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontale vorm groepsgroottes

Geef snel de grootte van labels en formulierbesturingselementen binnen .form-horizontaldoor .form-group-lgof toe te voegen .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Kolomgrootte

Wikkel invoer in rasterkolommen of een aangepast bovenliggend element om eenvoudig gewenste breedtes af te dwingen.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Knoptags

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Contextspecifiek gebruik

Hoewel knopklassen kunnen worden gebruikt op <a>en <button>elementen, worden alleen <button>elementen ondersteund binnen onze navigatie- en navigatiebalkcomponenten.

Links die als knoppen werken

Als de <a>elementen worden gebruikt om als knoppen te fungeren – waardoor in-page-functionaliteit wordt geactiveerd, in plaats van naar een ander document of sectie binnen de huidige pagina te navigeren – moeten ze ook een geschikt role="button".

Weergave tussen verschillende browsers

Als best practice raden we ten zeerste aan om het <button>element waar mogelijk te gebruiken te gebruiken om te zorgen voor een overeenkomende weergave in verschillende browsers.

Er is onder andere een bug in Firefox <30 die ons verhindert de line-heightop <input>-gebaseerde knoppen in te stellen, waardoor ze niet precies overeenkomen met de hoogte van andere knoppen in Firefox.

Opties

Gebruik een van de beschikbare knopklassen om snel een gestileerde knop te maken.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis aan een knop toe te voegen, geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat de informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (de zichtbare tekst van de knop), ofwel op alternatieve manieren is opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.

Maten

Zin in grotere of kleinere knopen? Voeg .btn-lg, .btn-sm, of toe .btn-xsvoor extra maten.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Actieve staat

Knoppen worden ingedrukt weergegeven (met een donkere achtergrond, donkere rand en ingevoegde schaduw) wanneer ze actief zijn. Voor <button>elementen gebeurt dit via :active. Voor <a>elementen is het gedaan met .active. U kunt echter .activeon <button>s gebruiken (en het aria-pressed="true"kenmerk opnemen) als u de actieve status programmatisch moet repliceren.

Knopelement

Het is niet nodig om toe te voegen :activeomdat het een pseudo-klasse is, maar als je hetzelfde uiterlijk wilt forceren, ga je gang en voeg je toe .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Ankerelement

Voeg de .activeklasse toe aan <a>knoppen.

Primaire link Koppeling

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Uitgeschakelde staat

Maak knoppen onklikbaar door ze terug te laten vervagen met opacity.

Knopelement

Voeg het disabledkenmerk toe aan <button>knoppen.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibiliteit tussen verschillende browsers

Als u het disabledkenmerk toevoegt aan een <button>, zal Internet Explorer 9 en lager tekst grijs maken met een vervelende tekstschaduw die we niet kunnen herstellen.

Ankerelement

Voeg de .disabledklasse toe aan <a>knoppen.

Primaire link Koppeling

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We gebruiken .disabledhier als een hulpprogrammaklasse, vergelijkbaar met de gewone .activeklasse, dus er is geen voorvoegsel vereist.

Waarschuwing voor linkfunctionaliteit

Deze klasse gebruikt pointer-events: noneom te proberen de linkfunctionaliteit van <a>s uit te schakelen, maar die CSS-eigenschap is nog niet gestandaardiseerd en wordt niet volledig ondersteund in Opera 18 en lager, of in Internet Explorer 11. Bovendien, zelfs in browsers die wel ondersteuning bieden pointer-events: none, toetsenbord navigatie blijft onaangetast, wat betekent dat ziende toetsenbordgebruikers en gebruikers van ondersteunende technologieën deze links nog steeds kunnen activeren. Gebruik dus voor de zekerheid aangepast JavaScript om dergelijke links uit te schakelen.

Responsieve afbeeldingen

Afbeeldingen in Bootstrap 3 kunnen responsief worden gemaakt door de .img-responsiveklasse toe te voegen. Dit geldt max-width: 100%;, height: auto;en display: block;voor de afbeelding zodat deze mooi schaalt naar het bovenliggende element.

Als u afbeeldingen wilt centreren die de .img-responsiveklasse gebruiken, gebruikt u .center-blockin plaats van .text-center. Zie de sectie helperklassen voor meer details over .center-blockhet gebruik.

SVG-afbeeldingen en IE 8-10

In Internet Explorer 8-10 zijn SVG-afbeeldingen met .img-responsiveonevenredig groot. Om dit op te lossen, voeg width: 100% \9;waar nodig toe. Bootstrap past dit niet automatisch toe omdat het complicaties veroorzaakt bij andere afbeeldingsformaten.

<img src="..." class="img-responsive" alt="Responsive image">

Afbeeldingsvormen

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

Compatibiliteit tussen verschillende browsers

Houd er rekening mee dat Internet Explorer 8 geen ondersteuning biedt voor afgeronde hoeken.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Contextuele kleuren

Breng betekenis over door middel van kleur met een handvol nadruk-utiliteitsklassen. Deze kunnen ook worden toegepast op links en worden donkerder bij de muisaanwijzer, net als onze standaard linkstijlen.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Omgaan met specificiteit

Soms kunnen nadrukklassen niet worden toegepast vanwege de specificiteit van een andere selector. In de meeste gevallen is een afdoende oplossing om uw tekst in a te laten lopen <span>met de klasse.

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (de contextuele kleuren worden alleen gebruikt om de betekenis die al aanwezig is in de tekst/opmaak te versterken), ofwel op alternatieve manieren is opgenomen, zoals extra tekst die verborgen is met de .sr-onlyklasse .

Contextuele achtergronden

Vergelijkbaar met de contextuele tekstkleurklassen, stel de achtergrond van een element eenvoudig in op een willekeurige contextuele klasse. Ankercomponenten worden donkerder bij zweven, net als de tekstklassen.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Omgaan met specificiteit

Soms kunnen contextuele achtergrondklassen niet worden toegepast vanwege de specificiteit van een andere selector. In sommige gevallen is een afdoende oplossing om de inhoud van uw element in een <div>met de klasse te verpakken.

Betekenis overbrengen aan ondersteunende technologieën

Zorg ervoor dat, net als bij contextuele kleuren , elke betekenis die door middel van kleur wordt overgebracht, ook wordt overgebracht in een formaat dat niet puur presentatief is.

Pictogram sluiten

Gebruik het algemene sluitpictogram om inhoud zoals modals en waarschuwingen te sluiten.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Gebruik carets om de functionaliteit en richting van de vervolgkeuzelijst aan te geven. Merk op dat het standaard caret automatisch wordt omgekeerd in vervolgkeuzemenu's .

<span class="caret"></span>

Snelle drijvers

Zweven een element naar links of rechts met een klasse.!importantis opgenomen om specificiteitsproblemen te voorkomen. Klassen kunnen ook als mixins worden gebruikt.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Inhoudsblokken centreren

Zet een element op display: blocken centreer via margin. Verkrijgbaar als mixin en class.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Wis gemakkelijk floats door .clearfix aan het bovenliggende element toe te voegen . Gebruikt de micro clearfix zoals gepopulariseerd door Nicolas Gallagher. Kan ook als mixin gebruikt worden.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Inhoud weergeven en verbergen

Forceer een element om te tonen of te verbergen ( ook voor schermlezers ) met het gebruik van .showen .hiddenklassen. Deze klassen worden gebruikt !importantom specificiteitsconflicten te vermijden, net als de quick floats . Ze zijn alleen beschikbaar voor het wisselen van blokniveau. Ze kunnen ook als mixins worden gebruikt.

.hideis beschikbaar, maar is niet altijd van invloed op schermlezers en is verouderd vanaf v3.0.1. Gebruik .hiddenof .sr-onlyin plaats daarvan.

Kan bovendien .invisibleworden gebruikt om alleen de zichtbaarheid van een element in te schakelen, wat betekent dat het displayniet wordt gewijzigd en het element nog steeds de stroom van het document kan beïnvloeden.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Inhoud van schermlezer en toetsenbordnavigatie

Verberg een element voor alle apparaten behalve schermlezers met .sr-only. Combineer .sr-onlymet .sr-only-focusableom het element opnieuw te tonen wanneer het gefocust is (bijvoorbeeld door een gebruiker met alleen toetsenbord). Noodzakelijk voor het volgen van best practices voor toegankelijkheid . Kan ook als mixin gebruikt worden.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Afbeelding vervangen

Gebruik de .text-hideklasse of mixin om de tekstinhoud van een element te vervangen door een achtergrondafbeelding.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Voor een snellere mobielvriendelijke ontwikkeling gebruikt u deze hulpprogrammaklassen voor het weergeven en verbergen van inhoud per apparaat via mediaquery. Ook inbegrepen zijn hulpprogramma-klassen voor het wisselen van inhoud wanneer deze wordt afgedrukt.

Probeer deze op een beperkte basis te gebruiken en vermijd het maken van totaal verschillende versies van dezelfde site. Gebruik ze in plaats daarvan als aanvulling op de presentatie van elk apparaat.

Beschikbare lessen

Gebruik een enkele of een combinatie van de beschikbare klassen om inhoud tussen viewport-onderbrekingspunten te schakelen.

	Extra kleine apparatenTelefoons (<768px)	Kleine apparatenTabletten (≥768px)	Middelgrote apparatenDesktops (≥992px)	Grote apparatenDesktops (≥1200px)
`.visible-xs-*`	Zichtbaar	Verborgen	Verborgen	Verborgen
`.visible-sm-*`	Verborgen	Zichtbaar	Verborgen	Verborgen
`.visible-md-*`	Verborgen	Verborgen	Zichtbaar	Verborgen
`.visible-lg-*`	Verborgen	Verborgen	Verborgen	Zichtbaar
`.hidden-xs`	Verborgen	Zichtbaar	Zichtbaar	Zichtbaar
`.hidden-sm`	Zichtbaar	Verborgen	Zichtbaar	Zichtbaar
`.hidden-md`	Zichtbaar	Zichtbaar	Verborgen	Zichtbaar
`.hidden-lg`	Zichtbaar	Zichtbaar	Zichtbaar	Verborgen

Vanaf v3.2.0 zijn de .visible-*-*klassen voor elk breekpunt beschikbaar in drie varianten, één voor elke CSS display-eigenschapswaarde die hieronder wordt vermeld.

Groep lessen	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Dus voor xsbijvoorbeeld extra kleine ( ) schermen zijn de beschikbare .visible-*-*klassen: .visible-xs-block, .visible-xs-inline, en .visible-xs-inline-block.

De klassen .visible-xs, .visible-sm, .visible-md, en .visible-lgbestaan ook, maar zijn verouderd vanaf v3.2.0 . Ze zijn ongeveer gelijk aan .visible-*-block, behalve met extra speciale gevallen voor het wisselen van <table>gerelateerde elementen.

Klassen afdrukken

Gebruik deze, net als bij de reguliere responsieve klassen, voor het omschakelen van inhoud voor afdrukken.

Klassen	Browser	Afdrukken
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Verborgen	Zichtbaar
`.hidden-print`	Zichtbaar	Verborgen

De klasse .visible-printbestaat ook, maar is verouderd vanaf v3.2.0. Het is ongeveer gelijk aan .visible-print-block, behalve met extra speciale gevallen voor <table>-gerelateerde elementen.

Testgevallen

Pas het formaat van uw browser aan of laad op verschillende apparaten om de responsieve hulpprogrammaklassen te testen.

Zichtbaar op...

Groene vinkjes geven aan dat het element zichtbaar is in uw huidige viewport.

Extra klein ✔ Zichtbaar op x-small

Klein ✔ Zichtbaar op klein

Medium ✔ Zichtbaar op medium

Groot ✔ Zichtbaar op groot

Extra klein en klein ✔ Zichtbaar op x-small en small

Middelgroot en groot ✔ Zichtbaar op medium en large

Extra klein en medium ✔ Zichtbaar op x-small en medium

Klein en groot ✔ Zichtbaar op klein en groot

Extra klein en groot ✔ Zichtbaar op x-small en large

Klein en middelgroot ✔ Zichtbaar op klein en middelgroot

Verborgen op...

Hier geven groene vinkjes ook aan dat het element verborgen is in uw huidige viewport.

Extra klein ✔ Verborgen op x-small

Klein ✔ Verborgen op klein

Medium ✔ Verborgen op medium

Groot ✔ Verborgen op groot

Extra klein en klein ✔ Verborgen op x-small en small

Middelgroot en groot ✔ Verborgen op medium en large

Extra klein en medium ✔ Verborgen op x-small en medium

Klein en groot ✔ Verborgen op klein en groot

Extra klein en groot ✔ Verborgen op x-small en large

Klein en middelgroot ✔ Verborgen op klein en medium

De CSS van Bootstrap is gebouwd op Less, een preprocessor met extra functionaliteit zoals variabelen, mixins en functies voor het compileren van CSS. Degenen die de source Less-bestanden willen gebruiken in plaats van onze gecompileerde CSS-bestanden, kunnen gebruikmaken van de vele variabelen en mixins die we in het hele framework gebruiken.

Rastervariabelen en mixins worden behandeld in de sectie Rastersysteem .

Bootstrap compileren

Bootstrap kan op minstens twee manieren worden gebruikt: met de gecompileerde CSS of met de bron Less-bestanden. Om de Less-bestanden te compileren, raadpleegt u de sectie Aan de slag voor informatie over het instellen van uw ontwikkelomgeving om de nodige opdrachten uit te voeren.

Compilatietools van derden werken mogelijk met Bootstrap, maar ze worden niet ondersteund door ons kernteam.

Variabelen

Variabelen worden gedurende het hele project gebruikt als een manier om veelgebruikte waarden zoals kleuren, spatiëring of lettertypestapels te centraliseren en te delen. Voor een volledig overzicht, zie de Customizer .

Kleuren

Maak eenvoudig gebruik van twee kleurenschema's: grijswaarden en semantisch. Grijswaardenkleuren bieden snelle toegang tot veelgebruikte zwarttinten, terwijl semantiek verschillende kleuren omvat die zijn toegewezen aan betekenisvolle contextuele waarden.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Gebruik een van deze kleurvariabelen zoals ze zijn of wijs ze opnieuw toe aan meer betekenisvolle variabelen voor uw project.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Steiger

Een handvol variabelen om snel belangrijke elementen van het skelet van uw site aan te passen.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Links

Stijl uw links eenvoudig in de juiste kleur met slechts één waarde.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Merk op dat het @link-hover-coloreen functie gebruikt, een ander geweldig hulpmiddel van Less, om automatisch de juiste zweefkleur te creëren. U kunt darken, lighten, saturateen desaturate.

Typografie

Stel eenvoudig uw lettertype, tekstgrootte, regelafstand en meer in met een paar snelle variabelen. Bootstrap maakt hier ook gebruik van om eenvoudige typografische mixins te bieden.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

pictogrammen

Twee snelle variabelen voor het aanpassen van de locatie en bestandsnaam van uw pictogrammen.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Componenten

Componenten in Bootstrap maken gebruik van enkele standaardvariabelen voor het instellen van gemeenschappelijke waarden. Hier zijn de meest gebruikte.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Verkoper mixins

Leveranciersmixins zijn mixins om meerdere browsers te ondersteunen door alle relevante leveranciersvoorvoegsels op te nemen in uw gecompileerde CSS.

Doosmaat

Reset het boxmodel van uw componenten met een enkele mixin. Zie dit handige artikel van Mozilla voor context .

De mixin is verouderd vanaf v3.2.0, met de introductie van Autoprefixer. Om achterwaartse compatibiliteit te behouden, blijft Bootstrap de mixin intern gebruiken tot Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Afgeronde hoeken

Tegenwoordig ondersteunen alle moderne browsers de border-radiuseigenschap zonder prefix. Als zodanig is er geen .border-radius()mixin, maar Bootstrap bevat wel snelkoppelingen voor het snel afronden van twee hoeken aan een bepaalde kant van een object.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Vak (slag)schaduwen

Als uw doelgroep de nieuwste en beste browsers en apparaten gebruikt, zorg er dan voor dat u de box-shadowaccommodatie alleen gebruikt. Als je ondersteuning nodig hebt voor oudere Android- (pre-v4) en iOS-apparaten (pre-iOS 5), gebruik dan de verouderde mixin om het vereiste -webkitvoorvoegsel op te halen.

De mixin is verouderd vanaf v3.1.0, omdat Bootstrap niet officieel de verouderde platforms ondersteunt die de standaardeigenschap niet ondersteunen. Om achterwaartse compatibiliteit te behouden, blijft Bootstrap de mixin intern gebruiken tot Bootstrap v4.

Zorg ervoor dat u rgba()kleuren in uw vakschaduwen gebruikt, zodat ze zo naadloos mogelijk opgaan in achtergronden.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Overgangen

Meerdere mixins voor flexibiliteit. Stel alle overgangsinformatie in met één, of geef indien nodig een aparte vertraging en duur op.

De mixins zijn verouderd vanaf v3.2.0, met de introductie van Autoprefixer. Om achterwaartse compatibiliteit te behouden, blijft Bootstrap de mixins intern gebruiken tot Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformaties

Roteer, schaal, vertaal (verplaats) of verschuif elk object.

De mixins zijn verouderd vanaf v3.2.0, met de introductie van Autoprefixer. Om achterwaartse compatibiliteit te behouden, blijft Bootstrap de mixins intern gebruiken tot Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animaties

Een enkele mixin voor het gebruik van alle animatie-eigenschappen van CSS3 in één declaratie en andere mixins voor individuele eigenschappen.

De mixins zijn verouderd vanaf v3.2.0, met de introductie van Autoprefixer. Om achterwaartse compatibiliteit te behouden, blijft Bootstrap de mixins intern gebruiken tot Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

dekking

Stel de dekking voor alle browsers in en zorg voor een filterfallback voor IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Placeholder tekst

Bied context voor formulierbesturingselementen binnen elk veld.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Kolommen

Genereer kolommen via CSS binnen een enkel element.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Verlopen

Verander eenvoudig twee kleuren in een achtergrondverloop. Ga verder en bepaal een richting, gebruik drie kleuren of gebruik een radiaal verloop. Met een enkele mixin krijg je alle prefixen die je nodig hebt.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

U kunt ook de hoek van een standaard tweekleurig, lineair verloop opgeven:

#gradient > .directional(#333; #000; 45deg);

Als je een verloop in kappersstijl nodig hebt, is dat ook gemakkelijk. Geef gewoon een enkele kleur op en we leggen een doorschijnende witte streep over elkaar heen.

#gradient > .striped(#333; 45deg);

Verhoog de ante en gebruik in plaats daarvan drie kleuren. Stel de eerste kleur, de tweede kleur, de kleurstop van de tweede kleur in (een percentagewaarde zoals 25%) en de derde kleur met deze mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Kop op! Mocht u ooit een verloop moeten verwijderen, zorg er dan voor dat u eventuele IE-specifieke gegevens filterdie u hebt toegevoegd, verwijdert. U kunt dat doen door de .reset-filter()mixin hiernaast te gebruiken background-image: none;.

Utility-mixen

Utility-mixins zijn mixins die anders niet-gerelateerde CSS-eigenschappen combineren om een specifiek doel of specifieke taak te bereiken.

Clearfix

Vergeet het toevoegen class="clearfix"aan een element en voeg in plaats daarvan de .clearfix()mixin toe waar nodig. Gebruikt de micro clearfix van Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Horizontale centrering

Centreer snel elk element in het bovenliggende element. Vereist widthof max-widthin te stellen.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Maathulpen

Specificeer gemakkelijker de afmetingen van een object.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Aanpasbare tekstgebieden

Configureer eenvoudig de opties voor het wijzigen van de grootte voor elk tekstgebied of elk ander element. Standaard ingesteld op normaal browsergedrag ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Tekst afkappen

Eenvoudig tekst afkappen met een ellips met een enkele mixin. Vereist element te zijn blockof inline-blockniveau.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina-afbeeldingen

Specificeer twee afbeeldingspaden en de @1x afbeeldingsdimensies, en Bootstrap zal een @2x mediaquery geven. Als u veel afbeeldingen wilt weergeven, overweeg dan om uw retina-afbeeldings-CSS handmatig in een enkele mediaquery te schrijven.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Hoewel Bootstrap is gebouwd op Less, heeft het ook een officiële Sass-poort . We onderhouden het in een aparte GitHub-repository en verwerken updates met een conversiescript.

Wat is inbegrepen

Omdat de Sass-poort een aparte repo heeft en een iets ander publiek bedient, verschilt de inhoud van het project sterk van het hoofdbootstrap-project. Dit zorgt ervoor dat de Sass-poort zo compatibel is met zoveel mogelijk Sass-gebaseerde systemen.

Pad	Beschrijving
`lib/`	Ruby gem-code (Sass-configuratie, Rails en Compass-integraties)
`tasks/`	Converter-scripts (stroomopwaarts van Less naar Sass)
`test/`	Compilatietests
`templates/`	Kompas pakket manifest
`vendor/assets/`	Sass-, JavaScript- en lettertypebestanden
`Rakefile`	Interne taken, zoals harken en converteren

Bezoek de GitHub-repository van de Sass-poort om deze bestanden in actie te zien.

Installatie

Raadpleeg de GitHub-repository readme voor informatie over het installeren en gebruiken van Bootstrap voor Sass . Het is de meest actuele bron en bevat informatie voor gebruik met Rails-, Compass- en standaard Sass-projecten.

Bootstrap voor Sass

CSS

Overzicht

HTML5-documenttype

Mobiel eerst

Typografie en links

Normaliseren.css

containers

Grid-systeem

Invoering

Mediaquery's

Rasteropties

Voorbeeld: gestapeld-naar-horizontaal

Voorbeeld: Vloeistofreservoir

Voorbeeld: mobiel en desktop

Voorbeeld: mobiel, tablet, desktop

Voorbeeld: Kolomterugloop

Responsieve kolom resets

Dakgoten verwijderen

Kolommen compenseren

Kolommen nesten

Kolomvolgorde

Minder mixins en variabelen

Variabelen

Mixins

Voorbeeld gebruik

Typografie

Koppen

h1. Bootstrap-kop

h2. Bootstrap-kop

h3. Bootstrap-kop

h4. Bootstrap-kop

h5. Bootstrap-kop

h6. Bootstrap-kop

h1. Bootstrap-kop Secundaire tekst

h2. Bootstrap-kop Secundaire tekst

h3. Bootstrap-kop Secundaire tekst

h4. Bootstrap-kop Secundaire tekst

h5. Bootstrap-kop Secundaire tekst

h6. Bootstrap-kop Secundaire tekst

Lichaamskopie

Kopie hoofdtekst

Gebouwd met minder

Inline tekstelementen

Gemarkeerde tekst

verwijderde tekst

Doorgestreepte tekst

Ingevoegde tekst

Onderstreepte tekst

Kleine tekst

Vetgedrukt

Cursief

Alternatieve elementen

Uitlijningsklassen

Transformatie lessen

Afkortingen

Basisafkorting

initialisme

Adressen

Blok citaten

Standaard blokquote

Opties voor blokcitaten

Een bron noemen

Alternatieve weergaven

Lijsten

ongeordend

Besteld

niet gestyled

In lijn

Beschrijving

Horizontale beschrijving

Automatisch afkappen

Code

In lijn

Gebruikers invoer

Basisblok

Variabelen

Voorbeelduitvoer

Tafels

Basis voorbeeld

Gestreepte rijen

Demostatus `:focus`_

Waarschuwing over linkfunctionaliteit van`<a>`

Optionele pictogrammen met verborgen `.sr-only`labels