Získejte přehled o klíčových částech infrastruktury Bootstrapu, včetně našeho přístupu k lepšímu, rychlejšímu a silnějšímu vývoji webu.

HTML5 doctype

Bootstrap využívá určité prvky HTML a vlastnosti CSS, které vyžadují použití doctype HTML5. Zařaďte jej na začátek všech svých projektů.

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

Nejprve mobil

S Bootstrap 2 jsme přidali volitelné styly vhodné pro mobilní zařízení pro klíčové aspekty rámce. S Bootstrap 3 jsme projekt přepsali tak, aby byl od začátku vhodný pro mobilní zařízení. Namísto přidávání volitelných mobilních stylů jsou zapečeny přímo do jádra. Ve skutečnosti je Bootstrap především mobilní . První mobilní styly lze nalézt v celé knihovně namísto v samostatných souborech.

Chcete-li zajistit správné vykreslení a přiblížení dotykem, přidejte do svého souboru metaznačku výřezu<head> .

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

Na mobilních zařízeních můžete deaktivovat funkce přiblížení přidáním user-scalable=nometaznačky zobrazované oblasti. To deaktivuje přibližování, což znamená, že uživatelé mohou pouze posouvat, a výsledkem je, že váš web bude vypadat trochu jako nativní aplikace. Celkově to nedoporučujeme na každém webu, takže buďte opatrní!

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

Typografie a odkazy

Bootstrap nastavuje základní globální styly zobrazení, typografie a odkazů. Konkrétně my:

Nastavte background-color: #fff;nabody
Použijte atributy @font-family-base, @font-size-base, a @line-height-basejako náš typografický základ
Nastavte globální barvu odkazu pomocí @link-colora aplikujte podtržení odkazu pouze na:hover

Tyto styly lze nalézt v scaffolding.less.

Normalize.css

Pro vylepšené vykreslování napříč prohlížeči používáme Normalize.css , projekt Nicolase Gallaghera a Jonathana Neala .

Kontejnery

Bootstrap vyžaduje obsahující prvek pro zabalení obsahu webu a umístění našeho gridového systému. Můžete si vybrat jeden ze dvou kontejnerů pro použití ve vašich projektech. Všimněte si, že z důvodu paddinga více není žádný kontejner vnořitelný.

Použijte .containerpro citlivý kontejner s pevnou šířkou.

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

Použijte .container-fluidpro kontejner plné šířky, který pokrývá celou šířku vašeho výřezu.

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

Bootstrap obsahuje citlivý, mobilní systém první fluidní mřížky, který se při zvětšování velikosti zařízení nebo výřezu vhodně zvětšuje až na 12 sloupců. Obsahuje předdefinované třídy pro snadné možnosti rozvržení, stejně jako výkonné mixy pro generování sémantických rozvržení .

Úvod

Mřížkové systémy se používají k vytváření rozvržení stránek prostřednictvím řady řádků a sloupců, které obsahují váš obsah. Takto funguje mřížkový systém Bootstrap:

Řádky musí být umístěny v rámci .container(pevná šířka) nebo .container-fluid(plná šířka) pro správné zarovnání a odsazení.
Pomocí řádků vytvořte vodorovné skupiny sloupců.
Obsah by měl být umístěn ve sloupcích a pouze sloupce mohou být přímými potomky řádků.
Předdefinované třídy mřížky jako .rowa .col-xs-4jsou k dispozici pro rychlé vytváření rozložení mřížky. Méně mixinů lze také použít pro více sémantické rozvržení.
Sloupce vytvářejí okapy (mezery mezi obsahem sloupců) pomocí padding. Tato výplň je posunuta v řádcích pro první a poslední sloupec prostřednictvím záporného okraje na .rows.
Záporné rozpětí je důvodem, proč jsou níže uvedené příklady předsazené. Je to tak, že obsah ve sloupcích mřížky je zarovnán s obsahem bez mřížky.
Sloupce mřížky se vytvářejí zadáním počtu dvanácti dostupných sloupců, které chcete rozložit. Například tři stejné sloupce by použily tři .col-xs-4.
Pokud je v jednom řádku umístěno více než 12 sloupců, každá skupina nadbytečných sloupců se jako jedna jednotka zalomí do nového řádku.
Třídy mřížky se vztahují na zařízení s šířkou obrazovky větší nebo rovnou velikostem bodu přerušení a přepisují třídy mřížky zaměřené na menší zařízení. Proto např. použití jakékoli .col-md-*třídy na prvek neovlivní pouze jeho styl na středních zařízeních, ale také na velkých zařízeních, pokud .col-lg-*třída není přítomna.

Podívejte se na příklady použití těchto principů na váš kód.

Mediální dotazy

K vytvoření klíčových bodů přerušení v našem gridovém systému používáme následující mediální dotazy v našich souborech Less.

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

Občas tyto dotazy na média rozšiřujeme tak, aby zahrnovaly max-widthomezení CSS na užší sadu zařízení.

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

Možnosti mřížky

Podívejte se, jak aspekty systému Bootstrap grid fungují na více zařízeních pomocí praktické tabulky.

	Extra malá zařízení Telefony (<768px)	Malá zařízení Tablety (≥768px)	Střední zařízení Stolní počítače (≥992 px)	Velká zařízení Stolní počítače (≥1200px)
Chování mřížky	Horizontální po celou dobu	Sbaleno na začátek, vodorovně nad zarážkami
Šířka kontejneru	Žádné (automaticky)	750 pixelů	970 pixelů	1170 pixelů
Předpona třídy	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
počet sloupců	12
Šířka sloupce	Auto	~62px	~81 pixelů	~97 pixelů
Šířka okapu	30px (15px na každé straně sloupce)
Vnořitelný	Ano
Ofsety	Ano
Uspořádání sloupců	Ano

Příklad: Stacked-to-horizontal

Pomocí jediné sady .col-md-*tříd mřížky můžete vytvořit základní mřížkový systém, který začíná naskládaným na mobilních zařízeních a tabletech (extra malý až malý rozsah), než se stane horizontálním na stolních (středních) zařízeních. Umístěte sloupce mřížky do libovolného .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>

Příklad: Nádoba na kapalinu

Proměňte jakékoli rozvržení mřížky s pevnou šířkou na rozvržení s plnou šířkou tím, že změníte vnější .containerna .container-fluid.

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

Příklad: Mobil a počítač

Nechcete, aby se vaše sloupce jednoduše skládaly do menších zařízení? Použijte extra malé a střední třídy mřížky zařízení přidáním .col-xs-* .col-md-*do sloupců. Pro lepší představu, jak to celé funguje, se podívejte na příklad níže.

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

Příklad: Mobil, tablet, desktop

Navažte na předchozí příklad vytvořením ještě dynamičtějších a výkonnějších rozvržení pomocí .col-sm-*tříd tabletů.

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

Příklad: Omotávání sloupů

Pokud je v jednom řádku umístěno více než 12 sloupců, každá skupina nadbytečných sloupců se jako jedna jednotka zalomí do nového řádku.

.col-xs-9

.col-xs-4
Protože 9 + 4 = 13 > 12, tento 4sloupcový div se zabalí do nového řádku jako jedna souvislá jednotka.

.col-xs-6
Následující sloupce pokračují podél nového řádku.

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

Responzivní sloupec se resetuje

Se čtyřmi dostupnými úrovněmi mřížek se musíte setkat s problémy, kdy v určitých bodech přerušení nejsou vaše sloupce zcela jasné, protože jeden je vyšší než druhý. Chcete-li to vyřešit, použijte kombinaci třídy a .clearfixa našich responzivních obslužných tříd .

.col-xs-6 .col-sm-3
Změňte velikost výřezu nebo se podívejte na příklad v telefonu.

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

Kromě vymazání sloupců v responzivních zarážkách možná budete muset resetovat offsety, push nebo pulls . Podívejte se na to v akci v příkladu mřížky .

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

Odstraňte okapy

Odstraňte okapy z řádku a jeho sloupců s .row-no-gutterstřídou.

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

Odsazení sloupků

Přesunout sloupce doprava pomocí .col-md-offset-*tříd. Tyto třídy zvětšují levý okraj sloupce o *sloupce. Například .col-md-offset-4přesune .col-md-4přes čtyři sloupce.

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

Můžete také přepsat posuny z nižších vrstev mřížky pomocí .col-*-offset-0tříd.

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

Vnoření sloupů

Chcete-li obsah vnořit do výchozí mřížky, přidejte do existujícího sloupce nový .rowa sadu sloupců . Vnořené řádky by měly obsahovat sadu sloupců, jejichž celkový počet je 12 nebo méně (není nutné použít všech 12 dostupných sloupců)..col-sm-*.col-sm-*

Úroveň 1: .col-sm-9

Úroveň 2: .col-xs-8 .col-sm-6

Úroveň 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>

Uspořádání sloupců

Snadno změňte pořadí našich vestavěných sloupců mřížky pomocí tříd modifikátorů .col-md-push-*a modifikátorů..col-md-pull-*

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

Méně mixů a proměnných

Kromě předem vytvořených tříd mřížky pro rychlé rozvržení obsahuje Bootstrap proměnné a mixiny Less pro rychlé generování vašich vlastních jednoduchých sémantických rozvržení.

Proměnné

Proměnné určují počet sloupců, šířku mezery a bod dotazu na média, ve kterém mají začít plovoucí sloupce. Používáme je ke generování předdefinovaných tříd mřížky zdokumentovaných výše, stejně jako pro vlastní mixiny uvedené níže.

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

Mixins

Mixiny se používají ve spojení s proměnnými mřížky ke generování sémantických CSS pro jednotlivé sloupce mřížky.

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

Příklad použití

Proměnné můžete upravit na své vlastní hodnoty, nebo jen použít mixiny s jejich výchozími hodnotami. Zde je příklad použití výchozího nastavení k vytvoření rozvržení se dvěma sloupci s mezerou mezi nimi.

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

Nadpisy

K dispozici jsou všechny nadpisy HTML <h1>až po <h6>. .h1Průchozí .h6třídy jsou také k dispozici, když chcete, aby se styl písma shodoval s nadpisem, ale přesto chcete, aby se váš text zobrazoval inline.

h1. Bootstrap nadpis	Polotučné 36 pixelů
h2. Bootstrap nadpis	Polotučné 30 pixelů
h3. Bootstrap nadpis	Polotučné 24 pixelů
h4. Bootstrap nadpis	Polotučné 18px
h5. Bootstrap nadpis	Polotučné 14px
h6. Bootstrap nadpis	Polotučné 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>

Vytvořte světlejší sekundární text v libovolném nadpisu s obecným <small>tagem nebo .smalltřídou.

h1. Nadpis bootstrapu Sekundární text

h2. Nadpis bootstrapu Sekundární text

h3. Nadpis bootstrapu Sekundární text

h4. Nadpis bootstrapu Sekundární text

h5. Nadpis bootstrapu Sekundární text

h6. Nadpis bootstrapu Sekundární text

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

Kopie těla

Globální výchozí hodnota Bootstrapu font-sizeje 14 pixelů s hodnotou 1,428 . To platí pro odstavce a všechny. Kromě toho (odstavce) obdrží spodní okraj poloviny své vypočítané výšky řádku (10 pixelů ve výchozím nastavení).line-height<body><p>

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>

Kopie těla olova

Nechte odstavec vyniknout přidáním .lead.

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

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

Postaveno s Less

Typografická škála je založena na dvou proměnných Less in variables.less : @font-size-basea @line-height-base. První je základní velikost písma použitá v celém textu a druhá je výška základního řádku. Tyto proměnné a nějakou jednoduchou matematiku používáme k vytvoření okrajů, odsazení a výšek řádků všech našich typů a dalších. Přizpůsobte si je a Bootstrap se přizpůsobí.

Vložené textové prvky

Označený text

Pro zvýraznění řady textu kvůli jeho relevanci v jiném kontextu použijte <mark>značku.

Můžete použít značku markzvýraznittext.

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

Smazaný text

Pro označení bloků textu, které byly smazány, použijte <del>značku.

~~Tento řádek textu má být považován za smazaný text.~~

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

Přeškrtnutý text

Pro označení bloků textu, které již nejsou relevantní, použijte <s>značku.

~~Tento řádek textu má být považován za již nepřesný.~~

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

Vložený text

Pro označení dodatků k dokumentu použijte <ins>značku.

Tento řádek textu má být považován za doplněk k dokumentu.

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

Podtržený text

Pro podtržení textu použijte <u>značku.

Tento řádek textu se vykreslí jako podtržený

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

Využijte výchozí značky zvýraznění HTML s odlehčenými styly.

Malý text

Pro snížení zvýraznění vloženého textu nebo bloků textu použijte <small>značku k nastavení textu na 85 % velikosti nadřazeného prvku. Prvky nadpisu dostávají své vlastní font-sizepro vnořené <small>prvky.

Alternativně můžete použít vložený prvek s .smallnamísto libovolného prvku <small>.

Tento řádek textu má být považován za drobný tisk.

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

tučně

Pro zvýraznění úryvku textu s vyšší gramáží písma.

Následující úryvek textu je vykreslen jako tučný text .

<strong>rendered as bold text</strong>

Kurzíva

Pro zvýraznění úryvku textu kurzívou.

Následující úryvek textu je vykreslen jako text psaný kurzívou .

<em>rendered as italicized text</em>

Alternativní prvky

Klidně používejte <b>a <i>v HTML5. <b>je určen ke zvýraznění slov nebo frází, aniž by zdůrazňoval další důležitost, zatímco <i>je většinou pro hlas, technické výrazy atd.

Třídy zarovnání

Snadno znovu zarovnejte text ke komponentám pomocí tříd zarovnání textu.

Text zarovnaný doleva.

Text zarovnaný na střed.

Text zarovnaný vpravo.

Zarovnaný text.

Žádné zalomení textu.

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

Transformační třídy

Transformujte text do komponent pomocí tříd psaní velkých písmen.

Text s malými písmeny.

Text velkými písmeny.

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

Zkratky

Stylizovaná implementace prvku HTML <abbr>pro zkratky a akronymy pro zobrazení rozšířené verze při umístění kurzoru myši. Zkratky s titleatributem mají světlý tečkovaný spodní okraj a pomocný kurzor při umístění kurzoru, což poskytuje další kontext při umístění kurzoru a uživatelům asistenčních technologií.

Základní zkratka

Zkratka slova atribut je attr .

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

Inicialismus

Přidejte .initialismke zkratce pro trochu menší velikost písma.

HTML je nejlepší věc od krájeného chleba.

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

Adresy

Uveďte kontaktní informace na nejbližšího předka nebo celé dílo. Zachovejte formátování ukončením všech řádků znakem <br>.

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

Celé jméno
[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>

Blokové uvozovky

Pro citování bloků obsahu z jiného zdroje ve vašem dokumentu.

Výchozí bloková nabídka

Zabalte <blockquote>do nabídky jakýkoli HTML . Pro přímé uvozovky doporučujeme <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

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

Možnosti blockquote

Změny stylu a obsahu pro jednoduché varianty standardu <blockquote>.

Pojmenování zdroje

Přidejte a <footer>pro identifikaci zdroje. Zabalte název zdrojového díla do <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Někdo slavný v Source Title

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

Střídavé displeje

Přidat .blockquote-reversepro blokovou citaci s obsahem zarovnaným vpravo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Někdo slavný v Source Title

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

Seznamy

Neuspořádané

Seznam položek, u kterých na pořadí výslovně nezáleží .

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v 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>

Objednáno

Seznam položek, u kterých na pořadí výslovně záleží.

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

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

Bez stylu

Odstraňte výchozí list-stylea levý okraj na položkách seznamu (pouze okamžité děti). To platí pouze pro položky seznamu okamžitých potomků , což znamená, že budete muset přidat třídu také pro všechny vnořené seznamy.

Lorem ipsum dolor sit amet
Consectetur adipiscing elita
Integer molestie lorem at massa
Facilisis v 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>

V souladu

Umístěte všechny položky seznamu na jeden řádek s display: inline-block;lehkým odsazením.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Popis

Seznam výrazů s jejich přidruženými popisy.

Popisné seznamy: Popisný seznam je ideální pro definování termínů.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Porta Malesuada: Etiam porta sem malesuada magna mollis euismod.

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

Horizontální popis

Seřaďte termíny a popisy <dl>vedle sebe. Začíná skládaný jako výchozí <dl>s, ale když se rozbalí navigační panel, rozbalí se i tyto.

Popisné seznamy: Popisný seznam je ideální pro definování termínů.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Porta Malesuada: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre 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>

Automatické zkrácení

Vodorovné seznamy popisů zkrátí výrazy, které jsou příliš dlouhé a nevejdou se do levého sloupce s text-overflow. V užších výřezech se změní na výchozí skládané rozvržení.

V souladu

Zabalte vložené úryvky kódu pomocí <code>.

Například <section>by měl být zabalen jako vložený.

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

Uživatelský vstup

Použijte <kbd>k označení vstupu, který se obvykle zadává pomocí klávesnice.

Chcete-li přepnout adresáře, zadejte cda poté název adresáře.
Chcete-li upravit nastavení, stiskněte 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>

Základní blok

Použijte <pre>pro více řádků kódu. Pro správné vykreslení nezapomeňte v kódu vynechat všechny lomené závorky.

<p>Ukázkový text zde...</p>

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

Volitelně můžete přidat .pre-scrollabletřídu, která nastaví maximální výšku 350 pixelů a poskytne posuvník na ose y.

Proměnné

Pro indikaci proměnných použijte <var>tag.

y = m x + b

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

Ukázkový výstup

Pro označení bloků ukázkový výstup z programu použijte <samp>tag.

Tento text má být považován za vzorový výstup z počítačového programu.

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

Základní příklad

Pro základní styl – světlé vycpávky a pouze vodorovné oddělovače – přidejte základní třídu .tabledo libovolné <table>. Může se to zdát nadbytečné, ale vzhledem k rozšířenému používání tabulek pro jiné pluginy, jako jsou kalendáře a nástroje pro výběr data, jsme se rozhodli izolovat naše vlastní styly tabulek.

Volitelný popisek tabulky.
#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

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

Pruhované řady

Použijte .table-stripedk přidání pruhů zebry do libovolného řádku tabulky v rámci <tbody>.

Kompatibilita mezi prohlížeči

Prokládané tabulky jsou stylizovány pomocí :nth-childselektoru CSS, který není k dispozici v aplikaci Internet Explorer 8.

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

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

Ohraničený stůl

Přidat .table-borderedpro ohraničení na všech stranách tabulky a buněk.

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

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

Přesuňte řádky

Přidat .table-hover, chcete-li povolit stav přechodu na řádky tabulky v souboru <tbody>.

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Larry	pták	@cvrlikání

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

Zhuštěná tabulka

Přidejte .table-condensed, aby byly stoly kompaktnější tím, že zkrátíte výplň buněk na polovinu.

#	Jméno	Příjmení	Uživatelské jméno
1	Označit	Otto	@mdo
2	Jacobe	Thornton	@Tlustý
3	Pták Larry		@cvrlikání

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

Kontextové třídy

Použijte kontextové třídy k obarvení řádků tabulky nebo jednotlivých buněk.

Třída	Popis
`.active`	Použije barvu kurzoru na konkrétní řádek nebo buňku
`.success`	Označuje úspěšnou nebo pozitivní akci
`.info`	Označuje neutrální informativní změnu nebo akci
`.warning`	Označuje varování, které může vyžadovat pozornost
`.danger`	Označuje nebezpečnou nebo potenciálně negativní akci

#	Záhlaví sloupce	Záhlaví sloupce	Záhlaví sloupce
1	Obsah sloupce	Obsah sloupce	Obsah sloupce
2	Obsah sloupce	Obsah sloupce	Obsah sloupce
3	Obsah sloupce	Obsah sloupce	Obsah sloupce
4	Obsah sloupce	Obsah sloupce	Obsah sloupce
5	Obsah sloupce	Obsah sloupce	Obsah sloupce
6	Obsah sloupce	Obsah sloupce	Obsah sloupce
7	Obsah sloupce	Obsah sloupce	Obsah sloupce
8	Obsah sloupce	Obsah sloupce	Obsah sloupce
9	Obsah sloupce	Obsah sloupce	Obsah sloupce

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

Předávání významu asistenčním technologiím

Použití barvy k přidání významu řádku tabulky nebo jednotlivé buňky poskytuje pouze vizuální indikaci, která nebude poskytnuta uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Zajistěte, aby informace označené barvou byly buď zřejmé ze samotného obsahu (viditelný text v příslušném řádku/buňce tabulky), nebo byly zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.

Responzivní tabulky

Vytvářejte responzivní tabulky tak, že je zabalíte .table, .table-responsiveaby se na malých zařízeních (do 768 pixelů) posouvaly vodorovně. Při prohlížení na cokoli větším než 768px na šířku neuvidíte v těchto tabulkách žádný rozdíl.

Vertikální oříznutí/zkrácení

Responzivní tabulky využívají overflow-y: hidden, který ořízne veškerý obsah přesahující spodní nebo horní okraje tabulky. Zejména to může oříznout rozbalovací nabídky a další widgety třetích stran.

Firefox a sady polí

Firefox má nějaký nepříjemný styl sady polí, widthkterý zasahuje do responzivní tabulky. Toto nelze přepsat bez hacku specifického pro Firefox, který v Bootstrapu neposkytujeme :

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

Pro více informací si přečtěte tuto odpověď Stack Overflow .

#	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky
1	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
2	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
3	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky

#	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky	Záhlaví tabulky
1	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
2	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky
3	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky	Buňka tabulky

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

Základní příklad

Jednotlivé ovládací prvky formuláře automaticky obdrží určitý globální styl. Všechny textové prvky <input>, <textarea>a <select>prvky s .form-controljsou standardně nastaveny na width: 100%;. Zabalte štítky a ovládací prvky .form-grouppro optimální rozestupy.

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

Nesměšujte skupiny formulářů se vstupními skupinami

Nemíchejte skupiny formulářů přímo se vstupními skupinami . Místo toho vnořte vstupní skupinu do skupiny formulářů.

Inline formulář

Přidejte .form-inlinedo formuláře (což nemusí být <form>) pro ovládací prvky zarovnané doleva a vložené bloky. To platí pouze pro formuláře ve výřezech, které jsou široké alespoň 768 pixelů.

Může vyžadovat vlastní šířky

Vstupy a výběry byly width: 100%;v Bootstrapu použity ve výchozím nastavení. V rámci vložených formulářů jsme to resetovali na, width: auto;aby se na stejném řádku mohlo nacházet více ovládacích prvků. V závislosti na vašem rozvržení mohou být vyžadovány další vlastní šířky.

Vždy přidávejte štítky

Čtečky obrazovky budou mít potíže s vašimi formuláři, pokud pro každý vstup neuvedete štítek. U těchto vložených formulářů můžete štítky skrýt pomocí .sr-onlytřídy. Existují další alternativní způsoby poskytování označení pro asistenční technologie, jako je atribut aria-label, aria-labelledbynebo . titlePokud není přítomen žádný z těchto atributů, mohou se čtečky obrazovky uchýlit k použití placeholderatributu, pokud je přítomen, ale uvědomte si, že použití placeholderjako náhrady za jiné metody označování se nedoporučuje.

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

Horizontální tvar

Pomocí předdefinovaných tříd mřížky Bootstrapu zarovnejte popisky a skupiny ovládacích prvků formuláře ve vodorovném rozvržení přidáním .form-horizontaldo formuláře (což nemusí být <form>). Tím se změní .form-groups, aby se chovalo jako řádky mřížky, takže není potřeba .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>

Podporované ovládací prvky

Příklady standardních ovládacích prvků formuláře podporovaných v ukázkovém rozložení formuláře.

Vstupy

Nejběžnější ovládací prvek formuláře, textová vstupní pole. Zahrnuje podporu pro všechny typy HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tela color.

Je vyžadována deklarace typu

Vstupy budou plně stylizované pouze v případě, že budou typesprávně deklarovány.

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

Vstupní skupiny

Chcete-li přidat integrovaný text nebo tlačítka před a/nebo za jakýkoli textový<input> soubor , podívejte se na komponentu vstupní skupiny .

Textarea

Ovládací prvek formuláře, který podporuje více řádků textu. Změňte rowsatribut podle potřeby.

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

Zaškrtávací políčka a rádia

Zaškrtávací políčka jsou pro výběr jedné nebo několika možností v seznamu, zatímco rádia jsou pro výběr jedné možnosti z mnoha.

Deaktivovaná zaškrtávací políčka a rádia jsou podporována, ale chcete-li poskytnout „nepovolený“ kurzor při umístění kurzoru na nadřazenou položku <label>, budete muset přidat .disabledtřídu do nadřazené položky .radio, .radio-inline, .checkbox, nebo.checkbox-inline .

Výchozí (skládaný)

<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 zaškrtávací políčka a rádia

Použijte třídy .checkbox-inlinenebo .radio-inlinena řadě zaškrtávacích políček nebo přepínačů pro ovládací prvky, které se zobrazují na stejném řádku.

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

Zaškrtávací políčka a rádia bez textu štítku

Pokud nemáte v poli žádný text <label>, vstup je umístěn tak, jak byste očekávali. V současné době funguje pouze na neinline zaškrtávacích políčkách a rádiích. Nezapomeňte stále poskytovat nějakou formu štítku pro asistenční technologie (například pomocí 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>

Vybírá

Všimněte si, že mnoho nativních výběrových nabídek – jmenovitě v Safari a Chrome – má zaoblené rohy, které nelze upravit pomocí border-radiusvlastností.

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

U <select>ovládacích prvků s multipleatributem je ve výchozím nastavení zobrazeno více možností.

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

Statické ovládání

Když potřebujete umístit prostý text vedle štítku formuláře ve formuláři, použijte .form-control-statictřídu na <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>

Stav zaměření

Odebereme výchozí outlinestyly u některých ovládacích prvků formuláře a použijeme na box-shadowjeho místo pro :focus.

Demo `:focus`stav

Výše uvedený příklad vstupu používá vlastní styly v naší dokumentaci k demonstraci :focusstavu na .form-control.

Deaktivovaný stav

Přidejte disabledbooleovský atribut na vstup, abyste zabránili uživatelským interakcím. Deaktivované vstupy jsou světlejší a přidávají not-allowedkurzor.

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

Zakázané sady polí

Přidáním disabledatributu do a <fieldset>zakážete všechny ovládací prvky <fieldset>najednou.

Upozornění ohledně funkčnosti odkazu`<a>`

Ve výchozím nastavení budou prohlížeče považovat všechny ovládací prvky nativního formuláře ( <input>a prvky) uvnitř a <select>za zakázané, což zabrání interakci s klávesnicí a myší. Pokud však váš formulář obsahuje také prvky, bude jim přidělen pouze styl . Jak je uvedeno v části o zakázaném stavu pro tlačítka (a konkrétně v podsekci pro prvky kotvy), tato vlastnost CSS ještě není standardizovaná a není plně podporována v Opeře 18 a nižších verzích nebo v Internet Exploreru 11 a vyhrála nebrání uživatelům klávesnice v tom, aby mohli zaměřit nebo aktivovat tyto odkazy. Chcete-li být v bezpečí, použijte k deaktivaci takových odkazů vlastní JavaScript.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Kompatibilita mezi prohlížeči

Zatímco Bootstrap použije tyto styly ve všech prohlížečích, Internet Explorer 11 a nižší nepodporují plně disabledatribut na <fieldset>. K deaktivaci sady polí v těchto prohlížečích použijte vlastní JavaScript.

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

Stav pouze pro čtení

Přidejte readonlyna vstup booleovský atribut, abyste zabránili změně hodnoty vstupu. Vstupy pouze pro čtení se zdají světlejší (stejně jako zakázané vstupy), ale zachovají si standardní kurzor.

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

Pomocný text

Blokovat text nápovědy pro ovládací prvky formuláře.

Přidružení textu nápovědy k ovládacím prvkům formuláře

Text nápovědy by měl být explicitně přidružen k ovládacímu prvku formuláře, ke kterému se vztahuje pomocí aria-describedbyatributu. To zajistí, že asistenční technologie – jako jsou čtečky obrazovky – oznámí tento text nápovědy, když uživatel zaostří nebo vstoupí do ovládacího prvku.

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

Stavy ověření

Bootstrap obsahuje styly ověření chyb, varování a úspěšnosti v ovládacích prvcích formuláře. Chcete-li použít, přidejte .has-warning, .has-error, nebo .has-successdo nadřazeného prvku. Jakékoli .control-label, .form-control, a .help-blockv rámci tohoto prvku obdrží styly ověření.

Předávání stavu ověření pomocným technologiím a barvoslepým uživatelům

Použití těchto stylů ověření k označení stavu ovládacího prvku formuláře poskytuje pouze vizuální, barevnou indikaci, která nebude sdělena uživatelům asistenčních technologií – jako jsou čtečky obrazovky – ani barvoslepým uživatelům.

Zajistěte, aby byla poskytnuta také alternativní indikace stavu. Můžete například zahrnout nápovědu o stavu do <label>samotného textu ovládacího prvku formuláře (jak je tomu v následujícím příkladu kódu), zahrnout glyfikon (s vhodným alternativním textem pomocí .sr-onlytřídy – viz příklady glyfikonů ) nebo poskytnutím další blok textu nápovědy . Specificky pro asistenční technologie lze také přiřadit aria-invalid="true"atribut neplatným ovládacím prvkům formuláře.

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

S volitelnými ikonami

Můžete také přidat volitelné ikony zpětné vazby přidáním .has-feedbacka pravé ikony.

Ikony zpětné vazby fungují pouze s textovými <input class="form-control">prvky.

Ikony, štítky a skupiny vstupů

Ruční umístění ikon zpětné vazby je vyžadováno pro vstupy bez označení a pro skupiny vstupů s doplňkem vpravo. Důrazně se doporučuje, abyste z důvodu usnadnění uváděli štítky pro všechny vstupy. Pokud chcete zabránit zobrazování štítků, skryjte je u .sr-onlytřídy. Pokud se musíte obejít bez štítků, upravte tophodnotu ikony zpětné vazby. U vstupních skupin upravte righthodnotu na vhodnou hodnotu v pixelech v závislosti na šířce vašeho addonu.

Předání významu ikony asistenčním technologiím

Aby bylo zajištěno, že asistenční technologie – jako jsou čtečky obrazovky – správně vyjadřují význam ikony, měl by být do .sr-onlytřídy zahrnut další skrytý text a měl by být explicitně spojen s ovládacím prvkem formuláře, kterého se týká použití aria-describedby. Alternativně zajistěte, aby význam (například skutečnost, že existuje varování pro určité pole pro zadání textu) byl přenesen v nějaké jiné formě, jako je například změna textu skutečného <label>přiřazeného k ovládacímu prvku formuláře.

Ačkoli následující příklady již zmiňují stav ověření jejich příslušných ovládacích prvků formuláře v samotném <label>textu, výše uvedená technika (s použitím .sr-onlytextu a aria-describedby) byla zahrnuta pro ilustrativní účely.

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

Volitelné ikony ve vodorovné a vložené formě

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Volitelné ikony se skrytými `.sr-only`štítky

Pokud použijete .sr-onlytřídu ke skrytí ovládacího prvku formuláře <label>(namísto použití jiných možností označení, jako je aria-labelatribut), Bootstrap automaticky upraví pozici ikony, jakmile bude přidána.

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

Kontrola velikosti

Nastavte výšky pomocí tříd jako .input-lg, a nastavte šířky pomocí tříd mřížkových sloupců jako .col-lg-*.

Výškové dimenzování

Vytvořte vyšší nebo kratší ovládací prvky formuláře, které odpovídají velikosti tlačítek.

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

Horizontální velikosti skupin formulářů

Rychle upravte velikost štítků a ovládacích prvků formuláře .form-horizontalpřidáním .form-group-lgnebo .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>

Dimenzování sloupců

Zabalte vstupy do sloupců mřížky nebo jakéhokoli vlastního nadřazeného prvku, abyste snadno vynutili požadované šířky.

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

Značky tlačítek

Použijte třídy tlačítek u prvku <a>, <button>, nebo .<input>

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

Kontextově specifické použití

Zatímco třídy tlačítek lze použít na prvcích <a>a <button>, v rámci našich komponent nav a navbar jsou podporovány pouze <button>prvky.

Odkazy fungující jako tlačítka

Pokud se <a>prvky používají k tomu, aby fungovaly jako tlačítka – spouštějí funkcionalitu na stránce, spíše než pro navigaci do jiného dokumentu nebo sekce na aktuální stránce – měly by mít také odpovídající role="button".

Vykreslování napříč prohlížeči

Jako osvědčený postup důrazně doporučujeme používat <button>prvek vždy, když je to možné , aby bylo zajištěno odpovídající vykreslování napříč prohlížeči.

Mimo jiné je ve Firefoxu <30 chyba , která nám brání v nastavení tlačítek založených na line-heightof- <input>based, což způsobuje, že přesně neodpovídají výšce ostatních tlačítek ve Firefoxu.

Možnosti

K rychlému vytvoření stylizovaného tlačítka použijte kteroukoli z dostupných tříd tlačítek.

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

Předávání významu asistenčním technologiím

Použití barvy k přidání významu tlačítku poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Zajistěte, aby informace označené barvou byly buď zřejmé ze samotného obsahu (viditelný text tlačítka), nebo byly zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.

Velikosti

Máte rádi větší nebo menší tlačítka? Přidejte .btn-lg, .btn-sm, nebo .btn-xspro další velikosti.

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

Vytvořte tlačítka na úrovni bloku – ta, která zabírají celou šířku nadřazeného prvku – přidáním .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>

Aktivní stav

Když jsou tlačítka aktivní, zobrazí se stisknutá (s tmavším pozadím, tmavším okrajem a vloženým stínem). U <button>prvků se to provádí pomocí :active. U <a>prvků je hotovo pomocí .active. Můžete však použít .activena <button>s (a zahrnout aria-pressed="true"atribut), pokud potřebujete programově replikovat aktivní stav.

Prvek tlačítka

Není třeba přidávat :active, protože se jedná o pseudotřídu, ale pokud potřebujete vynutit stejný vzhled, pokračujte a přidejte .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>

Kotevní prvek

Přidejte .activetřídu do <a>tlačítek.

Primární odkaz Odkaz

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

Deaktivovaný stav

Tlačítka budou vypadat tak, že na ně nelze kliknout tím, že je vyblednete pomocí opacity.

Prvek tlačítka

Přidejte disabledatribut k <button>tlačítkům.

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

Kompatibilita mezi prohlížeči

Pokud přidáte disabledatribut do <button>, Internet Explorer 9 a nižší vykreslí text šedě s ošklivým stínem textu, který nemůžeme opravit.

Kotevní prvek

Přidejte .disabledtřídu do <a>tlačítek.

Primární odkaz Odkaz

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

Používáme .disabledzde třídu utility, podobnou běžné .activetřídě, takže není vyžadována žádná předpona.

Upozornění na funkčnost odkazu

Tato třída se používá pointer-events: nonek pokusu zakázat funkci propojení <a>s, ale tato vlastnost CSS ještě není standardizována a není plně podporována v Opeře 18 a nižších nebo v Internet Exploreru 11. Navíc i v prohlížečích, které podporují pointer-events: none, klávesnice navigace zůstává nedotčena, což znamená, že vidící uživatelé klávesnice a uživatelé asistenčních technologií budou moci tyto odkazy stále aktivovat. Chcete-li být v bezpečí, použijte k deaktivaci takových odkazů vlastní JavaScript.

Responzivní obrázky

Obrázky v Bootstrap 3 lze přidáním třídy upravit tak, aby byly responzivní .img-responsive. To platí max-width: 100%;, height: auto;a display: block;pro obrázek tak, aby se přizpůsobil nadřazenému prvku.

Chcete-li vycentrovat obrázky, které používají .img-responsivetřídu, použijte .center-blockmísto .text-center. Další podrobnosti o použití naleznete v části pomocné třídy ..center-block

Obrázky SVG a IE 8-10

V aplikaci Internet Explorer 8-10 mají obrázky SVG .img-responsiveneúměrnou velikost. Chcete-li to opravit, přidejte tam, width: 100% \9;kde je to nutné. Bootstrap to neaplikuje automaticky, protože to způsobuje komplikace u jiných formátů obrázků.

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

Obrazové tvary

Přidejte třídy k <img>prvku, abyste mohli snadno stylizovat obrázky v libovolném projektu.

Kompatibilita mezi prohlížeči

Mějte na paměti, že Internet Explorer 8 postrádá podporu pro zaoblené rohy.

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

Kontextové barvy

Přeneste význam prostřednictvím barev s několika zdůrazněnými užitnými třídami. Ty lze také použít na odkazy a při najetí myší ztmavnou stejně jako naše výchozí styly odkazů.

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>

Zacházení se specifičností

Někdy nelze použít třídy důrazu kvůli specifičnosti jiného selektoru. Ve většině případů je dostatečným řešením zalomit text do <span>třídy se třídou.

Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Zajistěte, aby informace označené barvou byly buď zřejmé ze samotného obsahu (kontextové barvy se používají pouze k posílení významu, který je již přítomen v textu/značce), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě . .

Kontextové pozadí

Podobně jako u kontextových tříd barev textu snadno nastavte pozadí prvku na jakoukoli kontextovou třídu. Komponenty kotvy při najetí myší ztmavnou, stejně jako třídy textu.

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>

Zacházení se specifičností

Někdy nelze kontextové třídy pozadí použít kvůli specifičnosti jiného selektoru. V některých případech je dostatečným řešením zabalit obsah vašeho prvku <div>do třídy s třídou.

Předávání významu asistenčním technologiím

Stejně jako u kontextových barev zajistěte, aby jakýkoli význam přenášený barvou byl přenášen také ve formátu, který není čistě prezentační.

Zavřít ikonu

Pomocí obecné ikony zavřít můžete odmítnout obsah, jako jsou modály a upozornění.

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

Stříšky

Pomocí stříšek označte funkci a směr rozevíracího seznamu. Všimněte si, že výchozí stříška se v rozbalovacích nabídkách automaticky obrátí .

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

Rychlé plováky

Uvádějte prvek doleva nebo doprava pomocí třídy. !importantje zahrnuto, aby se předešlo problémům se specifičností. Třídy lze také použít jako mixiny.

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

Vycentrovat bloky obsahu

Nastavte prvek na display: blocka vycentrujte pomocí margin. K dispozici jako mix a třída.

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

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

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

Clearfix

Snadno vymažte floats přidáním .clearfix do nadřazeného prvku . Využívá micro clearfix , jak jej zpopularizoval Nicolas Gallagher. Lze použít i jako 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();
}

Zobrazení a skrytí obsahu

Vynutit zobrazení nebo skrytí prvku ( včetně pro čtečky obrazovky ) pomocí tříd .showa . .hiddenTyto třídy se používají !importantk zamezení konfliktů specifičnosti, stejně jako rychlé plovoucí . Jsou k dispozici pouze pro přepínání úrovně bloku. Mohou být také použity jako mixiny.

.hideje k dispozici, ale ne vždy má vliv na čtečky obrazovky a od verze 3.0.1 je zastaralá . Místo toho použijte .hiddennebo .sr-only.

Kromě toho .invisiblelze použít pouze k přepínání viditelnosti prvku, což znamená, že displayse nemění a prvek může stále ovlivňovat tok dokumentu.

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

Obsah čtečky obrazovky a navigace pomocí klávesnice

Skrýt prvek pro všechna zařízení kromě čtečky obrazovky pomocí .sr-only. Kombinujte .sr-onlys .sr-only-focusablepro opětovné zobrazení prvku, když je zaostřený (např. uživatelem pouze s klávesnicí). Nezbytné pro dodržování osvědčených postupů přístupnosti . Lze použít i jako mixiny.

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

Výměna obrazu

Použijte .text-hidetřídu nebo mixin k nahrazení textového obsahu prvku obrázkem na pozadí.

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

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

Pro rychlejší vývoj přizpůsobený pro mobilní zařízení použijte tyto třídy nástrojů pro zobrazení a skrytí obsahu podle zařízení prostřednictvím dotazu na média. Zahrnuty jsou také pomocné třídy pro přepínání obsahu při tisku.

Snažte se je používat omezeně a vyhněte se vytváření zcela odlišných verzí stejného webu. Místo toho je použijte k doplnění prezentace každého zařízení.

Dostupné třídy

Použijte jednu nebo kombinaci dostupných tříd pro přepínání obsahu mezi body přerušení zobrazení.

	Extra malá zařízeníTelefony (<768px)	Malá zařízeníTablety (≥768px)	Střední zařízeníStolní počítače (≥992 pixelů)	Velká zařízeníStolní počítače (≥1200 pixelů)
`.visible-xs-*`	Viditelné	Skrytý	Skrytý	Skrytý
`.visible-sm-*`	Skrytý	Viditelné	Skrytý	Skrytý
`.visible-md-*`	Skrytý	Skrytý	Viditelné	Skrytý
`.visible-lg-*`	Skrytý	Skrytý	Skrytý	Viditelné
`.hidden-xs`	Skrytý	Viditelné	Viditelné	Viditelné
`.hidden-sm`	Viditelné	Skrytý	Viditelné	Viditelné
`.hidden-md`	Viditelné	Viditelné	Skrytý	Viditelné
`.hidden-lg`	Viditelné	Viditelné	Viditelné	Skrytý

Od verze 3.2.0 přicházejí .visible-*-*třídy pro každý bod přerušení ve třech variantách, jedna pro každou displayhodnotu vlastnosti CSS uvedenou níže.

Skupina tříd	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Takže xsnapříklad pro extra malé ( ) obrazovky jsou dostupné .visible-*-*třídy: .visible-xs-block, .visible-xs-inlinea .visible-xs-inline-block.

Třídy .visible-xs, .visible-sm, .visible-md, a .visible-lgtaké existují, ale od verze 3.2.0 jsou zastaralé . Jsou přibližně ekvivalentní .visible-*-block, s výjimkou dalších speciálních případů pro přepínání <table>souvisejících prvků.

Tiskové třídy

Podobně jako běžné responzivní třídy je použijte pro přepínání obsahu pro tisk.

Třídy	Prohlížeč	Tisk
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skrytý	Viditelné
`.hidden-print`	Viditelné	Skrytý

Třída .visible-printtaké existuje, ale od verze 3.2.0 je zastaralá . Je přibližně ekvivalentní .visible-print-block, s výjimkou dalších speciálních případů pro <table>související prvky.

Testovací případy

Změňte velikost prohlížeče nebo načtěte na různých zařízeních a otestujte responzivní třídy nástrojů.

Viditelné na...

Zelené značky zaškrtnutí označují, že prvek je viditelný ve vašem aktuálním výřezu.

Extra malý ✔ Viditelné na x-small

Malý ✔ Viditelné na malém

Střední ✔ Viditelné na médiu

Velký ✔ Viditelné na velkém

Extra malý a malý ✔ Viditelné na x-small a small

Střední a velké ✔ Viditelné na střední a velké

Extra malý a střední ✔ Viditelné na x-small a medium

Malé i velké ✔ Viditelné na malých i velkých

Extra malé a velké ✔ Viditelné na x-small a large

Malé a střední ✔ Viditelné na malých a středních

Skryto na...

Zde zelené zaškrtnutí také značí, že prvek je skrytý ve vašem aktuálním výřezu.

Extra malý ✔ Skryto na x-small

Malý ✔ Skryté na malém

Střední ✔ Skryté na médiu

Velký ✔ Skryté na velkém

Extra malý a malý ✔ Skryto na x-small a small

Střední a velké ✔ Skryté na střední a velké

Extra malý a střední ✔ Skryto na x-small a medium

Malé i velké ✔ Skryté na malém a velkém

Extra malé a velké ✔ Skryto na x-small a large

Malé a střední ✔ Skryté na malé a střední

CSS Bootstrapu je postaveno na Less, preprocesoru s dalšími funkcemi, jako jsou proměnné, mixiny a funkce pro kompilaci CSS. Ti, kteří chtějí používat zdrojové soubory Less místo našich kompilovaných souborů CSS, mohou využít četné proměnné a mixiny, které používáme v rámci celého rámce.

Gridové proměnné a mixiny jsou zahrnuty v sekci Grid system .

Kompilace Bootstrap

Bootstrap lze použít minimálně dvěma způsoby: s kompilovaným CSS nebo se zdrojovými soubory Less. Chcete-li zkompilovat soubory Less, podívejte se do části Začínáme informace o tom, jak nastavit vývojové prostředí pro spouštění nezbytných příkazů.

Kompilační nástroje třetích stran mohou fungovat s Bootstrap, ale nejsou podporovány naším základním týmem.

Proměnné

Proměnné se používají v celém projektu jako způsob centralizace a sdílení běžně používaných hodnot, jako jsou barvy, mezery nebo sady písem. Úplný rozpis najdete v Customizeru .

Barvy

Snadno používejte dvě barevná schémata: stupně šedi a sémantické. Barvy ve stupních šedi poskytují rychlý přístup k běžně používaným odstínům černé, zatímco sémantické zahrnují různé barvy přiřazené smysluplným kontextovým hodnotám.

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

Použijte kteroukoli z těchto barevných proměnných tak, jak jsou, nebo je znovu přiřaďte k smysluplnějším proměnným pro váš projekt.

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

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

Lešení

Několik proměnných pro rychlé přizpůsobení klíčových prvků kostry vašeho webu.

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

Odkazy

Snadno upravte své odkazy správnou barvou s jedinou hodnotou.

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

Všimněte si, že @link-hover-colorpoužívá funkci, další úžasný nástroj od společnosti Less, k automatickému vytvoření správné barvy přechodu. Můžete použít darken, lighten, saturatea desaturate.

Typografie

Pomocí několika rychlých proměnných snadno nastavíte typ písma, velikost textu, proklad a další. Bootstrap je také využívá k poskytování jednoduchých typografických mixů.

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

ikony

Dvě rychlé proměnné pro přizpůsobení umístění a názvu vašich ikon.

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

Komponenty

Komponenty v celém Bootstrapu využívají některé výchozí proměnné pro nastavení společných hodnot. Zde jsou nejčastěji používané.

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

Prodejce mixinů

Mixiny dodavatele jsou mixy, které pomáhají podporovat více prohlížečů tím, že do vašeho kompilovaného CSS zahrnou všechny relevantní předpony dodavatele.

Velikost krabice

Resetujte model krabice vašich komponent jediným mixem. Kontext naleznete v tomto užitečném článku od Mozilly .

Mixin je od verze 3.2.0 zastaralý a byl zaveden Autoprefixer. Pro zachování zpětné kompatibility bude Bootstrap nadále používat mixin interně až do Bootstrap v4.

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

Zaoblené rohy

Dnes všechny moderní prohlížeče podporují vlastnost bez předpony border-radius. Jako takový neexistuje žádný .border-radius()mix, ale Bootstrap obsahuje zkratky pro rychlé zaoblení dvou rohů na konkrétní straně objektu.

.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) stíny

Pokud vaše cílová skupina používá nejnovější a nejlepší prohlížeče a zařízení, ujistěte se, že tuto box-shadowvlastnost použijete samostatně. Pokud potřebujete podporu pro starší zařízení se systémem Android (starší verze než 4) a iOS (před verzí systému iOS 5), použijte k vyzvednutí požadovaného-webkit předpony

Mixin je od verze 3.1.0 zastaralý , protože Bootstrap oficiálně nepodporuje zastaralé platformy, které nepodporují standardní vlastnost. Pro zachování zpětné kompatibility bude Bootstrap nadále používat mixin interně až do Bootstrap v4.

Ujistěte se, že rgba()ve stínech rámečku používáte barvy, aby co nejplynuleji splývaly s pozadím.

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

Přechody

Více mixů pro flexibilitu. Nastavte všechny informace o přechodu na jednu nebo podle potřeby zadejte samostatné zpoždění a trvání.

Mixiny jsou od verze 3.2.0 zastaralé , protože byl zaveden Autoprefixer. Pro zachování zpětné kompatibility bude Bootstrap nadále používat mixiny interně až do Bootstrapu 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;
}

Proměny

Otočte, zmenšujte, překládejte (přesouvejte) nebo zkoste jakýkoli objekt.

Mixiny jsou od verze 3.2.0 zastaralé , protože byl zaveden Autoprefixer. Pro zachování zpětné kompatibility bude Bootstrap nadále používat mixiny interně až do Bootstrapu 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;
}

Animace

Jediný mix pro použití všech vlastností animace CSS3 v jedné deklaraci a další mixiny pro jednotlivé vlastnosti.

Mixiny jsou od verze 3.2.0 zastaralé , protože byl zaveden Autoprefixer. Pro zachování zpětné kompatibility bude Bootstrap nadále používat mixiny interně až do Bootstrapu 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;
}

Neprůhlednost

Nastavte neprůhlednost pro všechny prohlížeče a poskytněte filterzáložní verzi pro IE8.

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

Zástupný text

Poskytněte kontext pro ovládací prvky formuláře v každém poli.

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

Sloupce

Generujte sloupce pomocí CSS v rámci jednoho prvku.

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

Přechody

Snadno přeměňte libovolné dvě barvy na gradient pozadí. Buďte pokročilejší a nastavte směr, použijte tři barvy nebo použijte radiální přechod. S jediným mixinem získáte všechny syntaxe s předponou, které budete potřebovat.

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

Můžete také určit úhel standardního dvoubarevného lineárního přechodu:

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

Pokud potřebujete gradient ve stylu barber-stripe, je to také snadné. Stačí zadat jednu barvu a my překryjeme průsvitný bílý pruh.

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

Zvyšte ante a místo toho použijte tři barvy. Nastavte první barvu, druhou barvu, zastavení barvy druhé barvy (procentuální hodnota jako 25 %) a třetí barvu pomocí těchto mixů:

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

Hlavy vzhůru! Pokud byste někdy potřebovali odstranit přechod, nezapomeňte odebrat všechny specifické pro IE, filterkteré jste přidali. Můžete to udělat pomocí .reset-filter()mixinu vedle background-image: none;.

Užitkové směsi

Utility mixiny jsou mixiny, které kombinují jinak nesouvisející vlastnosti CSS k dosažení konkrétního cíle nebo úkolu.

Clearfix

Zapomeňte na přidávání class="clearfix"do jakéhokoli prvku a místo toho přidejte .clearfix()mixin tam, kde je to vhodné. Používá micro clearfix od Nicolase Gallaghera .

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

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

Horizontální centrování

Rychle vycentrujte jakýkoli prvek v rámci jeho rodiče. Vyžaduje widthnebo max-widthje třeba nastavit.

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

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

Dimenzování pomocníci

Snáze zadejte rozměry objektu.

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

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

Textové oblasti s měnitelnou velikostí

Snadno konfigurujte možnosti změny velikosti pro jakoukoli textovou oblast nebo jakýkoli jiný prvek. Výchozí na normální chování prohlížeče ( both).

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

Zkrácení textu

Snadno ořízněte text pomocí elipsy pomocí jediného mixu. Vyžaduje prvek být blocknebo inline-blockúroveň.

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

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

Obrázky sítnice

Zadejte dvě cesty obrazu a rozměry obrázku @1x a Bootstrap poskytne dotaz na média @2x. Pokud máte k zobrazení mnoho obrázků, zvažte ruční psaní CSS obrázku sítnice v jediném dotazu na média.

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

I když je Bootstrap postaven na Less, má také oficiální port Sass . Udržujeme jej v samostatném úložišti GitHub a aktualizace zpracováváme pomocí konverzního skriptu.

Co je zahrnuto

Vzhledem k tomu, že port Sass má samostatné repo a slouží trochu jinému publiku, obsah projektu se značně liší od hlavního projektu Bootstrap. To zajišťuje, že port Sass je kompatibilní s co největším počtem systémů založených na Sass.

Cesta	Popis
`lib/`	Kód Ruby drahokamu (konfigurace Sass, integrace Rails a Compass)
`tasks/`	Převodové skripty (přeměna upstream Less na Sass)
`test/`	Kompilační testy
`templates/`	Manifest balíčku kompas
`vendor/assets/`	Sass, JavaScript a soubory písem
`Rakefile`	Interní úkoly, jako je rake a convert

Navštivte úložiště GitHub portu Sass, abyste viděli tyto soubory v akci.

Instalace

Informace o tom, jak nainstalovat a používat Bootstrap pro Sass, najdete v souboru readme úložiště GitHub . Je to nejaktuálnější zdroj a obsahuje informace pro použití s Rails, Compass a standardními projekty Sass.

Bootstrap pro Sass

CSS

Přehled

HTML5 doctype

Nejprve mobil

Typografie a odkazy

Normalize.css

Kontejnery

Mřížkový systém

Úvod

Mediální dotazy

Možnosti mřížky

Příklad: Stacked-to-horizontal

Příklad: Nádoba na kapalinu

Příklad: Mobil a počítač

Příklad: Mobil, tablet, desktop

Příklad: Omotávání sloupů

Responzivní sloupec se resetuje

Odstraňte okapy

Odsazení sloupků

Vnoření sloupů

Uspořádání sloupců

Méně mixů a proměnných

Proměnné

Mixins

Příklad použití

Typografie

Nadpisy

h1. Bootstrap nadpis

h2. Bootstrap nadpis

h3. Bootstrap nadpis

h4. Bootstrap nadpis

h5. Bootstrap nadpis

h6. Bootstrap nadpis

h1. Nadpis bootstrapu Sekundární text

h2. Nadpis bootstrapu Sekundární text

h3. Nadpis bootstrapu Sekundární text

h4. Nadpis bootstrapu Sekundární text

h5. Nadpis bootstrapu Sekundární text

h6. Nadpis bootstrapu Sekundární text

Kopie těla

Kopie těla olova

Postaveno s Less

Vložené textové prvky

Označený text

Smazaný text

Přeškrtnutý text

Vložený text

Podtržený text

Malý text

tučně

Kurzíva

Alternativní prvky

Třídy zarovnání

Transformační třídy

Zkratky

Základní zkratka

Inicialismus

Adresy

Blokové uvozovky

Výchozí bloková nabídka

Možnosti blockquote

Pojmenování zdroje

Střídavé displeje

Seznamy

Neuspořádané

Objednáno

Bez stylu

V souladu

Popis

Horizontální popis

Automatické zkrácení

Kód

V souladu

Uživatelský vstup

Základní blok

Proměnné

Ukázkový výstup

Tabulky

Základní příklad

Pruhované řady

Demo `:focus`stav

Upozornění ohledně funkčnosti odkazu`<a>`

Volitelné ikony se skrytými `.sr-only`štítky