Få et overblik over de vigtigste dele af Bootstraps infrastruktur, herunder vores tilgang til bedre, hurtigere og stærkere webudvikling.

HTML5 doctype

Bootstrap gør brug af visse HTML-elementer og CSS-egenskaber, der kræver brug af HTML5 doctype. Medtag det i begyndelsen af alle dine projekter.

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

Mobil først

Med Bootstrap 2 tilføjede vi valgfri mobilvenlige stilarter til nøgleaspekter af rammen. Med Bootstrap 3 har vi omskrevet projektet til at være mobilvenligt fra starten. I stedet for at tilføje valgfrie mobile styles, er de bagt helt ind i kernen. Faktisk er Bootstrap mobil først . Mobile first styles kan findes i hele biblioteket i stedet for i separate filer.

For at sikre korrekt gengivelse og berøringszoomning skal du tilføje viewport-metatagget til din <head>.

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

Du kan deaktivere zoomfunktioner på mobile enheder ved at tilføje user-scalable=notil viewport-metatagget. Dette deaktiverer zoom, hvilket betyder, at brugere kun kan rulle, og resulterer i, at dit websted føles lidt mere som en indbygget applikation. Generelt anbefaler vi ikke dette på alle websteder, så vær forsigtig!

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

Typografi og links

Bootstrap indstiller grundlæggende global visning, typografi og linkstile. Helt konkret har vi:

Sæt background-color: #fff;påbody
Brug @font-family-base, @font-size-base, og @line-height-baseattributterne som vores typografiske base
Indstil den globale linkfarve via @link-colorog anvend kun linkunderstregninger på:hover

Disse stilarter kan findes i scaffolding.less.

Normaliser.css

Til forbedret gengivelse på tværs af browsere bruger vi Normalize.css , et projekt af Nicolas Gallagher og Jonathan Neal .

Containere

Bootstrap kræver et indeholdende element for at ombryde webstedets indhold og huse vores grid-system. Du kan vælge en af to beholdere til at bruge i dine projekter. Bemærk, at på grund af paddingog mere er ingen af beholderne indlejrbare.

Bruges .containertil en responsiv container med fast bredde.

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

Bruges .container-fluidtil en beholder i fuld bredde, der spænder over hele bredden af din visningsport.

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

Bootstrap inkluderer et responsivt, mobilt first fluid grid-system, der passende skalerer op til 12 kolonner, efterhånden som størrelsen på enheden eller viewporten øges. Det inkluderer foruddefinerede klasser til nemme layoutmuligheder samt kraftfulde mixins til at generere mere semantiske layouts .

Introduktion

Gittersystemer bruges til at skabe sidelayouts gennem en række rækker og kolonner, der rummer dit indhold. Sådan fungerer Bootstrap-gittersystemet:

Rækker skal placeres inden for en .container(fast bredde) eller .container-fluid(fuld bredde) for korrekt justering og polstring.
Brug rækker til at oprette vandrette grupper af kolonner.
Indhold skal placeres i kolonner, og kun kolonner må være umiddelbare underordnede rækker.
Foruddefinerede gitterklasser som .rowog .col-xs-4er tilgængelige til hurtigt at lave gitterlayouts. Færre mixins kan også bruges til mere semantiske layouts.
Kolonner skaber tagrender (mellemrum mellem kolonneindhold) via padding. Denne udfyldning forskydes i rækker for første og sidste kolonne via negativ margin på .rows.
Den negative margen er grunden til, at eksemplerne nedenfor er overhalet. Det er sådan, at indhold i gitterkolonner er på linje med ikke-gitterindhold.
Gitterkolonner oprettes ved at angive antallet af tolv tilgængelige kolonner, du ønsker at spænde over. For eksempel ville tre lige store kolonner bruge tre .col-xs-4.
Hvis mere end 12 kolonner er placeret i en enkelt række, vil hver gruppe af ekstra kolonner, som én enhed, ombrydes på en ny linje.
Gitterklasser gælder for enheder med skærmbredder, der er større end eller lig med brudpunktstørrelserne, og tilsidesætter gitterklasser, der er målrettet mod mindre enheder. Derfor vil f.eks. at anvende en hvilken som helst .col-md-*klasse på et element ikke kun påvirke dets stil på mellemstore enheder, men også på store enheder, hvis en .col-lg-*klasse ikke er til stede.

Se eksemplerne for at anvende disse principper på din kode.

Medieforespørgsler

Vi bruger følgende medieforespørgsler i vores mindre filer til at skabe de vigtigste brudpunkter i vores netsystem.

/* 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) { ... }

Vi udvider lejlighedsvis disse medieforespørgsler til at inkludere en max-widthfor at begrænse CSS til et smallere sæt af enheder.

@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) { ... }

Grid muligheder

Se, hvordan aspekter af Bootstrap-gittersystemet fungerer på tværs af flere enheder med en praktisk tabel.

	Ekstra små enheder Telefoner (<768px)	Små enheder Tablets (≥768px)	Mellemstore enheder Desktops (≥992px)	Store enheder Desktops (≥1200px)
Netadfærd	Vandret hele tiden	Sammenklappet for at starte, vandret over brudpunkter
Container bredde	Ingen (auto)	750 pixels	970 pixels	1170 pixels
Klassepræfiks	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
antal kolonner	12
Søjlebredde	Auto	~62px	~81px	~97px
Tagrendes bredde	30px (15px på hver side af en kolonne)
Nestbar	Ja
Forskydninger	Ja
Kolonnebestilling	Ja

Eksempel: Stablet-til-vandret

Ved at bruge et enkelt sæt .col-md-*gitterklasser kan du oprette et grundlæggende gittersystem, der starter stablet på mobile enheder og tablet-enheder (det ekstra lille til lille område), før det bliver vandret på stationære (mellemstore) enheder. Placer gitterkolonner i enhver .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>

Eksempel: Væskebeholder

Gør ethvert gitterlayout med fast bredde til et layout i fuld bredde ved at ændre dit yderste .containertil .container-fluid.

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

Eksempel: Mobil og desktop

Vil du ikke have, at dine kolonner blot skal stables i mindre enheder? Brug de ekstra små og mellemstore enhedsgitterklasser ved at tilføje .col-xs-* .col-md-*til dine kolonner. Se eksemplet nedenfor for en bedre idé om, hvordan det hele fungerer.

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

Eksempel: Mobil, tablet, desktop

Byg videre på det forrige eksempel ved at skabe endnu mere dynamiske og kraftfulde layouts med tabletklasser .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>

Eksempel: Kolonneindpakning

Hvis mere end 12 kolonner er placeret i en enkelt række, vil hver gruppe af ekstra kolonner, som én enhed, ombrydes på en ny linje.

.col-xs-9

.col-xs-4
Da 9 + 4 = 13 > 12, bliver denne 4-søjle-brede div pakket ind på en ny linje som en sammenhængende enhed.

.col-xs-6
Efterfølgende kolonner fortsætter langs den nye linje.

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

Responsive kolonnenulstillinger

Med de fire tilgængelige grids-niveauer er du nødt til at løbe ind i problemer, hvor dine kolonner ved visse brudpunkter ikke ryddes helt korrekt, da den ene er højere end den anden. For at rette op på det, brug en kombination af a .clearfixog vores responsive hjælpeklasser .

.col-xs-6 .col-sm-3
Ændr størrelsen på din visningsport, eller tjek den ud på din telefon for et eksempel.

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

Ud over kolonnerydning ved responsive breakpoints skal du muligvis nulstille forskydninger, push eller pull . Se dette i aktion i gittereksemplet .

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

Forskydning af kolonner

Flyt kolonner til højre ved hjælp af .col-md-offset-*klasser. Disse klasser øger venstre margen af en kolonne med *kolonner. .col-md-offset-4Flytter for eksempel .col-md-4over fire kolonner.

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

Du kan også tilsidesætte forskydninger fra lavere grid-niveauer med .col-*-offset-0klasser.

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

Indlejrede søjler

For at indlejre dit indhold med standardgitteret skal du tilføje en ny .rowog et sæt .col-sm-*kolonner i en eksisterende .col-sm-*kolonne. Indlejrede rækker skal indeholde et sæt kolonner, der tæller op til 12 eller færre (det er ikke påkrævet, at du bruger alle 12 tilgængelige kolonner).

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>

Kolonnebestilling

Skift nemt rækkefølgen af vores indbyggede gitterkolonner med .col-md-push-*og .col-md-pull-*modifikatorklasser.

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

Færre mixins og variabler

Udover forudbyggede grid-klasser til hurtige layouts, inkluderer Bootstrap færre variabler og mixins til hurtigt at generere dine egne enkle, semantiske layouts.

Variabler

Variabler bestemmer antallet af kolonner, rendebredden og medieforespørgselspunktet, hvor flydende kolonner skal begynde. Vi bruger disse til at generere de foruddefinerede gitterklasser, der er dokumenteret ovenfor, såvel som til de brugerdefinerede mixins, der er angivet nedenfor.

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

Mixins

Mixins bruges sammen med gittervariablerne til at generere semantisk CSS for individuelle gitterkolonner.

// 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));
  }
}

Eksempel på brug

Du kan ændre variablerne til dine egne brugerdefinerede værdier, eller bare bruge mixins med deres standardværdier. Her er et eksempel på brug af standardindstillingerne til at skabe et to-kolonne layout med et mellemrum mellem.

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

Overskrifter

Alle HTML-overskrifter, <h1>gennem <h6>, er tilgængelige. .h1gennem .h6klasser er også tilgængelige, når du ønsker at matche skrifttypen på en overskrift, men stadig ønsker, at din tekst skal vises inline.

h1. Bootstrap overskrift	Halvfed 36px
h2. Bootstrap overskrift	Halvfed 30px
h3. Bootstrap overskrift	Halvfed 24px
h4. Bootstrap overskrift	Halvfed 18px
h5. Bootstrap overskrift	Halvfed 14px
h6. Bootstrap overskrift	Halvfed 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>

Opret lettere, sekundær tekst i enhver overskrift med et generisk <small>tag eller .smallklassen.

h1. Bootstrap-overskrift Sekundær tekst

h2. Bootstrap-overskrift Sekundær tekst

h3. Bootstrap-overskrift Sekundær tekst

h4. Bootstrap-overskrift Sekundær tekst

h5. Bootstrap-overskrift Sekundær tekst

h6. Bootstrap-overskrift Sekundær 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>

Brødtekst

Bootstraps globale standard font-sizeer 14px , med en line-heightpå 1.428 . Dette gælder for <body>og alle afsnit. Derudover <p>modtager (afsnit) en bundmargen på halvdelen af deres beregnede linjehøjde (10 px som standard).

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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Blykropskopi

Få et afsnit til at skille sig ud ved at tilføje .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.

<p class="lead">...</p>

Bygget med mindre

Den typografiske skala er baseret på to Less-variabler i variables.less : @font-size-baseog @line-height-base. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden. Vi bruger disse variabler og noget simpel matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere. Tilpas dem og Bootstrap tilpasser sig.

Inline tekstelementer

Markeret tekst

<mark>Brug tagget til at fremhæve en række tekst på grund af dets relevans i en anden sammenhæng .

Du kan bruge mærket til atfremhævetekst.

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

Slettet tekst

<del>Brug tagget til at angive tekstblokke, der er blevet slettet .

~~Denne tekstlinje er beregnet til at blive behandlet som slettet tekst.~~

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

Gennemstreget tekst

<s>Brug tagget til at angive tekstblokke, der ikke længere er relevante .

~~Denne tekstlinje er beregnet til at blive behandlet som ikke længere nøjagtig.~~

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

Indsat tekst

<ins>Brug tagget til at angive tilføjelser til dokumentet .

Denne tekstlinje er beregnet til at blive behandlet som en tilføjelse til dokumentet.

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

Understreget tekst

Brug <u>tagget for at understrege tekst.

Denne tekstlinje gengives som understreget

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

Gør brug af HTML's standard emphasis tags med lette stilarter.

Lille tekst

For at nedtone inline eller tekstblokke, skal du bruge <small>tagget til at indstille teksten til 85 % størrelsen af forælderen. Overskriftselementer modtager deres egne font-sizefor indlejrede <small>elementer.

Du kan alternativt bruge et inline-element med .smalli stedet for enhver <small>.

Denne tekstlinje er beregnet til at blive behandlet som småt.

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

Fremhævet

For at fremhæve et tekststykke med en tungere skrifttype.

Det følgende tekststykke gengives som fed tekst .

<strong>rendered as bold text</strong>

Kursiv

For at fremhæve et uddrag af tekst med kursiv.

Det følgende tekststykke gengives som kursiv tekst .

<em>rendered as italicized text</em>

Alternative elementer

Du er velkommen til at bruge <b>og <i>i HTML5. <b>er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>det mest er til stemme, tekniske termer osv.

Opstillingsklasser

Juster nemt tekst til komponenter med tekstjusteringsklasser.

Venstrejusteret tekst.

Centreret tekst.

Højrejusteret tekst.

Begrundet tekst.

Ingen ombrydningstekst.

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

Transformationsklasser

Transform tekst i komponenter med tekstklasser med store bogstaver.

Tekst med små bogstaver.

Tekst med store bogstaver.

Tekst med stort.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Forkortelser

Stiliseret implementering af HTMLs <abbr>element til forkortelser og akronymer for at vise den udvidede version på hover. Forkortelser med en titleattribut har en let stiplet bundkant og en hjælpemarkør ved svævning, hvilket giver yderligere kontekst ved svævning og til brugere af hjælpeteknologier.

Grundlæggende forkortelse

En forkortelse af ordet attribut er attr .

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

Initialisme

Tilføj .initialismtil en forkortelse for en lidt mindre skriftstørrelse.

HTML er det bedste siden skiveskåret brød.

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

Adresser

Præsenter kontaktoplysninger for den nærmeste forfader eller hele arbejdet. Bevar formateringen ved at afslutte alle linjer med <br>.

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

Fulde navn
[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>

Blokcitater

Til at citere indholdsblokke fra en anden kilde i dit dokument.

Standard blokcitat

Ombryd <blockquote>enhver HTML som citatet. For lige citater anbefaler vi en <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

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

Indstillinger for blokcitat

Stil- og indholdsændringer for simple variationer af en standard <blockquote>.

Navngivning af en kilde

Tilføj et <footer>for at identificere kilden. Pak navnet på kildeværket ind i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

En berømt i Kildetitel

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

Alternative skærme

Tilføj .blockquote-reversetil et blokcitat med højrejusteret indhold.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

En berømt i Kildetitel

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Lister

Uordnet

En liste over elementer, hvor rækkefølgen ikke eksplicit betyder noget.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Bestilt

En liste over elementer, hvor rækkefølgen udtrykkeligt har betydning.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Ustylet

Fjern standard- list-styleog venstremargen på listeelementer (kun umiddelbare børn). Dette gælder kun for umiddelbare børnelisteelementer , hvilket betyder, at du også skal tilføje klassen for alle indlejrede lister.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Inline

Placer alle listeelementer på en enkelt linje med display: inline-block;lidt let polstring.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Beskrivelse

En liste over termer med tilhørende beskrivelser.

Beskrivelseslister: En beskrivelsesliste er perfekt til at definere termer.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Vandret beskrivelse

Lav termer og beskrivelser på <dl>linje side om side. Starter stablet som standard <dl>s, men når navbaren udvides, så gør disse.

Beskrivelseslister: En beskrivelsesliste er perfekt til at definere termer.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at 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, ud fermentum massa justo sit amet risus.

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

Auto-trunkering

Horisontale beskrivelseslister vil afkorte termer, der er for lange til at passe i venstre kolonne med text-overflow. I smallere visningsporte vil de skifte til standard stablet layout.

Inline

Ombryd inline kodestykker med <code>.

Skal f.eks. <section>pakkes ind som inline.

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

Bruger input

Brug for <kbd>at angive input, der typisk indtastes via tastaturet.

For at skifte bibliotek skal du skrive cdefterfulgt af navnet på mappen.
Tryk på for at redigere indstillinger 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>

Grundblok

Bruges <pre>til flere linjer kode. Sørg for at undslippe eventuelle vinkelparenteser i koden for korrekt gengivelse.

<p>Eksempeltekst her...</p>

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

Du kan eventuelt tilføje .pre-scrollableklassen, som vil indstille en maks. højde på 350px og give en y-akse rullebjælke.

Variabler

<var>Brug tagget til at angive variabler .

y = m x + b

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

Eksempel output

<samp>Brug tagget til at angive blokeksempler fra et program .

Denne tekst er beregnet til at blive behandlet som et eksempeloutput fra et computerprogram.

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

Grundlæggende eksempel

Til grundlæggende styling - let polstring og kun vandrette skillevægge - tilføj basisklassen .tabletil enhver <table>. Det kan virke super overflødigt, men i betragtning af den udbredte brug af tabeller til andre plugins som kalendere og datovælgere, har vi valgt at isolere vores tilpassede tabelstile.

Valgfri tabeltekst.
#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

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

Stribede rækker

Bruges .table-stripedtil at tilføje zebrastriber til enhver tabelrække i <tbody>.

Cross-browser kompatibilitet

Stribede tabeller styles via :nth-childCSS-vælgeren, som ikke er tilgængelig i Internet Explorer 8.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

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

Border med kant

Tilføj .table-borderedfor rammer på alle sider af tabellen og cellerne.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

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

Hover rækker

Tilføj .table-hoverfor at aktivere en svævetilstand på tabelrækker i en <tbody>.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

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

Kondenseret bord

Tilføj .table-condensedfor at gøre borde mere kompakte ved at skære cellepolstring i to.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Fuglen Larry		@twitter

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

Kontekstuelle klasser

Brug kontekstuelle klasser til at farve tabelrækker eller individuelle celler.

Klasse	Beskrivelse
`.active`	Anvender svævefarven på en bestemt række eller celle
`.success`	Angiver en vellykket eller positiv handling
`.info`	Angiver en neutral informativ ændring eller handling
`.warning`	Indikerer en advarsel, der måske kræver opmærksomhed
`.danger`	Angiver en farlig eller potentielt negativ handling

#	Kolonneoverskrift	Kolonneoverskrift	Kolonneoverskrift
1	Kolonneindhold	Kolonneindhold	Kolonneindhold
2	Kolonneindhold	Kolonneindhold	Kolonneindhold
3	Kolonneindhold	Kolonneindhold	Kolonneindhold
4	Kolonneindhold	Kolonneindhold	Kolonneindhold
5	Kolonneindhold	Kolonneindhold	Kolonneindhold
6	Kolonneindhold	Kolonneindhold	Kolonneindhold
7	Kolonneindhold	Kolonneindhold	Kolonneindhold
8	Kolonneindhold	Kolonneindhold	Kolonneindhold
9	Kolonneindhold	Kolonneindhold	Kolonneindhold

<!-- 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>

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning til en tabelrække eller individuel celle giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier – såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (den synlige tekst i den relevante tabelrække/celle), eller er inkluderet via alternative måder, såsom yderligere tekst skjult med .sr-onlyklassen.

Responsive tabeller

Opret responsive tabeller ved at pakke dem .tableind .table-responsivefor at få dem til at rulle vandret på små enheder (under 768px). Når du ser på noget, der er større end 768px bredt, vil du ikke se nogen forskel i disse tabeller.

Lodret klipning/trunkering

Responsive tabeller gør brug af overflow-y: hidden, som klipper alt indhold af, der går ud over bordets nederste eller øverste kant. Dette kan især klippe dropdown-menuer og andre tredjeparts-widgets af.

Firefox og fieldsets

Firefox har nogle akavede feltsæt-styling, der involverer width, der forstyrrer den responsive tabel. Dette kan ikke tilsidesættes uden et Firefox-specifikt hack, som vi ikke leverer i Bootstrap:

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

For mere information, læs dette Stack Overflow-svar .

#	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift
1	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle
2	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle
3	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle

#	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift
1	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle
2	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle
3	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle	Tabel celle

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

Grundlæggende eksempel

Individuelle formularkontrolelementer modtager automatisk noget global styling. Alle tekstmæssige <input>, <textarea>, og <select>elementer med .form-controler indstillet til width: 100%;som standard. Pak etiketter og kontroller ind .form-groupfor optimal afstand.

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

Bland ikke formulargrupper med inputgrupper

Bland ikke formulargrupper direkte med inputgrupper . Indlejr i stedet inputgruppen inde i formulargruppen.

Inline formular

Tilføj .form-inlinetil din formular (som ikke behøver at være en <form>) for venstrejusterede og inline-blok kontrolelementer. Dette gælder kun for formularer i visningsporte, der er mindst 768px brede.

Kan kræve tilpassede bredder

Input og valg er width: 100%;anvendt som standard i Bootstrap. Inden for inline-formularer nulstiller vi det til, width: auto;så flere kontroller kan ligge på samme linje. Afhængigt af dit layout kan der være behov for yderligere brugerdefinerede bredder.

Tilføj altid etiketter

Skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse indlejrede formularer kan du skjule etiketterne ved hjælp af .sr-onlyklassen. Der er yderligere alternative metoder til at give en etiket for hjælpeteknologier, såsom aria-label, aria-labelledbyeller titleattributten. Hvis ingen af disse er til stede, kan skærmlæsere ty til at bruge placeholderattributten, hvis den findes, men bemærk, at brug af placeholdersom erstatning for andre mærkningsmetoder ikke tilrådes.

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

Vandret form

Brug Bootstraps foruddefinerede gitterklasser til at justere etiketter og grupper af formularkontrolelementer i et horisontalt layout ved at tilføje .form-horizontaltil formularen (som ikke behøver at være en <form>). Hvis du gør det, ændres det .form-grouptil at opføre sig som gitterrækker, så der er ikke behov for .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>

Understøttede kontroller

Eksempler på standardformularkontrolelementer, der understøttes i et eksempelformularlayout.

Indgange

Mest almindelige formularkontrol, tekstbaserede inputfelter. Inkluderer understøttelse af alle HTML5-typer: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, og color.

Typeerklæring påkrævet

Input vil kun være fuldt stylet, hvis deres typeer korrekt deklareret.

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

Input grupper

For at tilføje integreret tekst eller knapper før og/eller efter enhver tekstbaseret <input>, tjek inputgruppekomponenten .

Tekstområde

Formkontrol, der understøtter flere tekstlinjer. Skift rowsattribut efter behov.

<textarea class="form-control" rows="3"></textarea>

Afkrydsningsfelter og radioer

Afkrydsningsfelter er til at vælge en eller flere muligheder på en liste, mens radioer er til at vælge en mulighed blandt mange.

Deaktiverede afkrydsningsfelter og radioer er understøttet, men for at give en "ikke-tilladt" markør, når du svæver over forælderen <label>, skal du tilføje .disabledklassen til forælderen .radio, .radio-inline, .checkbox, eller .checkbox-inline.

Standard (stablet)

<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 afkrydsningsfelter og radioer

Brug klasserne .checkbox-inlineeller .radio-inlinepå en række afkrydsningsfelter eller radioer til kontrolelementer, der vises på samme linje.

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

Afkrydsningsfelter og radioer uden etikettekst

Hvis du ikke har nogen tekst i <label>, placeres inputtet, som du ville forvente. Virker i øjeblikket kun på ikke-inline afkrydsningsfelter og radioer. Husk stadig at give en form for etiket til hjælpeteknologier (f.eks. ved at bruge 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>

Vælger

Bemærk, at mange indbyggede udvalgte menuer - nemlig i Safari og Chrome - har afrundede hjørner, der ikke kan ændres via border-radiusegenskaber.

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

For <select>kontroller med multipleattributten vises der som standard flere muligheder.

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

Statisk kontrol

Når du skal placere almindelig tekst ved siden af en formularetiket i en formular, skal du bruge .form-control-staticklassen på en <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>

Fokustilstand

Vi fjerner standardstilene outlinepå nogle formularkontrolelementer og anvender en box-shadowi stedet for :focus.

Demo `:focus`tilstand

Ovenstående eksempelinput bruger brugerdefinerede stilarter i vores dokumentation til at demonstrere :focustilstanden på en .form-control.

Deaktiveret tilstand

Tilføj den disabledbooleske attribut på et input for at forhindre brugerinteraktioner. Deaktiverede input ser lysere ud og tilføjer en not-allowedmarkør.

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

Deaktiverede feltsæt

Føj disabledattributten til a <fieldset>for at deaktivere alle kontrolelementerne <fieldset>på én gang.

Forbehold om link funktionalitet af`<a>`

Som standard vil browsere behandle alle indbyggede formularkontrolelementer ( <input>, <select>og <button>elementer) inde i en <fieldset disabled>som deaktiveret, hvilket forhindrer både tastatur- og muse-interaktioner på dem. Men hvis din formular også indeholder <a ... class="btn btn-*">elementer, vil disse kun få en stil på pointer-events: none. Som nævnt i afsnittet om deaktiveret tilstand for knapper (og specifikt i underafsnittet for ankerelementer), er denne CSS-egenskab endnu ikke standardiseret og understøttes ikke fuldt ud i Opera 18 og derunder, eller i Internet Explorer 11, og vandt 't forhindrer tastaturbrugere i at kunne fokusere eller aktivere disse links. Så for at være sikker, brug tilpasset JavaScript til at deaktivere sådanne links.

Cross-browser kompatibilitet

Mens Bootstrap vil anvende disse stilarter i alle browsere, understøtter Internet Explorer 11 og derunder ikke fuldt ud disabledattributten på en <fieldset>. Brug tilpasset JavaScript til at deaktivere feltsættet i disse browsere.

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

Skrivebeskyttet tilstand

Tilføj den readonlybooleske attribut på et input for at forhindre ændring af inputs værdi. Skrivebeskyttede input ser lysere ud (ligesom deaktiverede input), men bevarer standardmarkøren.

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

Hjælpetekst

Hjælpetekst på blokniveau til formularkontrolelementer.

Tilknytning af hjælpetekst med formularkontrolelementer

Hjælpeteksten skal være eksplicit forbundet med den formularkontrol, den relaterer til ved brug af aria-describedbyattributten. Dette vil sikre, at hjælpeteknologier – såsom skærmlæsere – vil annoncere denne hjælpetekst, når brugeren fokuserer eller går ind i kontrollen.

<label class="sr-only" 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>

Valideringstilstande

Bootstrap inkluderer valideringsstile til fejl-, advarsels- og succestilstande på formularkontrolelementer. For at bruge skal du tilføje .has-warning, .has-erroreller .has-successtil det overordnede element. Alle .control-label, .form-control, og .help-blockinden for dette element vil modtage valideringsstilene.

Formidling af valideringstilstand til hjælpeteknologier og farveblinde brugere

Brug af disse valideringsstile til at angive tilstanden af en formularkontrol giver kun en visuel, farvebaseret indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere - eller til farveblinde brugere.

Sørg for, at der også gives en alternativ angivelse af tilstand. Du kan f.eks. inkludere et tip om tilstand i selve formularkontrollens <label>tekst (som det er tilfældet i følgende kodeeksempel), inkludere en Glyphicon (med passende alternativ tekst ved hjælp af .sr-onlyklassen - se Glyphicon-eksemplerne ), eller ved at give en ekstra hjælpetekstblok . Specifikt for hjælpeteknologier kan kontrolelementer til ugyldige formularer også tildeles en aria-invalid="true"attribut.

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

Med valgfri ikoner

Du kan også tilføje valgfri feedback-ikoner med tilføjelsen af .has-feedbackog det højre ikon.

Feedback-ikoner fungerer kun med tekstelementer <input class="form-control">.

Ikoner, etiketter og inputgrupper

Manuel placering af feedback-ikoner er påkrævet for input uden etiket og for inputgrupper med en tilføjelse til højre. Du opfordres kraftigt til at give etiketter til alle input af tilgængelighedsgrunde. Hvis du vil forhindre etiketter i at blive vist, skal du skjule dem hos .sr-onlyklassen. Hvis du skal undvære etiketter, skal du justere topværdien af feedback-ikonet. For inputgrupper skal du justere rightværdien til en passende pixelværdi afhængigt af bredden af din tilføjelse.

Formidle ikonets betydning til hjælpeteknologier

For at sikre, at hjælpeteknologier – såsom skærmlæsere – korrekt formidler betydningen af et ikon, bør yderligere skjult tekst inkluderes i .sr-onlyklassen og eksplicit associeres med den formularkontrol, den relaterer til ved brug af aria-describedby. Alternativt skal du sikre dig, at betydningen (f.eks. det faktum, at der er en advarsel for et bestemt tekstindtastningsfelt) formidles i en anden form, såsom at ændre teksten af den faktiske <label>, der er knyttet til formularkontrollen.

Selvom de følgende eksempler allerede nævner valideringstilstanden for deres respektive formkontrolelementer i selve <label>teksten, er ovenstående teknik (ved hjælp af .sr-onlytekst og aria-describedby) inkluderet til illustrative formål.

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

Valgfri ikoner i vandret og indlejret form

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

Valgfri ikoner med skjulte `.sr-only`etiketter

Hvis du bruger .sr-onlyklassen til at skjule en formularkontrol <label>(i stedet for at bruge andre mærkningsmuligheder, såsom aria-labelattributten), vil Bootstrap automatisk justere placeringen af ikonet, når det er blevet tilføjet.

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

Styr størrelsen

Indstil højder ved hjælp af klasser som .input-lg, og indstil bredder ved hjælp af gitterkolonneklasser som .col-lg-*.

Højde dimensionering

Opret kontrolelementer i højere eller kortere form, der matcher knapstørrelser.

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

Vandrette formgruppestørrelser

Du kan hurtigt tilpasse etiketter og formularkontrolelementer .form-horizontalved at tilføje .form-group-lgeller .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>

Søjlestørrelse

Pak input ind i gitterkolonner eller et hvilket som helst tilpasset overordnet element for nemt at håndhæve ønskede bredder.

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

Knapmærker

Brug knapklasserne på et <a>, <button>, eller <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">

Kontekstspecifik brug

Mens knapklasser kan bruges på <a>og <button>elementer, understøttes kun <button>elementer i vores nav- og navbar-komponenter.

Links, der fungerer som knapper

Hvis <a>elementerne bruges til at fungere som knapper – der udløser funktionalitet på siden, i stedet for at navigere til et andet dokument eller afsnit på den aktuelle side – skal de også have en passende role="button".

Gengivelse på tværs af browsere

Som en bedste praksis anbefaler vi på det kraftigste at bruge <button>elementet, når det er muligt for at sikre matchende gengivelse på tværs af browsere.

Blandt andet er der en fejl i Firefox <30 , der forhindrer os i at indstille de line-heightaf <input>-baserede knapper, hvilket gør, at de ikke lige matcher højden af andre knapper på Firefox.

Muligheder

Brug en af de tilgængelige knapklasser til hurtigt at oprette en stylet knap.

<!-- 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>

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning til en knap giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier – såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (den synlige tekst på knappen), eller er inkluderet via alternative måder, såsom yderligere tekst skjult i .sr-onlyklassen.

Størrelser

Kunne du tænke dig større eller mindre knapper? Tilføj .btn-lg, .btn-sm, eller .btn-xsfor yderligere størrelser.

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

Opret blokniveauknapper – dem, der spænder over hele bredden af en forælder – ved at tilføje .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>

Aktiv tilstand

Knapperne vil blive trykket ned (med en mørkere baggrund, mørkere kant og indsat skygge), når de er aktive. For <button>elementer sker dette via :active. For <a>elementer er det gjort med .active. Du kan dog bruge .activepå <button>s (og inkludere aria-pressed="true"attributten), hvis du har brug for at replikere den aktive tilstand programmatisk.

Knapelement

Det er ikke nødvendigt at tilføje :active, da det er en pseudo-klasse, men hvis du har brug for at fremtvinge det samme udseende, skal du fortsætte og tilføje .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

Føj .activeklassen til <a>knapper.

Primært link Link

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

Deaktiveret tilstand

Få knapper til at se uklikbare ud ved at fade dem tilbage med opacity.

Knapelement

Tilføj disabledattributten til <button>knapper.

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

Cross-browser kompatibilitet

Hvis du tilføjer disabledattributten til en <button>, vil Internet Explorer 9 og derunder gøre tekst grå med en grim tekstskygge, som vi ikke kan rette.

Ankerelement

Føj .disabledklassen til <a>knapper.

Primært link Link

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

Vi bruger .disabledsom en hjælpeklasse her, i lighed med den almindelige .activeklasse, så der kræves ingen præfiks.

Forbehold om linkfunktionalitet

Denne klasse bruger pointer-events: nonetil at forsøge at deaktivere linkfunktionaliteten i <a>s, men denne CSS-egenskab er endnu ikke standardiseret og understøttes ikke fuldt ud i Opera 18 og derunder, eller i Internet Explorer 11. Derudover, selv i browsere, der understøtter pointer-events: none, tastatur navigation forbliver upåvirket, hvilket betyder, at seende tastaturbrugere og brugere af hjælpeteknologier stadig vil være i stand til at aktivere disse links. Så for at være sikker, brug tilpasset JavaScript til at deaktivere sådanne links.

Responsive billeder

Billeder i Bootstrap 3 kan gøres responsvenlige via tilføjelsen af .img-responsiveklassen. Dette gælder max-width: 100%;, height: auto;og display: block;for billedet, så det skalerer pænt til det overordnede element.

For at centrere billeder, der bruger .img-responsiveklassen, skal du bruge .center-blocki stedet for .text-center. Se afsnittet med hjælpeklasser for flere detaljer om .center-blockbrug.

SVG-billeder og IE 8-10

I Internet Explorer 8-10 er SVG-billeder med .img-responsiveuforholdsmæssigt store. For at rette dette skal du tilføje, width: 100% \9;hvor det er nødvendigt. Bootstrap anvender ikke dette automatisk, da det forårsager komplikationer til andre billedformater.

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

Billedformer

Tilføj klasser til et <img>element for nemt at style billeder i ethvert projekt.

Cross-browser kompatibilitet

Husk, at Internet Explorer 8 mangler understøttelse af afrundede hjørner.

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

Kontekstuelle farver

Formidle mening gennem farver med en håndfuld vægtbrugsklasser. Disse kan også anvendes på links og bliver mørkere ved svævning ligesom vores standardlinkstile.

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>

Beskæftiger sig med specificitet

Nogle gange kan vægtklasser ikke anvendes på grund af en anden vælgers specificitet. I de fleste tilfælde er en tilstrækkelig løsning at pakke din tekst ind i en <span>med klassen.

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (de kontekstuelle farver bruges kun til at forstærke betydning, der allerede er til stede i teksten/opmærkningen), eller er inkluderet via alternative måder, såsom yderligere tekst skjult med .sr-onlyklassen .

Kontekstuelle baggrunde

I lighed med de kontekstuelle tekstfarveklasser kan du nemt indstille baggrunden for et element til enhver kontekstuel klasse. Ankerkomponenter bliver mørkere, når de svæver, ligesom tekstklasserne.

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>

Beskæftiger sig med specificitet

Nogle gange kan kontekstuelle baggrundsklasser ikke anvendes på grund af en anden vælgers specificitet. I nogle tilfælde er en tilstrækkelig løsning at pakke dit elements indhold ind i en <div>med klassen.

Formidle mening til hjælpeteknologier

Som med kontekstuelle farver skal du sørge for, at enhver mening, der formidles gennem farver, også formidles i et format, der ikke er rent præsentationsmæssigt.

Luk ikon

Brug det generiske lukkeikon til at afvise indhold som modals og advarsler.

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

Carets

Brug indikatorer til at angive dropdown-funktionalitet og retning. Bemærk, at standardindstillingen vil vende automatisk i dropup-menuer .

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

Hurtige flydere

Flyt et element til venstre eller højre med en klasse. !importanter inkluderet for at undgå specificitetsproblemer. Klasser kan også bruges som mixins.

<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();
}

Center indholdsblokke

Indstil et element til display: blockog centrer via margin. Fås som en blanding og klasse.

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

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

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

Clearfix

Slet nemt floats ved at tilføje .clearfix til det overordnede element . Bruger microclearfix som populært af Nicolas Gallagher. Kan også bruges som mixin.

<!-- 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();
}

Vise og skjule indhold

Tving et element til at blive vist eller skjult ( inklusive for skærmlæsere ) med brug af .showog .hiddenklasser. Disse klasser bruges !importanttil at undgå specificitetskonflikter, ligesom de hurtige flydere . De er kun tilgængelige til blokniveauskift. De kan også bruges som mixins.

.hideer tilgængelig, men den påvirker ikke altid skærmlæsere og er forældet fra v3.0.1. Brug .hiddeneller .sr-onlyi stedet for.

Kan desuden .invisiblebruges til kun at skifte synligheden af et element, hvilket betyder, at det displayikke er ændret, og elementet stadig kan påvirke dokumentets flow.

<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();
}

Skærmlæser og tastaturnavigationsindhold

Skjul et element på alle enheder undtagen skærmlæsere med .sr-only. Kombiner .sr-onlymed .sr-only-focusablefor at vise elementet igen, når det er fokuseret (f.eks. af en bruger, der kun har tastatur). Nødvendig for at følge bedste praksis for tilgængelighed . Kan også bruges som mixins.

<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();
}

Billederstatning

Brug .text-hideklassen eller mixin til at hjælpe med at erstatte et elements tekstindhold med et baggrundsbillede.

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

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

For hurtigere mobilvenlig udvikling skal du bruge disse hjælpeklasser til at vise og skjule indhold efter enhed via medieforespørgsel. Også inkluderet er hjælpeklasser til at skifte indhold, når det udskrives.

Prøv at bruge disse på et begrænset grundlag og undgå at oprette helt forskellige versioner af det samme websted. Brug dem i stedet til at komplementere hver enheds præsentation.

Tilgængelige klasser

Brug en enkelt eller en kombination af de tilgængelige klasser til at skifte indhold på tværs af viewport-brudpunkter.

	Ekstra små enhederTelefoner (<768px)	Små enhederTabletter (≥768px)	Mellemstore enhederDesktops (≥992px)	Store enhederDesktops (≥1200px)
`.visible-xs-*`	Synlig	Skjult	Skjult	Skjult
`.visible-sm-*`	Skjult	Synlig	Skjult	Skjult
`.visible-md-*`	Skjult	Skjult	Synlig	Skjult
`.visible-lg-*`	Skjult	Skjult	Skjult	Synlig
`.hidden-xs`	Skjult	Synlig	Synlig	Synlig
`.hidden-sm`	Synlig	Skjult	Synlig	Synlig
`.hidden-md`	Synlig	Synlig	Skjult	Synlig
`.hidden-lg`	Synlig	Synlig	Synlig	Skjult

Fra v3.2.0 kommer .visible-*-*klasserne for hvert breakpoint i tre variationer, en for hver CSS- displayegenskabsværdi, der er angivet nedenfor.

Gruppe af klasser	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Så for xsf.eks. ekstra små ( ) skærme er de tilgængelige .visible-*-*klasser: .visible-xs-block, .visible-xs-inline, og .visible-xs-inline-block.

Klasserne .visible-xs, .visible-sm, .visible-mdog .visible-lgfindes også, men er forældet fra v3.2.0 . De svarer omtrent til .visible-*-block, undtagen med yderligere specielle tilfælde for skifte <table>-relaterede elementer.

Print klasser

I lighed med de almindelige responsive klasser skal du bruge disse til at skifte indhold til tryk.

Klasser	Browser	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skjult	Synlig
`.hidden-print`	Synlig	Skjult

Klassen .visible-printfindes også, men er forældet fra v3.2.0. Det svarer omtrent til .visible-print-block, undtagen med yderligere særlige tilfælde for <table>-relaterede elementer.

Test cases

Tilpas størrelsen på din browser eller indlæs på forskellige enheder for at teste de responsive hjælpeprogrammer.

Synlig på...

Grønne flueben angiver, at elementet er synligt i din aktuelle visningsport.

Ekstra lille ✔ Synlig på x-small

Lille ✔ Synlig på small

Medium ✔ Synlig på medium

Stor ✔ Syns på large

Ekstra små og små ✔ Synlig på x-small og small

Medium og stor ✔ Synlig på medium og large

Ekstra lille og mellem ✔ Synlig på x-small og medium

Små og store ✔ Synlig på små og store

Ekstra små og store ✔ Synlig på x-small og large

Små og mellemstore ✔ Synlig på small og medium

Skjult på...

Her angiver grønne flueben også, at elementet er skjult i din aktuelle visningsport.

Ekstra lille ✔ Skjult på x-small

Lille ✔ Skjult på små

Medium ✔ Skjult på medium

Stor ✔ Skjult på stort

Ekstra små og små ✔ Skjult på x-small og small

Medium og stor ✔ Skjult på medium og large

Ekstra lille og mellem ✔ Hidden on x-small and medium

Small and large ✔ Skjult på små og store

Extra small and large ✔ Skjult på x-small og large

Små og mellemstore ✔ Hidden on small and medium

Bootstraps CSS er bygget på Less, en præprocessor med ekstra funktionalitet som variabler, mixins og funktioner til kompilering af CSS. De, der ønsker at bruge kilden Less-filerne i stedet for vores kompilerede CSS-filer, kan gøre brug af de mange variabler og mixins, vi bruger i hele rammen.

Grid variabler og mixins er dækket i Grid system sektionen .

Kompilere Bootstrap

Bootstrap kan bruges på mindst to måder: med den kompilerede CSS eller med kilden Less-filer. For at kompilere Less-filerne, se afsnittet Kom godt i gang for, hvordan du konfigurerer dit udviklingsmiljø til at køre de nødvendige kommandoer.

Tredjeparts kompileringsværktøjer fungerer muligvis med Bootstrap, men de understøttes ikke af vores kerneteam.

Variabler

Variabler bruges gennem hele projektet som en måde at centralisere og dele almindeligt anvendte værdier som farver, mellemrum eller skrifttyper. For en fuldstændig opdeling, se venligst Customizer .

Farver

Gør nemt brug af to farveskemaer: gråtoner og semantisk. Gråtonefarver giver hurtig adgang til almindeligt anvendte nuancer af sort, mens semantik omfatter forskellige farver, der er tildelt meningsfulde kontekstuelle værdier.

@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;

Brug en af disse farvevariabler, som de er, eller omtildel dem til mere meningsfulde variabler for dit projekt.

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

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

Stilladser

En håndfuld variabler til hurtigt at tilpasse nøgleelementer i dit websteds skelet.

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

Links

Stil nemt dine links med den rigtige farve med kun én værdi.

// 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;
  }
}

Bemærk, at den @link-hover-colorbruger en funktion, et andet fantastisk værktøj fra Less, til automatisk at skabe den rigtige svævefarve. Du kan bruge darken, lighten, saturate, og desaturate.

Typografi

Indstil nemt din skrifttype, tekststørrelse, linjeføring og mere med et par hurtige variabler. Bootstrap bruger også disse for at give nemme typografiske mixins.

@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;

Ikoner

To hurtige variabler til at tilpasse placeringen og filnavnet på dine ikoner.

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

Komponenter

Komponenter i hele Bootstrap gør brug af nogle standardvariabler til indstilling af fælles værdier. Her er de mest brugte.

@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;

Leverandørblandinger

Leverandørmixins er mixins, der hjælper med at understøtte flere browsere ved at inkludere alle relevante leverandørpræfikser i din kompilerede CSS.

Kassestørrelse

Nulstil dine komponenters boksmodel med en enkelt blanding. For kontekst, se denne nyttige artikel fra Mozilla .

Mixin er forældet fra v3.2.0 med introduktionen af Autoprefixer. For at bevare bagudkompatibiliteten fortsætter Bootstrap med at bruge mixin internt indtil Bootstrap v4.

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

Afrundede hjørner

I dag understøtter alle moderne browsere border-radiusegenskaben uden præfiks. Som sådan er der ingen .border-radius()mixin, men Bootstrap inkluderer genveje til hurtigt at runde to hjørner på en bestemt side af et objekt.

.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;
}

Box (Drop) skygger

Hvis din målgruppe bruger de nyeste og bedste browsere og enheder, skal du sørge for kun at bruge box-shadowejendommen alene. Hvis du har brug for support til ældre Android (præ-v4) og iOS-enheder (præ-iOS 5), skal du bruge det forældede mixin til at hente det nødvendige -webkitpræfiks.

Mixin'et er forældet fra v3.1.0, da Bootstrap ikke officielt understøtter de forældede platforme, der ikke understøtter standardegenskaben. For at bevare bagudkompatibiliteten fortsætter Bootstrap med at bruge mixin internt indtil Bootstrap v4.

Sørg for at bruge rgba()farver i dine boksskygger, så de blander sig så sømløst som muligt med baggrunde.

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

Overgange

Flere mixins for fleksibilitet. Indstil alle overgangsoplysninger med én, eller angiv en separat forsinkelse og varighed efter behov.

Blandingerne er forældet fra v3.2.0 med introduktionen af Autoprefixer. For at bevare bagudkompatibilitet fortsætter Bootstrap med at bruge mixins internt indtil 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;
}

Transformationer

Roter, skaler, oversæt (flyt) eller skæv ethvert objekt.

Blandingerne er forældet fra v3.2.0 med introduktionen af Autoprefixer. For at bevare bagudkompatibilitet fortsætter Bootstrap med at bruge mixins internt indtil 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;
}

Animationer

Et enkelt mixin til at bruge alle CSS3's animationsegenskaber i én erklæring og andre mixins til individuelle egenskaber.

Blandingerne er forældet fra v3.2.0 med introduktionen af Autoprefixer. For at bevare bagudkompatibilitet fortsætter Bootstrap med at bruge mixins internt indtil 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;
}

Gennemsigtighed

Indstil opaciteten for alle browsere og giv et filteralternativ til IE8.

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

Pladsholdertekst

Angiv kontekst for formularkontrolelementer inden for hvert felt.

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

Kolonner

Generer kolonner via CSS i et enkelt 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;
}

Gradienter

Gør nemt alle to farver til en baggrundsgradient. Bliv mere avanceret og sæt en retning, brug tre farver, eller brug en radial gradient. Med et enkelt mixin får du alle de præfiksede syntakser, du har brug for.

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

Du kan også angive vinklen for en standard tofarvet, lineær gradient:

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

Hvis du har brug for en gradient i barber-stribe stil, er det også nemt. Du skal blot angive en enkelt farve, så overlejrer vi en gennemskinnelig hvid stribe.

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

Øg ante og brug tre farver i stedet. Indstil den første farve, den anden farve, den anden farves farvestop (en procentværdi som 25%) og den tredje farve med disse blandinger:

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

Heads up! Skulle du nogensinde få brug for at fjerne en gradient, skal du sørge for at fjerne enhver IE-specifik filter, du måtte have tilføjet. Det kan du gøre ved at bruge .reset-filter()mixin ved siden af background-image: none;.

Utility mixins

Utility-mixins er mixins, der kombinerer ellers ikke-relaterede CSS-egenskaber for at opnå et specifikt mål eller en opgave.

Clearfix

Glem at tilføje class="clearfix"til ethvert element og tilsæt i stedet .clearfix()blandingen, hvor det er relevant. Bruger micro clearfix fra Nicolas Gallagher .

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

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

Vandret centrering

Centrer hurtigt ethvert element i dets overordnede. Kræver widtheller max-widthskal indstilles.

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

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

Størrelseshjælpere

Angiv lettere dimensionerne af et objekt.

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

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

Tekstområder, der kan ændres

Konfigurer nemt størrelsesindstillingerne for ethvert tekstområde eller ethvert andet element. Standarder til normal browseradfærd ( both).

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

Afkorter tekst

Afkort tekst nemt med en ellipse med en enkelt blanding. Kræver element for at være blockeller inline-blockniveau.

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

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

Nethinde billeder

Angiv to billedstier og @1x billeddimensionerne, og Bootstrap vil levere en @2x medieforespørgsel. Hvis du har mange billeder at vise, kan du overveje at skrive dit nethindebillede CSS manuelt i en enkelt medieforespørgsel.

.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);
}

Mens Bootstrap er bygget på Less, har den også en officiel Sass-port . Vi vedligeholder det i et separat GitHub-lager og håndterer opdateringer med et konverteringsscript.

Hvad er inkluderet

Da Sass-porten har en separat repo og betjener et lidt andet publikum, adskiller indholdet af projektet sig meget fra det primære Bootstrap-projekt. Dette sikrer, at Sass-porten er så kompatibel med så mange Sass-baserede systemer som muligt.

Sti	Beskrivelse
`lib/`	Ruby gem-kode (Sass-konfiguration, skinner og kompas-integrationer)
`tasks/`	Konverteringsscripts (vender mindre opstrøm til Sass)
`test/`	Kompilationstest
`templates/`	Kompaspakkemanifest
`vendor/assets/`	Sass, JavaScript og skrifttypefiler
`Rakefile`	Interne opgaver, såsom rake og convert

Besøg Sass-portens GitHub-lager for at se disse filer i aktion.

Installation

For information om, hvordan du installerer og bruger Bootstrap til Sass, skal du konsultere GitHub-lageret readme . Det er den mest opdaterede kilde og indeholder oplysninger til brug med Rails, Compass og standard Sass-projekter.

Bootstrap til Sass

CSS

Oversigt

HTML5 doctype

Mobil først

Typografi og links

Normaliser.css

Containere

Gittersystem

Introduktion

Medieforespørgsler

Grid muligheder

Eksempel: Stablet-til-vandret

Eksempel: Væskebeholder

Eksempel: Mobil og desktop

Eksempel: Mobil, tablet, desktop

Eksempel: Kolonneindpakning

Responsive kolonnenulstillinger

Forskydning af kolonner

Indlejrede søjler

Kolonnebestilling

Færre mixins og variabler

Variabler

Mixins

Eksempel på brug

Typografi

Overskrifter

h1. Bootstrap overskrift

h2. Bootstrap overskrift

h3. Bootstrap overskrift

h4. Bootstrap overskrift

h5. Bootstrap overskrift

h6. Bootstrap overskrift

h1. Bootstrap-overskrift Sekundær tekst

h2. Bootstrap-overskrift Sekundær tekst

h3. Bootstrap-overskrift Sekundær tekst

h4. Bootstrap-overskrift Sekundær tekst

h5. Bootstrap-overskrift Sekundær tekst

h6. Bootstrap-overskrift Sekundær tekst

Brødtekst

Blykropskopi

Bygget med mindre

Inline tekstelementer

Markeret tekst

Slettet tekst

Gennemstreget tekst

Indsat tekst

Understreget tekst

Lille tekst

Fremhævet

Kursiv

Alternative elementer

Opstillingsklasser

Transformationsklasser

Forkortelser

Grundlæggende forkortelse

Initialisme

Adresser

Blokcitater

Standard blokcitat

Indstillinger for blokcitat

Navngivning af en kilde

Alternative skærme

Lister

Uordnet

Bestilt

Ustylet

Inline

Beskrivelse

Vandret beskrivelse

Auto-trunkering

Kode

Inline

Bruger input

Grundblok

Variabler

Eksempel output

Tabeller

Grundlæggende eksempel

Stribede rækker

Cross-browser kompatibilitet

Demo `:focus`tilstand

Forbehold om link funktionalitet af`<a>`

Valgfri ikoner med skjulte `.sr-only`etiketter