Få oplysninger om vigtige brikker i bootstrap's infrastruktur, herunder vores tilgang til bedre, hurtigere, stærkere webudvikling.

HTML5 doctype

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

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

Mobile første

Med bootstrap-2, tilføjede vi valgfrit mobilt venligt stilarter for centrale aspekter af rammerne. Med bootstrap-3, vi har lavet om projektet til at være mobil venlige fra start. I stedet for at tilføje valgfri mobile stilarter, de er bagt ind i kernen. I øvrigt bootstrap er mobile første. Mobile første stilarter kan findes i hele bibliotek i stedet for i separate filer.

For at sikre korrekt gengivelse og tryk på zoom, Tilføj viewporten metatag til din <head>.

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

Du kan deaktivere zoom funktioner på mobile enheder ved at tilføje user-scalable=no til viewporten metatag. Dette deaktiverer zoom, så brugere kan kun rulle, og resultaterne i dit sted føler du dig mere som en oprindelig ansøgning. Samlet kan vi ikke anbefale denne på hvert sted, så vær forsigtig!

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

Typografi og links

Bootstrap-sæt grundlæggende globale display, typografi, og knytte stilarter. Konkret har vi:

background-color: #fff; body
Brug @font-family-base, @font-size-base og @line-height-base egenskaber som vores typografiske base
Angive global link farve via @link-color og anvend link understreger kun på :hover

Disse stilarter kan findes i scaffolding.less.

Normaliser.css

For forbedret cross-browser gengivelse, vi bruger normalisere.css, et projekt Nicolas Gallagher og Jonathan Neal.

Containers

Bootstrap kræver en indeholder et element af binding site indhold og house vores grid system. Du kan vælge én af to containere til brug i dine projekter. Bemærk, at padding og mere, hverken beholder er nestable.

Brug .container en hurtigt reagerende fast bredde beholder.

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

Brug .container-fluid for en fuld bredde beholder, spænder over hele bredden af din viewport.

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

Bootstrap omfatter en hurtigtreagerende, mobile første flydende grid-system, som kan skaleres op til 12 kolonner med enheden eller viewport størrelse øges. Det omfatter foruddefinerede klasser til nem opsætning, samt kraftig mixins for at generere flere semantiske layout.

Introduktion

Grid systemer bruges til at oprette sidelayout gennem en serie af rækker og kolonner, som parlamentet dit indhold. Sådan en bootstrap-grid-systemet fungerer:

Rækker skal placeres inden for en .container (fast-bredde) eller .container-fluid (fuld bredde) for korrekt justering og polstring.
Brug rækker til at skabe tværgående grupper af kolonner.
Indhold skal placeres i kolonner, og kun de kolonner kan være umiddelbare børn af rækker.
Foruddefinerede grid klasser .row og .col-xs-4 er tilgængelige for hurtigt grid layout. Mindre mixins kan også anvendes til mere semantiske layouts.
Kolonner oprettes tagrender (mellemrum mellem kolonne indhold) via padding. At polstringen er forskudt i rækker for den første og sidste kolonne via negativ margen på .rows.
Den negative margen derfor nedenstående eksempler er outdented. Det betyder, at indholdet i grid kolonner er linet op med ikke-grid indhold.
Gitter kolonner oprettes ved angivelse af antallet af tolv tilgængelige kolonner, du ønsker at span. For eksempel tre lige store kolonner vil bruge tre .col-xs-4.
Hvis der er mere end 12 kolonner er placeret i en enkelt række, hver gruppe af ekstra kolonner, som én enhed, wrap på en ny linje.
Gitter klasser gælder for enheder med skærmens bredde større end eller lig med tærskelværdien størrelser, og tilsidesætte grid klasser rettet mod mindre enheder. Derfor anvender alle .col-md- klasse til et element vil ikke kun påvirke dens styling på mellemlang enheder, men også om store enheder, hvis en .col-lg- klasse er ikke til stede.

Se eksempler på anvendelsen af disse principper på din kode.

Media forespørgsler

Vi bruger følgende medier forespørgsler i vores mindre filer for at oprette nãƒâ brudpunkter i vores grid system.

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

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

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

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

Vi lejlighedsvis udvider disse medier forespørgsler til en max-width for at begrænse CSS til en smallere indstilling af enheder.

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

Gitter indstillinger

Se, hvordan aspekter af bootstrap-grid-system arbejde på tværs af flere enheder med en praktisk tabel.

	Ekstra små enheder telefoner (<768px)	Små enheder tabletter (≥768px)	Mellemstore enheder stationære (≥992px)	Store enheder stationære (≥1200px)
Gitter adfærd	Vandret hele tiden	Kollapset til start, vandret over brudpunkter
Container bredde	Ingen (auto)	750px	970px	1170px
Klasse-prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Antal kolonner	12
Kolonnebredde	Auto	~62px	~81px	~97px
Tagrender bredde	30px (15px på hver side af en kolonne)
Nestable	Ja
Forskydninger	Ja
Kolonnerækkefølgen	Ja

Eksempel: Stablet til vandret

Ved hjælp af et enkelt sæt .col-md-* grid klasser, kan du oprette en grundlæggende grid-systemet, der starter i stablet på mobile enheder og tablet-enheder (den ekstra lille til lille udvalg) før bliver vandret på skrivebordet (medium) enheder. Sæt gitteret kolonner i enhver .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Eksempel: væskebeholder

Drej en fast bredde grid layout til et full-width layout ved at ændre din yderste .container til .container-fluid.

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

Eksempel: mobil og stationær pc

Vil du ikke dine kolonner til bare stak i mindre enheder? Brug den ekstra små og mellemstore enhed grid klasser ved at tilføje .col-xs-* .col-md-* til dine kolonner. Se eksemplet nedenfor for en bedre idé om, hvordan det hele fungerer.

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

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

.col-xs-6

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

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

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

Eksempel: Mobil, tablet, stationære pc'er

Bygger videre på det foregående eksempel ved at skabe endnu mere dynamisk og kraftfuld layouts med tablet .col-sm-* klasser.

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

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

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

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

Eksempel: Kolonne indpakning

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

.col-xs-9

.col-xs-4
Da 9 + 4 = 13 > 12, bliver denne 4-kolonner bred div ombrudt på en ny linie som en sammenhængende enhed.

.col-xs-6
Subsequent columns continue along the new line.

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

Hurtigtreagerende kolonne nulstiller

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

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

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

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

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

Ud over kolonne clearing på hurtigtreagerende brudpunkter, du kan bruge til at nulstil forskydninger, skubber eller trækker. Se det i aktion i gitteret eksempel.

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

Udligning kolonner

Flytte kolonner til højre vha. .col-md-offset-* klasser. Disse klasser stigning i venstre margen af en kolonne ved * kolonner. For eksempel .col-md-offset-4 flytter .col-md-4 over fire kolonner.

.col-md-4

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

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

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

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

Nesting kolonner

For at indlejre dit indhold med standardgitteret, tilføje en ny .row og .col-sm-* kolonner i en eksisterende .col-sm-* kolonne. Indlejrede rækker skal indeholde et sæt kolonner at tilføje op til 12 eller mindre (det er ikke nødvendigt at bruge alle 12 tilgængelige kolonner).

Level 1: .col-sm-9

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

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

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

Kolonnerækkefølgen

Du kan nemt ændre vores indbyggede grid kolonner med .col-md-push-* og .col-md-pull-* modifikator klasser.

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

Less mixins og variabler

Udover forudopbyggede grid klasser for hurtig layouts, bootstrap omfatter mindre variabler og mixins for hurtigt at generere dine egne enkle, semantiske layouts.

Variabler

Variabler bestemme antallet af kolonner, rendestenen bredde, og medier søg på hvilket punkt begynder flydende kolonner. Vi bruger disse til at generere de foruddefinerede grid klasser dokumenteret ovenfor, samt til den brugerdefinerede mixins nedenfor.

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

Mixins

Mixins bruges sammen med gitter variabler til at oprette semantiske CSS for de enkelte grid kolonner.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Eksempel på brug

Du kan ændre variablerne til dine egne brugerdefinerede værdier, eller blot benytte mixins med standardværdierne. Her er et eksempel på anvendelse af standardindstillinger for at skabe et to-kolonne layout med et mellemrum mellem.

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

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

Positioner

Alle HTML-koder, <h1> <h6>, er tilgængelige. .h1 Gennem .h6 klasser er også tilgængelige, når du ønsker at matche den font styling af en overskrift men stadig ønsker din tekst skal vises inline.

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

Oprette lysere, sekundært tekst i enhver retning med et generisk <small> eller .small klasse.

h1. Bootstrap overskrift Sekundær tekst

h2. Bootstrap overskrift Sekundær tekst

h3. Bootstrap overskrift Sekundær tekst

h4. Bootstrap overskrift Sekundær tekst

h5. Bootstrap overskrift Sekundær tekst

h6. Bootstrap overskrift Sekundær tekst

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

Brødtekst

Bootstrap's global standard font-size 14px, med et line-height 1.428. Dette anvendes til <body> og alle punkter. Derudover <p> (punkt) modtager en bundmargen halvdelen af deres beregnede line-height (10px som standard).

Nullam quis risus eget urna mollis ornare veau eu leo. Akk. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id for knappens id nibh ultricies vehicula.

Akk. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla ikke metus auctor fringilla. Duis mollis, est ikke commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla ikke metus auctor fringilla.

Mæcen sed diam eget risus varius blandit sidde amet ikke magna. Donec id elit ikke mi porta gravida (graviditeter på eget metus. Duis mollis, est ikke commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Føre brødtekst

Få et punkt skiller sig ud ved at tilføje .lead.

Udforsk Vivamus' store vinbutik sagittis lacus vel augue laoreet rutrum faucibus for knappens auctor. Duis mollis, est ikke commodo luctus.

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

Bygget med Less

Den typografiske skala er baseret på to mindre variabler i variabler.mindre: @font-size-base og @line-height-base. Den første er bunden font-size bruges overalt og den anden er base line-height. Vi bruger disse variabler og nogle enkle matematiske til at oprette de margener, paddings og højder på alle vores type og meget mere. Tilpas dem og bootstrap tilpasser.

Inline tekstelementer

Markeret tekst

For at fremhæve en tekst på grund af dets relevans i en anden sammenhæng, brug <mark> tag.

You can use the mark tag to fremhæv text.

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

Slettet tekst

Angiver blokke af tekst, der er blevet slettet bruger <del> tag.

~~Denne udgave er beregnet til at blive behandlet som slettede tekst.~~

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

Gennemstreget tekst

Angiver blokke af tekst, der ikke længere er relevante brug <s> tag.

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

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

Indsat tekst

Angiver tilføjelser til dokument bruge <ins> tag.

Denne udgave er beregnet til at blive behandlet som et tillæg til dokument.

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

Understreget tekst

For at understrege tekst brug <u> tag.

Denne tekst vil gøre som understregede

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

Udnytte HTML's standard vægt tags med let stilarter.

Lille tekst

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

Du kan også bruge et inline-element med .small i stedet for et <small>.

Denne udgave er beregnet til at blive behandlet som fine print.

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

Fed

For at understrege et udsnit af tekst med en tungere font-weight.

Følgende udsnit af tekst er gengives som fed tekst.

<strong>rendered as bold text</strong>

Kursiv

For at understrege et udsnit af tekst med kursiv.

Følgende udsnit af tekst er gengives i kursiv tekst.

<em>rendered as italicized text</em>

Alternative enheder

Du er velkommen til at bruge <b> og <i> i HTML5. <b> Er beregnet til at fremhæve ord eller sætninger uden fremføring yderligere betydning mens <i> er mest for voice, tekniske begreber, osv..

Justering klasser

Du kan nemt justere tekst komponenter med tekst justering klasser.

Venstrestillet tekst.

Midten justeret tekst.

Højrejusteret tekst.

Begrundede tekst.

Ingen ombrydning af tekst.

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

Transformation klasser

Ændre tekst i komponenter med tekst kapitalisering klasser.

Lowercased tekst.

Uppercased tekst.

Kapitaliserede tekst.

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

Forkortelser

Stiliserede gennemførelsen af HTML's <abbr> element med forkortelser og akronymer til vis den udvidede version af musen. Forkortelser med et title egenskab har en lys punkterede nederste kant og et hjælpe markør på musen, hvilket giver en ekstra forbindelse på hover.

Grundlæggende forkortelse

For udvidet tekst på lange kredser om en forkortelse, omfatter title attribut med <abbr> element.

An abbreviation of the word attribute is attr.

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

Initialism

Tilføj .initialism til en forkortelse for en lidt mindre font-størrelse.

HTML is the best thing since sliced bread.

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

Adresser

Nuværende kontaktoplysninger for den nærmeste forfader eller hele kroppen. Bevare formateringen ved at afslutte alle linier med <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Fulde navn
first.last@example.com

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

Citeres blokke af indhold fra en anden kilde i dokumentet.

Standard blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem Ipsum sidde for knappens 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>

Blockquote indstillinger

Stil og indhold ændres til enkle variationer på en standard <blockquote>.

Navngivning af en kilde

Tilføje en <footer> for at identificere kilden. Wrap navn på kilden arbejde i <cite>.

Lorem Ipsum sidde for knappens amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Someone famous in Kilde Titel

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

Alternativt vises

Tilføj .blockquote-reverse for et blockquote med højre-justeret indhold.

Lorem Ipsum sidde for knappens amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Someone famous in Kilde Titel

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

Lister

Usorteret

En liste over emner, som det for er ikke udtrykkeligt spørgsmål.

Lorem Ipsum sidde for knappens amet
Consectetur adipiscing elit
Heltal molestie lorem på Massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla veau
Aenean sit amet erat nunc
Eget porttitor lorem

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

Sorteret

En liste over emner, som er udtrykkeligt spørgsmål.

Lorem Ipsum sidde for knappens amet
Consectetur adipiscing elit
Heltal molestie lorem på Massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla veau
Aenean sit amet erat nunc
Eget porttitor lorem

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

Unstyled

Fjern standard list-style og venstre margen på listeelementer (umiddelbare børn). Dette gælder kun for umiddelbar børn liste poster, hvilket betyder, at du bliver nødt til at tilføje klassen for alle indlejrede lister samt.

Lorem Ipsum sidde for knappens amet
Consectetur adipiscing elit
Heltal molestie lorem på Massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla veau
Aenean sit amet erat nunc
Eget porttitor lorem

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

Inline

Alle poster på listen på en enkelt linje med display: inline-block; og nogle lette polstring.

Lorem Ipsum
Phasellus iaculis
Nulla volutpat

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

Beskrivelse

En liste over begreber med tilhørende beskrivelser.

Beskrivelse lister: En beskrivelse liste er perfekt til at definere termer.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit ikke mi porta gravida (graviditeter på eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Vandret beskrivelse

Lave priser og beskrivelser i <dl> linje op side om side. Starter fra oven som standard <dl>s, men når de navbar - udvider sig, så disse.

Beskrivelse lister: En beskrivelse liste er perfekt til at definere termer.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit ikke mi porta gravida (graviditeter på eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac studieforløb commodo, tortor mauris condimentum nibh ut fermentum massa justo sidde amet risus.

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

Auto-skære

Vandret beskrivelse lister vil forkorte termer, der er for lange til at passe ind i den venstre kolonne med text-overflow. I snævrere visningsfelter, vil de ændre standardindstillingerne stablet layout.

Inline

Wrap inline udsnit af koden med <code>.

For eksempel <section> skal være indpakket som inline.

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

Bruger input

Brug en <kbd> for at angive input, der typisk er indtastet via tastatur.

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>

Basis blok

Brug <pre> for flere linjer kode. Sørg for at undslippe enhver vinkel beslag i koden for korrekt billedgengivelse.

<p>Sample text here...</p>

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

Du kan vælge at tilføje .pre-scrollable klasse, der bliver sat et max-højde på 350px og en y-akse rullepanel.

Variabler

Til at angive variabler <var> tag.

y = mx + b

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

Eksempel output

Angiver blokke prøve output fra et program <samp> tag.

Denne udgave er beregnet til at blive behandlet som eksempel output fra et edb-program.

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

Basis eksempel

For grundlæggende styling—lys polstring og kun vandrette skillevægge—tilsæt base class .table til <table>. Det kan synes at være super redundante, men på grund af den udbredte brug af tabeller til andre plugins som kalendere og dato korttidsbeskæftigede, har vi valgt at isolere vores tilpassede tabel raster.

Optional table caption.
#	Fornavn	Efternavn	Brugernavn
1	Markér	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Fuglen	@twitter

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

Stribede rækker

Brug .table-striped til at tilføje zebra-spredning til en tabelrække i <tbody>.

Cross-browser kompatibilitet

Stribede tabeller er designet ved hjælp af :nth-child CSS selector, som ikke er tilgængelige i Internet Explorer 8.

#	Fornavn	Efternavn	Brugernavn
1	Markér	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Fuglen	@twitter

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

Kantet tabel

Tilføj .table-bordered for grænser på alle sider af bordet og celler.

#	Fornavn	Efternavn	Brugernavn
1	Markér	Otto	@mdo
1	Markér	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry fuglen		@twitter

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

Pegefølsom rækker

Tilføj .table-hover for at aktivere en kredser om rækker i tabellen i en <tbody>.

#	Fornavn	Efternavn	Brugernavn
1	Markér	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry fuglen		@twitter

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

Kondenseret tabel

Tilføj .table-condensed for at lave tabeller mere kompakt ved at sænke cell padding i halve.

#	Fornavn	Efternavn	Brugernavn
1	Markér	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry fuglen		@twitter

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

Kontekstuel klasser

Brug kontekstuel klasser til farve tabel rækker eller individuelle celler.

Klasse	Beskrivelse
`.active`	Gælder det svirrer farve til en bestemt række eller celle
`.success`	Angiver en vellykket eller positive foranstaltninger
`.info`	Angiver, at der er en neutral informativ ændring eller handling
`.warning`	Angiver en advarsel om, at kunne være opmærksom på
`.danger`	Angiver en farlig eller potentielt negative foranstaltninger

#	Kolonneoverskrift	Kolonneoverskrift	Kolonneoverskrift
1	Kolonne indhold	Kolonne indhold	Kolonne indhold
2	Kolonne indhold	Kolonne indhold	Kolonne indhold
3	Kolonne indhold	Kolonne indhold	Kolonne indhold
4	Kolonne indhold	Kolonne indhold	Kolonne indhold
5	Kolonne indhold	Kolonne indhold	Kolonne indhold
6	Kolonne indhold	Kolonne indhold	Kolonne indhold
7	Kolonne indhold	Kolonne indhold	Kolonne indhold
8	Kolonne indhold	Kolonne indhold	Kolonne indhold
9	Kolonne indhold	Kolonne indhold	Kolonne indhold

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

Hurtigtreagerende tabeller

Opret hurtigt reagerende tabeller ved at vikle en .table i .table-responsive at gøre dem rulle vandret på små enheder (under 768px). Når du ser på noget større end 768px bredt, vil du ikke se nogen forskel i disse tabeller.

Firefox og fieldsets

Firefox har nogle akavede fieldset styling med width at forstyrrer den responsive skema. Dette kan ikke tilsidesættes uden en Firefox-specifikke hack, vi ikke i bootstrap:

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

For mere information, læs denne Stakoverløb svar.

#	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift
1	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle
2	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle
3	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle

#	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift	Tabel overskrift
1	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle
2	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle
3	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle	Tabelcelle

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

Basis eksempel

Individuelle form styrer automatisk modtage nogle globale styling. Alle redaktionelle <input>, <textarea> og <select> elementer med .form-control er indstillet til width: 100%; som standard. Wrap etiketter og betjeningsanordninger .form-group for optimal afstand.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>

Du skal ikke blande danne grupper med input-grupper

Bland ikke danne grupper direkte med indgang grupper. I stedet, nest indgangsgruppen indersiden af form gruppe.

Inline-form

Tilføj .form-inline til din <form> til venstre-justeret og inline-block kontrol. Dette gælder kun for formularer i visningsfelter, som er mindst 768px bredt.

Kræver tilpassede bredder

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

Altid tilføje etiketter

Skærmlæsere får problemer med din formular, hvis du ikke har en mærkat for hver indgang. For disse interne formularer, kan du skjule labels ved hjælp af .sr-only klasse.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" 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>

Vandrette form

Brug bootstrap's foruddefinerede grid klasser for at tilpasse labels og grupper af formular kontrol i en vandret layout ved at tilføje .form-horizontal til formularen. Så skifter .form-groups til at opføre sig som gitter rækker, så der er ikke behov for .row.

<form class="form-horizontal" role="form">
  <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>

Styreenheder understøttet

Eksempler på standard Formularkontrolelementer understøttede eksempel form layout.

Indgange

Den mest almindelige form, tekst-baseret input felter. Understøtter alle HTML5 typer: text password datetime datetime-local date month time week number email url search tel, og color.

Type angivelse kræves

Indgange vil kun være fuldt indrettede hvis deres type er korrekt angivet.

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

Indgangsgrupper

For at tilføje integreret tekst eller knapper før og/eller efter en tekst-baseret <input>, tjek indgangsgruppe komponent.

Textarea

Form som understøtter flere linjer tekst. Ændre rows egenskab som nødvendigt.

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

Afkrydsningsfelter og radioer

Afkrydsningsfelter for at vælge en eller flere indstillinger i en liste, mens radioer er for at vælge en indstilling fra mange.

Et afkrydsningsfelt eller radio med disabled attribut vil være indrettet hensigtsmæssigt. Har <label> for at markere afkrydsningsfeltet eller radio viser også en "ikke-tilladt" markøren når brugeren fører musen hen over den etiket, tilføje .disabled klasse til dit .radio, .radio-inline, .checkbox, .checkbox-inline, eller <fieldset>.

Standard (stablet)

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

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

Inline afkrydsningsfelter og radioer

Brug en .checkbox-inline eller .radio-inline klasser på en række afkrydsningsfelter eller radioer til knapper, der vises på den samme linje.

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

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

Checkboxes and radios without labels

Should you have no text within the <label>, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios.

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

Vælger

Brug standardindstillingen, eller tilføje multiple for at få vist flere indstillinger på én gang.

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

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

Statisk kontrol

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</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" role="form">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</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>

Input fokus

Vi fjerner den standard outline stilarter på nogle kontrolelementer og anvende en box-shadow i stedet for :focus.

Demo `:focus` tilstand

Ovenstående eksempel indgang bruger brugerdefinerede typografier i vores dokumentation til at demonstrere :focus på .form-control.

Handicappede indgange

Tilføj disabled booleske attribut på en indgang til at forhindre brugerinput og udløse et lidt anderledes udseende.

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

Fieldsets deaktiveret

Tilføj disabled attribut til en <fieldset> for at deaktivere alle betjeningsanordninger <fieldset> på én gang.

Advarsel om link funktion `<a>`

Vores stilarter pointer-events: none for at prøve at deaktivere linket funktionalitet <a class="btn btn-*"> knapper i denne sag, men at CSS er endnu ikke standardiseret og ikke er fuldt ud understøttet i Opera 18 og under, eller i Internet Explorer 11. Så for at være sikker, anvende brugerdefinerede JavaScript for at deaktivere disse links.

Cross-browser kompatibilitet

Mens bootstrap vil anvende disse stilarter i alle browsere, Internet Explorer 11 og derunder ikke fuldt ud støtte disabled attribut på <fieldset>. Anvend brugerdefinerede JavaScript for at deaktivere fieldset i disse browsere.

<form role="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>

Readonly indgange

Tilføj readonly booleske attribut på en indgang til at forhindre brugerinput og stil det input som deaktiveret.

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

Validering,

Bootstrap omfatter validering stilarter for fejl, advarsel og succes på kontrolelementer. Brug tilføj .has-warning, .has-error eller .has-success til det overordnede element. Enhver .control-label, .form-control og .help-block inden for dette element vil modtage validering stilarter.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Med valgfri ikoner

Du kan også tilføje ekstra feedback ikoner med tilsætning af .has-feedback og højre ikon.

Feedback kun ikoner arbejde med tekstbaserede <input class="form-control"> elementer.

Ikoner, etiketter og input-grupper

Manuel positionering af feedback-ikoner er behov for input uden etiket og indgang grupper med en add-on til højre. Du anbefales at give labels for alle indgange for at lette adgangen. Hvis du vil undgå labels vises, skjule dem med sr-only klasse. Hvis du skal gøre uden etiketter, justere top værdi af feedback ikon. For input-grupper, justere right værdi til en passende pixel værdi, afhængigt af bredden på dit-tilføjelsespakke.

<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">
  <span class="glyphicon glyphicon-ok form-control-feedback"></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">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></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">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Valgfri ikoner i vandret og inline-formularer

<form class="form-horizontal" role="form">
  <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">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>

<form class="form-inline" role="form">
  <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">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Valgfri ikoner med skjult `.sr-only` etiketter

Til formular kontrol med ingen synlig etikette, tilføje .sr-only klasse på etiketten. Bootstrap vil automatisk justere placeringen af ikonet når det er blevet tilføjet.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Styring dimensionering

Indstil højden vha. klasser .input-lg, og sæt bredder med gitter kolonne klasser .col-lg-*.

Højde dimensionering

Opret taller eller kortere form kontrol, som svarer til knap størrelser.

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

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

Vandrette form gruppestørrelser

Hurtigt størrelse etiketter og form kontrol inden for .form-horizontal ved at tilføje .form-group-lg eller .form-group-sm.

<form class="form-horizontal" role="form">
  <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>

Kolonne sortering

Wrap indgange i grid kolonner eller eventuelle brugerdefinerede overordnede element, til nemt at håndhæve ønskede bredder.

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

Hjælpetekst

Block hjælpetekst for kontrolelementer.

<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Indstillinger

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

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

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

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

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

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

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

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

Størrelser

Har du lyst til større eller mindre knapper? Tilføj .btn-lg, .btn-sm eller .btn-xs for yderligere størrelser.

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

Opret block knapper—dem, der dækker den fulde bredde af en overordnet— ved at tilføje .btn-block.

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

Aktiv tilstand

Knapperne vises trykket ned (med en mørkere baggrund, mørkere kant, og indsatte shadow) når aktiv. <button> Elementer, dette gøres via :active. <a> Elementer, kan det gøres med .active. Men du kan bruge .active <button>s hvis du skal kopiere aktiv programindhold.

Knap element

Intet behov for at tilføje :active som det er en pseudo-class, men hvis du har brug for til at tvinge det samme udseende, gå videre og tilføje .active.

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

Anchor element

Tilføj .active klasse <a> knapper.

Primære link Link

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

Deaktiveret tilstand

Make buttons look unclickable by fading them back with opacity.

Knap element

Tilføj disabled attribut til <button> knapper.

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

Cross-browser kompatibilitet

Hvis du tilføjer disabled attribut til en <button>, Internet Explorer 9 samt nedenfor vil gøre teksten grå med en ubehagelig tekst-skygge, som vi ikke kan løse.

Anchor element

Tilføj .disabled klasse <a> knapper.

Primære link Link

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

Vi bruger .disabled som et utility klasse her, svarende til den fælles .active klasse, så intet præfiks er påkrævet.

Link funktionalitet undersøgelsespligt

Denne klasse bruger pointer-events: none at prøve at deaktivere linket funktionalitet <a>s, men at CSS er endnu ikke standardiseret og er ikke fuldt ud understøttet i Opera 18 og under, eller i Internet Explorer 11. Så for at være sikker, anvende brugerdefinerede JavaScript for at deaktivere disse links.

Kontekst-specifik brug

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

Knap mærker

Brug knappen klasser på en <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">

Cross-browser gengivelse

Som bedste praksis, vi anbefaler brug af <button> element hvis muligt for at sikre passende cross-browser gengivelse.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Hurtige billeder

Billeder i bootstrap 3 kan gøres overensstemmende-venligt via tilsætning af .img-responsive klasse. Dette gælder max-width: 100%; og height: auto; til billedet så det skalerer fint til den overordnede element.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

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

Billede profiler

Tilføje klasser til en <img> element til let stil billeder i ethvert projekt.

Cross-browser kompatibilitet

Husk, at Internet Explorer 8 mangler støtte til afrundede hjørner.

A generic square placeholder image with rounded corners

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

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

Kontekstuel farver

Formidle betydning gennem farve med en håndfuld vægt utility klasser. Disse kan også anvendes til links og bliver mørkere på svæve ligesom vores standard link stilarter.

Fusce dapibus, tellus ac studieforløb commodo, tortor nibh mauris.

Nullam id for knappens id nibh ultricies vehicula ut id elit.

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

Mæcen sed diam eget risus varius blandit sidde amet ikke magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla ikke 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>

Behandlingen med specificitet

Undertiden vægt klasser ikke kan anvendes på grund af en anden styreboks. I de fleste tilfælde en tilstrækkelig løsning er at vikle din tekst i en <span> med klasse.

Kontekstuelle baggrund

Ligner den kontekstuelle tekst farve klasser, let at indstille baggrunden for et element til en kontekstuel klasse. Anker komponenter bliver mørkere på musen, ligesom teksten klasser.

Nullam id for knappens id nibh ultricies vehicula ut id elit.

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

Mæcen sed diam eget risus varius blandit sidde amet ikke magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla ikke 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>

Behandlingen med specificitet

Undertiden kontekstuelle baggrund klasser ikke kan anvendes på grund af en anden styreboks. I nogle tilfælde kan en tilstrækkelig løsning er at vikle din enheds indhold i en <div> med klasse.

Luk ikon

Brug den generiske tæt ikon for afskedigelse indhold som modals og alarmer.

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

Carets

Brug carets angiver rullelisten funktioner og retning. Bemærk, at standardværdien caret vende automatisk i dropup menuer.

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

Hurtig flyder

Flydende element til venstre eller højre med en klasse. !important Er medtaget for at undgå specifikke spørgsmål. Klasser kan også bruges som mixins.

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

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

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

Ikke til brug i navbars

For at justere komponenter i navbars med utility klasser, brug .navbar-left eller .navbar-right i stedet. Se navbar - docs for detaljer.

Center indhold blokke

Et element display: block og center via margin. Fås som en mixin og klasse.

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

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

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

Clearfix

Let klare floats ved at tilføje .clearfix de overordnede element. Bruger micro clearfix som var Nicolas Gallagher. Kan også bruges som en mixin.

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

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

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

Vise og skjule indhold

Kraft et element til at blive vist eller skjult ( herunder for skærmlæsere) med .show og .hidden klasser. Disse klasser !important for at undgå specificitet konflikter, ligesom quick flyder. De er kun tilgængelige for blok niveau skiftes. De kan også bruges som mixins.

.hide Er tilgængelige, men ikke altid påvirke skærmlæsere og er frarådede som til v3.0.1. Brug .hidden eller .sr-only i stedet.

Desuden .invisible kan bruges til at skifte kun synligheden af et element, jf. dets display er ikke ændret, og elementet kan stadig påvirke forløbet af dokumentet.

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

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

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

Skærmlæser og tastatur navigation indhold

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as 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();
}

Udskiftning af billede

Udnyt den .text-hide klasse eller mixin til at udskifte et elements tekstindhold med et baggrundsbillede.

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

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

For hurtigere mobilt og miljøvenlig udvikling, brug disse utility klasser bruges til at vise og skjule indholdet af enheden via media forespørgsel. Der er også værktøj klasser for at skifte indhold i udskrevet.

Prøv at bruge disse på et begrænset grundlag og undgå at skabe helt forskellige versioner af det samme sted. I stedet kan du bruge dem til at supplere hver enheds præsentation.

Tilgængelige klasser

Brug et enkelt eller kombination af tilgængelige klasser for at skifte indhold i viewport brudpunkter.

	Ekstra små enheder telefoner (<768px)	Små enheder tabletter (≥768px)	Mellemstore enheder stationære (≥992px)	Store enheder stationære (≥1200px)
`.visible-xs-*`	Synlig	Skjukt	Skjukt	Skjukt
`.visible-sm-*`	Skjukt	Synlig	Skjukt	Skjukt
`.visible-md-*`	Skjukt	Skjukt	Synlig	Skjukt
`.visible-lg-*`	Skjukt	Skjukt	Skjukt	Synlig
`.hidden-xs`	Skjukt	Synlig	Synlig	Synlig
`.hidden-sm`	Synlig	Skjukt	Synlig	Synlig
`.hidden-md`	Synlig	Synlig	Skjukt	Synlig
`.hidden-lg`	Synlig	Synlig	Synlig	Skjukt

Som til v3.2.0, .visible-*-* klasser for hver enkelt brudpunkt fås i tre varianter, én for hver enkelt CSS display ejendom værdi nedenfor.

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

Så som en ekstra lille (xs) skærme f. eks. .visible-*-* klasser: .visible-xs-block .visible-xs-inline, og .visible-xs-inline-block.

De klasser .visible-xs, .visible-sm, .visible-md og .visible-lg findes også, men er underkendt som af v3.2.0. Det er svarende til ca. .visible-*-block, undtagen i saerlige tilfaelde for at skifte <table> -relaterede elementer.

Udskrive klasser

Svarende til den almindelige hurtigtvirkende klasser, bruger disse til at skifte indhold til print.

Klasser	Browser	Udskriv
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skjukt	Synlig
`.hidden-print`	Synlig	Skjukt

Klassen .visible-print findes også, men er frarådede som v3.2.0. Det er svarende til ca. .visible-print-block, undtagen i saerlige tilfaelde <table> -relaterede elementer.

Test

Tilpas din browser eller belastning på forskellige enheder til test reagerer utility klasser.

Synlig på...

Grøn Tjekmærker indikerer det element er synlig i det aktuelle visningsfelt.

Ekstra lille ✔ Synligt på x-small

Lille ✔ Ses på små

Medium ✔ Synligt på medie

Stor ✔ Ses på store

Ekstra lille og lille ✔ Synligt på x-small, small

Mellemstore og store ✔ Synligt på mellemstore og store

Ekstra lille og medium ✔ Synligt på x-small og medium

Lille og stor ✔ Ses på små og store

Ekstra lille og stor ✔ Synligt på x-small og large

Lille og mellem ✔ Ses på små og mellemstore

Skjult på...

Her grønt flueben indikerer også elementet skjult i din aktuelle visningsfelt.

Ekstra lille ✔ Skjult på x-small

Lille ✔ Skjult for lille

Medium ✔ Skjult på medie

Stor ✔ Skjult på store

Ekstra lille og lille ✔ Skjult på x-small, small

Mellemstore og store ✔ Skjult på mellemstore og store

Ekstra lille og medium ✔ Skjult på x-small og medium

Lille og stor ✔ Skjult på små og store

Ekstra lille og stor ✔ Skjult på x-small og large

Lille og mellem ✔ Skjult på små og mellemstore

Bootstrap's CSS er bygget på mindre, en forbehandler med ekstra funktioner som variabler, mixins, og funktionerne til udarbejdelse af CSS. De, der ønsker at bruge kilde mindre filer i stedet for vores kompileret CSS-filer kan gøre brug af de mange variabler og mixins vi bruger hele ramme.

Gitter variabler og mixins er omfattet inden for Grid-systemet afsnit.

Kompilering af Bootstrap

Bootstrap kan bruges i mindst to måder: med kompileret CSS eller med kilden mindre filer. For at samle de mindre filer, se afsnittet Sådan kommer du i gang for at få dit udviklingsmiljø til at køre de nødvendige kommandoer.

Tredjeparts udarbejdelse værktøjer kan arbejde med bootstrap, men de er ikke understøttet af vores core team.

Variabler

Variabler kan bruges gennem hele projektet som en måde at centraliser og del almindeligt anvendte værdier som farver, afstand, eller font stakke. For en komplet liste, se Customizer.

Farver

Let at bruge to farver: gråtoner og semantik. Gråtoner farver giver hurtig adgang til hyppigt anvendte nuancer af sort, mens semantiske omfatter forskellige farver tildeles meningsfulde kontekstuelle værdier.

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

@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Brug en af disse farver variabler som de er eller omrokere dem til mere meningsfyldt variabler til dit projekt.

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

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

Stilladser

En håndfuld af variabler for hurtigt tilpasse centrale elementer af dit websted skelet.

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

Links

Let stil dine links med den rigtige farve med kun én værdi.

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

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

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

Bemærk, at @link-hover-color bruger en funktion, en anden fantastisk værktøj fra mindre, automagically skabe den rette svæv farve. Du kan bruge darken lighten saturate og desaturate.

Typografi

Let at indstille din type ansigt, tekststørrelse, førende, og mere med et par hurtige variabler. Bootstrap gør brug af disse samt at give nem typografiske mixins.

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

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

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

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

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

Ikoner

To hurtige variabler for tilpasning af placering og filnavn på dine ikoner.

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

Komponenter

Komponenter i hele bootstrap gør brug af nogle standard variabler for fastsættelse af fælles værdier. Her er det mest almindeligt anvendte.

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

Skipas mixins

Skipas mixins mixins er at hjælpe understøttelse af flere browsere, herunder alle relevante leverandør præfikser i din kompileret CSS.

Box-skalering

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

Det mixin er frarådede som v3.2.0, med indførelsen af autoprefixer. For at bevare bagud-kompatibilitet, bootstrap vil fortsat bruge mixin internt indtil bootstrap-v4.

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

Afrundede hjørner

I dag alle moderne browsere understøtter ikke-præfiks border-radius ejendom. Som sådan er der ingen .border-radius() mixin, men bootstrap indeholder genveje til hurtigt afrunding to hjørner på en bestemt side af et objekt.

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

(Drop) skygger

Hvis din målgruppe anvender den nyeste og største browsere og enheder, skal du sørge for at bruge den box-shadow ejendom på egen hånd. Hvis du har behov for support til ældre Android (v4) og iOS-enheder (pre-iOS 5), brug frarådede mixin samler de nødvendige -webkit præfiks.

Det mixin er frarådede som af v3.1.0, da bootstrap-officielt ikke støtte den forældede platforme, der understøtter ikke den faste ejendom. For at bevare bagud-kompatibilitet, bootstrap vil fortsat bruge mixin internt indtil bootstrap-v4.

Sørg for at bruge rgba() farver i din kasse skygger så passer de så problemfrit som muligt med baggrunde.

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

Overgange

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

Det mixins er frarådede som af v3.2.0, med indførelsen af autoprefixer. For at bevare bagud-kompatibilitet, bootstrap vil fortsat bruge mixins internt indtil bootstrap-v4.

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

Transformationer

Rotere, skalere, oversætte (flyt), eller forvrænge et objekt.

Det mixins er frarådede som af v3.2.0, med indførelsen af autoprefixer. For at bevare bagud-kompatibilitet, bootstrap vil fortsat bruge mixins internt indtil bootstrap-v4.

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

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

Animationer

En enkelt mixin ved hjælp af CSS3's animation egenskaber i en erklæring og andre mixins for individuelle egenskaber.

Det mixins er frarådede som af v3.2.0, med indførelsen af autoprefixer. For at bevare bagud-kompatibilitet, bootstrap vil fortsat bruge mixins internt indtil bootstrap-v4.

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

Gennemsigtighed

Indstil skarpheden for alle browsere og give en filter fallback for IE8.

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

Pladsholder tekst

Levere rammerne for en kontrol inden for hvert felt.

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

Kolonner

Generer kolonner via CSS i et enkelt element.

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

Gradienter

Let at slå de to farver i en baggrunds gradient. Få mere avancerede og sat en retning, tre farver, eller brug en radial gradient. Med en enkelt mixin får du alle de foranstillede syntakser skal du.

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

Du kan også angive vinklen på en almindelig to-farve, lineær gradient:

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

Hvis du har brug for en frisør-stribe stil gradient, det er også nemt. Blot angive en enkelt farve, og vi vil lægge en gennemsigtig hvid stribe.

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

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

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

Heads up! skal du nogensinde får brug for at fjerne en gradient, sørg for at fjerne alle IE-specifikke filter kan du have tilføjet. Du kan gøre dette ved hjælp af .reset-filter() mixin sammen med background-image: none;.

Utility mixins

Utility mixins mixins er at kombinere ellers uafhængige CSS egenskaber for at opnå et bestemt mål eller opgave.

Clearfix

Husk at tilføje class="clearfix" til ethvert element og i stedet tilføje .clearfix() mixin eventuelt. Bruger micro clearfix Nicolas Gallager.

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

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

Vandret centrering

Hurtigt center ethvert element i sin overordnede. kræver width eller max-width indstilles.

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

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

Stoerrelsessortering hjælpere

Angiv dimensionerne af et objekt lettere.

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

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

Størrelsesknapperne textareas

Du kan nemt konfigurere tilpas indstillinger for enhver textarea, eller ethvert andet element. Standard til normal browser adfærd (both).

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

Skære tekst

Nemt at afkorte tekst med en ellipse med en enkelt mixin. Kræver element block eller inline-block niveau.

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

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

Nethinden billeder

Angiv to billede stier og @ 1x billede dimensioner og bootstrap giver en @ 2x media forespørgsel. Hvis du har mange billeder at overveje at skrive din nethinden billede CSS manuelt i et enkelt medie forespørgsel.

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

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

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

Mens bootstrap er bygget på mindre, den har også en officielle Sass port. Vi opretholder et separat GitHub arkiv og håndtere opdateringer med en konverteringsscriptet.

Hvad er inkluderet

Da Sass port har en separat repo- og serverer et lidt andet publikum, indholdet af projektet adskiller sig meget fra de vigtigste bootstrap-projekt. Dette sikrer, at Sass port er forenelig med så mange Sass-baserede systemer som muligt.

Sti	Beskrivelse
`lib/`	Ruby gem kode (Sass konfiguration, skinner og Kompas integrationer)
`tasks/`	Konverter scripts (drejning opstrøms mindre Sass)
`test/`	Kompileringstests
`templates/`	Kompas pakke manifest
`vendor/assets/`	Sass, JavaScript og skrifttype filer
`Rakefile`	Interne opgaver, såsom rive og konvertere

Visit the Sass port's GitHub repository to see these files in action.

Installation

For information on how to install and use Bootstrap for Sass, consult the GitHub repository readme. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.

Bootstrap med Sass

CSS

Oversigt

HTML5 doctype

Mobile første

Typografi og links

Normaliser.css

Containers

Forsyningssystem

Introduktion

Media forespørgsler

Gitter indstillinger

Eksempel: Stablet til vandret

Eksempel: væskebeholder

Eksempel: mobil og stationær pc

Eksempel: Mobil, tablet, stationære pc'er

Eksempel: Kolonne indpakning

Hurtigtreagerende kolonne nulstiller

Udligning kolonner

Nesting kolonner

Kolonnerækkefølgen

Less mixins og variabler

Variabler

Mixins

Eksempel på brug

Typografi

Positioner

h1. Bootstrap overskrift

h2. Bootstrap overskrift

h3. Bootstrap overskrift

h4. Bootstrap overskrift

h5. Bootstrap overskrift

h6. Bootstrap overskrift

h1. Bootstrap overskrift Sekundær tekst

h2. Bootstrap overskrift Sekundær tekst

h3. Bootstrap overskrift Sekundær tekst

h4. Bootstrap overskrift Sekundær tekst

h5. Bootstrap overskrift Sekundær tekst

h6. Bootstrap overskrift Sekundær tekst

Brødtekst

Føre brødtekst

Bygget med Less

Inline tekstelementer

Markeret tekst

Slettet tekst

Gennemstreget tekst

Indsat tekst

Understreget tekst

Lille tekst

Fed

Kursiv

Alternative enheder

Justering klasser

Transformation klasser

Forkortelser

Grundlæggende forkortelse

Initialism

Adresser

Blockquotes

Standard blockquote

Blockquote indstillinger

Navngivning af en kilde

Alternativt vises

Lister

Usorteret

Sorteret

Unstyled

Inline

Beskrivelse

Vandret beskrivelse

Auto-skære

Kode

Inline

Bruger input

Basis blok

Variabler

Eksempel output

Tabeller

Basis eksempel

Stribede rækker

Cross-browser kompatibilitet

Demo `:focus` tilstand

Advarsel om link funktion `<a>`

Valgfri ikoner med skjult `.sr-only` etiketter