Krij it leechste fan 'e kaaistikken fan' e ynfrastruktuer fan Bootstrap, ynklusyf ús oanpak foar bettere, rappere, sterkere webûntwikkeling.

HTML5 doctype

Bootstrap makket gebrûk fan bepaalde HTML-eleminten en CSS-eigenskippen dy't it gebrûk fan it HTML5-doktype nedich binne. Meitsje it op oan it begjin fan al jo projekten.

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

Mobile earst

Mei Bootstrap 2 hawwe wy opsjonele mobylfreonlike stilen tafoege foar wichtige aspekten fan it ramt. Mei Bootstrap 3 hawwe wy it projekt fan it begjin ôf mobylfreonlik herskreaun. Ynstee fan opsjonele mobile stilen ta te foegjen, wurde se direkt yn 'e kearn bakt. Yn feite is Bootstrap earst mobyl . Mobile earste stilen kinne fûn wurde yn 'e heule bibleteek ynstee fan yn aparte bestannen.

Foegje de viewport-metatag ta oan jo <head>.

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

Jo kinne zoommooglikheden op mobile apparaten útskeakelje troch ta te foegjen user-scalable=nooan de viewport-metatag. Dit skeakelet zoomjen út, wat betsjuttet dat brûkers allinich kinne rôlje, en resultearret yn dat jo side in bytsje mear fielt as in native applikaasje. Oer it algemien riede wy dit net oan op elke side, dus wês foarsichtich!

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

Typografy en keppelings

Bootstrap stelt basis globale werjefte, typografy, en keppelingsstilen yn. Spesifyk, wy:

Set background-color: #fff;op debody
Brûk de @font-family-base, @font-size-base, en @line-height-baseattributen as ús typografyske basis
Stel de wrâldwide keppelingskleur yn fia @link-coloren tapasse keppeling ûnderstreken allinich op:hover

Dizze stilen kinne fûn wurde binnen scaffolding.less.

Normalize.css

Foar ferbettere cross-browser-rendering brûke wy Normalize.css , in projekt fan Nicolas Gallagher en Jonathan Neal .

Containers

Bootstrap fereasket in befetsjend elemint om side-ynhâld yn te wikkeljen en ús rastersysteem te ûnderbringen. Jo kinne ien fan twa konteners kieze om te brûken yn jo projekten. Tink derom dat, fanwegen paddingen mear, gjin kontener nestabel is.

Brûk .containerfoar in responsyf fêste breedte container.

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

Brûk .container-fluidfoar in folsleine breedte container, oerspant de hiele breedte fan jo viewport.

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

Bootstrap omfettet in responsyf, mobyl earste floeistofrastersysteem dat passend skaal oant 12 kolommen as it apparaat- of viewportgrutte nimt ta. It omfettet foarôf definieare klassen foar maklike yndielingsopsjes, lykas krêftige mixins foar it generearjen fan mear semantyske yndielingen .

Ynlieding

Rastersystemen wurde brûkt foar it meitsjen fan side-yndielingen fia in searje rigen en kolommen dy't jo ynhâld befetsje. Hjir is hoe't it Bootstrap-rastersysteem wurket:

Rigen moatte pleatst wurde binnen in .container(fêste breedte) of .container-fluid(folsleine breedte) foar goede ôfstimming en padding.
Brûk rigen om horizontale groepen fan kolommen te meitsjen.
Ynhâld moat wurde pleatst binnen kolommen, en allinnich kolommen meie wêze direkte bern fan rigen.
Foarôf definieare rasterklassen lykas .rowen .col-xs-4binne beskikber foar fluch it meitsjen fan rasteryndielingen. Minder mixins kinne ek brûkt wurde foar mear semantyske opmaak.
Kolommen meitsje goaten (gatten tusken kolomynhâld) fia padding. Dat padding wurdt offset yn rigen foar de earste en lêste kolom fia negative marzje op .rows.
De negative marzje is wêrom de foarbylden hjirûnder binne outdented. It is sa dat ynhâld binnen rasterkolommen is opsteld mei net-rasterynhâld.
Gridkolommen wurde oanmakke troch it oantal tolve beskikbere kolommen oan te jaan dat jo wolle oerspanje. Bygelyks, trije lykweardige kolommen soene trije brûke .col-xs-4.
As mear as 12 kolommen wurde pleatst binnen ien rige, sil elke groep fan ekstra kolommen, as ien ienheid, wrap op in nije rigel.
Gridklassen jilde foar apparaten mei skermbreedtes grutter as of gelyk oan de brekpuntgrutte, en oerskriuwe rasterklassen dy't rjochte binne op lytsere apparaten. Dêrom sil bygelyks it tapassen fan elke .col-md-*klasse op in elemint net allinich syn styling beynfloedzje op middelgrutte apparaten, mar ek op grutte apparaten as in .col-lg-*klasse net oanwêzich is.

Sjoch nei de foarbylden foar it tapassen fan dizze prinsipes op jo koade.

Media queries

Wy brûke de folgjende mediafragen yn ús Minder bestannen om de wichtige brekpunten yn ús rastersysteem te meitsjen.

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

Wy wreidzje sa no en dan út op dizze mediafragen om in op te nimmen max-widthom CSS te beheinen ta in smellere set fan apparaten.

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

Grid opsjes

Sjoch hoe't aspekten fan it Bootstrap-rastersysteem wurkje oer meardere apparaten mei in handige tabel.

	Ekstra lytse apparaten Tillefoans (<768px)	Lytse apparaten Tablets (≥768px)	Medium apparaten Buroblêden (≥992px)	Desktops foar grutte apparaten (≥1200px)
Grid gedrach	Horizontaal op alle tiden	Ynstoarten om te begjinnen, horizontaal boppe brekpunten
Container breedte	Gjin (auto)	750px	970px	1170 px
Klasse foarheaksel	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# fan kolommen	12
Kolom breedte	Auto	~62px	~81px	~97px
Gootbreedte	30px (15px oan elke kant fan in kolom)
Nestable	Ja
Offsets	Ja
Kolombestelling	Ja

Foarbyld: steapele-to-horizontaal

Mei in inkele set fan .col-md-*rasterklassen kinne jo in basisrastersysteem oanmeitsje dat begjint te steapele op mobile apparaten en tabletapparaten (it ekstra lyts oant lyts berik) foardat it horizontaal wurdt op buroblêd (medium) apparaten. Plak rasterkolommen yn elke .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>

Foarbyld: Fluid container

Feroarje elke rasteropmaak mei fêste breedte yn in yndieling foar folsleine breedte troch jo bûtenste te feroarjen .containernei .container-fluid.

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

Foarbyld: Mobyl en buroblêd

Wolle jo jo kolommen net gewoan opsteapele wurde yn lytsere apparaten? Brûk de ekstra lytse en middelgrutte apparaatrasterklassen troch ta te foegjen .col-xs-* .col-md-*oan jo kolommen. Sjoch it foarbyld hjirûnder foar in better idee fan hoe't it allegear wurket.

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

Foarbyld: Mobile, tablet, desktop

Bou op it foarige foarbyld troch noch dynamyskere en krêftiger yndielingen te meitsjen mei tabletklassen .col-sm-*.

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

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

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

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

Foarbyld: Column wrapping

As mear as 12 kolommen wurde pleatst binnen ien rige, sil elke groep fan ekstra kolommen, as ien ienheid, wrap op in nije rigel.

.col-xs-9

.col-xs-4
Sûnt 9 + 4 = 13 > 12, dizze 4-kolom-wide div wurdt ferpakt op in nije line as ien oanienwei ienheid.

.col-xs-6
Folgjende kolommen trochgean lâns de nije line.

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

Responsive kolom weromsette

Mei de beskikbere fjouwer lagen fan rasters, sille jo problemen tsjinkomme wêrby't jo kolommen op bepaalde brekpunten net krekt dúdlik wurde, om't de iene grutter is as de oare. Om dat te reparearjen, brûk in kombinaasje fan a .clearfixen ús responsive nutklassen .

.col-xs-6 .col-sm-3
Feroarje de grutte fan jo viewport of kontrolearje it op jo tillefoan foar in foarbyld.

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

Njonken it wiskjen fan kolommen by responsive breakpoints, moatte jo miskien offsets, triuwen of pulls weromsette . Sjoch dit yn aksje yn it rasterfoarbyld .

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

Goaten fuortsmite

Fuortsmite de gutters út in rige en it is kolommen mei de .row-no-guttersklasse.

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

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

.col-xs-6

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

Offset kolommen

Ferpleats kolommen nei rjochts mei help fan .col-md-offset-*klassen. Dizze klassen fergrutsje de loftermarge fan in kolom troch *kolommen. Bygelyks, .col-md-offset-4beweecht .col-md-4oer fjouwer kolommen.

.col-md-4

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

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

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

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

Jo kinne ek oerskriuwe offsets fan legere grid tiers mei .col-*-offset-0klassen.

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

Nesting kolommen

Om jo ynhâld mei it standertraster te nesteljen, foegje in nije .rowen set .col-sm-*kolommen ta binnen in besteande .col-sm-*kolom. Neste rigen moatte in set fan kolommen befetsje dy't 12 of minder optelle (it is net fereaske dat jo alle 12 beskikbere kolommen brûke).

Niva 1: .col-sm-9

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

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

Kolombestelling

Feroarje maklik de folchoarder fan ús ynboude rasterkolommen mei .col-md-push-*en .col-md-pull-*modifikaasje-klassen.

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

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

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

Minder mixins en fariabelen

Neist foarboude rasterklassen foar rappe opmaak, omfettet Bootstrap Minder fariabelen en mixins foar it fluch generearjen fan jo eigen ienfâldige, semantyske opmaak.

Fariabelen

Fariabelen bepale it oantal kolommen, de gootbreedte en it mediafraachpunt wêrop driuwende kolommen begjinne moatte. Wy brûke dizze om de foarôf definieare rasterklassen te generearjen dy't hjirboppe dokuminteare binne, lykas foar de oanpaste mixins hjirûnder.

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

Mixins

Mixins wurde brûkt yn kombinaasje mei de rasterfariabelen om semantyske CSS te generearjen foar yndividuele rasterkolommen.

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

Foarbyld fan gebrûk

Jo kinne de fariabelen oanpasse oan jo eigen oanpaste wearden, of gewoan de mixins brûke mei har standertwearden. Hjir is in foarbyld fan it brûken fan de standertynstellingen om in opmaak mei twa kolommen te meitsjen mei in gat tusken.

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

Headings

Alle HTML-koppen, <h1>fia <h6>, binne beskikber. .h1troch .h6klassen binne ek beskikber, foar wannear't jo wolle oerienkomme mei it lettertype styling fan in koptekst, mar dochs wolle jo tekst wurdt werjûn ynline.

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

Meitsje lichtere, sekundêre tekst yn elke koptekst mei in generike <small>tag of de .smallklasse.

h1. Bootstrap heading Sekundêre tekst

h2. Bootstrap heading Sekundêre tekst

h3. Bootstrap heading Sekundêre tekst

h4. Bootstrap heading Sekundêre tekst

h5. Bootstrap heading Sekundêre tekst

h6. Bootstrap heading Sekundêre tekst

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

Body kopy

De globale standert fan Bootstrap font-sizeis 14px , mei in line-heightfan 1.428 . Dit wurdt tapast op de <body>en alle paragrafen. Derneist <p>krije (paragrafen) in ûnderste marzje fan de helte fan har berekkene linehichte (standert 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Kopy fan lead lichem

Meitsje in paragraaf opfallend troch ta te foegjen .lead.

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

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

Boud mei Minder

De typografyske skaal is basearre op twa Minder fariabelen yn fariabelen.minder : @font-size-baseen @line-height-base. De earste is de basislettertypegrutte dy't troch it heule brûkt wurdt en de twadde is de basislinehichte. Wy brûke dy fariabelen en wat ienfâldige wiskunde om de marzjes, paddings, en line-hichtes fan al ús type en mear te meitsjen. Pas se oan en Bootstrap past him oan.

Inline tekst eleminten

Markearre tekst

<mark>Brûk de tag om in run tekst te markearjen fanwege de relevânsje yn in oare kontekst .

Jo kinne de mark tag brûke omhichtepunttekst.

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

Tekst wiske

<del>Brûk de tag om tekstblokken oan te jaan dy't wiske binne .

~~Dizze rigel tekst is bedoeld om behannele te wurden as wiske tekst.~~

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

Trochstreke tekst

<s>Brûk de tag om tekstblokken oan te jaan dy't net mear relevant binne .

~~Dizze rigel tekst is bedoeld om behannele te wurden as net mear akkuraat.~~

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

Ynfoege tekst

<ins>Brûk de tag om tafoegings oan it dokumint oan te jaan .

Dizze rigel tekst is bedoeld om behannele te wurden as in tafoeging oan it dokumint.

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

Underline tekst

Brûk de <u>tag om tekst te ûnderstreekjen.

Dizze rigel tekst sil werjaan as ûnderstreke

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

Meitsje gebrûk fan HTML's standert klam tags mei lichtgewicht stilen.

Lytse tekst

Foar it ûntbrekken fan inline of tekstblokken, brûk de <small>tag om tekst yn te stellen op 85% fan de grutte fan 'e âlder. Heading eleminten krije har eigen font-sizefoar nestele <small>eleminten.

Jo kinne alternatyf in ynline elemint brûke mei .smallyn plak fan elke <small>.

Dizze rigel tekst is bedoeld om behannele te wurden as lytse print.

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

Fet

Foar it beklamjen fan in stikje tekst mei in swierder lettertype-gewicht.

It folgjende stikje tekst wurdt werjûn as fet tekst .

<strong>rendered as bold text</strong>

Kursyf

Foar it beklamjen fan in stikje tekst mei kursyf.

It folgjende stikje tekst wurdt werjûn as kursive tekst .

<em>rendered as italicized text</em>

Alternatyf eleminten

Fiel jo frij om te brûken <b>en <i>yn HTML5. <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.

Alignment klassen

Meitsje tekst maklik opnij oan komponinten mei tekstôfstimmingsklassen.

Links rjochte tekst.

Sintrum rjochte tekst.

Rjochts rjochte tekst.

Rjochtfeardige tekst.

Gjin wrap tekst.

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

Transformaasje klassen

Transformearje tekst yn komponinten mei tekstkapitalisaasjeklassen.

Tekst mei lytse letters.

Tekst mei haadletters.

Tekst mei haadletter.

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

Ofkoartings

Stilisearre ymplemintaasje fan HTML's <abbr>elemint foar ôfkoartings en akronyms om de útwreide ferzje te sjen op hover. Ofkoartings mei in titleattribút hawwe in ljocht stippele boaiemrâne en in helpoanwizer op hover, it bieden fan ekstra kontekst by hover en oan brûkers fan assistinte technologyen.

Basis ôfkoarting

In ôfkoarting fan it wurd attribút is attr .

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

Inisjalisme

Taheakje .initialismoan in ôfkoarting foar in wat lytsere lettertypegrutte.

HTML is it bêste ding sûnt gesneden bôle.

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

Adressen

Presintearje kontaktynformaasje foar de tichtstbye foarâlden as it hiele lichem fan wurk. Bewarje opmaak troch alle rigels te einigjen mei <br>.

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

Folsleine namme
[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

Foar it oanheljen fan blokken ynhâld fan in oare boarne binnen jo dokumint.

Standert blokquote

Wrap <blockquote>om elke HTML as it sitaat. Foar rjochte quotes, wy riede in <p>.

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

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

Blockquote opsjes

Styl en ynhâld feroaret foar ienfâldige fariaasjes op in standert <blockquote>.

In boarne neame

Foegje in <footer>foar it identifisearjen fan de boarne. Wrap de namme fan it boarnewurk yn <cite>.

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

Immen ferneamd yn Boarne 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>

Alternatyf byldskermen

Taheakje .blockquote-reversefoar in blokquote mei rjochts rjochte ynhâld.

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

Immen ferneamd yn Boarne Titel

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

Listen

Net oardere

In list mei items wêryn de folchoarder net eksplisyt fan belang is.

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

Besteld

In list mei items wêryn't de folchoarder eksplisyt fan belang is .

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

Fuortsmite de standert list-styleen lofter marzje op list items (allinich direkte bern). Dit jildt allinich foar items fan direkte bernlist , wat betsjut dat jo de klasse ek moatte tafoegje foar alle nestede listen.

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

Ynline

Plak alle list items op ien rigel mei display: inline-block;en wat ljocht padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Beskriuwing

In list mei termen mei har byhearrende beskriuwingen.

Beskriuwing listen: In beskriuwingslist is perfekt foar it definiearjen fan termen.
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>

Horizontale beskriuwing

Meitsje termen en beskriuwingen yn <dl>line-up side-by-side. Begjint steapele as standert <dl>s, mar as de navbar útwreidet, dogge dizze dus.

Beskriuwing listen: In beskriuwingslist is perfekt foar it definiearjen fan termen.
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-truncating

Horizontale beskriuwingslisten sille termen ôfbrekke dy't te lang binne om yn 'e lofterkolom te passen mei text-overflow. Yn smellere viewports sille se feroarje nei de standert steapele yndieling.

Ynline

Wrap ynline snippets fan koade mei <code>.

Bygelyks, <section>moatte wurde ferpakt as inline.

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

Meidogger ynfier

Brûk de <kbd>om ynfier oan te jaan dy't typysk fia toetseboerd ynfierd wurdt.

Om mappen te wikseljen, typ cdfolge troch de namme fan de map.
Om ynstellings te bewurkjen, druk op ctrl + ,

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

Basis blok

Brûk <pre>foar meardere rigels koade. Wês wis dat jo ûntkomme oan alle hoeke heakjes yn 'e koade foar in goede rendering.

<p>In foarbyldtekst hjir...</p>

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

Jo kinne opsjoneel de .pre-scrollableklasse taheakje, dy't in maksimale hichte fan 350px sil ynstelle en in y-as scrollbar leverje.

Fariabelen

Foar it oanjaan fan fariabelen brûk de <var>tag.

y = m x + b

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

Sample útfier

Foar it oanjaan fan blokken sample útfier fan in programma brûke de <samp>tag.

Dizze tekst is bedoeld om te behanneljen as foarbyldútfier fan in kompjûterprogramma.

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

Basis foarbyld

Foar basisstyling - ljochte padding en allinich horizontale ferdielen - foegje de basisklasse .tableta oan elke <table>. It kin super oerstallich lykje, mar sjoen it wiidferspraat gebrûk fan tabellen foar oare plugins lykas kalinders en datumkiezers, hawwe wy der foar keazen om ús oanpaste tabelstilen te isolearjen.

Opsjonele tabel byskrift.
#	Foarnamme	Achternamme	Brûkersnamme
1	Merk	Otto	@mdo
2	Jacob	Thornton	@fet
3	Larry	de fûgel	@twitter

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

Striped rigen

Brûk .table-stripedom sebra-striping ta te foegjen oan elke tabelrige binnen de <tbody>.

Cross-browser kompatibiliteit

Gestreepte tabellen wurde stylearre fia de :nth-childCSS-selektor, dy't net beskikber is yn Internet Explorer 8.

#	Foarnamme	Achternamme	Brûkersnamme
1	Merk	Otto	@mdo
2	Jacob	Thornton	@fet
3	Larry	de fûgel	@twitter

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

Bordered tafel

Foegje .table-borderedfoar grinzen oan alle kanten fan 'e tafel en sellen.

#	Foarnamme	Achternamme	Brûkersnamme
1	Merk	Otto	@mdo
2	Jacob	Thornton	@fet
3	Larry	de fûgel	@twitter

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

Hover rigen

Foegje .table-hoverta om in hoverstatus yn te skeakeljen op tabelrijen binnen in <tbody>.

#	Foarnamme	Achternamme	Brûkersnamme
1	Merk	Otto	@mdo
2	Jacob	Thornton	@fet
3	Larry	de fûgel	@twitter

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

Kondensearre tafel

Foegje .table-condensedta om tabellen kompakter te meitsjen troch selpadding yn 'e helte te snijen.

#	Foarnamme	Achternamme	Brûkersnamme
1	Merk	Otto	@mdo
2	Jacob	Thornton	@fet
3	Larry de Fûgel		@twitter

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

Kontekstuele klassen

Brûk kontekstuele klassen om tabelrijen of yndividuele sellen te kleurjen.

Klasse	Beskriuwing
`.active`	Tapasse de hoverkleur op in bepaalde rige of sel
`.success`	Jout in suksesfolle of positive aksje oan
`.info`	Jout in neutrale ynformative feroaring of aksje oan
`.warning`	Jout in warskôging oan dy't miskien omtinken nedich hawwe
`.danger`	Jout in gefaarlike of mooglik negative aksje oan

#	Kolomkop	Kolomkop	Kolomkop
1	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
2	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
3	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
4	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
5	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
6	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
7	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
8	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld
9	Kolom ynhâld	Kolom ynhâld	Kolom ynhâld

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

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen oan in tabelrige of yndividuele sel jout allinich in fisuele yndikaasje, dy't net wurdt oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út 'e ynhâld sels (de sichtbere tekst yn 'e oanbelangjende tabelrige / sel), of is opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Responsive tabellen

Meitsje responsive tabellen troch elk .tableyn .table-responsivete wikkeljen om se horizontaal te scrollen op lytse apparaten (ûnder 768px). As jo sjogge op wat grutter dan 768px breed, sille jo gjin ferskil sjen yn dizze tabellen.

Fertikale clipping / trunkaasje

Responsive tabellen meitsje gebrûk fan overflow-y: hidden, dy't elke ynhâld ôfknipt dy't boppe de ûnder- of bopperâne fan 'e tabel giet. Dit kin benammen dropdownmenu's en oare widgets fan tredden ôfknippe.

Firefox en fieldsets

Firefox hat wat ûnhandige fjildsetstyling wêrby't widthit ynterfereart mei de responsive tabel. Dit kin net oerskreaun wurde sûnder in Firefox-spesifike hack dy't wy net dogge leverje yn Bootstrap:

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

Foar mear ynformaasje, lês dit Stack Overflow antwurd .

#	Tabel heading	Tabel heading	Tabel heading	Tabel heading	Tabel heading	Tabel heading
1	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel
2	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel
3	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel

#	Tabel heading	Tabel heading	Tabel heading	Tabel heading	Tabel heading	Tabel heading
1	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel
2	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel
3	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel	Tabel sel

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

Basis foarbyld

Yndividuele foarmkontrôles krije automatysk wat globale styling. Alle tekstuele <input>, <textarea>, en <select>eleminten mei .form-controlbinne width: 100%;standert ynsteld op. Wrap etiketten en kontrôles yn .form-groupfoar optimale ôfstân.

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

Meitsje gjin formuliergroepen mei ynfiergroepen

Meitsje formuliergroepen net direkt mei ynfiergroepen . Nestje ynstee de ynfiergroep binnen de formuliergroep.

Inline formulier

Taheakje .form-inlineoan jo formulier (dat net hoecht te wêzen in <form>) foar links-ôfstimd en ynline-blokkontrôles. Dit jildt allinich foar formulieren binnen viewports dy't op syn minst 768px breed binne.

Kin easkje oanpaste widths

Ynputen en seleksjes binne width: 100%;standert tapast yn Bootstrap. Binnen ynline formulieren sette wy dat werom op width: auto;sadat meardere kontrôles op deselde line kinne wenje. Ofhinklik fan jo yndieling kinne ekstra oanpaste breedtes nedich wêze.

Altyd labels tafoegje

Skermlêzers sille problemen hawwe mei jo formulieren as jo gjin label foar elke ynfier opnimme. Foar dizze ynline formulieren kinne jo de labels ferbergje mei de .sr-onlyklasse. D'r binne fierdere alternative metoaden foar it leverjen fan in label foar assistinte technologyen, lykas de aria-label, aria-labelledbyof titleattribút. As net ien fan dizze is oanwêzich, meie skermlêzers taflecht ta it brûken fan it placeholderattribút, as oanwêzich, mar tink derom dat it brûken fan placeholderas ferfanging foar oare labeling metoaden wurdt net oanret.

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

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

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

Horizontale foarm

Brûk de foarôf definieare rasterklassen fan Bootstrap om labels en groepen fan formulierkontrôles op te rjochtsjen yn in horizontale yndieling troch ta te foegjen .form-horizontaloan it formulier (dat hoecht net in <form>). As jo dit dogge, feroaret .form-groups om te gedragen as raster rigen, dus net nedich .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>

Stipe kontrôles

Foarbylden fan standertfoarmkontrôles stipe yn in foarbyldfoarmyndieling.

Ynputen

Meast foarkommende foarmkontrôle, tekst-basearre ynfierfjilden. Omfettet stipe foar alle HTML5-typen: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, en color.

Typeferklearring fereaske

Ynputen sille allinnich wurde folslein styled as harren typeis goed ferklearre.

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

Ynput groepen

Om yntegreare tekst of knoppen ta te foegjen foar en/of nei elke tekstbasearre <input>, besjoch de ynfiergroepkomponint .

Tekstgebiet

Formkontrôle dy't meardere rigels tekst stipet. Feroarje rowsattribút as nedich.

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

Checkboxes en radio's

Checkboxes binne foar it selektearjen fan ien of meardere opsjes yn in list, wylst radio's binne foar it selektearjen fan ien opsje út in protte.

Utskeakele karfakjes en radio's wurde stipe, mar om in "net tastiene" rinnerke op 'e hover fan' e âlder te leverjen <label>, moatte jo de .disabledklasse tafoegje oan 'e âlder .radio, .radio-inline, .checkbox, of .checkbox-inline.

Standert (steapele)

<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 karfakjes en radio's

Brûk de .checkbox-inlineof .radio-inlineklassen op in rige fan karfakjes of radio foar kontrôles dy't ferskine op deselde rigel.

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

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

Checkboxes en radio's sûnder labeltekst

Mochten jo gjin tekst hawwe binnen de <label>, dan wurdt de ynfier pleatst lykas jo ferwachtsje. Wurket op it stuit allinnich op net-ynline karfakjes en radio's. Unthâld om noch in foarm fan label te leverjen foar assistinte technologyen (bygelyks gebrûk fan 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>

Selektearret

Tink derom dat in protte native selekteare menu's - nammentlik yn Safari en Chrome - rûne hoeken hawwe dy't net kinne wurde wizige fia border-radiuseigenskippen.

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

Foar <select>kontrôles mei it multipleattribút wurde standert meardere opsjes werjûn.

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

Statyske kontrôle

As jo moatte pleatse platte tekst neist in formulier label binnen in formulier, brûk de .form-control-staticklasse op in <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>

Fokus steat

Wy ferwiderje de standertstilen outlineop guon formulierkontrôles en tapasse in box-shadowop syn plak foar :focus.

Demo`:focus` steat

De boppesteande foarbyldynput brûkt oanpaste stilen yn ús dokumintaasje om de :focussteat te demonstrearjen op in .form-control.

Utskeakele steat

Foegje it disabledBooleaanske attribút ta op in ynfier om ynteraksjes mei brûkers te foarkommen. Utskeakele yngongen ferskine lichter en foegje in not-allowedrinnerke ta.

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

Utskeakele fjildsets

Foegje it disabledattribút oan in <fieldset>om alle kontrôles binnen de <fieldset>tagelyk út te skeakeljen.

Caveat oer keppeling funksjonaliteit fan`<a>`

Standert sille browsers alle native foarmkontrôles ( <input>, <select>en <button>eleminten) binnen in <fieldset disabled>as útskeakele behannelje, en foarkomt sawol toetseboerd as mûs ynteraksjes op har. As jo formulier lykwols ek <a ... class="btn btn-*">eleminten befettet, krije dizze allinich in styl fan pointer-events: none. Lykas opmurken yn 'e seksje oer útskeakele tastân foar knoppen (en spesifyk yn' e ûnderseksje foar anker-eleminten), is dizze CSS-eigenskip noch net standerdisearre en wurdt net folslein stipe yn Opera 18 en ûnder, of yn Internet Explorer 11, en wûn 't foarkomme dat toetseboerdbrûkers dizze keppelings kinne fokusje of aktivearje. Dus om feilich te wêzen, brûk oanpaste JavaScript om sokke keppelings út te skeakeljen.

Cross-browser kompatibiliteit

disabledWylst Bootstrap dizze stilen sil tapasse yn alle browsers, stypje Internet Explorer 11 en hjirûnder it attribút net folslein op in <fieldset>. Brûk oanpaste JavaScript om de fjildset yn dizze browsers út te skeakeljen.

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

Allinnich lêze steat

Foegje it readonlyBooleaanske attribút ta oan in ynfier om wiziging fan 'e wearde fan' e ynfier te foarkommen. Allinnich-lês-ynputs ferskine lichter (krekt as útskeakele yngongen), mar behâlde de standert rinnerke.

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

Helptekst

Helptekst op bloknivo foar formulierkontrôles.

Helptekst assosjearje mei formulierkontrôles

Helptekst moat eksplisyt ferbûn wurde mei de formulierkontrôle dy't it relatearret oan it brûken fan it aria-describedbyattribút. Dit soarget derfoar dat assistinte technologyen - lykas skermlêzers - dizze helptekst oankundigje as de brûker him rjochtet of de kontrôle yngiet.

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

Validaasje steaten

Bootstrap omfettet falidaasjestilen foar flater-, warskôgings- en suksessteaten op formulierkontrôles. Om te brûken, tafoegje .has-warning, .has-error, of .has-successoan it âlderelemint. Elke .control-label, .form-control, en .help-blockbinnen dat elemint sil de falidaasjestilen ûntfange.

Validaasjestatus oerbringe oan assistinte technologyen en kleurblinde brûkers

It brûken fan dizze falidaasjestilen om de steat fan in formulierkontrôle oan te jaan jout allinich in fisuele, op kleur basearre yndikaasje, dy't net oerbrocht wurde oan brûkers fan assistinte technologyen - lykas skermlêzers - of oan kleurblinde brûkers.

Soargje derfoar dat der ek in alternative yndikaasje fan steat wurdt levere. Jo kinne bygelyks in hint oer steat opnimme yn 'e <label>tekst fan 'e formulierkontrôle sels (lykas it gefal is yn it folgjende koadefoarbyld), in Glyphicon opnimme (mei passende alternative tekst mei de .sr-onlyklasse - sjoch de Glyphicon-foarbylden ), of troch in ekstra helptekstblok . Spesifyk foar assistinte technologyen kinne ûnjildige foarmkontrôles ek in aria-invalid="true"attribút wurde tawiisd.

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

Mei opsjonele ikoanen

Jo kinne ek opsjonele feedback-ikoanen tafoegje mei de tafoeging fan .has-feedbacken it juste ikoan.

Feedback-ikoanen wurkje allinich mei tekstuele <input class="form-control">eleminten.

Ikoanen, labels en ynfiergroepen

Hânlieding posysjonearring fan feedback-ikoanen is nedich foar yngongen sûnder label en foar ynfiergroepen mei in add-on oan 'e rjochterkant. Jo wurde sterk oanmoedige om labels te leverjen foar alle ynputs foar tagonklikensredenen. As jo foarkomme wolle dat labels werjûn wurde, ferbergje se dan mei de .sr-onlyklasse. As jo moatte dwaan sûnder labels, oanpasse de topwearde fan it feedback ikoan. Foar ynfiergroepen, oanpasse de rightwearde oan in passende pikselwearde ôfhinklik fan de breedte fan jo addon.

De betsjutting fan it ikoan oerbringe oan assistinte technologyen

Om te soargjen dat assistinte technologyen - lykas skermlêzers - de betsjutting fan in byldkaike korrekt oerbringe, moat ekstra ferburgen tekst opnommen wurde yn 'e .sr-onlyklasse en eksplisyt assosjearre mei de formulierkontrôle dy't it relatearret oan it brûken fan aria-describedby. As alternatyf, soargje derfoar dat de betsjutting (bgl<label> ferbûn mei de formulierkontrôle.

Hoewol't de folgjende foarbylden al neame de falidaasje steat fan harren respektive foarm kontrôles yn de <label>tekst sels, de boppesteande technyk (mei .sr-onlytekst en aria-describedby) is opnommen foar yllustrative doelen.

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

Opsjonele ikoanen yn horizontale en ynline foarmen

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

Opsjonele ikoanen mei ferburgen `.sr-only`labels

As jo de .sr-onlyklasse brûke om in formulierkontrôle te ferbergjen <label>(ynstee fan oare labelopsjes te brûken, lykas it aria-labelattribút), sil Bootstrap automatysk de posysje fan it ikoan oanpasse as it is tafoege.

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

Kontrolearje grutte

Stel hichten yn mei klassen lykas .input-lg, en set breedtes yn mei rasterkolomklassen lykas .col-lg-*.

Hichte maat

Meitsje kontrôles foar hege of koartere foarm dy't oerienkomme mei knopgrutte.

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

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

Horizontale foarm groep maten

Fluch grutte etiketten en foarmkontrôles binnen .form-horizontaltroch tafoegje .form-group-lgof .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>

Kolom grutte

Wikkel yngongen yn roasterkolommen, as elk oanpast âlder elemint, om de winske breedtes maklik te hanthavenjen.

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

Knop tags

Brûk de knopklassen op in <a>, <button>, of <input>elemint.

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

Kontekst-spesifike gebrûk

Wylst knopklassen kinne wurde brûkt op <a>en <button>eleminten, wurde allinich <button>eleminten stipe binnen ús nav- en navbalke-komponinten.

Keppelings fungearje as knoppen

As de <a>eleminten wurde brûkt om te fungearjen as knoppen - aktivearje yn-side-funksjonaliteit, ynstee fan te navigearjen nei in oar dokumint of seksje binnen de hjoeddeistige side - moatte se ek in passende role="button".

Cross-browser rendering

As bêste praktyk riede wy tige oan om it <button>elemint te brûken as it mooglik is om te garandearjen oerienkommende cross-browser-rendering.

D'r is ûnder oare in brek yn Firefox <30 dy't ús foarkomt om de line-heightop <input>-basearre knoppen yn te stellen, wêrtroch't se net krekt oerienkomme mei de hichte fan oare knoppen op Firefox.

Opsjes

Brûk ien fan 'e beskikbere knopklassen om fluch in stylige knop te meitsjen.

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

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen oan in knop jout allinich in fisuele yndikaasje, dy't net wurdt oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út 'e ynhâld sels (de sichtbere tekst fan 'e knop), of is opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Maten

Wolle jo gruttere of lytsere knoppen? Add .btn-lg, .btn-sm, of .btn-xsfoar ekstra maten.

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

Meitsje knoppen op bloknivo - dyjingen dy't de folsleine breedte fan in âlder spanne - troch ta te foegjen .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>

Aktive steat

Knoppen sille yndrukt wurde (mei in donkerdere eftergrûn, donkerdere râne, en ynsletten skaad) as aktyf. Foar <button>eleminten wurdt dit dien fia :active. Foar <a>eleminten is it dien mei .active. Jo kinne lykwols brûke .activeop <button>s (en befetsje dearia-pressed="true" attribút) as jo de aktive steat programmatysk moatte replikearje.

Knop elemint

It is net nedich om ta te foegjen :active, om't it in pseudo-klasse is, mar as jo itselde uterlik moatte twinge, gean dan fierder en foegje ta .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 elemint

Foegje de .activeklasse ta oan <a>knoppen.

Primêre keppeling 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>

Utskeakele steat

Lit de knoppen net-klikber lykje troch se werom te fading mei opacity.

Knop elemint

Foegje it disabledattribút ta oan <button>knoppen.

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

Cross-browser kompatibiliteit

As jo it disabledattribút tafoegje oan in <button>, sil Internet Explorer 9 en hjirûnder tekst griis werjaan mei in ferfelende tekstskaad dy't wy net kinne reparearje.

Anker elemint

Foegje de .disabledklasse ta oan <a>knoppen.

Primêre keppeling 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>

Wy brûke .disabledhjir as nutsklasse, fergelykber mei de mienskiplike .activeklasse, dus gjin foarheaksel is nedich.

Link funksjonaliteit warskôging

Dizze klasse brûkt pointer-events: noneom te besykjen om de keppelingsfunksjonaliteit fan <a>s út te skeakeljen, mar dat CSS-eigenskip is noch net standerdisearre en wurdt net folslein stipe yn Opera 18 en ûnder, of yn Internet Explorer 11. Derneist, sels yn browsers dy't stypje pointer-events: none, toetseboerd navigaasje bliuwt net beynfloede, wat betsjut dat sichtbere toetseboerdbrûkers en brûkers fan assistinte technologyen dizze keppelings noch kinne aktivearje. Dus om feilich te wêzen, brûk oanpaste JavaScript om sokke keppelings út te skeakeljen.

Responsive ôfbyldings

Ofbyldings yn Bootstrap 3 kinne responsyf-freonlik makke wurde fia de tafoeging fan 'e .img-responsiveklasse. Dit jildt max-width: 100%;, height: auto;en display: block;foar de ôfbylding sadat it moai skaalber is foar it âlderelemint.

Om ôfbyldings te sintrum dy't de .img-responsiveklasse brûke, brûke .center-blockynstee fan .text-center. Sjoch de seksje helperklassen foar mear details oer .center-blockgebrûk.

SVG-ôfbyldings en IE 8-10

Yn Internet Explorer 8-10 binne SVG-ôfbyldings mei .img-responsiveûnevenredich grutte. Om dit te reparearjen, foegje width: 100% \9;wêr nedich ta. Bootstrap past dit net automatysk ta, om't it komplikaasjes feroarsaket foar oare ôfbyldingsformaten.

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

Ofbylding foarmen

Foegje klassen ta oan in <img>elemint om ôfbyldings maklik yn elk projekt te stylearjen.

Cross-browser kompatibiliteit

Hâld der rekken mei dat Internet Explorer 8 gjin stipe hat foar rûne hoeken.

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

Kontekstuele kleuren

Bring betsjutting oer troch kleur mei in hantsjefol klam op nutklassen. Dizze kinne ek tapast wurde op keppelings en sille tsjusterder wurde by hover krekt lykas ús standert keppelingstilen.

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>

Omgean mei spesifisiteit

Soms kinne klamklassen net tapast wurde fanwege de spesifisiteit fan in oare selector. Yn 'e measte gefallen is in foldwaande oplossing om jo tekst yn in <span>mei de klasse te wikkeljen.

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út 'e ynhâld sels (de kontekstuele kleuren wurde allinich brûkt om betsjutting te fersterkjen dy't al oanwêzich is yn 'e tekst/markearring), of is opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse .

Kontekstuele eftergrûnen

Fergelykber mei de kontekstuele tekstkleurklassen, set de eftergrûn fan in elemint maklik yn op elke kontekstuele klasse. Ankerkomponinten sille donkerder wurde by hover, krekt lykas de tekstklassen.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Omgean mei spesifisiteit

Soms kinne kontekstuele eftergrûnklassen net tapast wurde fanwege de spesifisiteit fan in oare selector. Yn guon gefallen is in foldwaande oplossing om de ynhâld fan jo elemint yn in <div>mei de klasse te wikkeljen.

Betsjutting oerbringe oan assistinte technologyen

Lykas by kontekstuele kleuren , soargje derfoar dat elke betsjutting dy't troch kleur wurdt oerbrocht, ek wurdt oerbrocht yn in formaat dat net suver presintaasje is.

Ikoan slute

Brûk it generyske slute-ikoan foar it ôfwizen fan ynhâld lykas modalen en warskôgings.

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

Carets

Brûk carets om dropdown-funksjonaliteit en rjochting oan te jaan. Tink derom dat de standert caret automatysk yn útklapmenu's sil omkeare .

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

Fluch driuwen

Float in elemint nei lofts of rjochts mei in klasse. !importantis opnommen om spesifisiteitsproblemen te foarkommen. Klassen kinne ek brûkt wurde as mixins.

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

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

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

Sintrum ynhâld blokken

Stel in elemint oan display: blocken sintrum fia margin. Beskikber as in mixin en klasse.

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

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

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

Clearfix

Maklik wiskje floats troch ta te foegjen .clearfix oan it âlder elemint . Brûkt de mikro-clearfix lykas populêr troch Nicolas Gallagher. Kin ek brûkt wurde as in mixin.

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

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

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

Ynhâld sjen litte en ferbergje

Tsjinje in elemint om te sjen of te ferbergjen ( ynklusyf foar skermlêzers ) mei it brûken fan .showen .hiddenklassen. Dizze klassen brûke !importantom spesifisiteitskonflikten te foarkommen, krekt lykas de snelle driuwers . Se binne allinich beskikber foar wikseljen fan bloknivo. Se kinne ek brûkt wurde as mixins.

.hideis beskikber, mar it hat net altyd ynfloed op skermlêzers en wurdt ôfkard as fan v3.0.1. Brûk .hiddenof .sr-onlyynstee.

Fierder .invisiblekin brûkt wurde om allinich de sichtberens fan in elemint te wikseljen, wat betsjuttet dat it displaynet wizige is en it elemint noch de stream fan it dokumint kin beynfloedzje.

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

Skermlêzer en ynhâld fan toetseboerdnavigaasje

Ferbergje in elemint foar alle apparaten útsein skermlêzers mei .sr-only. Kombinearje .sr-onlymei .sr-only-focusableom it elemint nochris sjen te litten as it rjochte is (bygelyks troch in brûker allinich op it toetseboerd). Needsaaklik foar it folgjen fan bêste praktiken foar tagonklikens . Kin ek brûkt wurde as mixins.

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

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

Image ferfanging

Brûk de .text-hideklasse as mixin om de tekstynhâld fan in elemint te ferfangen troch in eftergrûnôfbylding.

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

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

Foar rapper mobylfreonlike ûntwikkeling, brûk dizze nutklassen foar it werjaan en ferbergjen fan ynhâld per apparaat fia mediaquery. Ek opnommen binne nutklassen foar it wikseljen fan ynhâld by printsjen.

Besykje dizze op in beheinde basis te brûken en foarkom it meitsjen fan folslein oare ferzjes fan deselde side. Brûk se ynstee om de presintaasje fan elk apparaat oan te foljen.

Beskikbere klassen

Brûk ien of kombinaasje fan de beskikbere klassen foar it wikseljen fan ynhâld oer viewport breakpoints.

	Ekstra lytse apparatenTillefoanen (<768px)	Lytse apparatenTablets (≥768px)	Middele apparatenBuroblêden (≥992px)	Grutte apparatenBuroblêden (≥1200px)
`.visible-xs-*`	Sichtber	Ferburgen	Ferburgen	Ferburgen
`.visible-sm-*`	Ferburgen	Sichtber	Ferburgen	Ferburgen
`.visible-md-*`	Ferburgen	Ferburgen	Sichtber	Ferburgen
`.visible-lg-*`	Ferburgen	Ferburgen	Ferburgen	Sichtber
`.hidden-xs`	Ferburgen	Sichtber	Sichtber	Sichtber
`.hidden-sm`	Sichtber	Ferburgen	Sichtber	Sichtber
`.hidden-md`	Sichtber	Sichtber	Ferburgen	Sichtber
`.hidden-lg`	Sichtber	Sichtber	Sichtber	Ferburgen

Fanôf v3.2.0 komme de .visible-*-*klassen foar elk brekpunt yn trije fariaasjes, ien foar elke CSS - displayeigendomswearde hjirûnder.

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

xsDus, foar bygelyks ekstra lytse ( ) skermen binne de beskikbere .visible-*-*klassen: .visible-xs-block, .visible-xs-inline, en .visible-xs-inline-block.

De klassen .visible-xs, .visible-sm, .visible-md, en .visible-lgbesteane ek, mar wurde ôfkard as fan v3.2.0 . Se binne likernôch lykweardich oan .visible-*-block, útsein mei ekstra spesjale gefallen foar <table>toggling -relatearre eleminten.

Printklassen

Fergelykber mei de reguliere responsive klassen, brûk dizze foar it wikseljen fan ynhâld foar print.

Klassen	Browser	Ôfdrukke
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ferburgen	Sichtber
`.hidden-print`	Sichtber	Ferburgen

De klasse .visible-printbestiet ek mar wurdt ôfret fan v3.2.0. It is likernôch lykweardich oan .visible-print-block, útsein mei ekstra spesjale gefallen foar <table>-relatearre eleminten.

Testgefallen

Feroarje de grutte fan jo blêder of lade op ferskate apparaten om de responsive nutklassen te testen.

Sjoch op ...

Griene karmerken jouwe oan dat it elemint sichtber is yn jo hjoeddeistige viewport.

Ekstra lyts ✔ Sjoch op x-small

Lyts ✔ Sichtber op lyts

Medium ✔ Sichtber op medium

Large ✔ Sjoch op grut

Ekstra lyts en lyts ✔ Visible on x-small and small

Middel en grut ✔ Sjoch op medium en grut

Ekstra lyts en medium ✔ Sichtber op x-small en medium

Small and large ✔ Sjoch op lyts en grut

Extra small and large ✔ Sjoch op x-small en large

Lyts en medium ✔ Visible on small and medium

Ferburgen op ...

Hjir jouwe griene karmerken ek oan dat it elemint ferburgen is yn jo hjoeddeistige viewport.

Ekstra lyts ✔ Hidden on x-small

Lyts ✔ Hidden on small

Medium ✔ Hidden on medium

Large ✔ Ferburgen op grut

Ekstra lyts en lyts ✔ Hidden on x-small and small

Medium and large ✔ Ferburgen op medium en grut

Ekstra lyts en medium ✔ Hidden on x-small and medium

Small and large ✔ Ferburgen op lyts en grut

Extra small and large ✔ Ferburgen op x-small en grut

Lyts en medium ✔ Hidden on small and medium

Bootstrap's CSS is boud op Less, in preprocessor mei ekstra funksjonaliteit lykas fariabelen, mixins en funksjes foar it kompilearjen fan CSS. Dejingen dy't de boarne wolle brûke Minder bestannen ynstee fan ús kompilearre CSS-bestannen kinne gebrûk meitsje fan de ferskate fariabelen en mixins dy't wy yn it heule ramt brûke.

Grid fariabelen en mixins wurde behannele binnen de Grid systeem seksje .

Bootstrap kompilearje

Bootstrap kin op syn minst twa manieren brûkt wurde: mei de kompilearre CSS of mei de boarne Minder bestannen. Om de Minder bestannen te kompilearjen, rieplachtsje de seksje Getting Started foar hoe't jo jo ûntwikkelingsomjouwing ynstelle kinne om de nedige kommando's út te fieren.

Kompilaasje-ark fan tredden kinne wurkje mei Bootstrap, mar se wurde net stipe troch ús kearnteam.

Fariabelen

Fariabelen wurde troch it heule projekt brûkt as in manier om algemien brûkte wearden te sintralisearjen en te dielen lykas kleuren, spaasjes of lettertypestapels. Foar in folsleine ferdieling, sjoch asjebleaft de Customizer .

Kleuren

Meitsje maklik gebrûk fan twa kleurskema's: griisskalen en semantysk. Griisskaalkleuren jouwe rappe tagong ta meast brûkte skaden fan swart, wylst semantysk ferskate kleuren omfetsje dy't tawiisd binne oan betsjuttingsfolle kontekstuele wearden.

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

Brûk ien fan dizze kleurfariabelen sa't se binne of wer tawize se oan mear sinfolle fariabelen foar jo projekt.

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

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

Steigers

In hânfol fariabelen foar it fluch oanpassen fan wichtige eleminten fan it skelet fan jo side.

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

Links

Stylje jo keppelings maklik mei de juste kleur mei mar ien wearde.

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

Tink derom dat it @link-hover-colorin funksje brûkt, in oar bjusterbaarlik ark fan Less, om automagysk de juste hoverkleur te meitsjen. Jo kinne darken, lighten, saturate, en desaturate.

Typografy

Stel jo lettertype, tekstgrutte, liedend, en mear maklik yn mei in pear rappe fariabelen. Bootstrap makket ek gebrûk fan dizze om maklike typografyske mixins te leverjen.

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

Ikoanen

Twa rappe fariabelen foar it oanpassen fan de lokaasje en bestânsnamme fan jo ikoanen.

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

Components

Komponinten troch Bootstrap meitsje gebrûk fan guon standertfariabelen foar it ynstellen fan mienskiplike wearden. Hjir binne de meast brûkte.

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

Ferkeaper mixins

Ferkeapermixins binne mixins om meardere browsers te stypjen troch alle relevante leveransiersfoarheaksels op te nimmen yn jo kompilearre CSS.

Box-sizing

Reset it doazemodel fan jo komponinten mei ien mixin. Foar kontekst, sjoch dit nuttige artikel fan Mozilla .

De mixin wurdt ôfret fan v3.2.0, mei de ynfiering fan Autoprefixer. Om efterútkompatibiliteit te behâlden, sil Bootstrap de mixin ynterne brûke oant Bootstrap v4.

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

Rûne hoeken

Tsjintwurdich stypje alle moderne browsers it net-foarheaksel border-radiuseigendom. As sadanich is d'r gjin .border-radius()mixin, mar Bootstrap omfettet fluchtoetsen om twa hoeken fluch oan in bepaalde kant fan in objekt te rûnen.

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

As jo doelgroep de lêste en bêste browsers en apparaten brûkt, wês dan wis dat jo it box-shadowpân allinich brûke. As jo stipe nedich binne foar âldere Android (pre-v4) en iOS-apparaten (pre-iOS 5), brûk dan de ferâldere mixin om it fereaske -webkitfoarheaksel op te heljen.

De mixin wurdt ôfret fan v3.1.0, sûnt Bootstrap net offisjeel stipet de ferâldere platfoarms dy't net stypje de standert eigenskip. Om efterútkompatibiliteit te behâlden, sil Bootstrap de mixin ynterne brûke oant Bootstrap v4.

Wês der wis fan dat jo rgba()kleuren brûke yn jo fakskaad, sadat se sa naadloos mooglik mei eftergrûnen mingje.

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

Transysjes

Meardere mixins foar fleksibiliteit. Set alle oergong ynformaasje mei ien, of spesifisearje in aparte fertraging en doer as nedich.

De mixins wurde ôfret fan v3.2.0, mei de ynfiering fan Autoprefixer. Om efterútkompatibiliteit te behâlden, sil Bootstrap de mixins ynterne brûke oant 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;
}

Transformaasjes

Draaie, skaalfergrutsje, oersette (ferpleatse), of skewe elk objekt.

De mixins wurde ôfret fan v3.2.0, mei de ynfiering fan Autoprefixer. Om efterútkompatibiliteit te behâlden, sil Bootstrap de mixins ynterne brûke oant 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;
}

Animations

In inkele mixin foar it brûken fan alle CSS3's animaasje-eigenskippen yn ien deklaraasje en oare mixins foar yndividuele eigenskippen.

De mixins wurde ôfret fan v3.2.0, mei de ynfiering fan Autoprefixer. Om efterútkompatibiliteit te behâlden, sil Bootstrap de mixins ynterne brûke oant 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;
}

Opaciteit

Stel de opaciteit yn foar alle browsers en biede in filterfallback foar IE8.

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

Plakhâlder tekst

Biede kontekst foar formulierkontrôles binnen elk fjild.

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

Pylder

Generearje kolommen fia CSS binnen ien inkeld elemint.

.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

Feroarje elke twa kleuren maklik yn in eftergrûngradient. Wês mear avansearre en set in rjochting yn, brûk trije kleuren, of brûk in radiale gradient. Mei ien mixin krije jo alle foarôfgeande syntaksis dy't jo nedich binne.

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

Jo kinne ek de hoeke opjaan fan in standert twa-kleur, lineêre gradient:

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

As jo in gradient fan kapper-stripe styl nedich binne, is dat ek maklik. Spesifisearje gewoan ien kleur en wy sille in trochsichtige wite stripe oerlizze.

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

Up de ante en brûk trije kleuren ynstee. Stel de earste kleur, de twadde kleur, de kleurstop fan 'e twadde kleur (in persintaazjewearde lykas 25%), en de tredde kleur mei dizze mixins:

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

Heads up! Mochten jo oait in gradient fuortsmite, wês dan wis dat jo alle IE-spesifike ferwiderje dy't filterjo miskien hawwe tafoege. Jo kinne dat dwaan troch de .reset-filter()mixin neist te brûken background-image: none;.

Utility mixins

Utilitymixins binne mixins dy't oars net-relatearre CSS-eigenskippen kombinearje om in spesifyk doel of taak te berikken.

Clearfix

Ferjit it tafoegjen class="clearfix"oan elk elemint en foegje ynstee de .clearfix()mixin ta wêr passend. Brûkt de mikro-clearfix fan Nicolas Gallagher .

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

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

Horizontale sintraal

Fluch sintrum elk elemint binnen syn âlder. Fereasket widthof max-widthwurde ynsteld.

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

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

Sizing helpers

Spesifisearje de ôfmjittings fan in objekt makliker.

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

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

Feroarje tekstgebieten

Konfigurearje de grutte-opsjes maklik foar elk tekstgebiet, as elk oar elemint. Standert foar normaal blêdergedrach ( both).

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

Truncating tekst

Maklik truncate tekst mei in ellips mei ien mixin. Fereasket elemint te wêzen blockof inline-blocknivo.

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

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

Retina ôfbyldings

Spesifisearje twa ôfbyldingspaden en de @1x-ôfbyldingsdimensjes, en Bootstrap sil in @2x-mediafraach leverje. As jo in protte ôfbyldings hawwe om te tsjinjen, beskôgje dan it skriuwen fan jo retina-ôfbylding CSS manuell yn ien mediaquery.

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

Wylst Bootstrap is boud op Less, hat it ek in offisjele Sass-poarte . Wy ûnderhâlde it yn in apart GitHub-repository en behannelje updates mei in konverzjeskript.

Wat is ynbegrepen

Sûnt de Sass-haven in aparte repo hat en in wat oar publyk tsjinnet, ferskilt de ynhâld fan it projekt sterk fan it haad Bootstrap-projekt. Dit soarget derfoar dat de Sass-poarte sa kompatibel is mei safolle mooglik Sass-basearre systemen.

Paad	Beskriuwing
`lib/`	Ruby gem-koade (Sass-konfiguraasje, Rails en Compass-yntegraasjes)
`tasks/`	Converter skripts (streaming streamop fan Minder nei Sass)
`test/`	Kompilaasje tests
`templates/`	Kompaspakket manifest
`vendor/assets/`	Sass, JavaScript, en lettertypebestannen
`Rakefile`	Ynterne taken, lykas harkje en konvertearje

Besykje it GitHub-repository fan 'e Sass-poarte om dizze bestannen yn aksje te sjen.

Ynstallaasje

Foar ynformaasje oer hoe't jo Bootstrap foar Sass kinne ynstallearje en brûke, rieplachtsje de GitHub-repository readme . It is de meast aktuele boarne en omfettet ynformaasje foar gebrûk mei Rails, Compass, en standert Sass-projekten.

Bootstrap foar Sass

CSS

Oersicht

HTML5 doctype

Mobile earst

Typografy en keppelings

Normalize.css

Containers

Grid systeem

Ynlieding

Media queries

Grid opsjes

Foarbyld: steapele-to-horizontaal

Foarbyld: Fluid container

Foarbyld: Mobyl en buroblêd

Foarbyld: Mobile, tablet, desktop

Foarbyld: Column wrapping

Responsive kolom weromsette

Goaten fuortsmite

Offset kolommen

Nesting kolommen

Kolombestelling

Minder mixins en fariabelen

Fariabelen

Mixins

Foarbyld fan gebrûk

Typografy

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

h1. Bootstrap heading Sekundêre tekst

h2. Bootstrap heading Sekundêre tekst

h3. Bootstrap heading Sekundêre tekst

h4. Bootstrap heading Sekundêre tekst

h5. Bootstrap heading Sekundêre tekst

h6. Bootstrap heading Sekundêre tekst

Body kopy

Kopy fan lead lichem

Boud mei Minder

Inline tekst eleminten

Markearre tekst

Tekst wiske

Trochstreke tekst

Ynfoege tekst

Underline tekst

Lytse tekst

Fet

Kursyf

Alternatyf eleminten

Alignment klassen

Transformaasje klassen

Ofkoartings

Basis ôfkoarting

Inisjalisme

Adressen

Blockquotes

Standert blokquote

Blockquote opsjes

In boarne neame

Alternatyf byldskermen

Listen

Net oardere

Besteld

Unstyled

Ynline

Beskriuwing

Horizontale beskriuwing

Auto-truncating

Koade

Ynline

Meidogger ynfier

Basis blok

Fariabelen

Sample útfier

Tabellen

Basis foarbyld

Striped rigen

Demo`:focus` steat

Caveat oer keppeling funksjonaliteit fan`<a>`

Opsjonele ikoanen mei ferburgen `.sr-only`labels