Få ett litet grepp om de viktigaste delarna av Bootstraps infrastruktur, inklusive vår strategi för bättre, snabbare och starkare webbutveckling.

HTML5 doctype

Bootstrap använder vissa HTML-element och CSS-egenskaper som kräver användning av HTML5 doctype. Inkludera det i början av alla dina projekt.

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

Mobilen först

Med Bootstrap 2 lade vi till valfria mobilvänliga stilar för viktiga aspekter av ramverket. Med Bootstrap 3 har vi skrivit om projektet för att vara mobilvänligt från början. Istället för att lägga till valfria mobilstilar är de bakade rakt in i kärnan. Faktum är att Bootstrap är mobil först . Mobile first styles kan hittas i hela biblioteket istället för i separata filer.

För att säkerställa korrekt rendering och pekzoomning, lägg till viewport-metataggen i din <head>.

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

Du kan inaktivera zoomfunktioner på mobila enheter genom att lägga user-scalable=notill metataggen för viewport. Detta inaktiverar zoomning, vilket innebär att användare bara kan rulla, och resulterar i att din webbplats känns lite mer som en inbyggd applikation. Sammantaget rekommenderar vi inte detta på alla webbplatser, så var försiktig!

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

Typografi och länkar

Bootstrap ställer in grundläggande globala visnings-, typografi- och länkstilar. Närmare bestämt, vi:

Ställ background-color: #fff;in påbody
Använd @font-family-base, @font-size-base, och @line-height-baseattributen som vår typografiska bas
Ställ in den globala länkfärgen via @link-coloroch använd endast länkunderstrykningar på:hover

Dessa stilar finns inom scaffolding.less.

Normalisera.css

För förbättrad rendering över webbläsare använder vi Normalize.css , ett projekt av Nicolas Gallagher och Jonathan Neal .

Behållare

Bootstrap kräver ett innehållande element för att omsluta webbplatsens innehåll och hysa vårt rutsystem. Du kan välja en av två behållare att använda i dina projekt. Observera att på grund av paddingoch mer är ingen av behållarna kapslingsbar.

Använd .containerför en responsiv behållare med fast bredd.

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

Använd .container-fluidför en full bredd behållare, som spänner över hela bredden av din visningsport.

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

Bootstrap inkluderar ett lyhört, mobilt första vätskenätsystem som på lämpligt sätt skalar upp till 12 kolumner när enhetens eller visningsportens storlek ökar. Den innehåller fördefinierade klasser för enkla layoutalternativ, såväl som kraftfulla mixins för att generera mer semantiska layouter .

Introduktion

Rutnätssystem används för att skapa sidlayouter genom en serie rader och kolumner som innehåller ditt innehåll. Så här fungerar Bootstrap-rutnätssystemet:

Rader måste placeras inom en .container(fast bredd) eller .container-fluid(full bredd) för korrekt inriktning och utfyllnad.
Använd rader för att skapa horisontella grupper av kolumner.
Innehåll bör placeras i kolumner, och endast kolumner får vara omedelbara underordnade rader.
Fördefinierade rutnätsklasser som .rowoch .col-xs-4är tillgängliga för att snabbt göra rutnätslayouter. Mindre mixins kan också användas för mer semantiska layouter.
Kolumner skapar rännor (luckor mellan kolumninnehåll) via padding. Den utfyllnaden förskjuts i rader för den första och sista kolumnen via negativ marginal på .rows.
Den negativa marginalen är anledningen till att exemplen nedan är överdragna. Det är så att innehåll i rutnätskolumner är uppradat med innehåll som inte är rutnät.
Rutnätskolumner skapas genom att ange antalet tolv tillgängliga kolumner som du vill spänna över. Till exempel skulle tre lika stora kolumner använda tre .col-xs-4.
Om fler än 12 kolumner placeras inom en enda rad, kommer varje grupp av extra kolumner, som en enhet, att slås in på en ny rad.
Rutnätsklasser gäller enheter med skärmbredder större än eller lika med brytpunktsstorlekarna och åsidosätter rutnätsklasser som är inriktade på mindre enheter. Därför kommer t.ex. att tillämpa valfri .col-md-*klass på ett element inte bara påverka dess stil på medelstora enheter utan även på stora enheter om en .col-lg-*klass inte är närvarande.

Titta på exemplen för att tillämpa dessa principer på din kod.

Mediafrågor

Vi använder följande mediefrågor i våra Less-filer för att skapa de viktigaste brytpunkterna i vårt rutsystem.

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

Ibland utökar vi dessa mediefrågor för att inkludera en max-widthför att begränsa CSS till en smalare uppsättning enheter.

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

Rutnätsalternativ

Se hur delar av Bootstrap-rutnätssystemet fungerar på flera enheter med en praktisk tabell.

	Extra små enheter Telefoner (<768px)	Små enheter Surfplattor (≥768px)	Medelstora enheter Stationära datorer (≥992px)	Stora enheter Stationära datorer (≥1200px)
Gridbeteende	Horisontell hela tiden	Sammandragen för att starta, horisontellt ovanför brytpunkter
Behållarens bredd	Ingen (auto)	750 pixlar	970 pixlar	1170 pixlar
Klassprefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Antal kolumner	12
Kolumnbredd	Bil	~62px	~81px	~97px
Rännans bredd	30px (15px på varje sida av en kolumn)
Nestbar	Ja
Offsets	Ja
Kolumnordning	Ja

Exempel: Staplad-till-horisontell

Med en enda uppsättning .col-md-*rutnätsklasser kan du skapa ett grundläggande rutsystem som börjar staplas på mobila enheter och surfplattor (det extra lilla till lilla intervallet) innan det blir horisontellt på stationära (medelstora) enheter. Placera rutnätskolumner i valfri .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>

Exempel: Vätskebehållare

Förvandla valfri rutnätslayout med fast bredd till en layout i full bredd genom att ändra din yttersta .containertill .container-fluid.

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

Exempel: Mobil och stationär

Vill du inte att dina kolumner bara ska staplas i mindre enheter? Använd rutnätsklasserna för extra små och medelstora enheter genom att lägga .col-xs-* .col-md-*till i dina kolumner. Se exemplet nedan för en bättre uppfattning om hur det hela fungerar.

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

Exempel: mobil, surfplatta, dator

Bygg vidare på det tidigare exemplet genom att skapa ännu mer dynamiska och kraftfulla layouter med surfplatteklasser .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>

Exempel: Kolumnlindning

Om fler än 12 kolumner placeras inom en enda rad, kommer varje grupp av extra kolumner, som en enhet, att slås in på en ny rad.

.col-xs-9

.col-xs-4
Eftersom 9 + 4 = 13 > 12, lindas denna 4-kolumn breda div på en ny rad som en sammanhängande enhet.

.col-xs-6
Efterföljande kolumner fortsätter längs den nya linjen.

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

Responsiva kolumnåterställningar

Med de fyra nivåerna av rutnät som är tillgängliga kommer du oundvikligen att stöta på problem där dina kolumner vid vissa brytpunkter inte rensas helt korrekt eftersom den ena är högre än den andra. För att fixa det, använd en kombination av a .clearfixoch våra responsiva verktygsklasser .

.col-xs-6 .col-sm-3
Ändra storlek på din visningsport eller kolla in den på din telefon för ett exempel.

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

Förutom kolumnrensning vid responsiva brytpunkter kan du behöva återställa offset, push eller pull . Se detta i aktion i rutnätsexemplet .

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

Förskjutning av kolumner

Flytta kolumner till höger med .col-md-offset-*klasser. Dessa klasser ökar den vänstra marginalen i en kolumn med *kolumner. .col-md-offset-4Flyttar till exempel .col-md-4över fyra kolumner.

.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 också åsidosätta offset från lägre rutnätsnivåer 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>

Häckande kolumner

För att kapsla ditt innehåll med standardrutnätet, lägg till en ny .rowoch uppsättning .col-sm-*kolumner i en befintlig .col-sm-*kolumn. Kapslade rader bör innehålla en uppsättning kolumner som summerar till 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).

Nivå 1: .col-sm-9

Nivå 2: .col-xs-8 .col-sm-6

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

Kolumnordning

Ändra enkelt ordningen på våra inbyggda rutkolumner med .col-md-push-*och .col-md-pull-*modifieringsklasser.

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

Mindre mixins och variabler

Förutom förbyggda rutnätsklasser för snabba layouter, innehåller Bootstrap färre variabler och mixins för att snabbt generera dina egna enkla, semantiska layouter.

Variabler

Variabler bestämmer antalet kolumner, rännstenens bredd och mediefrågepunkten vid vilken flytande kolumner ska börja. Vi använder dessa för att generera de fördefinierade rutnätsklasserna som dokumenterats ovan, såväl som för de anpassade mixin som listas nedan.

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

Mixins

Mixins används tillsammans med rutnätsvariablerna för att generera semantisk CSS för enskilda rutkolumner.

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

Exempel användning

Du kan ändra variablerna till dina egna anpassade värden, eller bara använda mixinerna med deras standardvärden. Här är ett exempel på hur du använder standardinställningarna för att skapa en layout med två kolumner med ett mellanrum mellan.

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

Rubriker

Alla HTML-rubriker, <h1>genom <h6>, är tillgängliga. .h1genomklasser .h6är också tillgängliga, för när du vill matcha teckensnittsstilen för en rubrik men ändå vill att din text ska visas inline.

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

Skapa lättare, sekundär text i valfri rubrik med en generisk <small>tagg eller .smallklassen.

h1. Bootstrap-rubrik Sekundär text

h2. Bootstrap-rubrik Sekundär text

h3. Bootstrap-rubrik Sekundär text

h4. Bootstrap-rubrik Sekundär text

h5. Bootstrap-rubrik Sekundär text

h6. Bootstrap-rubrik Sekundär text

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

Kroppskopia

Bootstraps globala standard font-sizeär 14px , med ett line-heightpå 1,428 . Detta tillämpas på <body>och alla stycken. Dessutom får <p>(stycken) en bottenmarginal på halva sin beräknade radhöjd (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>

Kopia av blykropp

Få ett stycke att sticka ut genom att lägga till .lead.

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

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

Byggd med mindre

Den typografiska skalan är baserad på två Less-variabler i variables.less : @font-size-baseoch @line-height-base. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd. Vi använder dessa variabler och lite enkel matematik för att skapa marginaler, fyllningar och linjehöjder av alla våra typer och mer. Anpassa dem och Bootstrap anpassar sig.

Inline textelement

Markerad text

Använd taggen för att markera en serie text på grund av dess relevans i ett annat sammanhang <mark>.

Du kan använda markeringstaggen för attmarkeratext.

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

Raderad text

<del>Använd taggen för att indikera textblock som har raderats .

~~Denna textrad är avsedd att behandlas som raderad text.~~

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

Genomstruken text

<s>Använd taggen för att indikera textblock som inte längre är relevanta .

~~Denna textrad är avsedd att behandlas som inte längre korrekt.~~

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

Infogad text

<ins>Använd taggen för att indikera tillägg till dokumentet .

Denna textrad är avsedd att behandlas som ett tillägg till dokumentet.

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

Understruken text

För att understryka text använd <u>taggen.

Denna textrad återges som understruken

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

Använd HTMLs förinställda betoningstaggar med lätta stilar.

Liten text

För att minska betoningen på inline eller textblock, använd <small>taggen för att ställa in text på 85 % av förälderns storlek. Rubrikelement får sina egna font-sizeför kapslade<small> element.

Du kan alternativt använda ett inline-element med .smalli stället för någon <small>.

Denna textrad är tänkt att behandlas som finstilt.

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

Djärv

För att framhäva en textbit med en tyngre teckensnittsvikt.

Följande textavsnitt återges som fet text .

<strong>rendered as bold text</strong>

Kursiv

För att framhäva ett textstycke med kursiv stil.

Följande textutdrag renderas som kursiv text .

<em>rendered as italicized text</em>

Alternativa element

Använd gärna <b>och <i>i HTML5. <b>är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>är mest för röst, tekniska termer, etc.

Uppriktningsklasser

Justera enkelt text till komponenter med textjusteringsklasser.

Vänsterjusterad text.

Centrerad text.

Högerjusterad text.

Berättigad text.

Ingen radbrytande text.

<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

Omvandla text i komponenter med textklasser för versaler.

Text med små bokstäver.

Text med versaler.

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

Förkortningar

Stiliserad implementering av HTMLs <abbr>element för förkortningar och akronymer för att visa den utökade versionen vid hovring. Förkortningar med ett titleattribut har en lätt prickad bottenkant och en hjälpmarkör vid hovring, vilket ger ytterligare sammanhang vid hovring och för användare av hjälpmedel.

Grundläggande förkortning

En förkortning av ordet attribut är attr .

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

Initialism

Lägg .initialismtill en förkortning för en lite mindre teckenstorlek.

HTML är det bästa sedan skivat bröd.

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

Adresser

Presentera kontaktinformation för närmaste förfader eller hela arbetet. Bevara formateringen genom att avsluta alla rader med <br>.

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

Fullständigt namn
[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>

Blockcitat

För att citera innehållsblock från en annan källa i ditt dokument.

Standard blockcitat

Linda <blockquote>runt vilken HTML som helst som citat. För raka offerter rekommenderar 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>

Blockcitat alternativ

Stil och innehåll ändras för enkla varianter av en standard <blockquote>.

Namnge en källa

Lägg till ett <footer>för att identifiera källan. Slå in namnet på källverket i <cite>.

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

Någon känd i källtiteln

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

Alternativa skärmar

Lägg .blockquote-reversetill för ett blockcitat med högerjusterat innehåll.

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

Någon känd i källtiteln

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

Listor

Obeställd

En lista över objekt där ordningen inte uttryckligen spelar någon roll.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem vid 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>

Beställde

En lista över objekt där ordningen uttryckligen har betydelse.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem vid 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>

Ostylad

Ta bort standardmarginalen list-styleoch vänstermarginalen på listobjekt (endast omedelbara underordnade). Detta gäller bara objekt för omedelbara underordnade listor , vilket innebär att du måste lägga till klassen för alla kapslade listor också.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem vid 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>

I kö

Placera alla listobjekt på en enda rad med display: inline-block;lite lätt stoppning.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Beskrivning

En lista över termer med tillhörande beskrivningar.

Beskrivningslistor: En beskrivningslista är perfekt för att definiera 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>

Horisontell beskrivning

Gör termer och beskrivningar i <dl>rad sida vid sida. Börjar staplas som standard <dl>s, men när navigeringsfältet expanderar, så gör dessa.

Beskrivningslistor: En beskrivningslista är perfekt för att definiera 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, ut fermentum massa justo sit amet risus.

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

Automatisk trunkering

Horisontella beskrivningslistor kommer att trunkera termer som är för långa för att passa i den vänstra kolumnen med text-overflow. I smalare vyportar kommer de att ändras till den staplade standardlayouten.

I kö

Slå in inline kodavsnitt med <code>.

Till exempel <section>bör lindas som inline.

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

Användarinmatning

Använd för <kbd>att indikera indata som vanligtvis matas in via tangentbordet.

För att byta katalog, skriv cdföljt av namnet på katalogen.
För att redigera inställningar, tryck 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>

Grundblock

Använd <pre>för flera rader kod. Se till att undvika alla vinkelparenteser i koden för korrekt rendering.

<p>Exempeltext här...</p>

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

Du kan valfritt lägga till .pre-scrollableklassen, som kommer att ställa in en maxhöjd på 350px och tillhandahålla en rullningslist på y-axeln.

Variabler

<var>Använd taggen för att indikera variabler .

y = m x + b

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

Provutgång

<samp>Använd taggen för att indikera blockexemplar från ett program .

Denna text är avsedd att behandlas som exempelutdata från ett datorprogram.

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

Grundläggande exempel

För grundläggande styling—lätt vaddering och endast horisontella avdelare—lägg till basklassen .tabletill valfri <table>. Det kan verka superöverflödigt, men med tanke på den utbredda användningen av tabeller för andra plugins som kalendrar och datumväljare, har vi valt att isolera våra anpassade tabellstilar.

Valfri tabelltext.
#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

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

Randiga rader

Använd .table-stripedför att lägga till zebrastrimningar till valfri tabellrad inom <tbody>.

Kompatibilitet över webbläsare

Randiga tabeller utformas via :nth-childCSS-väljaren, som inte är tillgänglig i Internet Explorer 8.

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

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

Kantat bord

Lägg .table-borderedtill kanter på alla sidor av tabellen och cellerna.

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

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

Sväva rader

Lägg .table-hovertill för att aktivera ett hovringsläge på tabellrader inom en <tbody>.

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

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

Kondenserat bord

Lägg .table-condensedtill för att göra borden mer kompakta genom att halvera cellstoppningen.

#	Förnamn	Efternamn	Användarnamn
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln Larry		@Twitter

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

Kontextuella klasser

Använd kontextuella klasser för att färglägga tabellrader eller enskilda celler.

Klass	Beskrivning
`.active`	Tillämpar svävningsfärgen på en viss rad eller cell
`.success`	Indikerar en framgångsrik eller positiv handling
`.info`	Indikerar en neutral informativ förändring eller åtgärd
`.warning`	Indikerar en varning som kan behöva åtgärdas
`.danger`	Indikerar en farlig eller potentiellt negativ handling

#	Kolumnrubrik	Kolumnrubrik	Kolumnrubrik
1	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
2	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
3	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
4	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
5	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
6	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
7	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
8	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll
9	Kolumninnehåll	Kolumninnehåll	Kolumninnehåll

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

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening till en tabellrad eller enskild cell ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (den synliga texten i den relevanta tabellraden/cellen), eller inkluderas på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Responsiva tabeller

Skapa responsiva tabeller genom att linda .tablein .table-responsivedem så att de rullar horisontellt på små enheter (under 768px). När du tittar på något större än 768px brett kommer du inte att se någon skillnad i dessa tabeller.

Vertikal klippning/trunkering

Responsiva tabeller använder overflow-y: hidden, som klipper bort allt innehåll som går utanför bordets nedre eller övre kanter. I synnerhet kan detta klippa bort rullgardinsmenyer och andra widgets från tredje part.

Firefox och fieldset

Firefox har en del besvärlig fieldset-styling widthsom stör den responsiva tabellen. Detta kan inte åsidosättas utan ett Firefox-specifikt hack som vi inte tillhandahåller i Bootstrap:

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

För mer information, läs detta Stack Overflow-svar .

#	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik
1	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell
2	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell
3	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell

#	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik
1	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell
2	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell
3	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell	Tabellcell

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

Grundläggande exempel

Individuella formkontroller får automatiskt lite global stil. Alla textuella <input>, <textarea>, och <select>element med .form-controlär inställda på som width: 100%;standard. Linda in etiketter och kontroller .form-groupför optimalt avstånd.

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

Blanda inte formulärgrupper med inmatningsgrupper

Blanda inte formulärgrupper direkt med inmatningsgrupper . Kapsla istället indatagruppen inuti formulärgruppen.

Inline formulär

Lägg .form-inlinetill i ditt formulär (som inte behöver vara ett <form>) för vänsterjusterade och inline-blockkontroller. Detta gäller endast formulär i visningsportar som är minst 768px breda.

Kan kräva anpassade bredder

Ingångar och val har width: 100%;tillämpats som standard i Bootstrap. Inom inline-formulär återställer vi det till width: auto;så att flera kontroller kan finnas på samma rad. Beroende på din layout kan ytterligare anpassade bredder krävas.

Lägg alltid till etiketter

Skärmläsare kommer att få problem med dina formulär om du inte inkluderar en etikett för varje inmatning. För dessa infogade formulär kan du dölja etiketterna med hjälp av .sr-onlyklassen. Det finns ytterligare alternativa metoder för att tillhandahålla en märkning för hjälpmedel, som aria-labelattributet eller aria-labelledby. titleOm ingen av dessa finns kan skärmläsare använda placeholderattributet, om det finns, men observera att användning av placeholdersom ersättning för andra märkningsmetoder inte rekommenderas.

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

Horisontell form

Använd Bootstraps fördefinierade rutnätsklasser för att justera etiketter och grupper av formulärkontroller i en horisontell layout genom att lägga .form-horizontaltill i formuläret (vilket inte behöver vara en <form>). Om du gör det ändras det .form-grouptill att bete sig som rutnätsrader, så inget behov av .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>

Kontroller som stöds

Exempel på standardformulärkontroller som stöds i en exempelformulärlayout.

Ingångar

Vanligaste formulärkontroll, textbaserade inmatningsfält. Inkluderar stöd för alla HTML5-typer: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, och color.

Typdeklaration krävs

Ingångar kommer bara att formateras helt om de typeär korrekt deklarerade.

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

Inmatningsgrupper

För att lägga till integrerad text eller knappar före och/eller efter en textbaserad <input>, kolla in indatagruppskomponenten .

Textområde

Formulärkontroll som stöder flera textrader. Ändra rowsattribut vid behov.

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

Kryssrutor och radioapparater

Kryssrutorna är för att välja ett eller flera alternativ i en lista, medan radioapparater är för att välja ett alternativ bland många.

Inaktiverade kryssrutor och radioapparater stöds, men för att tillhandahålla en "ej tillåten" markör vid muspekaren över föräldern <label>måste du lägga till .disabledklassen till föräldern .radio, .radio-inline, .checkbox, eller .checkbox-inline.

Standard (staplad)

<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 kryssrutor och radioapparater

Använd klasserna .checkbox-inlineeller .radio-inlinepå en serie kryssrutor eller radioapparater för kontroller som visas på samma rad.

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

Kryssrutor och radioapparater utan etiketttext

Om du inte har någon text i <label>fältet placeras inmatningen som du kan förvänta dig. Fungerar för närvarande bara på icke-inline kryssrutor och radioapparater. Kom ihåg att fortfarande tillhandahålla någon form av märkning för hjälpmedel (till exempel genom att använda 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äljer

Observera att många inbyggda menyer – nämligen i Safari och Chrome – har rundade hörn som inte kan ändras via border-radiusegenskaper.

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

För <select>kontroller med multipleattributet visas flera alternativ som standard.

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

Statisk kontroll

När du behöver placera vanlig text bredvid en formuläretikett i ett formulär, använd .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>

Fokustillstånd

Vi tar bort standardstilarna outlinepå vissa formulärkontroller och använder en box-shadowi dess ställe för :focus.

Demo `:focus`tillstånd

Exemplet ovan använder anpassade stilar i vår dokumentation för att visa :focustillståndet på en .form-control.

Inaktiverat tillstånd

Lägg till det disabledbooleska attributet på en ingång för att förhindra användarinteraktioner. Inaktiverade ingångar ser ljusare ut och lägger till en not-allowedmarkör.

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

Inaktiverade fältuppsättningar

Lägg till disabledattributet till a <fieldset>för att inaktivera alla kontroller inom <fieldset>samtidigt.

Varning om länkfunktionalitet`<a>`

Som standard kommer webbläsare att behandla alla inbyggda formulärkontroller ( <input>, <select>och <button>element) i en <fieldset disabled>som inaktiverade, vilket förhindrar interaktion med både tangentbord och mus på dem. Men om ditt formulär också innehåller <a ... class="btn btn-*">element kommer dessa bara att få stilen pointer-events: none. Som nämnts i avsnittet om inaktiverat tillstånd för knappar (och specifikt i underavsnittet för ankarelement), är denna CSS-egenskap ännu inte standardiserad och stöds inte fullt ut i Opera 18 och lägre, eller i Internet Explorer 11, och vann Det hindrar inte tangentbordsanvändare från att kunna fokusera eller aktivera dessa länkar. Så för att vara säker, använd anpassad JavaScript för att inaktivera sådana länkar.

Kompatibilitet över webbläsare

Även om Bootstrap kommer att tillämpa dessa stilar i alla webbläsare, stöder Internet Explorer 11 och lägre inte helt disabledattributet på en <fieldset>. Använd anpassad JavaScript för att inaktivera fältuppsättningen i dessa webbläsare.

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

Skrivskyddat tillstånd

Lägg till det readonlybooleska attributet på en ingång för att förhindra modifiering av ingångens värde. Skrivskyddade ingångar ser ljusare ut (precis som inaktiverade ingångar), men behåller standardmarkören.

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

Hjälp text

Hjälptext på blocknivå för formulärkontroller.

Associera hjälptext med formulärkontroller

Hjälptext bör uttryckligen associeras med formulärkontrollen den relaterar till med aria-describedbyattributet. Detta kommer att säkerställa att hjälpmedel – som skärmläsare – kommer att meddela denna hjälptext när användaren fokuserar eller går in 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>

Validering tillstånd

Bootstrap inkluderar valideringsstilar för fel-, varnings- och framgångstillstånd på formulärkontroller. För att använda, lägg till .has-warning, .has-error, eller .has-successtill det överordnade elementet. Alla .control-label, .form-control, och .help-blockinom det elementet kommer att få valideringsstilarna.

Förmedlar valideringsstatus till hjälpmedelstekniker och färgblinda användare

Att använda dessa valideringsstilar för att beteckna tillståndet för en formulärkontroll ger endast en visuell, färgbaserad indikation, som inte kommer att förmedlas till användare av hjälpmedel - såsom skärmläsare - eller till färgblinda användare.

Se till att en alternativ indikation på tillstånd också tillhandahålls. Du kan till exempel inkludera en ledtråd om tillstånd i själva formulärkontrollens <label>text (som är fallet i följande kodexempel), inkludera en Glyphicon (med lämplig alternativ text genom att använda .sr-onlyklassen - se Glyphicon-exemplen ), eller genom att tillhandahålla en ytterligare hjälptextblock . Specifikt för hjälpmedelstekniker kan kontroller för ogiltiga formulär också tilldelas ett 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 valfria ikoner

Du kan också lägga till valfria feedbackikoner med tillägg av .has-feedbackoch den högra ikonen.

Feedbackikoner fungerar bara med textelement <input class="form-control">.

Ikoner, etiketter och inmatningsgrupper

Manuell placering av återkopplingsikoner krävs för ingångar utan etikett och för ingångsgrupper med ett tillägg till höger. Du uppmuntras starkt att tillhandahålla etiketter för alla ingångar av tillgänglighetsskäl. Om du vill förhindra att etiketter visas, dölj dem med .sr-onlyklassen. Om du måste klara dig utan etiketter, justera topvärdet på feedbackikonen. För indatagrupper, justera rightvärdet till ett lämpligt pixelvärde beroende på bredden på ditt tillägg.

Förmedlar ikonens betydelse till hjälpmedel

För att säkerställa att hjälpmedel – som skärmläsare – korrekt förmedlar innebörden av en ikon, bör ytterligare dold text inkluderas i .sr-onlyklassen och uttryckligen associeras med formulärkontrollen den relaterar till att använda aria-describedby. Alternativt, se till att innebörden (till exempel det faktum att det finns en varning för ett visst textinmatningsfält) förmedlas i någon annan form, till exempel genom att ändra texten för den faktiska <label>som är kopplad till formulärkontrollen.

Även om följande exempel redan nämner valideringstillståndet för deras respektive formulärkontroller i själva <label>texten, har ovanstående teknik (med .sr-onlytext och aria-describedby) inkluderats i illustrativt syfte.

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

Valfria ikoner i horisontella och infogade former

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

Valfria ikoner med dolda `.sr-only`etiketter

Om du använder .sr-onlyklassen för att dölja en formulärkontroll <label>(istället för att använda andra etikettalternativ, såsom aria-labelattributet), kommer Bootstrap automatiskt att justera ikonens position när den har lagts till.

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

Kontrollera storlek

Ställ in höjder med klasser som .input-lg, och ställ in bredder med rutnätskolumnklasser som .col-lg-*.

Mått på höjden

Skapa högre eller kortare formkontroller som matchar knappstorlekar.

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

Horisontella formgruppstorlekar

Gör snabbt storlek på etiketter och formulärkontroller .form-horizontalgenom att lägga till .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>

Kolumnstorlek

Slå in indata i rutnätskolumner, eller något anpassat överordnat element, för att enkelt framtvinga önskade 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>

Knapptaggar

Använd knappklasserna på ett <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">

Kontextspecifik användning

Medan knappklasser kan användas på <a>och <button>element, stöds endast <button>element i våra nav- och navbarkomponenter.

Länkar som fungerar som knappar

Om <a>elementen används för att fungera som knappar – som utlöser funktionalitet på sidan, snarare än att navigera till ett annat dokument eller avsnitt på den aktuella sidan – bör de också ges en lämplig role="button".

Återgivning i flera webbläsare

Som en bästa praxis rekommenderar vi starkt att du använder <button>elementet när det är möjligt för att säkerställa matchande rendering i flera webbläsare.

Bland annat finns det en bugg i Firefox <30 som hindrar oss från att ställa in de line-heightof <input>-baserade knapparna, vilket gör att de inte exakt matchar höjden på andra knappar på Firefox.

alternativ

Använd någon av de tillgängliga knappklasserna för att snabbt skapa en formaterad knapp.

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

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening till en knapp ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (den synliga texten på knappen), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Storlekar

Vill du ha större eller mindre knappar? Lägg till .btn-lg, .btn-sm, eller .btn-xsför ytterligare storlekar.

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

Skapa blocknivåknappar – de som spänner över hela bredden av en förälder – genom att lägga till .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>

Aktivt tillstånd

Knappar visas nedtryckta (med mörkare bakgrund, mörkare ram och infälld skugga) när de är aktiva. För <button>element görs detta via :active. För <a>element är det gjort med .active. Du kan dock använda .activepå <button>s (och inkludera aria-pressed="true"attributet) om du skulle behöva replikera det aktiva tillståndet programmatiskt.

Knappelement

Du behöver inte lägga till :activeeftersom det är en pseudoklass, men om du behöver tvinga fram samma utseende, fortsätt och lägg till .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>

Ankare element

Lägg till .activeklassen på <a>knappar.

Primär länk Länk

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

Inaktiverat tillstånd

Få knappar att se oklickbara ut genom att tona tillbaka dem med opacity.

Knappelement

Lägg till disabledattributet till <button>knappar.

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

Kompatibilitet över webbläsare

Om du lägger till disabledattributet till en <button>, kommer Internet Explorer 9 och lägre att göra text grå med en otäck textskugga som vi inte kan fixa.

Ankare element

Lägg till .disabledklassen på <a>knappar.

Primär länk Länk

<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 använder .disabledsom en verktygsklass här, liknande den vanliga .activeklassen, så inget prefix krävs.

Varning för länkfunktioner

Den här klassen använder pointer-events: noneför att försöka inaktivera länkfunktionen för <a>s, men den CSS-egenskapen är ännu inte standardiserad och stöds inte fullt ut i Opera 18 och senare, eller i Internet Explorer 11. Dessutom, även i webbläsare som stöder pointer-events: none, tangentbord navigeringen förblir opåverkad, vilket innebär att seende tangentbordsanvändare och användare av hjälpmedel fortfarande kommer att kunna aktivera dessa länkar. Så för att vara säker, använd anpassad JavaScript för att inaktivera sådana länkar.

Responsiva bilder

Bilder i Bootstrap 3 kan göras responsvänliga genom tillägg av .img-responsiveklassen. Detta gäller max-width: 100%;, height: auto;och display: block;för bilden så att den skalas snyggt till det överordnade elementet.

För att centrera bilder som använder .img-responsiveklassen, använd .center-blockistället för .text-center. Se avsnittet med hjälparklasser för mer information om .center-blockanvändning.

SVG-bilder och IE 8-10

I Internet Explorer 8-10 är SVG-bilder med .img-responsiveoproportionerligt stora. För att fixa detta, lägg till width: 100% \9;vid behov. Bootstrap tillämpar inte detta automatiskt eftersom det orsakar komplikationer för andra bildformat.

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

Bildformer

Lägg till klasser i ett <img>element för att enkelt utforma bilder i alla projekt.

Kompatibilitet över webbläsare

Tänk på att Internet Explorer 8 saknar stöd för rundade hörn.

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

Kontextuella färger

Förmedla mening genom färg med en handfull betoningsklasser. Dessa kan också tillämpas på länkar och kommer att mörkna vid hovring precis som våra standardlänkstilar.

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>

Att hantera specificitet

Ibland kan betoningsklasser inte tillämpas på grund av specificiteten hos en annan väljare. I de flesta fall är en tillräcklig lösning att slå in din text i en <span>med klassen.

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation, som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (de kontextuella färgerna används endast för att förstärka betydelsen som redan finns i texten/uppmärkningen), eller inkluderas på alternativa sätt, såsom ytterligare text gömd med .sr-onlyklassen .

Kontextuella bakgrunder

I likhet med de kontextuella textfärgsklasserna kan du enkelt ställa in bakgrunden för ett element till valfri kontextuell klass. Ankarkomponenter blir mörkare när du svävar, precis som textklasserna.

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>

Att hantera specificitet

Ibland kan kontextuella bakgrundsklasser inte tillämpas på grund av specificiteten hos en annan väljare. I vissa fall är en tillräcklig lösning att slå in ditt elements innehåll i en <div>med klassen.

Förmedla mening till hjälpmedel

Som med kontextuella färger , se till att all betydelse som förmedlas genom färg också förmedlas i ett format som inte är rent presentationsmässigt.

Stäng ikon

Använd den allmänna stängningsikonen för att avvisa innehåll som modals och varningar.

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

Carets

Använd rader för att indikera rullgardinsmenyns funktionalitet och riktning. Observera att standardinställningen vänds automatiskt i rullgardinsmenyer .

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

Snabba flyter

Flytta ett element till vänster eller höger med en klass. !importantingår för att undvika specificitetsproblem. Klasser kan också användas 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();
}

Centrera innehållsblockeringar

Ställ in ett element till display: blockoch centrera via margin. Finns som en mixin och klass.

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

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

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

Clearfix

Rensa enkelt floats genom att lägga .clearfix till i det överordnade elementet . Använder microclearfix som populärt av Nicolas Gallagher. Kan även användas 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();
}

Visa och dölja innehåll

Tvinga ett element att visas eller dölja ( inklusive för skärmläsare ) med hjälp av .showoch .hiddenklasser. Dessa klasser använder !importantför att undvika specificitetskonflikter, precis som de snabba flöten . De är endast tillgängliga för växling av blocknivå. De kan också användas som mixins.

.hideär tillgänglig, men den påverkar inte alltid skärmläsare och är utfasad från och med v3.0.1. Använd .hiddeneller .sr-onlyistället.

Dessutom .invisiblekan den användas för att endast växla synligheten för ett element, vilket betyder att det displayinte ändras och elementet fortfarande kan påverka dokumentflödet.

<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äsare och tangentbordsnavigeringsinnehåll

Dölj ett element för alla enheter utom skärmläsare med .sr-only. Kombinera .sr-onlymed .sr-only-focusableför att visa elementet igen när det är fokuserat (t.ex. av en användare som bara använder tangentbordet). Nödvändigt för att följa bästa praxis för tillgänglighet . Kan även användas 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();
}

Bildbyte

Använd .text-hideklassen eller mixin för att ersätta ett elements textinnehåll med en bakgrundsbild.

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

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

För snabbare mobilvänlig utveckling, använd dessa verktygsklasser för att visa och dölja innehåll per enhet via mediefråga. Dessutom ingår verktygsklasser för att växla innehåll vid utskrift.

Försök att använda dessa i begränsad omfattning och undvik att skapa helt olika versioner av samma webbplats. Använd dem istället för att komplettera varje enhets presentation.

Tillgängliga klasser

Använd en singel eller en kombination av de tillgängliga klasserna för att växla innehåll mellan brytpunkter i visningsporten.

	Extra små enheterTelefoner (<768px)	Små enheterSurfplattor (≥768px)	Medelstora enheterStationära datorer (≥992px)	Stora enheterStationära datorer (≥1200px)
`.visible-xs-*`	Synlig	Dold	Dold	Dold
`.visible-sm-*`	Dold	Synlig	Dold	Dold
`.visible-md-*`	Dold	Dold	Synlig	Dold
`.visible-lg-*`	Dold	Dold	Dold	Synlig
`.hidden-xs`	Dold	Synlig	Synlig	Synlig
`.hidden-sm`	Synlig	Dold	Synlig	Synlig
`.hidden-md`	Synlig	Synlig	Dold	Synlig
`.hidden-lg`	Synlig	Synlig	Synlig	Dold

Från och med v3.2.0 finns .visible-*-*klasserna för varje brytpunkt i tre varianter, en för varje CSS- displayegenskapsvärde som anges nedan.

Grupp av klasser	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Så, för extra små ( xs) skärmar till exempel, är de tillgängliga .visible-*-*klasserna: .visible-xs-block, .visible-xs-inline, och .visible-xs-inline-block.

Klasserna .visible-xs, .visible-sm, .visible-mdoch .visible-lgfinns också, men är utfasade från och med v3.2.0 . De motsvarar ungefär .visible-*-block, förutom med ytterligare specialfall för växlingsrelaterade <table>element.

Tryckklasser

I likhet med vanliga responsiva klasser, använd dessa för att växla innehåll för utskrift.

Klasser	Webbläsare	Skriva ut
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Dold	Synlig
`.hidden-print`	Synlig	Dold

Klassen .visible-printfinns också men är utfasad från och med v3.2.0. Det motsvarar ungefär .visible-print-block, förutom med ytterligare specialfall för <table>-relaterade element.

Testfall

Ändra storlek på din webbläsare eller ladda på olika enheter för att testa de responsiva verktygsklasserna.

Syns på...

Gröna bockar indikerar att elementet är synligt i din nuvarande visningsport.

Extra liten ✔ Syns på x-small

Små ✔ Syns på liten

Medium ✔ Syns på medium

Stor ✔ Syns på large

Extra liten och liten ✔ Syns på x-small och small

Medium och stor ✔ Synlig på medium och large

Extra liten och medium ✔ Synlig på x-small och medium

Små och stora ✔ Syns på smått och stort

Extra liten och stor ✔ Syns på x-small och large

Small och medium ✔ Synlig på small och medium

Gömd på...

Här indikerar gröna bockar också att elementet är dolt i din nuvarande visningsport.

Extra liten ✔ Dold på x-small

Små ✔ Dold på liten

Medium ✔ Dolt på medium

Stor ✔ Dold på stor

Extra liten och liten ✔ Dold på x-small och small

Medium och stor ✔ Dolt på medium och large

Extra liten och medium ✔ Dold på x-small och medium

Små och stora ✔ Dolt på smått och stort

Extra liten och stor ✔ Dold på x-small och large

Small och medium ✔ Dolt på små och medelstora

Bootstraps CSS bygger på Less, en förprocessor med ytterligare funktionalitet som variabler, mixins och funktioner för att kompilera CSS. De som vill använda källfilen Less istället för våra kompilerade CSS-filer kan använda de många variabler och mixin vi använder i hela ramverket.

Gridvariabler och mixins behandlas i avsnittet Gridsystem .

Kompilera Bootstrap

Bootstrap kan användas på minst två sätt: med den kompilerade CSS eller med källfilen Less. För att kompilera Less-filerna, se avsnittet Komma igång för hur du ställer in din utvecklingsmiljö för att köra de nödvändiga kommandona.

Tredje parts kompileringsverktyg kan fungera med Bootstrap, men de stöds inte av vårt kärnteam.

Variabler

Variabler används genom hela projektet som ett sätt att centralisera och dela vanliga värden som färger, mellanrum eller teckensnittsstaplar. För en fullständig uppdelning, se Customizer .

Färger

Använd enkelt två färgscheman: gråskala och semantisk. Gråskalefärger ger snabb åtkomst till vanliga nyanser av svart medan semantik inkluderar olika färger som tilldelats meningsfulla kontextuella värden.

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

Använd någon av dessa färgvariabler som de är eller tilldela dem till mer meningsfulla variabler för ditt projekt.

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

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

Ställningar

En handfull variabler för att snabbt anpassa viktiga delar av din webbplats skelett.

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

Länkar

Stil enkelt dina länkar med rätt färg med bara ett värde.

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

Observera att den @link-hover-coloranvänder en funktion, ett annat fantastiskt verktyg från Less, för att automatiskt skapa rätt svävarfärg. Du kan använda darken, lighten, saturate, och desaturate.

Typografi

Ställ enkelt in typsnitt, textstorlek, ledande och mer med några snabba variabler. Bootstrap använder sig av dessa också för att tillhandahålla enkla typografiska 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

Två snabba variabler för att anpassa platsen och filnamnet för dina ikoner.

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

Komponenter

Komponenter i Bootstrap använder vissa standardvariabler för att ställa in vanliga värden. Här är de mest använda.

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

Leverantörsblandningar

Leverantörsmixer är mixins för att stödja flera webbläsare genom att inkludera alla relevanta leverantörsprefix i din kompilerade CSS.

Lådastorlek

Återställ dina komponenters boxmodell med en enda mixin. För sammanhang, se den här användbara artikeln från Mozilla .

Mixin är föråldrat från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta att använda mixin internt tills Bootstrap v4.

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

Rundade hörn

Idag stöder alla moderna webbläsare border-radiusegenskapen utan prefix. Som sådan finns det ingen .border-radius()mixin, men Bootstrap inkluderar genvägar för att snabbt runda två hörn på en viss sida av ett 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) skuggor

Om din målgrupp använder de senaste och bästa webbläsarna och enheterna, se till att bara använda box-shadowegendomen på egen hand. Om du behöver stöd för äldre Android (pre-v4) och iOS-enheter (pre-iOS 5), använd den föråldrade mixin för att hämta de nödvändiga-webkit prefixet.

Mixin är föråldrat från och med v3.1.0 , eftersom Bootstrap inte officiellt stöder de föråldrade plattformarna som inte stöder standardegenskapen. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta att använda mixin internt tills Bootstrap v4.

Se till att använda rgba()färger i dina boxskuggor så att de smälter så sömlöst som möjligt med bakgrunder.

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

Övergångar

Flera mixins för flexibilitet. Ställ in all övergångsinformation med en, eller ange en separat fördröjning och varaktighet efter behov.

Mixinerna är utfasade från och med v3.2.0 , med introduktionen av Autoprefixer. För att bevara bakåtkompatibiliteten kommer Bootstrap att fortsätta använda mixinerna internt fram till 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

Rotera, skala, översätt (flytta) eller snedställ ett objekt.

.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

En enda mixin för att använda alla CSS3:s animeringsegenskaper i en deklaration och andra mixin för enskilda egenskaper.

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

Opacitet

Ställ in opaciteten för alla webbläsare och tillhandahåll en filterreserv för IE8.

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

Platshållartext

Ange sammanhang för formulärkontroller inom varje fält.

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

Kolumner

Generera kolumner via CSS inom ett enda 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

Förvandla enkelt valfri två färger till en bakgrundsgradient. Bli mer avancerad och ange en riktning, använd tre färger eller använd en radiell gradient. Med en enda mixin får du alla prefixade syntaxer du behöver.

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

Du kan också ange vinkeln för en linjär standardgradient i två färger:

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

Om du behöver en gradient i barberarränder är det enkelt också. Ange bara en enstaka färg så lägger vi över en genomskinlig vit rand.

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

Upp anten och använd tre färger istället. Ställ in den första färgen, den andra färgen, den andra färgens färgstopp (ett procentvärde som 25 %) och den tredje färgen med dessa blandningar:

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

Se upp! Om du någonsin skulle behöva ta bort en gradient, se till att ta bort alla IE-specifika filterdu kan ha lagt till. Du kan göra det genom att använda .reset-filter()mixin bredvid background-image: none;.

Verktygsblandningar

Utility mixins är mixins som kombinerar annars orelaterade CSS-egenskaper för att uppnå ett specifikt mål eller uppgift.

Clearfix

Glöm att lägga class="clearfix"till något element och tillsätt istället .clearfix()mixin där det är lämpligt. Använder microclearfix från Nicolas Gallagher .

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

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

Horisontell centrering

Centrera snabbt vilket element som helst inom dess överordnade. Kräver widtheller max-widthska ställas in.

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

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

Storlekshjälpare

Ange enklare dimensionerna för ett objekt.

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

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

Ändra storlek på textområden

Konfigurera enkelt storleksändringsalternativen för alla textområden eller andra element. Standardinställningen är normalt webbläsarbeteende ( both).

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

Trunkerar text

Trunkera enkelt text med en ellips med en enda mixin. Kräver att elementet är blockeller inline-blocknivå.

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

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

Retina bilder

Ange två bildvägar och @1x-bilddimensionerna, så kommer Bootstrap att tillhandahålla en @2x-mediafråga. Om du har många bilder att visa, överväg att skriva din näthinnabild CSS manuellt i en enda mediefråga.

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

Även om Bootstrap är byggd på Less, har den också en officiell Sass-port . Vi underhåller det i ett separat GitHub-förråd och hanterar uppdateringar med ett konverteringsskript.

Vad ingår

Eftersom Sass-porten har en separat repo och betjänar en något annan publik, skiljer sig innehållet i projektet mycket från det huvudsakliga Bootstrap-projektet. Detta säkerställer att Sass-porten är så kompatibel med så många Sass-baserade system som möjligt.

Väg	Beskrivning
`lib/`	Ruby gem-kod (Sass-konfiguration, Rails och Compass-integrationer)
`tasks/`	Konverteringsskript (växling uppströms Less till Sass)
`test/`	Sammanställningstester
`templates/`	Kompasspaketmanifest
`vendor/assets/`	Sass, JavaScript och teckensnittsfiler
`Rakefile`	Interna uppgifter, såsom rake och convert

Besök Sass-portens GitHub-förråd för att se dessa filer i aktion.

Installation

För information om hur du installerar och använder Bootstrap för Sass, konsultera GitHub-förvaret readme . Det är den mest uppdaterade källan och innehåller information för användning med Rails, Compass och standard Sass-projekt.

Bootstrap för Sass

CSS

Översikt

HTML5 doctype

Mobilen först

Typografi och länkar

Normalisera.css

Behållare

Rutsystem

Introduktion

Mediafrågor

Rutnätsalternativ

Exempel: Staplad-till-horisontell

Exempel: Vätskebehållare

Exempel: Mobil och stationär

Exempel: mobil, surfplatta, dator

Exempel: Kolumnlindning

Responsiva kolumnåterställningar

Förskjutning av kolumner

Häckande kolumner

Kolumnordning

Mindre mixins och variabler

Variabler

Mixins

Exempel användning

Typografi

Rubriker

h1. Bootstrap rubrik

h2. Bootstrap rubrik

h3. Bootstrap rubrik

h4. Bootstrap rubrik

h5. Bootstrap rubrik

h6. Bootstrap rubrik

h1. Bootstrap-rubrik Sekundär text

h2. Bootstrap-rubrik Sekundär text

h3. Bootstrap-rubrik Sekundär text

h4. Bootstrap-rubrik Sekundär text

h5. Bootstrap-rubrik Sekundär text

h6. Bootstrap-rubrik Sekundär text

Kroppskopia

Kopia av blykropp

Byggd med mindre

Inline textelement

Markerad text

Raderad text

Genomstruken text

Infogad text

Understruken text

Liten text

Djärv

Kursiv

Alternativa element

Uppriktningsklasser

Transformationsklasser

Förkortningar

Grundläggande förkortning

Initialism

Adresser

Blockcitat

Standard blockcitat

Blockcitat alternativ

Namnge en källa

Alternativa skärmar

Listor

Obeställd

Beställde

Ostylad

I kö

Beskrivning

Horisontell beskrivning

Automatisk trunkering

Koda

I kö

Användarinmatning

Grundblock

Variabler

Provutgång

Tabeller

Grundläggande exempel

Randiga rader

Kompatibilitet över webbläsare

Demo `:focus`tillstånd

Varning om länkfunktionalitet`<a>`

Valfria ikoner med dolda `.sr-only`etiketter