Kritt den Downdown op de Schlësselstécker vun der Bootstrap Infrastruktur, dorënner eis Approche fir besser, méi séier, méi staark Webentwécklung.

HTML5 doctype

Bootstrap benotzt verschidden HTML Elementer an CSS Eegeschaften déi d'Benotzung vum HTML5 Doktype erfuerderen. Gitt et am Ufank vun all Äre Projeten un.

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

Mobile éischt

Mat Bootstrap 2 hu mir optional mobil frëndlech Stiler fir Schlëssel Aspekter vum Kader bäigefüügt. Mat Bootstrap 3 hu mir de Projet ëmgeschriwwe fir mobilfrëndlech vun Ufank un. Amplaz op optional mobil Stiler ze addéieren, gi se direkt an de Kär gebak. Tatsächlech ass Bootstrap als éischt mobil . Mobile éischt Stiler kënnen an der ganzer Bibliothéik fonnt ginn anstatt a getrennten Dateien.

Fir richteg Rendering an Touch Zoomen ze garantéieren, füügt de Viewport Meta Tag op Är <head>.

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

Dir kënnt Zoomfäegkeeten op mobilen Apparater auszeschalten andeems Dir user-scalable=noop de Viewport Meta Tag bäidréit. Dëst deaktivéiert Zoomen, dat heescht datt d'Benotzer nëmme fäeg sinn ze scrollen, a Resultater datt Äre Site e bësse méi wéi eng gebierteg Applikatioun fillt. Am Allgemengen empfeelen mir dëst net op all Site, also passt virsiichteg!

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

Typographie a Linken

Bootstrap setzt Basis global Display, Typographie a Linkstiler. Konkret, mir:

Setzt background-color: #fff;opbody
Benotzt d' @font-family-base, @font-size-base, an @line-height-baseAttributer als eis typographesch Basis
Setzt d'global Linkfaarf iwwer @link-coloran applizéiert Link ënnersträicht nëmmen op:hover

Dës Stiler kënne bannent fonnt ginn scaffolding.less.

Normaliséieren.css

Fir verbessert Cross-Browser Rendering, benotze mir Normalize.css , e Projet vum Nicolas Gallagher an Jonathan Neal .

Container

Bootstrap erfuerdert e enthalent Element fir den Inhalt vum Site ze wéckelen an eise Gittersystem z'ënnerhalen. Dir kënnt ee vun zwee Container wielen fir an Äre Projeten ze benotzen. Bedenkt datt, wéinst paddinga méi, weder Container nestabel ass.

Benotzt .containerfir eng reaktiounsfäeger fix Breet Container.

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

Benotzt .container-fluidfir eng voll Breet Container, Spannung der ganzer Breet vun Ärem viewport.

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

Bootstrap enthält e reaktiounsfäeger, mobilen éischte Flësseggitter System deen entspriechend bis zu 12 Sailen skaléiert wéi den Apparat oder d'Viewport Gréisst eropgeet. Et enthält virdefinéiert Klassen fir einfach Layoutoptiounen, souwéi mächteg Mixins fir méi semantesch Layouten ze generéieren .

Aféierung

Gittersystemer gi benotzt fir Säit Layouten duerch eng Serie vu Reihen a Spalten ze kreéieren déi Ären Inhalt ënnerhalen. Hei ass wéi de Bootstrap Gitter System funktionnéiert:

Reihen musse bannent enger .container(fixer Breet) oder .container-fluid(Vollbreed) plazéiert ginn fir eng korrekt Ausrichtung a Polsterung.
Benotzt Zeilen fir horizontal Gruppe vu Kolonnen ze kreéieren.
Inhalt soll bannent Spalten gesat ginn, an nëmmen Spalten kënnen direkt Kanner vun Zeile sinn.
Virdefinéiert Gitterklassen wéi .rowa .col-xs-4si verfügbar fir séier Gitter Layouten ze maachen. Manner Mixins kënnen och fir méi semantesch Layouten benotzt ginn.
Kolonnen erstellen Rennen (Lücken tëscht Kolonninhalt) iwwer padding. Dat Polsterung gëtt a Reihen fir déi éischt a lescht Kolonn iwwer negativ Marge op .rows kompenséiert.
Den negativen Marge ass firwat d'Beispiller hei drënner ausgedréckt sinn. Et ass sou datt Inhalt bannent Gitterkolonnen mat Net-Gitterinhalt ausgeriicht ass.
Gitterkolonnen ginn erstallt andeems Dir d'Zuel vun zwielef verfügbare Spalten spezifizéiert, déi Dir wëllt spanen. Zum Beispill, dräi gläiche Kolonnen géifen dräi benotzen .col-xs-4.
Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.
Gitterklassen gëllen fir Apparater mat Écranbreet méi grouss wéi oder gläich wéi d'Briefpunktgréissten, an iwwerschreiden Gitterklassen, déi op méi kleng Apparater gezielt sinn. Dofir, zB all .col-md-*Klass op en Element applizéieren wäert net nëmmen säin Styling op mëttel Geräter beaflossen, awer och op groussen Apparater wann eng .col-lg-*Klass net präsent ass.

Kuckt d'Beispiller fir dës Prinzipien op Äre Code z'applizéieren.

Medien Ufroen

Mir benotzen déi folgend Medienufroen an eise Manner Dateien fir d'Schlësselbriechpunkten an eisem Gittersystem ze kreéieren.

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

Mir erweideren heiansdo dës Medienufroen fir e max-widthCSS op eng méi schmuel Set vun Apparater ze limitéieren.

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

Kuckt wéi Aspekter vum Bootstrap Gittersystem iwwer verschidde Geräter mat engem prakteschen Dësch funktionnéieren.

	Extra kleng Apparater Telefonen (<768px)	Kleng Apparater Pëllen (≥768px)	Medium Geräter Desktops (≥992px)	Grouss Geräter Desktops (≥1200px)
Gitter Verhalen	Horizontal zu all Moment	Zesummegeklappt fir unzefänken, horizontal iwwer Breakpunkter
Container Breet	Keen (auto)	750px	970px	1170px
Klass Präfix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# vu Kolonnen	12
Kolonn Breet	Auto	~62px	~81px	~97px
Gutter Breet	30px (15px op all Säit vun enger Kolonn)
Nestable	Jo
Offsets	Jo
Kolonn Uerdnung	Jo

Beispill: gestapelt-zu-horizontal

Mat engem eenzege Set vu .col-md-*Gitterklassen kënnt Dir e Basisrastersystem erstellen deen op mobilen Apparater an Tablet-Geräter gestapelt (déi extra kleng bis kleng Gamme) ufänkt ier Dir horizontal op Desktop (mëttel) Geräter gëtt. Gitt Gitter Sailen an all .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>

Beispill: Flëssegkeetsbehälter

Maacht all fix Breet Gitter Layout an e Layout mat voller Breet andeems Dir Äert äusserst .containerop ännert .container-fluid.

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

Beispill: Mobile an Desktop

Wëllt Dir net datt Är Kolonnen einfach a méi kleng Apparater stackelen? Benotzt déi extra kleng a mëttel Geräter Gitterklassen andeems Dir .col-xs-* .col-md-*op Är Kolonnen bäidréit. Kuckt d'Beispill hei ënnen fir eng besser Iddi wéi et alles funktionnéiert.

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

Beispill: Handy, Tablet, Desktop

Baut op dat viregt Beispill andeems Dir nach méi dynamesch a mächteg Layouten mat Tablettklassen .col-sm-*erstellt.

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

Beispill: Kolonne Wrapping

Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.

.col-xs-9

.col-xs-4
Zënter 9 + 4 = 13> 12, gëtt dës 4-Kolonn-breet Div op eng nei Linn als eng kontinuéierlech Eenheet gewéckelt.

.col-xs-6
Pafolgende Saile weider laanscht déi nei Linn.

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

Reaktiounsfäeger Kolonn zréckgesat

Mat de véier Schichten vu Gitter verfügbar, sidd Dir gebonnen an Themen ze lafen, wou, a bestëmmte Breakpunkten, Är Kolonnen net ganz richteg kloer sinn, well déi eng méi héich ass wéi déi aner. Fir dat ze fixéieren, benotzt eng Kombinatioun vun engem .clearfixan eise reaktiounsfäeger Utility Klassen .

.col-xs-6 .col-sm-3
Änneren d'Gréisst vun Ärem Viewport oder kuckt et op Ärem Telefon fir e Beispill.

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

Zousätzlech zu der Kolonnklärung bei reaktiounsfäeger Breakpunkten, musst Dir eventuell Offsets, Pushen oder Pulls zrécksetzen . Kuckt dëst an Aktioun am Gitter Beispill .

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

Offset Sailen

Beweegt Spalten no riets mat .col-md-offset-*Klassen. Dës Klassen erhéijen de lénksen Rand vun enger Kolonn duerch *Kolonnen. Zum Beispill, .col-md-offset-4bewegt .col-md-4iwwer véier Sailen.

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

Dir kënnt och Offsets vun ënneschten Gittertiere mat .col-*-offset-0Klassen iwwerschreiden.

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

Nesting Sailen

Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .rowa Set vu .col-sm-*Spalten an enger existéierender .col-sm-*Kolonn. Nested Zeile sollen eng Rei vu Kolonnen enthalen déi bis zu 12 oder manner addéieren (et ass net erfuerderlech datt Dir all 12 verfügbare Kolonnen benotzt).

Niveau 1: .col-sm-9

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

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

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

Kolonn Uerdnung

Ännert einfach d'Uerdnung vun eise agebaute Gitterkolonnen mat .col-md-push-*a .col-md-pull-*Modifizéierungsklassen.

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

Manner Mixins a Variabelen

Zousätzlech zu prebuilt Gitterklassen fir séier Layouten, enthält Bootstrap Manner Variabelen a Mixins fir séier Är eege einfach, semantesch Layouten ze generéieren.

Variablen

Variablen bestëmmen d'Zuel vun de Sailen, d'Grennebreet, an de Medienufropunkt, op deem schwiewende Spalten ufänken. Mir benotzen dës fir déi virdefinéiert Gitterklassen ze generéieren déi hei uewen dokumentéiert sinn, souwéi fir déi personaliséiert Mixins hei ënnendrënner.

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

Mixins

Mixins ginn a Verbindung mat de Gittervariablen benotzt fir semantesch CSS fir eenzel Gitterkolonnen ze generéieren.

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

Beispill Benotzung

Dir kënnt d'Variabelen op Är eege personaliséiert Wäerter änneren, oder just d'Mixins mat hiren Standardwäerter benotzen. Hei ass e Beispill fir d'Standardastellungen ze benotzen fir en zwee-Kolonn Layout mat engem Spalt tëscht.

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

Rubriken

All HTML Rubriken, <h1>duerch <h6>, sinn verfügbar. .h1duerch .h6Klassen sinn och verfügbar, fir wann Dir d'Schrëftstil vun enger Rubrik wëllt passen, awer nach ëmmer wëllt datt Ären Text inline ugewise gëtt.

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

Erstellt méi hell, sekundär Text an all Rubrik mat engem generesche <small>Tag oder der .smallKlass.

h1. Bootstrap Rubrik Secondaire Text

h2 vun. Bootstrap Rubrik Secondaire Text

h3 vun. Bootstrap Rubrik Secondaire Text

h4 vun. Bootstrap Rubrik Secondaire Text

h5. Bootstrap Rubrik Secondaire Text

h6. Bootstrap Rubrik Secondaire 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>

Kierper Kopie

Dem Bootstrap säi globale Standard font-sizeass 14px , mat engem line-heightvun 1.428 . Dëst gëtt op d' <body>an all Paragrafen ugewannt. Zousätzlech <p>kréien (Paragrafen) eng ënnescht Marge vun der Halschent vun hirer berechnen Linn Héicht (10px als 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>

Lead Kierper Kopie

Maacht e Paragraf erausstinn andeems Dir bäidréit .lead.

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

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

Gebaut mat manner

Déi typographesch Skala baséiert op zwou Manner Variabelen an Variablen.manner : @font-size-basean @line-height-base. Déi éischt ass d'Basis Schrëftgréisst déi uechter benotzt gëtt an déi zweet ass d'Basislinn Héicht. Mir benotzen dës Variabelen an e puer einfache Mathematik fir d'Margen, Paddingen a Linnenhéichten vun all eisen Typen a méi ze kreéieren. Passt se un a Bootstrap passt un.

Inline Text Elementer

Markéierten Text

Fir en Text ze markéieren wéinst senger Relevanz an engem anere Kontext, benotzt den <mark>Tag.

Dir kënnt d'Mark Tag benotzen firHighlightText.

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

Geläscht Text

Fir Textblocken unzeginn, déi geläscht goufen, benotzt den <del>Tag.

~~Dës Zeil vum Text soll als geläscht Text behandelt ginn.~~

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

Duerchgestrachen Text

Fir Textblocken unzeweisen déi net méi relevant sinn, benotzt den <s>Tag.

~~Dës Linn vum Text soll als net méi korrekt behandelt ginn.~~

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

Agebauten Text

Fir Ergänzunge fir d'Dokument ze weisen, benotzt den <ins>Tag.

Dës Zeil vum Text soll als Zousaz zum Dokument behandelt ginn.

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

Ënnersträichen Text

Fir den Text ze ënnersträichen, benotzt den <u>Tag.

Dës Zeil vum Text gëtt wéi ënnersträicht

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

Benotzt d'Standardbetonungstags vun HTML mat liichte Stiler.

Klengen Text

Fir Inline oder Blocks vun Text ze entschäerfen, benotzt den <small>Tag fir Text op 85% vun der Gréisst vum Elterendeel ze setzen. Rubrik Elementer kréien hir eege font-sizefir nested <small>Elementer.

Dir kënnt alternativ en Inline Element benotzen mat .smallan der Plaz vun all <small>.

Dës Zeil vum Text soll als Feindréck behandelt ginn.

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

Fett

Fir en Textschnëtt mat engem méi schwéiere Schrëftgewiicht ze ënnersträichen.

De folgenden Ausschnëtt vum Text gëtt als fett Text ugewisen .

<strong>rendered as bold text</strong>

Kursiv

Fir e Stéck Text mat Kursiv ze ënnersträichen.

De folgenden Ausschnëtt vum Text gëtt als kursivéierten Text gemaach .

<em>rendered as italicized text</em>

Alternativ Elementer

Fillt Iech gratis ze benotzen <b>an <i>an HTML5. <b>ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen wärend <i>et meeschtens fir Stëmm, technesch Begrëffer, asw.

Ausriichtung Klassen

Einfach Text op Komponente mat Textausrichtungsklassen ëmsetzen.

Lénks ausgeriicht Text.

Zentrum ausgeriicht Text.

Recht ausgeriicht Text.

Justifiéiert Text.

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

Transformatioun Klassen

Transforméiert Text a Komponenten mat Text Kapitaliséierungsklassen.

klengen Text.

Groussen Text.

Kapitaliséiert Text.

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

Ofkierzungen

Stiliséierter Implementatioun vum HTML <abbr>Element fir Ofkierzungen an Akronyme fir déi erweidert Versioun um Hover ze weisen. Ofkierzungen mat engem titleAttribut hunn eng liicht punktéiert ënnescht Grenz an en Hëllefscursor beim Hover, déi zousätzlech Kontext beim Hover a fir Benotzer vun Hëllefstechnologien ubidden.

Basis Ofkierzung

Eng Ofkierzung vum Wuert Attribut ass attr .

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

Initialismus

Füügt .initialismeng Ofkierzung fir eng liicht méi kleng Schrëftgréisst.

HTML ass déi bescht Saach zënter geschnidden Brout.

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

Adressen

Presentéiert Kontaktinformatioun fir den nooste Vorfahren oder de ganze Kierper vun der Aarbecht. Erhaalen d'Formatéierung andeems Dir all Zeilen mat <br>.

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

Voll Numm
[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>

Blockquotes

Fir Blocken Inhalt vun enger anerer Quell an Ärem Dokument ze zitéieren.

Standard Blockquote

Wickelt <blockquote>all HTML als Zitat ëm. Fir direkt Zitater recommandéiere mir eng <p>.

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

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

Blockquote Optiounen

Stil an Inhalt Ännerungen fir einfach Variatiounen op engem Standard <blockquote>.

Eng Quell benennen

Füügt e <footer>fir d'Quell z'identifizéieren. Wickelt den Numm vun der Quellaarbecht an <cite>.

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

Een berühmten am Source 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>

Alternativ Affichage

Füügt .blockquote-reversefir e Blockquote mat riets ausgeriichtten Inhalt.

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

Een berühmten am Source Titel

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

Lëschten

Onbestallt

Eng Lëscht vun Elementer an deenen d'Uerdnung net explizit wichteg ass.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem bei massa
Facilisis in 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 vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Bestallt

Eng Lëscht vun Elementer an deenen d'Uerdnung explizit wichteg ass .

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

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

Unstyled

Ewechzehuelen de Standard list-stylea lénks Marge op Lëscht Artikelen (nëmmen direkt Kanner). Dëst gëllt nëmme fir direkt Kannerlëscht Elementer , dat heescht datt Dir d'Klass och fir all nested Lëschte derbäi musst.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem bei massa
Facilisis in 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 vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

An der Schlaang

Place all Lëscht Elementer op eng eenzeg Linn mat display: inline-block;an e puer liicht padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Beschreiwung

Eng Lëscht vu Begrëffer mat hire verbonne Beschreiwunge.

Beschreiwung Lëschte: Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
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>

Horizontal Beschreiwung

Maacht Begrëffer a Beschreiwungen an der <dl>Linn op Säit-vun-Säit. Fänkt aus gestapelt wéi Standard <dl>s, awer wann d'Navbar erweidert, maacht dat och.

Beschreiwung Lëschte: Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
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>

Auto-Trunkatioun

Horizontal Beschreiwungslëschte wäerte Begrëffer ofschneiden déi ze laang sinn fir an der lénker Kolonn mat ze passen text-overflow. A schmueler Viewports wäerte se op de Standard Stacked Layout änneren.

An der Schlaang

Wrap inline Snippets vum Code mat <code>.

Zum Beispill, <section>soll als inline gewéckelt ginn.

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

Benotzer Input

Benotzt den <kbd>Input fir unzeginn deen normalerweis iwwer Tastatur aginn ass.

Fir Verzeichnisser ze wiesselen, Typ cdgefollegt vum Numm vum Verzeichnis.
Fir Astellungen z'änneren, dréckt 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 Block

Benotzt <pre>fir verschidde Zeilen vum Code. Ginn sécher all Wénkel Klammeren am Code fir richteg Render- entkommen.

<p>Probetext hei...</p>

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

Dir kënnt optional d' .pre-scrollableKlass addéieren, déi eng maximal Héicht vun 350px setzt an eng Y-Achs Scrollbar ubitt.

Variablen

Fir Variabelen ze weisen, benotzt den <var>Tag.

y = m x + b

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

Prouf Ausgang

Fir unzeweisen Blocks Probe Ausgang vun engem Programm benotzt den <samp>Tag.

Dësen Text soll als Probeausgab vun engem Computerprogramm behandelt ginn.

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

Basis Beispill

Fir Basis Styling - liicht Polsterung an nëmmen horizontalen Deeler - füügt d'Basisklass .tableop all <table>. Et kann super iwwerflësseg schéngen, awer wéinst der verbreeter Notzung vun Dëscher fir aner Plugins wéi Kalenneren an Datum Picker, hu mir gewielt eis personaliséiert Dëschstiler ze isoléieren.

Fakultativ Dësch Iwwerschrëft.
#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

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

Gestreift Reihen

Benotzt .table-stripedfir Zebrastreifen op all Tabellerei bannent der <tbody>.

Cross-Browser Kompatibilitéit

Striped Dëscher ginn iwwer den :nth-childCSS Selector styléiert, deen net am Internet Explorer 8 verfügbar ass.

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

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

Border Dësch

Füügt .table-borderedfir Grenzen op all Säit vum Dësch an Zellen.

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

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

Hover Reihen

Füügt .table-hoverfir en Hover-Status op Tabellereihen an engem <tbody>.

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

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

Kondenséiert Dësch

Füügt .table-condensedfir Dëscher méi kompakt ze maachen andeems d'Zellpolsterung an der Halschent geschnidden ass.

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

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

Kontextuell Klassen

Benotzt kontextuell Klassen fir Dësch Reihen oder eenzel Zellen ze faarwen.

Klass	Beschreiwung
`.active`	Gëllt d'Hoverfaarf op eng bestëmmte Zeil oder Zell
`.success`	Gëtt eng erfollegräich oder positiv Handlung un
`.info`	Gëtt eng neutral informativ Ännerung oder Handlung un
`.warning`	Gëtt eng Warnung un déi Opmierksamkeet brauch
`.danger`	Gëtt eng geféierlech oder potenziell negativ Handlung un

#	Kolonn Iwwerschrëft	Kolonn Iwwerschrëft	Kolonn Iwwerschrëft
1	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
2	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
3	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
4	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
5	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
6	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
7	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
8	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt
9	Kolonn Inhalt	Kolonn Inhalt	Kolonn Inhalt

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

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung fir eng Tabellerei oder eenzel Zelle ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (de siichtbaren Text an der entspriechender Tabellerei/Zell), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Reaktiounsfäeger Dëscher

Erstellt reaktiounsfäeger Dëscher andeems Dir iergendeng .tablewéckelt .table-responsivefir se horizontal op klengen Apparater ze scrollen (ënner 768px). Wann Dir op eppes méi grouss wéi 768px breet kuckt, gesitt Dir keen Ënnerscheed an dësen Dëscher.

Vertikal Ausschnëtt / Ofkierzung

Reaktiounsfäeger Dëscher benotzen overflow-y: hidden, déi all Inhalt ofschneiden deen iwwer déi ënnescht oder iewescht Kante vum Dësch geet. Besonnesch dëst kann Dropdown-Menüen an aner Drëtt-Partei Widgets ofschneiden.

Firefox an Feldsets

Firefox huet e puer schweier Fieldset Styling involvéiert widthdeen den reaktiounsfäeger Dësch stéiert. Dëst kann net iwwerschratt ginn ouni e Firefox-spezifeschen Hack dee mir net am Bootstrap ubidden:

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

Fir méi Informatioun, liest dës Stack Overflow Äntwert .

#	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik
1	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
2	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
3	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell

#	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik
1	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
2	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
3	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell

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

Basis Beispill

Individuell Form Kontrollen kréien automatesch e puer global Styling. All textuell <input>, <textarea>, an <select>Elementer mat .form-controlsinn als width: 100%;Standard op gesat. Wickelt Etiketten a Kontrollen an .form-groupfir optimal Abstand.

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

Vermëschen net Formgruppen mat Inputgruppen

Vermëschen Formgruppen net direkt mat Inputgruppen . Amplaz, Nest d'Input Grupp bannent der Form Grupp.

Inline Form

Füügt .form-inlineop Är Form (wat net muss sinn <form>) fir lénks ausgeriicht an inline-Block Kontrollen. Dëst gëllt nëmme fir Formen bannent Viewports déi op d'mannst 768px breet sinn.

Kann personaliséiert Breet erfuerderen

Inputs a Selektiounen sinn width: 100%;parfault am Bootstrap applizéiert. Bannent Inline Formen setzen mir dat zréck op width: auto;sou datt verschidde Kontrollen op der selwechter Linn wunne kënnen. Ofhängeg vun Ärem Layout, kënnen zousätzlech personaliséiert Breeten erfuerderlech sinn.

Füügt ëmmer Etiketten derbäi

Écran Lieser wäerten Problemer mat Äre Formulairen hunn wann Dir kee Label fir all Input enthält. .sr-onlyFir dës Inline Formen, kënnt Dir d'Etiketten mat der Klass verstoppen . Et gi weider alternativ Methoden fir e Label fir Hëllefstechnologien ze liwweren, sou wéi den aria-label, aria-labelledbyoder titleAttribut. Wann keng vun dësen präsent ass, kënnen Écran Lieser d' placeholderAttributer benotzen, wann präsent, awer notéiert datt d'Benotzung vun placeholderals Ersatz fir aner Etikettéierungsmethoden net ugeroden ass.

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

Horizontal Form

Benotzt Bootstrap's virdefinéiert Gitterklassen fir Etiketten a Gruppe vu Formkontrollen an engem horizontalen Layout ze alignéieren andeems Dir .form-horizontalop d'Form bäidréit (wat net muss sinn <form>). Maachen dat ännert .form-groupsech als Gitterreihen ze behuelen, also kee Besoin fir .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>

Ënnerstëtzt Kontrollen

Beispiller vun Standard Form Kontrollen ënnerstëtzt an engem Beispill Form Layout.

Input

Meeschte gemeinsam Form Kontroll, Text-baséiert Input Felder. Ëmfaasst Ënnerstëtzung fir all HTML5 Zorte: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telan color.

Typ Deklaratioun néideg

D'Inputen ginn nëmme voll stylesch wann se typerichteg deklaréiert sinn.

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

Input Gruppen

Fir integréiert Text oder Knäppercher virun an / oder no all Text-baséiert <input>, kuckt d'Input Grupp Komponent .

Textberäich

Form Kontroll déi verschidde Linnen Text ënnerstëtzt. Änneren rowsAttributer wéi néideg.

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

Checkboxen a Radioen

Checkboxe si fir eng oder e puer Optiounen an enger Lëscht ze wielen, während Radios sinn fir eng Optioun aus ville ze wielen.

Behënnerte Checkboxen a Radios ginn ënnerstëtzt, awer fir e "net-erlaabten" Cursor beim Hover vum Elterendeel ze bidden <label>, musst Dir d' .disabledKlass un den Elterendeel addéieren .radio, .radio-inline, .checkbox, oder .checkbox-inline.

Standard (gestapelt)

<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 Checkboxen a Radios

Benotzen d' .checkbox-inlineoder .radio-inlineKlassen op enger Serie vun Checkboxen oder Radio fir Kontrollen déi op der selwechter Linn schéngen.

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

Checkboxen a Radioen ouni Labeltext

Sollt Dir keen Text am <label>, den Input positionéiert wéi Dir et erwaart. De Moment funktionnéiert nëmmen op net-inline Checkboxen a Radioen. Denkt drun nach ëmmer eng Form vu Label fir Hëllefstechnologien ze bidden (zum Beispill mat 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>

Wielt

Bedenkt datt vill gebierteg ausgewielte Menüen - nämlech am Safari a Chrome - ofgerënnt Ecker hunn déi net iwwer border-radiusEegeschafte geännert kënne ginn.

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

Fir <select>Kontrollen mat dem multipleAttribut gi verschidde Méiglechkeeten als Standard ugewisen.

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

Statesch Kontroll

Wann Dir Plain Text nieft engem Formulaire Label bannent enger Form muss Plaz, benotzen der .form-control-staticKlass op engem <p>.

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

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

Focus Staat

Mir läschen d'Standardstiler outlineop e puer Form Kontrollen a gëllen en box-shadowop senger Plaz fir :focus.

Demo`:focus` Staat

Déi uewe Beispill Input benotzt personaliséiert Stiler an eiser Dokumentatioun fir de :focusStaat op engem .form-control.

Behënnert Staat

Füügt de disabledbooleschen Attribut op en Input fir Benotzerinteraktiounen ze vermeiden. Behënnerte Input schéngen méi hell a füügt e not-allowedCursor derbäi.

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

Behënnert Feldsets

Füügt d' disabledAttribut op eng <fieldset>fir all d'Kontrollen bannent der <fieldset>gläichzäiteg auszeschalten.

Opgepasst iwwer Link Funktionalitéit vun`<a>`

Par défaut behandelen d'Browser all gebierteg Form Kontrollen ( <input>, <select>an <button>Elementer) bannent engem <fieldset disabled>als behënnert, verhënnert souwuel Tastatur- a Mausinteraktiounen op hinnen. Wann Är Form awer och <a ... class="btn btn-*">Elementer enthält, ginn dës nëmmen e Stil vun pointer-events: none. Wéi an der Rubrik iwwer behënnert Staat fir Knäppercher bemierkt (a speziell an der Ënnersektioun fir Ankerelementer), ass dës CSS-Eegeschaft nach net standardiséiert a gëtt net voll ënnerstëtzt an Opera 18 an ënner, oder am Internet Explorer 11, a gewonnen 't verhënneren datt d'Tastatur Benotzer fäeg sinn dës Linken ze fokusséieren oder ze aktivéieren. Also fir sécher ze sinn, benotzt personaliséiert JavaScript fir sou Linken auszeschalten.

Cross-Browser Kompatibilitéit

Wärend Bootstrap dës Stiler an all Browser applizéiert, ënnerstëtzen Internet Explorer 11 an ënner net voll den disabledAttribut op engem <fieldset>. Benotzt personaliséiert JavaScript fir de Feldset an dëse Browser auszeschalten.

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

Füügt de readonlybooleschen Attribut op en Input fir d'Ännerung vum Wäert vum Input ze vermeiden. Lies-nëmmen Input schéngen méi hell (just wéi behënnert Input), awer behalen de Standard Cursor.

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

Hëllef Text

Block Niveau Hëllef Text fir Form Kontrollen.

Associéieren Hëllef Text mat Form Kontrollen

Hëllefstext soll explizit mat der Formkontrolle verbonne sinn, déi et mat der aria-describedbyAttribut benotzt. Dëst wäert suergen datt Assistenztechnologien - wéi Écran Lieser - dësen Hëllefstext annoncéieren wann de Benotzer fokusséiert oder an d'Kontroll erakënnt.

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

Validatioun Staaten

Bootstrap enthält Validatiounsstiler fir Feeler, Warnung an Erfollegszoustand op Form Kontrollen. Fir ze benotzen, add .has-warning, .has-error, oder .has-successzum Elterendeel. All .control-label, .form-control, a .help-blockbannent deem Element kréien d'Validatiounsstiler.

Vermëttelt Validatiounszoustand un Assistenztechnologien a Faarfblind Benotzer

Dës Validatiounsstiler ze benotzen fir den Zoustand vun enger Formkontrolle ze bezeechnen gëtt nëmmen eng visuell, faarweg Indikatioun, déi net un d'Benotzer vun Hëllefstechnologien - wéi Bildschirmlieser - oder fir faarwegblind Benotzer vermëttelt ginn.

Vergewëssert Iech datt och eng alternativ Indikatioun vum Staat gëtt. Zum Beispill kënnt Dir en Hiweis iwwer Staat an den <label>Text vun der Form Kontroll selwer enthalen (wéi dat am folgende Code Beispill de Fall ass), e Glyphicon enthalen (mat passenden alternativen Text mat der .sr-onlyKlass - kuckt d' Glyphicon Beispiller ), oder andeems Dir eng zousätzlech Hëllef Text Spär. Speziell fir Hëllefstechnologien kënnen ongëlteg Form Kontrollen och en aria-invalid="true"Attribut zougewisen ginn.

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

Mat fakultativ Ikonen

Dir kënnt och fakultativ Feedback Symboler mat der Zousatz vun .has-feedbackan der rietser Ikon derbäi.

Feedback Symboler funktionnéieren nëmme mat textuellen <input class="form-control">Elementer.

Ikonen, Etiketten an Inputgruppen

Manuell Positionéierung vu Feedback-Ikonen ass erfuerderlech fir Input ouni Label a fir Inputgruppen mat engem Add-on op der rietser Säit. Dir sidd staark encouragéiert Etiketten fir all Input fir Accessibilitéitsgrënn ze bidden. Wann Dir wëllt verhënneren datt Etiketten ugewise ginn, verstoppt se mat der .sr-onlyKlass. Wann Dir ouni Etiketten muss maachen, passt de topWäert vun der Feedback Ikon un. Fir Inputgruppen, passt de rightWäert op e passende Pixelwäert un ofhängeg vun der Breet vun Ärem Addon.

D'Bedeitung vun der Ikon un Assistenztechnologien vermëttelen

Fir sécherzestellen datt Assistenztechnologien - wéi Écran Lieser - d'Bedeitung vun enger Ikon korrekt vermëttelen, sollt zousätzlech verstoppt Text mat der .sr-onlyKlass abegraff sinn an explizit mat der Formkontrolle verbonne sinn, déi se benotzt aria-describedby. Alternativ, vergewëssert Iech datt d'Bedeitung (zum Beispill d'Tatsaach, datt et eng Warnung fir e bestëmmten Textentréefeld gëtt) an enger anerer Form vermëttelt gëtt, wéi z <label>.

Och wann déi folgend Beispiller schonn de Validatiounszoustand vun hire jeweilege Formkontrollen am <label>Text selwer ernimmen, ass déi uewe genannte Technik (mat .sr-onlyText an aria-describedby) fir Illustratiounszwecker abegraff.

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

Optional Symboler an horizontalen an inline Formen

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

Optional Symboler mat verstoppte `.sr-only`Etiketten

Wann Dir d' .sr-onlyKlass benotzt fir eng Form Kontroll ze verstoppen <label>(anstatt aner Etikettéierungsoptiounen ze benotzen, sou wéi d' aria-labelAttribut), wäert Bootstrap automatesch d'Positioun vun der Ikon upassen wann se derbäigesat gouf.

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

Kontroll Gréisst

Set Héichten mat Klassen wéi .input-lg, a setzt Breet mat Gitterkolonne Klassen wéi .col-lg-*.

Héicht Dimensioun

Erstellt méi grouss oder méi kuerz Form Kontrollen déi de Knäppchengréissten entspriechen.

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

Horizontal Form Grupp Gréissten

Maacht séier Etiketten a Form Kontrollen bannen .form-horizontalandeems Dir .form-group-lgoder .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>

Kolonn Gréisst

Wrap Inputen a Gitterkolonnen, oder all personaliséiert Elterendeel, fir einfach gewënschte Breeten ëmzesetzen.

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

Button Tags

Benotzt de Knäppchen Klassen op engem <a>, <button>oder <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">

Kontextspezifesch Notzung

Iwwerdeems Knäppercher Klassen op <a>an <button>Elementer benotzt ginn, sinn nëmmen <button>Elementer bannent eise nav an navbar Komponente ënnerstëtzt.

Linken déi als Knäpper handelen

Wann d' <a>Elementer benotzt gi fir als Knäppercher ze handelen - d'Funktionalitéit op der Säit ausléisen, anstatt an en anert Dokument oder Sektioun op der aktueller Säit ze navigéieren - sollten se och e passende role="button".

Cross-Browser Rendering

Als bescht Praxis empfeelen mir d' <button>Element ze benotzen wa méiglech fir passende Cross-Browser Rendering ze garantéieren.

Ënnert anerem gëtt et e Feeler am Firefox <30 , deen eis verhënnert d' line-heightof <input>-baséiert Knäppercher ze setzen, sou datt se net genee mat der Héicht vun anere Knäppercher am Firefox passen.

Optiounen

Benotzt eng vun de verfügbare Knäppercher fir séier e stylesch Knäpp ze kreéieren.

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

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung op e Knäppchen ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - wéi Bildschirm Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (de siichtbaren Text vum Knäppchen), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Add .btn-lg, .btn-sm, oder .btn-xsfir zousätzlech Gréissten.

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

Erstellt Blockniveau Knäppercher - déi déi d'ganz Breet vun engem Elterendeel spanen - andeems Dir .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 Staat

Knäppercher erschéngen gedréckt (mat engem däischterem Hannergrond, méi däischter Grenz, an inset Schied) wann se aktiv sinn. Fir <button>Elementer gëtt dëst iwwer :active. Fir <a>Elementer ass et mat .active. Wéi och ëmmer, Dir kënnt .activeop <button>s benotzen (an d' aria-pressed="true"Attributer enthalen) sollt Dir den aktive Staat programmatesch replizéieren.

Knäppchen Element

Kee Grond fir ze addéieren :activewell et eng Pseudo-Klass ass, awer wann Dir déiselwecht Erscheinung muss forcéieren, gitt weider a füügt .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>

Anker Element

Füügt d' .activeKlass op <a>Knäppercher.

Primärverbindung 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>

Behënnert Staat

Maacht d'Knäppercher onklickbar ausgesinn andeems se se zréck mat opacity.

Knäppchen Element

Füügt den disabledAttribut op <button>Knäppercher.

<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 Kompatibilitéit

Wann Dir den disabledAttribut zu engem <button>bäidréit, gëtt Internet Explorer 9 a méi ënnen Text grau mat engem béisen Text-Schatt, dee mir net kënnen fixéieren.

Anker Element

Füügt d' .disabledKlass op <a>Knäppercher.

Primärverbindung 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>

Mir benotzen .disabledals Utility Klass hei, ähnlech wéi déi gemeinsam .activeKlass, sou datt kee Präfix erfuerderlech ass.

Link Funktionalitéit Opgepasst

Dës Klass benotzt pointer-events: nonefir ze probéieren d'Linkfunktionalitéit vu <a>s auszeschalten, awer dës CSS-Eegeschaft ass nach net standardiséiert an ass net voll ënnerstëtzt an Opera 18 a méi niddereg, oder am Internet Explorer 11. Zousätzlech, souguer a Browser déi ënnerstëtzen pointer-events: none, Keyboard Navigatioun bleift onofhängeg, dat heescht datt gesinn Tastatur Benotzer a Benotzer vun Hëllefstechnologien nach ëmmer kënnen dës Linken aktivéieren. Also fir sécher ze sinn, benotzt personaliséiert JavaScript fir sou Linken auszeschalten.

Reaktiounsfäeger Biller

Biller am Bootstrap 3 kënne reaktiounsfäeg gemaach ginn iwwer d'Zousatz vun der .img-responsiveKlass. Dëst gëllt max-width: 100%;, height: auto;a display: block;fir d'Bild sou datt et gutt op d'Elterenelement skaléiert.

Fir Biller ze zentréieren déi d' .img-responsiveKlass benotzen, benotzt .center-blockamplaz .text-center. Kuckt d'Helfer Klassen Sektioun fir méi Detailer iwwer .center-blockd'Benotzung.

SVG Biller an IE 8-10

Am Internet Explorer 8-10 sinn SVG Biller mat .img-responsiveonproportional Gréisst. Fir dëst ze fixéieren, addéiere width: 100% \9;wou néideg. Bootstrap applizéiert dëst net automatesch well et Komplikatioune fir aner Bildformater verursaacht.

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

Bild Formen

Füügt Klassen un en <img>Element fir einfach Biller an all Projet ze styléieren.

Cross-Browser Kompatibilitéit

Denkt drun datt Internet Explorer 8 Ënnerstëtzung fir ofgerënnt Ecker feelt.

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

Kontextuell Faarwen

Vermëttelt Bedeitung duerch Faarf mat enger Handvoll Akzent Utility Klassen. Dës kënnen och op Linken ugewannt ginn a wäerten am Hover däischter ginn, sou wéi eis Standardlinkstiler.

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>

Ëmgank mat Spezifizitéit

Heiansdo Schwéierpunkt Klassen kënnen net applizéiert ginn wéinst der Spezifizitéit vun engem anere selector. An deene meeschte Fäll ass eng genuch Léisung fir Ären Text an engem <span>mat der Klass ze wéckelen.

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (d'kontextuell Faarwen ginn nëmme benotzt fir Bedeitung ze verstäerken, déi schonn am Text/Markup präsent ass), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass. .

Kontextuellen Hannergrënn

Ähnlech wéi de kontextuellen Textfaarfklassen, setzt den Hannergrond vun engem Element einfach op all kontextuell Klass. Ankerkomponenten ginn däischter beim Hover, grad wéi d'Textklassen.

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>

Ëmgank mat Spezifizitéit

Heiansdo kënnen kontextuellen Hannergrondklassen net applizéiert ginn wéinst der Spezifizitéit vun engem anere Selektor. A verschiddene Fäll ass eng genuch Léisung fir Ären Element Inhalt an engem <div>mat der Klass ze wéckelen.

Bedeitung vun Hëllefstechnologien

Wéi mat kontextuelle Faarwen , gitt sécher datt all Bedeitung, déi duerch Faarf vermëttelt gëtt, och an engem Format vermëttelt gëtt dat net reng präsentativ ass.

Zoumaachen Ikon

Benotzt déi generesch Zoumaache Ikon fir Inhalter wéi Modalen an Alarmer ze entloossen.

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

Carets

Benotzt Carets fir dropdown Funktionalitéit a Richtung unzeginn. Bedenkt datt den Default Caret automatesch an Dropup Menuen ëmgedréit gëtt .

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

Schnell schwëmmt

Float en Element lénks oder riets mat enger Klass. !importantass abegraff fir Spezifizitéitsprobleemer ze vermeiden. Klassen kënnen och als Mixins benotzt ginn.

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

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

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

Center Inhalt Spären

Set en Element op display: blockan Zentrum via margin. Verfügbar als Mixin a 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

Einfach kloer floats andeems Dir .clearfix un d'Elterenelement bäidréit . Benotzt de Mikro Clearfix wéi populär vum Nicolas Gallagher. Kann och als Mixin benotzt ginn.

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

Inhalt ze weisen an ze verstoppen

Force en Element ze weisen oder ze verstoppen ( och fir Écran Lieser ) mat der Benotzung vun .showa .hiddenKlassen. Dës Klassen benotzen !importantfir Spezifizitéitskonflikter ze vermeiden, grad wéi déi séier Schwammen . Si sinn nëmme verfügbar fir Blockniveau ze wiesselen. Si kënnen och als Mixins benotzt ginn.

.hideass verfügbar, awer et beaflosst net ëmmer Écran Lieser a gëtt ab v3.0.1 ofgeschaaft. Benotzt .hiddenoder .sr-onlyamplaz.

Ausserdeem .invisibleka benotzt ginn fir nëmmen d'Visibilitéit vun engem Element ze wiesselen, dat heescht datt displayet net geännert gëtt an d'Element kann nach ëmmer de Flux vum Dokument beaflossen.

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

Écran Lieser a Keyboard Navigatioun Inhalt

Verstoppen en Element op all Apparater ausser Écran Lieser mat .sr-only. Kombinéiert .sr-onlymat .sr-only-focusablefir d'Element erëm ze weisen wann et fokusséiert ass (zB vun engem Keyboard-nëmmen Benotzer). Noutwendeg fir d' Accessibilitéit bescht Praktiken ze verfollegen . Kann och als Mixins benotzt ginn.

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

Bild Ersatz

Benotzt d' .text-hideKlass oder Mixin fir den Textinhalt vun engem Element mat engem Hannergrondbild ze ersetzen.

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

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

Fir méi séier mobil-frëndlech Entwécklung, benotzt dës Utility-Klassen fir Inhalt per Apparat iwwer Medienafro ze weisen an ze verstoppen. Och abegraff sinn Utility Klassen fir Inhalt ze wiesselen wann se gedréckt ginn.

Probéiert dës op enger limitéierter Basis ze benotzen a vermeit ganz verschidde Versioune vum selwechte Site ze kreéieren. Amplaz benotzt se fir d'Presentatioun vun all Apparat ze ergänzen.

Verfügbar Klassen

Benotzt eng eenzeg oder Kombinatioun vun de verfügbare Klassen fir Inhalt iwwer Viewport Breakpoints ze wiesselen.

	Extra kleng ApparaterTelefonen (<768px)	Kleng ApparaterPëllen (≥768px)	Mëttelméisseg ApparaterDesktops (≥992px)	Grouss ApparaterDesktops (≥1200px)
`.visible-xs-*`	Siichtbar	Verstoppt	Verstoppt	Verstoppt
`.visible-sm-*`	Verstoppt	Siichtbar	Verstoppt	Verstoppt
`.visible-md-*`	Verstoppt	Verstoppt	Siichtbar	Verstoppt
`.visible-lg-*`	Verstoppt	Verstoppt	Verstoppt	Siichtbar
`.hidden-xs`	Verstoppt	Siichtbar	Siichtbar	Siichtbar
`.hidden-sm`	Siichtbar	Verstoppt	Siichtbar	Siichtbar
`.hidden-md`	Siichtbar	Siichtbar	Verstoppt	Siichtbar
`.hidden-lg`	Siichtbar	Siichtbar	Siichtbar	Verstoppt

Vun v3.2.0, d' .visible-*-*Klassen fir all breakpoint kommen an dräi Variatiounen, eng fir all CSS displayPropriétéit Wäert ënnendrënner opgezielt.

Grupp vu Klassen	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Also, fir extra kleng ( xs) Schiirme zum Beispill, sinn déi verfügbar .visible-*-*Klassen: .visible-xs-block, .visible-xs-inline, an .visible-xs-inline-block.

D'Klassen .visible-xs, .visible-sm, .visible-md, an .visible-lgexistéieren och, awer sinn ab v3.2.0 ofgeschaaft . Si sinn ongeféier gläichwäerteg zu .visible-*-block, ausser mat zousätzlech spezielle Fäll fir toggling- <table>Zesummenhang Elementer.

Drécken Klassen

Ähnlech wéi déi regulär reaktiounsfäeger Klassen, benotzt dës fir Inhalt fir Drécken ze wiesselen.

Klassen	Browser	Drécken
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Verstoppt	Siichtbar
`.hidden-print`	Siichtbar	Verstoppt

D'Klass .visible-printexistéiert och awer gëtt ab v3.2.0 ofgeschnidden. Et ass ongeféier gläichwäerteg mat .visible-print-block, ausser mat zousätzlech spezielle Fäll fir <table>-relatéiert Elementer.

Test Fäll

Ännert Äre Browser d'Gréisst oder lued op verschidden Apparater fir déi reaktiounsfäeger Utility Klassen ze testen.

Siichtbar op ...

Gréng Scheckzeechen weisen datt d'Element an Ärem aktuelle Viewport siichtbar ass.

Extra kleng ✔ Siichtbar op x-small

Kleng ✔ Siichtbar op kleng

Mëttelméisseg ✔ Siichtbar op Medium

Grouss ✔ Siichtbar op grouss

Extra kleng a kleng ✔ Siichtbar op x-small a small

Mëttelméisseg a grouss ✔ Siichtbar op mëttel a grouss

Extra kleng a mëttel ✔ Siichtbar op x-small a medium

Kleng a grouss ✔ Siichtbar op kleng a grouss

Extra kleng a grouss ✔ Siichtbar op x-small a large

Kleng a mëttel ✔ Siichtbar op kleng a mëttel

Verstoppt op ...

Hei, gréng Scheckzeechen weisen och datt d'Element an Ärem aktuelle Viewport verstoppt ass.

Extra kleng ✔ Verstoppt op x-small

Kleng ✔ Verstoppt op kleng

Mëttelméisseg ✔ Verstoppt op Medium

Grouss ✔ Verstoppt op grouss

Extra kleng a kleng ✔ Verstoppt op x-small a small

Mëttelméisseg a grouss ✔ Verstoppt op mëttel a grouss

Extra kleng a mëttel ✔ Verstoppt op x-small a medium

Kleng a grouss ✔ Verstoppt op Kleng a Grouss

Extra kleng a grouss ✔ Verstoppt op x-small a large

Kleng a mëttel ✔ Verstoppt op kleng a mëttel

Bootstrap's CSS ass op Less gebaut, e Preprocessor mat zousätzlech Funktionalitéit wéi Variablen, Mixins a Funktiounen fir CSS ze kompiléieren. Déi, déi d'Quell manner Dateien benotzen amplaz vun eise kompiléierte CSS-Dateien, kënne vun de ville Variablen a Mixins benotzen, déi mir am ganze Kader benotzen.

Grid Variablen a Mixins sinn an der Grid System Sektioun ofgedeckt .

Bootstrap kompiléieren

Bootstrap kann op d'mannst zwee Weeër benotzt ginn: mat der kompiléierter CSS oder mat der Quell manner Dateien. Fir déi Manner Dateien ze kompiléieren, konsultéiert d'Getting Started Sektioun fir wéi Dir Äert Entwécklungsëmfeld opstellt fir déi néideg Kommandoen auszeféieren.

Drëtt Partei Kompiléierungsinstrumenter kënne mat Bootstrap funktionnéieren, awer si ginn net vun eisem Kärteam ënnerstëtzt.

Variablen

Variablen ginn am ganze Projet benotzt als Wee fir allgemeng benotzte Wäerter wéi Faarwen, Abstand oder Schrëftstapelen ze zentraliséieren an ze deelen. Fir e kompletten Decompte, kuckt w.e.g. de Customizer .

Faarwen

Benotzt einfach zwee Faarfschemaen: Greyscale a semantesch. Greyscale Faarwen bidden e séieren Zougang zu allgemeng benotzte schwaarze Schatten, während semantesch verschidde Faarwen enthalen déi sënnvoll kontextuell Wäerter zougewisen sinn.

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

Benotzt eng vun dëse Faarfvariablen wéi se sinn oder verännert se op méi sënnvoll Variablen fir Äre Projet.

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

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

Steieren

Eng Handvoll Variabelen fir séier Schlësselelementer vum Skelett vun Ärem Site ze personaliséieren.

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

Linken

Stylesch Är Linken einfach mat der richteger Faarf mat nëmmen engem Wäert.

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

Notéiert datt de @link-hover-colorbenotzt eng Funktioun, en anert fantastescht Tool vu Less, fir automagesch déi richteg Hoverfaarf ze kreéieren. Dir kënnt darken, lighten, saturate, an desaturate.

Typographie

Setzt Är Schrëftgréisst, Textgréisst, Lead a méi einfach mat e puer schnelle Variabelen. Bootstrap benotzt dës och fir einfach typographesch Mixins ze bidden.

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

Ikonen

Zwee séier Variablen fir de Standuert an de Dateinumm vun Ären Ikonen ze personaliséieren.

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

Komponenten

Komponente uechter Bootstrap benotzen e puer Standardvariablen fir gemeinsam Wäerter ze setzen. Hei sinn déi meescht benotzt.

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

Verkeefer Mixins

Vendor Mixins si Mixins fir ze hëllefen verschidde Browser z'ënnerstëtzen andeems Dir all relevant Vendor Präfixe an Ärem kompiléierte CSS enthält.

Këscht Gréisst

Zerécksetzen Äre Komponenten 'Box Modell mat engem eenzege Mixin. Fir Kontext, kuckt dësen hëllefräichen Artikel vu Mozilla .

De Mixin gëtt ab v3.2.0 ofgeschaaft, mat der Aféierung vum Autoprefixer. Fir Réckkompatibilitéit ze erhalen, wäert Bootstrap weider de Mixin intern benotzen bis Bootstrap v4.

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

Ofgerënnt Ecker

Haut ënnerstëtzen all modern Browser déi net-prefixéiert border-radiusEegeschafte. Als esou gëtt et kee .border-radius()Mixin, awer Bootstrap enthält Ofkiirzungen fir séier zwee Ecker op enger bestëmmter Säit vun engem Objet ze ronnen.

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

Wann Är Zilpublikum déi lescht a gréisste Browser an Apparater benotzt, gitt sécher datt Dir d' box-shadowPropriétéit eleng benotzt. Wann Dir Ënnerstëtzung fir eeler Android (pre-v4) an iOS Geräter (pre-iOS 5) braucht, benotzt den deprecéierten Mixin fir déi erfuerderlech opzehuelen-webkit Präfix opzehuelen.

De Mixin gëtt ab v3.1.0 ofgeschaaft, well Bootstrap net offiziell déi al Plattformen ënnerstëtzt déi d'Standardeigenschaft net ënnerstëtzen. Fir Réckkompatibilitéit ze erhalen, wäert Bootstrap weider de Mixin intern benotzen bis Bootstrap v4.

Gitt sécher d' rgba()Faarwen an Äre Këschtschatten ze benotzen, sou datt se sou nahtlos wéi méiglech mat Hannergrënn vermëschen.

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

Iwwergäng

Multiple Mixins fir Flexibilitéit. Setzt all Iwwergangsinformatioun mat engem, oder spezifizéiert eng separat Verzögerung an Dauer wéi néideg.

D'Mixins ginn ab v3.2.0 ofgeschaaft, mat der Aféierung vum Autoprefixer. Fir Réckkompatibilitéit ze erhalen, wäert Bootstrap weider d'Mixins intern benotzen bis 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;
}

Transformatiounen

Rotéieren, skaléieren, iwwersetzen (beweegen), oder scheien all Objet.

D'Mixins ginn ab v3.2.0 ofgeschaaft, mat der Aféierung vum Autoprefixer. Fir Réckkompatibilitéit ze erhalen, wäert Bootstrap weider d'Mixins intern benotzen bis 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;
}

Animatiounen

Eng eenzeg Mixin fir all CSS3 Animatiounseigenschaften an enger Deklaratioun an aner Mixins fir eenzel Eegeschaften ze benotzen.

D'Mixins ginn ab v3.2.0 ofgeschaaft, mat der Aféierung vum Autoprefixer. Fir Réckkompatibilitéit ze erhalen, wäert Bootstrap weider d'Mixins intern benotzen bis 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;
}

Opazitéit

Setzt d'Opazitéit fir all Browser a gitt e filterRéckfall fir IE8.

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

Placeholder Text

Gitt Kontext fir Formkontrolle bannent all Feld.

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

Kolonnen

Generéiere Kolonnen iwwer CSS bannent engem eenzegen 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;
}

Gradienten

Maacht einfach all zwou Faarwen an en Hannergrondgradient. Gitt méi fortgeschratt a setzt eng Richtung, benotzt dräi Faarwen oder benotzt e radial Gradient. Mat engem eenzege Mixin kritt Dir all Präfix Syntaxen déi Dir braucht.

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

Dir kënnt och de Wénkel vun engem Standard zwee-faarweg, linear Gradient uginn:

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

Wann Dir e Barber-Streifen-Stil Gradient braucht, ass dat och einfach. Gitt just eng eenzeg Faarf un a mir iwwerlageren eng transluzent wäiss Sträif.

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

Up den Ante a benotzt dräi Faarwen amplaz. Setzt déi éischt Faarf, déi zweet Faarf, de Faarfstopp vun der zweeter Faarf (e Prozentsazwäert wéi 25%), an déi drëtt Faarf mat dëse Mixins:

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

Kapp erop! Sollt Dir jeemools e Gradient ewechhuelen musst, gitt sécher all IE-spezifesch ze läschen, déi filterDir bäigefüügt hutt. Dir kënnt dat maachen andeems Dir de .reset-filter()Mixin niewendrun benotzt background-image: none;.

Utility Mixins

Utility Mixins sinn Mixins déi soss net verbonne CSS Eegeschafte kombinéiere fir e spezifescht Zil oder Aufgab z'erreechen.

Clearfix

Vergiesst class="clearfix"all Element ze addéieren an stattdessen de .clearfix()Mixin derbäi wann et passend ass. Benotzt de Mikro Clearfix vum Nicolas Gallagher .

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

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

Horizontal zentréieren

Zenter séier all Element a sengem Elterendeel. Verlaangt widthoder max-widthze setzen.

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

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

Gréisst Hëllef

Gitt d'Dimensioune vun engem Objet méi einfach un.

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

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

Änneren Textberäicher

Einfach d'Gréisst änneren Optiounen fir all Textberäich, oder all aner Element konfiguréieren. Standard fir normal Browserverhalen ( both).

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

Text ofschneiden

Einfach Text mat enger Ellipsis mat engem eenzegen Mixin ofschneiden. Verlaangt Element gin blockoder inline-blockNiveau.

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

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

Netzhaut Biller

Gitt zwee Bildweeër an d'@1x Bild Dimensiounen un, a Bootstrap gëtt eng @2x Medien Ufro. Wann Dir vill Biller hutt fir ze déngen, betruecht Äert Netzhaut-Bild CSS manuell an enger eenzeger Medienquery ze schreiwen.

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

Während Bootstrap op Less gebaut ass, huet et och en offiziellen Sass Hafen . Mir halen et an engem getrennten GitHub Repository a behandelen Updates mat engem Konversiounsskript.

Wat ass mat abegraff

Zënter dem Sass Hafen e separaten Repo huet an e bëssen anere Publikum servéiert, ënnerscheede sech den Inhalt vum Projet staark vum Haapt Bootstrap Projet. Dëst garantéiert datt de Sass Hafen sou kompatibel mat sou vill wéi méiglech Sass-baséiert Systemer ass.

Wee	Beschreiwung
`lib/`	Ruby Gem Code (Sass Konfiguratioun, Rails a Compass Integratiounen)
`tasks/`	Konverter Scripten (Upstream manner op Sass dréinen)
`test/`	Zesummesetzung Tester
`templates/`	Kompass Package Manifest
`vendor/assets/`	Sass, JavaScript a Schrëftdateien
`Rakefile`	Intern Aufgaben, wéi Rake a Convertéieren

Besicht de Sass Port's GitHub Repository fir dës Dateien an Aktioun ze gesinn.

Installatioun

Fir Informatiounen iwwer wéi Dir Bootstrap fir Sass installéiert a benotzt, kuckt de GitHub Repository readme . Et ass déi aktuellst Quell an enthält Informatioun fir ze benotzen mat Rails, Compass, a Standard Sass Projeten.

Bootstrap fir Sass

CSS

Iwwersiicht

HTML5 doctype

Mobile éischt

Typographie a Linken

Normaliséieren.css

Container

Gitter System

Aféierung

Medien Ufroen

Gitter Optiounen

Beispill: gestapelt-zu-horizontal

Beispill: Flëssegkeetsbehälter

Beispill: Mobile an Desktop

Beispill: Handy, Tablet, Desktop

Beispill: Kolonne Wrapping

Reaktiounsfäeger Kolonn zréckgesat

Offset Sailen

Nesting Sailen

Kolonn Uerdnung

Manner Mixins a Variabelen

Variablen

Mixins

Beispill Benotzung

Typographie

Rubriken

h1. Bootstrap Rubrik

h2 vun. Bootstrap Rubrik

h3 vun. Bootstrap Rubrik

h4 vun. Bootstrap Rubrik

h5. Bootstrap Rubrik

h6. Bootstrap Rubrik

h1. Bootstrap Rubrik Secondaire Text

h2 vun. Bootstrap Rubrik Secondaire Text

h3 vun. Bootstrap Rubrik Secondaire Text

h4 vun. Bootstrap Rubrik Secondaire Text

h5. Bootstrap Rubrik Secondaire Text

h6. Bootstrap Rubrik Secondaire Text

Kierper Kopie

Lead Kierper Kopie

Gebaut mat manner

Inline Text Elementer

Markéierten Text

Geläscht Text

Duerchgestrachen Text

Agebauten Text

Ënnersträichen Text

Klengen Text

Fett

Kursiv

Alternativ Elementer

Ausriichtung Klassen

Transformatioun Klassen

Ofkierzungen

Basis Ofkierzung

Initialismus

Adressen

Blockquotes

Standard Blockquote

Blockquote Optiounen

Eng Quell benennen

Alternativ Affichage

Lëschten

Onbestallt

Bestallt

Unstyled

An der Schlaang

Beschreiwung

Horizontal Beschreiwung

Auto-Trunkatioun

Code

An der Schlaang

Benotzer Input

Basis Block

Variablen

Prouf Ausgang

Dëscher

Basis Beispill

Gestreift Reihen

Cross-Browser Kompatibilitéit

Demo`:focus` Staat

Opgepasst iwwer Link Funktionalitéit vun`<a>`

Optional Symboler mat verstoppte `.sr-only`Etiketten