Získajte prehľad o kľúčových častiach infraštruktúry Bootstrapu vrátane nášho prístupu k lepšiemu, rýchlejšiemu a silnejšiemu vývoju webu.

HTML5 doctype

Bootstrap využíva určité prvky HTML a vlastnosti CSS, ktoré vyžadujú použitie doctype HTML5. Zahrňte ho na začiatok všetkých svojich projektov.

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

Najskôr mobil

S Bootstrap 2 sme pridali voliteľné štýly vhodné pre mobilné zariadenia pre kľúčové aspekty rámca. S Bootstrap 3 sme od začiatku prepísali projekt tak, aby bol vhodný pre mobilné zariadenia. Namiesto pridávania voliteľných mobilných štýlov sú zapracované priamo do jadra. V skutočnosti je Bootstrap najskôr mobilný . Mobilné prvé štýly možno nájsť v celej knižnici namiesto v samostatných súboroch.

Ak chcete zabezpečiť správne vykreslenie a priblíženie dotykom, pridajte do svojho súboru metaznačku výrezu<head> .

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

Na mobilných zariadeniach môžete deaktivovať funkcie priblíženia pridaním user-scalable=nometaznačky zobrazovanej oblasti. Toto zakáže približovanie, čo znamená, že používatelia sa môžu iba posúvať a výsledkom je, že váš web bude vyzerať trochu viac ako natívna aplikácia. Celkovo to neodporúčame na každej stránke, takže buďte opatrní!

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

Typografia a odkazy

Bootstrap nastavuje základné globálne štýly zobrazenia, typografie a odkazov. Konkrétne my:

Nastavte background-color: #fff;nabody
Ako náš typografický základ použite atribúty @font-family-base, @font-size-base, a@line-height-base
Nastavte globálnu farbu odkazu cez @link-colora použite podčiarknutie odkazu iba na:hover

Tieto štýly nájdete v scaffolding.less.

Normalize.css

Na vylepšené vykresľovanie v rôznych prehliadačoch používame Normalize.css , projekt Nicolasa Gallaghera a Jonathana Neala .

Kontajnery

Bootstrap vyžaduje obsahujúci prvok na zabalenie obsahu lokality a umiestnenie nášho mriežkového systému. Môžete si vybrať jeden z dvoch kontajnerov, ktoré použijete vo svojich projektoch. Všimnite si, že kvôli paddinga viac nie je ani jeden kontajner vnoriteľný.

Použite .containerpre citlivý kontajner s pevnou šírkou.

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

Použite .container-fluidpre kontajner plnej šírky, ktorý pokrýva celú šírku vášho výrezu.

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

Bootstrap obsahuje citlivý, mobilný systém prvej fluidnej mriežky, ktorý sa primerane zväčšuje až na 12 stĺpcov, keď sa veľkosť zariadenia alebo výrezu zväčšuje. Obsahuje preddefinované triedy pre jednoduché možnosti rozloženia, ako aj výkonné mixiny na generovanie sémantických rozložení .

Úvod

Mriežkové systémy sa používajú na vytváranie rozložení stránky prostredníctvom série riadkov a stĺpcov, v ktorých sa nachádza váš obsah. Takto funguje mriežkový systém Bootstrap:

Riadky musia byť umiestnené v rámci .container(pevná šírka) alebo .container-fluid(plná šírka), aby boli správne zarovnané a vyplnené.
Pomocou riadkov vytvorte vodorovné skupiny stĺpcov.
Obsah by mal byť umiestnený v stĺpcoch a iba stĺpce môžu byť priamymi potomkami riadkov.
Preddefinované triedy mriežky ako .rowa .col-xs-4sú k dispozícii na rýchle vytváranie rozložení mriežky. Menej mixinov možno použiť aj pre sémantické rozloženia.
Stĺpce vytvárajú žľaby (medzery medzi obsahom stĺpcov) cez padding. Táto výplň je posunutá v riadkoch pre prvý a posledný stĺpec prostredníctvom záporného okraja na .rows.
Záporné rozpätie je dôvodom, prečo sú nižšie uvedené príklady predsadené. Je to tak, že obsah v stĺpcoch mriežky je zoradený s obsahom bez mriežky.
Stĺpce mriežky sa vytvárajú zadaním počtu dvanástich dostupných stĺpcov, ktoré chcete pokryť. Napríklad tri rovnaké stĺpce by použili tri .col-xs-4.
Ak je v jednom riadku umiestnených viac ako 12 stĺpcov, každá skupina ďalších stĺpcov sa ako jedna jednotka zalomí do nového riadku.
Triedy mriežky sa vzťahujú na zariadenia so šírkou obrazovky väčšou alebo rovnou veľkostiam bodu zlomu a prepisujú triedy mriežky zamerané na menšie zariadenia. Preto napríklad použitie akejkoľvek .col-md-*triedy na prvok neovplyvní len jeho štýl na stredných zariadeniach, ale aj na veľkých zariadeniach, ak .col-lg-*trieda nie je prítomná.

Pozrite si príklady aplikácie týchto princípov na váš kód.

Mediálne otázky

Na vytvorenie kľúčových bodov zlomu v našom mriežkovom systéme používame nasledujúce mediálne dopyty v našich súboroch 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) { ... }

Príležitostne rozširujeme tieto mediálne dopyty tak, aby zahŕňali max-widthobmedzenie CSS na užšiu skupinu zariadení.

@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 mriežky

Pozrite sa, ako aspekty mriežkového systému Bootstrap fungujú na viacerých zariadeniach pomocou praktickej tabuľky.

	Extra malé zariadenia Telefóny (<768px)	Malé zariadenia Tablety (≥768px)	Stredné zariadenia Stolové počítače (≥992 px)	Veľké zariadenia Stolové počítače (≥1200px)
Správanie mriežky	Horizontálne po celú dobu	Zbalený na začiatok, vodorovne nad prerušovacími bodmi
Šírka nádoby	Žiadne (automaticky)	750 pixelov	970 pixelov	1170 pixelov
Predpona triedy	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
počet stĺpcov	12
Šírka stĺpca	Auto	~62 pixelov	~81 pixelov	~97 pixelov
Šírka odkvapu	30 pixelov (15 pixelov na každej strane stĺpca)
Vnoriteľné	Áno
Ofsety	Áno
Usporiadanie stĺpcov	Áno

Príklad: Skladaný vodorovne

Pomocou jedinej sady .col-md-*tried mriežky môžete vytvoriť základný mriežkový systém, ktorý začína naskladaný na mobilných zariadeniach a tabletových zariadeniach (extra malý až malý rozsah) a až potom sa stane horizontálnym na stolných (stredných) zariadeniach. Umiestnite stĺpce mriežky do ľubovoľné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>

Príklad: Nádoba na tekutiny

Premeňte akékoľvek rozloženie mriežky s pevnou šírkou na rozloženie s plnou šírkou tak, že zmeníte svoju krajnú .containerna .container-fluid.

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

Príklad: Mobil a počítač

Nechcete, aby sa vaše stĺpce jednoducho ukladali do menších zariadení? Použite extra malé a stredné triedy mriežky zariadení pridaním .col-xs-* .col-md-*do svojich stĺpcov. Pre lepšiu predstavu, ako to celé funguje, si pozrite príklad nižšie.

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

Príklad: mobil, tablet, počítač

Stavte na predchádzajúcom príklade vytvorením ešte dynamickejších a výkonnejších rozložení s .col-sm-*triedami tabletov.

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

Príklad: Ovíjanie stĺpcov

Ak je v jednom riadku umiestnených viac ako 12 stĺpcov, každá skupina ďalších stĺpcov sa ako jedna jednotka zalomí do nového riadku.

.col-xs-9

.col-xs-4
Keďže 9 + 4 = 13 > 12, tento 4-stĺpcový div sa zabalí do nového riadku ako jedna súvislá jednotka.

.col-xs-6
Nasledujúce stĺpce pokračujú pozdĺž nového riadku.

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

Responzívny stĺpec sa resetuje

So štyrmi dostupnými vrstvami mriežok sa určite stretnete s problémami, pri ktorých sa v určitých bodoch zlomu vaše stĺpce nevyčistia celkom správne, pretože jeden je vyšší ako druhý. Ak to chcete vyriešiť, použite kombináciu triedy a .clearfixa našich responzívnych pomocných tried .

.col-xs-6 .col-sm-3
Zmeňte veľkosť výrezu alebo si ho pozrite napríklad v telefóne.

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

Okrem vymazania stĺpca pri responzívnych prerušovacích bodoch možno budete musieť vynulovať posuny, posuny alebo vytiahnutia . Pozrite si to v akcii v príklade mriež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>

Odsadenie stĺpcov

Presuňte stĺpce doprava pomocou .col-md-offset-*tried. Tieto triedy zväčšujú ľavý okraj stĺpca o *stĺpce. Napríklad .col-md-offset-4prejde .col-md-4cez štyri stĺpce.

.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 tiež prepísať posuny z nižších vrstiev mriežky pomocou .col-*-offset-0tried.

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

Vnorené stĺpy

Ak chcete obsah vnoriť do predvolenej mriežky, pridajte nový stĺpec .rowa množinu .col-sm-*stĺpcov do existujúceho .col-sm-*stĺpca. Vnorené riadky by mali obsahovať množinu stĺpcov, ktorých súčet môže byť maximálne 12 (nevyžaduje sa, aby ste použili všetkých 12 dostupných stĺpcov).

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

Usporiadanie stĺpcov

Ľahko zmeňte poradie našich vstavaných stĺpcov mriežky pomocou tried modifikátorov .col-md-push-*a modifikátorov..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>

Menej mixov a premenných

Okrem vopred vytvorených tried mriežky pre rýchle rozloženia obsahuje Bootstrap premenné a mixy Less na rýchle generovanie vlastných jednoduchých sémantických rozložení.

Premenné

Premenné určujú počet stĺpcov, šírku medzery a bod mediálneho dotazu, v ktorom sa majú začať plávajúce stĺpce. Používame ich na generovanie preddefinovaných tried mriežky zdokumentovaných vyššie, ako aj pre vlastné mixy uvedené nižšie.

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

Mixins

Mixiny sa používajú v spojení s premennými mriežky na generovanie sémantických CSS pre jednotlivé stĺpce mriež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));
  }
}

Príklad použitia

Premenné môžete upraviť na svoje vlastné hodnoty, alebo jednoducho použiť mixiny s ich predvolenými hodnotami. Tu je príklad použitia predvolených nastavení na vytvorenie rozloženia s dvoma stĺpcami s medzerou medzi 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 dispozícii sú všetky nadpisy HTML <h1>až po <h6>. .h1cez .h6triedy sú tiež k dispozícii, keď chcete prispôsobiť štýl písma nadpisu, ale stále chcete, aby sa váš text zobrazoval v riadku.

h1. Hlavička bootstrapu	Polotučné 36 pixelov
h2. Hlavička bootstrapu	Polotučné 30 pixelov
h3. Hlavička bootstrapu	Polotučné 24 pixelov
h4. Hlavička bootstrapu	Polotučné 18 pixelov
h5. Hlavička bootstrapu	Polotučné 14 pixelov
h6. Hlavička bootstrapu	Polotučné 12 pixelov

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

Vytvorte svetlejší sekundárny text v ľubovoľnom nadpise so všeobecnou <small>značkou alebo .smalltriedou.

h1. Bootstrap nadpis Sekundárny text

h2. Bootstrap nadpis Sekundárny text

h3. Bootstrap nadpis Sekundárny text

h4. Bootstrap nadpis Sekundárny text

h5. Bootstrap nadpis Sekundárny text

h6. Bootstrap nadpis Sekundárny 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>

Kópia tela

Globálna predvolená hodnota Bootstrapu font-sizeje 14 pixelov s line-heighthodnotou 1,428 . Platí to pre <body>odseky a všetky odseky. Okrem toho <p>(odseky) získajú spodný okraj polovice svojej vypočítanej výšky riadka (predvolene 10 pixelov).

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>

Kópia tela olova

Nechajte odsek vyniknúť pridaním .lead.

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

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

Postavené s menej

Typografická škála je založená na dvoch premenných Menej v premenných.less : @font-size-basea @line-height-base. Prvým je základná veľkosť písma používaná v celom texte a druhým je výška základného riadku. Tieto premenné a niekoľko jednoduchých matematických metód používame na vytvorenie okrajov, výplní a výšok riadkov všetkých našich typov a ďalších. Prispôsobte si ich a Bootstrap sa prispôsobí.

Vložené textové prvky

Označený text

Na zvýraznenie textu z dôvodu jeho relevantnosti v inom kontexte použite <mark>značku.

Môžete použiť značku značkyZlatý klinectext.

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

Odstránený text

Na označenie blokov textu, ktoré boli vymazané, použite <del>značku.

~~Tento riadok textu sa má považovať za vymazaný text.~~

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

Prečiarknutý text

Na označenie blokov textu, ktoré už nie sú relevantné, použite <s>značku.

~~Tento riadok textu sa má považovať za už nepresný.~~

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

Vložený text

Na označenie dodatkov k dokumentu použite <ins>značku.

Tento riadok textu má byť považovaný za doplnok k dokumentu.

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

Podčiarknutý text

Na podčiarknutie textu použite <u>značku.

Tento riadok textu sa vykreslí ako podčiarknutý

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

Využite predvolené značky zvýraznenia HTML s ľahkými štýlmi.

Malý text

Ak chcete znížiť zvýraznenie vloženého textu alebo blokov textu, pomocou <small>značky nastavte text na 85 % veľkosti rodiča. Prvky nadpisov dostávajú svoje vlastné font-sizepre vnorené <small>prvky.

Alternatívne môžete použiť vložený prvok .smallnamiesto ľubovoľného prvku <small>.

S týmto riadkom textu sa má zaobchádzať ako s drobným písmom.

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

Tučné

Na zvýraznenie úryvku textu s väčšou hmotnosťou písma.

Nasledujúci úryvok textu sa vykreslí ako tučný text .

<strong>rendered as bold text</strong>

Kurzíva

Na zvýraznenie úryvku textu kurzívou.

Nasledujúci úryvok textu sa vykreslí ako text kurzívou .

<em>rendered as italicized text</em>

Alternatívne prvky

Neváhajte použiť <b>a <i>v HTML5. <b>je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo <i>väčšinou ide o hlas, technické výrazy atď.

Triedy zarovnania

Pomocou tried zarovnania textu môžete jednoducho znova zarovnať text ku komponentom.

Text zarovnaný doľava.

Text zarovnaný na stred.

Text zarovnaný doprava.

Zarovnaný text.

Žiadne zalomenie 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é triedy

Transformujte text do komponentov pomocou tried veľkých písmen.

Text s malými písmenami.

Text písaný veľkými písmenami.

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

Skratky

Štylizovaná implementácia <abbr>prvku HTML pre skratky a akronymy na zobrazenie rozšírenej verzie pri umiestnení kurzora myši. Skratky s titleatribútom majú svetlý bodkovaný spodný okraj a pomocný kurzor pri umiestnení kurzora myši, čo poskytuje dodatočný kontext pri umiestnení kurzora myši a používateľom asistenčných technológií.

Základná skratka

Skratka slova atribút je attr .

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

Inicializmus

Pridajte .initialismskratku pre trochu menšiu veľkosť písma.

HTML je najlepšia vec od krájaného chleba.

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

Adresy

Uveďte kontaktné informácie na najbližšieho predka alebo celé dielo. Zachovajte formátovanie ukončením všetkých riadkov znakom <br>.

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

Celé meno
[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é úvodzovky

Na citovanie blokov obsahu z iného zdroja vo vašom dokumente.

Predvolená bloková ponuka

Ako citáciu obtočte <blockquote>ľubovoľný kód HTML . Pre priame cenové ponuky odporúčame <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

Zmeny štýlu a obsahu pre jednoduché variácie štandardu <blockquote>.

Pomenovanie zdroja

Pridajte a <footer>na identifikáciu zdroja. Názov zdrojového diela zabaľte do <cite>.

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

Niekto slávny 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>

Alternatívne zobrazenia

Pridať .blockquote-reversepre blokovú citáciu s obsahom zarovnaným doprava.

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

Niekto slávny v Source Title

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

zoznamy

Neusporiadané

Zoznam položiek, pri ktorých na poradí výslovne 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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

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

Objednané

Zoznam položiek, pri ktorých na poradí vyslovene 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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

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

Neštýlové

Odstráňte predvolený list-stylea ľavý okraj na položkách zoznamu (iba okamžité deti). Týka sa to len položiek zoznamu okamžitých potomkov , čo znamená, že triedu budete musieť pridať aj pre všetky vnorené zoznamy.

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 veľ
Aenean sit amet erat nunc
Eget porttitor lorem

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

V rade

Umiestnite všetky položky zoznamu na jeden riadok so display: inline-block;svetlou výplňou.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Popis

Zoznam výrazov s ich priradenými popismi.

Popisné zoznamy: Zoznam popisov je ideálny na definovanie výrazov.
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álny popis

Urobte pojmy a popisy v <dl>rade vedľa seba. Začína sa zoskupené ako predvolené <dl>s, ale keď sa navigačná lišta rozbalí, rozbalí sa aj tieto.

Popisné zoznamy: Zoznam popisov je ideálny na definovanie výrazov.
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é skrátenie

Vodorovné zoznamy popisov skrátia výrazy, ktoré sú príliš dlhé na to, aby sa zmestili do ľavého stĺpca s text-overflow. V užších výrezoch sa zmenia na predvolené vrstvené rozloženie.

V rade

Zabaľte vložené útržky kódu pomocou <code>.

Napríklad <section>by mali byť zabalené ako vložené.

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

Vstup používateľa

Použite <kbd>na označenie vstupu, ktorý sa zvyčajne zadáva pomocou klávesnice.

Ak chcete prepnúť adresáre, napíšte cda za ním názov adresára.
Ak chcete upraviť nastavenia, stlač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žite <pre>pre viacero riadkov kódu. Pre správne vykreslenie nezabudnite v kóde opustiť všetky lomené zátvorky.

<p>Ukážkový text tu...</p>

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

Voliteľne môžete pridať .pre-scrollabletriedu, ktorá nastaví maximálnu výšku 350 pixelov a poskytne posuvnú lištu osi y.

Premenné

Na označenie premenných použite <var>značku.

y = m x + b

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

Ukážkový výstup

Na označenie blokov ukážkový výstup z programu použite <samp>značku.

Tento text má byť považovaný 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ý príklad

Pre základný štýl – ľahké čalúnenie a iba horizontálne oddeľovače – pridajte základnú triedu .tablek ľubovoľnému <table>. Môže sa to zdať nadbytočné, ale vzhľadom na rozšírené používanie tabuliek pre iné doplnky, ako sú kalendáre a nástroje na výber dátumu, sme sa rozhodli izolovať naše vlastné štýly tabuliek.

Voliteľný popis tabuľky.
#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

Pruhované riadky

Použite .table-stripedna pridanie zebrovaného pruhu do ľubovoľného riadku tabuľky v rámci <tbody>.

Kompatibilita medzi prehliadačmi

Pruhované tabuľky sú štylizované pomocou :nth-childselektora CSS, ktorý nie je dostupný v Internet Exploreri 8.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

Ohraničený stôl

Pridajte .table-borderedokraje na všetkých stranách tabuľky a buniek.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

Umiestnite kurzor myši na riadky

Pridať .table-hover, ak chcete povoliť stav prechodu na riadky tabuľky v rámci súboru <tbody>.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

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

Zhustená tabuľka

Ak chcete, aby boli stoly kompaktnejšie, pridajte .table-condensedvýplň buniek na polovicu.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@twitter

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

Kontextové triedy

Použite kontextové triedy na zafarbenie riadkov tabuľky alebo jednotlivých buniek.

Trieda	Popis
`.active`	Použije farbu kurzora na konkrétny riadok alebo bunku
`.success`	Označuje úspešnú alebo pozitívnu akciu
`.info`	Označuje neutrálnu informatívnu zmenu alebo akciu
`.warning`	Označuje varovanie, ktoré si môže vyžadovať pozornosť
`.danger`	Označuje nebezpečnú alebo potenciálne negatívnu akciu

#	Záhlavie stĺpca	Záhlavie stĺpca	Záhlavie stĺpca
1	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
2	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
3	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
4	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
5	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
6	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
7	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
8	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca
9	Obsah stĺpca	Obsah stĺpca	Obsah stĺpca

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

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu riadku tabuľky alebo jednotlivej bunke poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácie označené farbou sú buď zrejmé zo samotného obsahu (viditeľný text v príslušnom riadku/bunke tabuľky), alebo sú zahrnuté alternatívnymi prostriedkami, ako je napríklad dodatočný text skrytý spolu s .sr-onlytriedou.

Responzívne tabuľky

Vytvorte responzívne tabuľky tak, že ľubovoľné zabalíte .table, .table-responsiveaby sa na malých zariadeniach (do 768 pixelov) posúvali vodorovne. Pri prezeraní na čokoľvek väčšom ako 768 pixelov na šírku neuvidíte v týchto tabuľkách žiadny rozdiel.

Vertikálne orezanie / skrátenie

Responzívne tabuľky využívajú overflow-y: hidden, ktorý orezáva akýkoľvek obsah, ktorý presahuje spodný alebo horný okraj tabuľky. Najmä to môže orezať rozbaľovacie ponuky a ďalšie miniaplikácie tretích strán.

Firefox a sady polí

Firefox má nejaký nepríjemný štýl sady polí width, ktorý zasahuje do responzívnej tabuľky. Toto nemožno prepísať bez hacku špecifického pre Firefox, ktorý neposkytujeme v Bootstrape:

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

Pre viac informácií si prečítajte túto odpoveď Stack Overflow .

#	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky
1	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
2	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
3	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky

#	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky	Záhlavie tabuľky
1	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
2	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky
3	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky	Bunka tabuľky

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

Základný príklad

Jednotlivé ovládacie prvky formulára automaticky získajú určitý globálny štýl. Všetky textové prvky <input>, <textarea>a <select>prvky s .form-controlsú width: 100%;predvolene nastavené na. Zabaľte štítky a ovládacie prvky, .form-groupaby ste dosiahli optimálne rozmiestnenie.

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

Nemiešajte skupiny formulárov so skupinami vstupov

Nemiešajte skupiny formulárov priamo so vstupnými skupinami . Namiesto toho vnorte vstupnú skupinu do skupiny formulárov.

Inline formulár

Pridajte .form-inlinedo svojho formulára (čo nemusí byť <form>) pre ovládacie prvky zarovnané doľava a vložené do bloku. Týka sa to iba formulárov vo výrezoch, ktoré sú široké aspoň 768 pixelov.

Môže vyžadovať vlastné šírky

Vstupy a výbery sú width: 100%;v Bootstrape predvolene použité. V rámci vložených formulárov sme to resetovali na, width: auto;aby sa na jednom riadku mohlo nachádzať viacero ovládacích prvkov. V závislosti od vášho rozloženia môžu byť potrebné ďalšie vlastné šírky.

Vždy pridávajte štítky

Čítačky obrazovky budú mať problémy s vašimi formulármi, ak nezahrniete štítok pre každý vstup. Pre tieto vložené formuláre môžete štítky skryť pomocou .sr-onlytriedy. Existujú ďalšie alternatívne spôsoby poskytovania označenia pre asistenčné technológie, ako napríklad atribút aria-label, aria-labelledbyalebo . titleAk nie je prítomný žiadny z týchto atribútov, čítačky obrazovky sa môžu uchýliť k použitiu placeholderatribútu, ak je prítomný, ale upozorňujeme, že použitie placeholderako náhrady za iné metódy označovania sa neodporúča.

<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álny tvar

Použite preddefinované triedy mriežky Bootstrapu na zarovnanie štítkov a skupín ovládacích prvkov formulára v horizontálnom rozložení pridaním .form-horizontaldo formulára (čo nemusí byť <form>). Tým sa zmení .form-groups, aby sa správalo ako riadky mriežky, takže nie je potrebné používať .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ádacie prvky

Príklady štandardných ovládacích prvkov formulára podporovaných vo vzorovom rozložení formulára.

Vstupy

Najbežnejší ovládací prvok formulára, textové vstupné polia. Zahŕňa podporu pre všetky typy HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tela color.

Vyžaduje sa vyhlásenie o type

Vstupy budú plne štylizované iba vtedy, ak budú typesprávne deklarované.

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

Vstupné skupiny

Ak chcete pridať integrovaný text alebo tlačidlá pred a/alebo za ľubovoľný textový súbor <input>, pozrite si komponent vstupnej skupiny .

Textarea

Ovládanie formulára, ktoré podporuje viacero riadkov textu. Zmeňte rowsatribút podľa potreby.

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

Zaškrtávacie políčka a rádiá

Začiarkavacie políčka slúžia na výber jednej alebo viacerých možností v zozname, zatiaľ čo rádiá sú na výber jednej možnosti z mnohých.

Zakázané začiarkavacie políčka a rádiá sú podporované, ale na poskytnutie „nepovoleného“ kurzora pri umiestnení kurzora myši na nadradenú triedu <label>budete musieť pridať .disabledtriedu do nadradenej triedy .radio, .radio-inline, .checkboxalebo .checkbox-inline.

Predvolené (zoskupené)

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

Vložené začiarkavacie políčka a rádiá

Použite triedy .checkbox-inlinealebo .radio-inlinena sérii začiarkavacích políčok alebo rádií pre ovládacie prvky, ktoré sa zobrazujú na rovnakom riadku.

<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čiarkavacie políčka a rádiá bez textu štítkov

Ak v poli nemáte žiadny text <label>, vstup sa umiestni tak, ako by ste očakávali. V súčasnosti funguje iba na začiarkavacích políčkach a rádiách. Nezabudnite poskytnúť určitú formu označenia pre asistenčné technológie (napríklad pomocou 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>

Vyberie

Všimnite si, že veľa natívnych výberových ponúk – menovite v Safari a Chrome – má zaoblené rohy, ktoré nie je možné upraviť prostredníctvom border-radiusvlastností.

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

Pre <select>ovládacie prvky s multipleatribútom sa predvolene zobrazuje viacero 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ádanie

Keď potrebujete umiestniť obyčajný text vedľa menovky formulára vo formulári, použite .form-control-statictriedu 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 zaostrenia

Odstránime predvolené outlineštýly na niektorých ovládacích prvkoch formulárov a box-shadownamiesto nich použijeme a pre :focus.

Demo `:focus`stav

Vyššie uvedený príklad vstupu používa vlastné štýly v našej dokumentácii na demonštráciu :focusstavu na .form-control.

Deaktivovaný stav

Pridajte disabledbooleovský atribút na vstup, aby ste zabránili interakciám používateľa. Deaktivované vstupy sú svetlejšie a pridávajú not-allowedkurzor.

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

Zakázané sady polí

Pridajte disabledatribút do a <fieldset>, aby ste zakázali všetky ovládacie prvky <fieldset>naraz.

Upozornenie týkajúce sa funkčnosti odkazu`<a>`

V predvolenom nastavení budú prehliadače považovať všetky ovládacie prvky natívneho formulára ( <input>a <select>prvky <button>) <fieldset disabled>za deaktivované, čím zabránia interakciám s klávesnicou a myšou. Ak však váš formulár obsahuje aj <a ... class="btn btn-*">prvky, tieto budú mať iba štýl pointer-events: none. Ako je uvedené v sekcii o zakázanom stave pre tlačidlá (a konkrétne v podsekcii pre kotviace prvky), táto vlastnosť CSS ešte nie je štandardizovaná a nie je plne podporovaná v Opere 18 a novších verziách alebo v Internet Exploreri 11 a vyhrala nezabráni používateľom klávesnice v tom, aby mohli zamerať alebo aktivovať tieto odkazy. Aby ste boli v bezpečí, použite na zakázanie takýchto odkazov vlastný JavaScript.

Kompatibilita medzi prehliadačmi

disabledZatiaľ čo Bootstrap použije tieto štýly vo všetkých prehliadačoch, Internet Explorer 11 a nižšie tento atribút plne nepodporujú <fieldset>. Na zakázanie sady polí v týchto prehliadačoch použite 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 iba na čítanie

Pridajte readonlybooleovský atribút na vstup, aby ste zabránili úprave hodnoty vstupu. Vstupy len na čítanie sa zdajú svetlejšie (rovnako ako zakázané vstupy), ale zachovajú si štandardný kurzor.

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

Pomocný text

Blokovať text pomoci pre ovládacie prvky formulára.

Priradenie pomocného textu k ovládacím prvkom formulára

Text pomocníka by mal byť explicitne spojený s ovládacím prvkom formulára, na ktorý sa vzťahuje pomocou aria-describedbyatribútu. Tým sa zabezpečí, že asistenčné technológie – ako napríklad čítačky obrazovky – oznámia tento text pomocníka, keď používateľ zaostrí alebo vstúpi do ovládacieho prvku.

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

Stavy overenia

Bootstrap obsahuje overovacie štýly pre chybové, varovné a úspešné stavy ovládacích prvkov formulárov. Ak chcete použiť, pridajte .has-warning, .has-error, alebo .has-successdo nadradeného prvku. Akékoľvek .control-label, .form-control, a .help-blockv rámci tohto prvku získajú overovacie štýly.

Sprostredkovanie stavu overenia asistenčným technológiám a farboslepým používateľom

Použitie týchto overovacích štýlov na označenie stavu ovládacieho prvku formulára poskytuje iba vizuálnu, farebnú indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky – ani farboslepým používateľom.

Zabezpečte, aby bola poskytnutá aj alternatívna indikácia stavu. Môžete napríklad zahrnúť nápovedu o stave do <label>samotného textu ovládacieho prvku formulára (ako je to v prípade nasledujúceho príkladu kódu), zahrnúť Glyphicon (s vhodným alternatívnym textom pomocou .sr-onlytriedy – pozri príklady Glyphicon ) alebo poskytnutím dodatočný blok pomocného textu . Špeciálne pre asistenčné technológie je možné priradiť aria-invalid="true"atribút aj neplatným ovládacím prvkom formulárov.

<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 voliteľnými ikonami

Môžete tiež pridať voliteľné ikony spätnej väzby pridaním .has-feedbacka pravej ikony.

Ikony spätnej väzby fungujú iba s textovými <input class="form-control">prvkami.

Ikony, štítky a skupiny vstupov

Manuálne umiestnenie ikon spätnej väzby je potrebné pre vstupy bez označenia a pre vstupné skupiny s doplnkom vpravo. Dôrazne vám odporúčame uviesť štítky pre všetky vstupy z dôvodu dostupnosti. Ak chcete zabrániť zobrazovaniu štítkov, skryte ich spolu s .sr-onlytriedou. Ak sa musíte zaobísť bez menoviek, upravte tophodnotu ikony spätnej väzby. Pre vstupné skupiny upravte righthodnotu na vhodnú hodnotu pixelov v závislosti od šírky vášho doplnku.

Odovzdanie významu ikony asistenčným technológiám

Aby sa zabezpečilo, že asistenčné technológie – ako napríklad čítačky obrazovky – správne vyjadrujú význam ikony, do .sr-onlytriedy by mal byť zahrnutý ďalší skrytý text a mal by byť explicitne spojený s ovládacím prvkom formulára, ktorý sa týka používania aria-describedby. Prípadne zabezpečte, aby sa význam (napríklad skutočnosť, že existuje varovanie pre konkrétne pole na zadávanie textu) vyjadril v inej forme, ako je napríklad zmena textu skutočného <label>priradeného k ovládaciemu prvku formulára.

Hoci nasledujúce príklady už v samotnom texte uvádzajú stav overenia ich príslušných ovládacích prvkov formulára <label>, vyššie uvedená technika (pomocou .sr-onlytextu a aria-describedby) bola zahrnutá na ilustračné úč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>

Voliteľné ikony vo vodorovnom a riadkovom tvare

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

Voliteľné ikony so skrytými `.sr-only`štítkami

Ak použijete .sr-onlytriedu na skrytie ovládacích prvkov formulára <label>(namiesto použitia iných možností označovania, ako je napríklad aria-labelatribút), Bootstrap automaticky upraví polohu ikony po jej pridaní.

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

Ovládanie veľkosti

Nastavte výšky pomocou tried ako .input-lg, a nastavte šírky pomocou tried stĺpcov mriežky ako .col-lg-*.

Výškové dimenzovanie

Vytvorte vyššie alebo kratšie ovládacie prvky formulára, ktoré zodpovedajú veľkostiam tlačidiel.

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

Veľkosti skupiny horizontálnych formulárov

Rýchlo upravte veľkosť štítkov a ovládacích prvkov formulárov .form-horizontalpridaním .form-group-lgalebo .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>

Dimenzovanie stĺpcov

Zabaľte vstupy do stĺpcov mriežky alebo akéhokoľvek vlastného nadradeného prvku, aby ste mohli jednoducho vynútiť požadované šírky.

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

Použite triedy tlačidiel na elemente <a>, <button>, alebo .<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">

Kontextovo špecifické použitie

Zatiaľ čo triedy tlačidiel možno použiť na prvkoch <a>a <button>, v rámci našich komponentov nav a navbar sú podporované iba <button>prvky.

Odkazy fungujúce ako tlačidlá

Ak sa <a>prvky používajú na to, aby fungovali ako tlačidlá – na spustenie funkcií na stránke, a nie na navigáciu do iného dokumentu alebo sekcie na aktuálnej stránke – mali by mať aj príslušný role="button".

Vykresľovanie naprieč prehliadačmi

Ako osvedčený postup dôrazne odporúčame používať <button>prvok vždy, keď je to možné , aby sa zabezpečilo zodpovedajúce vykresľovanie naprieč prehliadačmi.

Okrem iného je vo Firefoxe <30 chyba , ktorá nám bráni nastaviť tlačidlá založené na line-heightof- <input>based, čo spôsobuje, že sa presne nezhodujú s výškou ostatných tlačidiel vo Firefoxe.

možnosti

Na rýchle vytvorenie tlačidla so štýlom použite ktorúkoľvek z dostupných tried tlačidiel.

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

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu tlačidlu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácie označené farbou sú buď zrejmé zo samotného obsahu (viditeľný text tlačidla), alebo sú zahrnuté alternatívnymi prostriedkami, ako je napríklad dodatočný text skrytý spolu s .sr-onlytriedou.

Veľkosti

Máte chuť na väčšie alebo menšie tlačidlá? Pridajte .btn-lg, .btn-sm, alebo .btn-xspre ďalšie veľkosti.

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

Vytvorte tlačidlá na úrovni bloku – tie, ktoré presahujú celú šírku rodiča – pridaní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>

Aktívny stav

Keď sú tlačidlá aktívne, zobrazia sa stlačené (s tmavším pozadím, tmavším okrajom a vloženým tieňom). Pre <button>prvky sa to robí cez :active. Pre <a>prvky je to hotové pomocou .active. Môžete však použiť .activena <button>s (a zahrnúť aria-pressed="true"atribút), ak potrebujete programovo replikovať aktívny stav.

Prvok tlačidla

Nie je potrebné pridávať :active, pretože ide o pseudotriedu, ale ak potrebujete vynútiť rovnaký vzhľad, pokračujte a pridajte .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>

Kotviaci prvok

Pridajte .activetriedu do <a>tlačidiel.

Primárny odkaz Link

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

Deaktivovaný stav

Aby tlačidlá vyzerali tak, že sa na ne nedá kliknúť, ich vyblednutím pomocou opacity.

Prvok tlačidla

Pridajte disabledatribút k <button>tlačidlá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 medzi prehliadačmi

Ak pridáte disabledatribút do <button>, Internet Explorer 9 a nižšie vykreslí text sivou farbou s nepríjemným tieňom textu, ktorý nedokážeme opraviť.

Kotviaci prvok

Pridajte .disabledtriedu do <a>tlačidiel.

Primárny odkaz Link

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

Tu používame .disabledako pomocnú triedu, podobnú bežnej .activetriede, takže nie je potrebná žiadna predpona.

Upozornenie na funkčnosť odkazu

Táto trieda sa používa pointer-events: nonena pokus o zakázanie funkcie prepojenia <a>s, ale táto vlastnosť CSS ešte nie je štandardizovaná a nie je plne podporovaná v Opere 18 a novších verziách, ani v Internet Exploreri 11. Navyše aj v prehliadačoch, ktoré podporujú pointer-events: none, klávesnica navigácia zostáva nedotknutá, čo znamená, že vidiaci používatelia klávesnice a používatelia asistenčných technológií budú môcť tieto prepojenia stále aktivovať. Aby ste boli v bezpečí, použite na zakázanie takýchto odkazov vlastný JavaScript.

Responzívne obrázky

Obrázky v Bootstrap 3 môžu byť prispôsobené tak, aby zodpovedali pridaním .img-responsivetriedy. Platí max-width: 100%;to pre obrázok height: auto;a display: block;obrázok tak, aby sa pekne prispôsobil nadradenému prvku.

Ak chcete vycentrovať obrázky, ktoré používajú .img-responsivetriedu, použite .center-blocknamiesto .text-center. Viac podrobností o používaní nájdete v sekcii pomocných tried ..center-block

Obrázky SVG a IE 8-10

V programe Internet Explorer 8-10 majú obrázky SVG .img-responsiveneprimeranú veľkosť. Ak to chcete opraviť, pridajte tam, width: 100% \9;kde je to potrebné. Bootstrap to neaplikuje automaticky, pretože to spôsobuje komplikácie pri iných formátoch obrázkov.

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

Obrazové tvary

Pridajte triedy do <img>prvku, aby ste mohli jednoducho upravovať obrázky v akomkoľvek projekte.

Kompatibilita medzi prehliadačmi

Majte na pamäti, že Internet Explorer 8 nemá podporu pre zaoblené rohy.

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

Kontextové farby

Preneste význam prostredníctvom farieb s niekoľkými dôrazmi na úžitkové triedy. Môžu sa použiť aj na odkazy a pri umiestnení kurzora myši stmavnú rovnako ako naše predvolené štýly odkazov.

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>

Zaobchádzanie so špecifickosťou

Niekedy nie je možné použiť triedy dôrazu kvôli špecifickosti iného selektora. Vo väčšine prípadov je dostatočným riešením zalomiť text do <span>triedy s triedou.

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácie označené farbou sú buď zrejmé zo samotného obsahu (kontextové farby sa používajú iba na posilnenie významu, ktorý je už prítomný v texte/značke), alebo sú zahrnuté alternatívnymi prostriedkami, ako je napríklad dodatočný text skrytý spolu s .sr-onlytriedou . .

Kontextové pozadia

Podobne ako pri kontextových triedach farieb textu, jednoducho nastavte pozadie prvku na akúkoľvek kontextovú triedu. Komponenty kotvy stmavnú pri umiestnení kurzora myši, rovnako ako triedy 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>

Zaobchádzanie so špecifickosťou

Niekedy nemožno použiť kontextové triedy pozadia kvôli špecifickosti iného selektora. V niektorých prípadoch je dostatočným riešením zabaliť obsah vášho prvku <div>do triedy s triedou.

Odovzdanie významu asistenčným technológiám

Rovnako ako v prípade kontextových farieb zabezpečte, aby sa akýkoľvek význam prenášaný prostredníctvom farieb prenášal aj vo formáte, ktorý nie je čisto prezentačný.

Ikona Zavrieť

Na odmietnutie obsahu, ako sú modály a upozornenia, použite všeobecnú ikonu zatvorenia.

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

Striedačky

Na označenie funkcie a smeru rozbaľovacej ponuky použite vsuvky. Upozorňujeme, že predvolená strieška sa v rozbaľovacích ponukách automaticky obráti .

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

Rýchle pláva

Umiestnite prvok doľava alebo doprava s triedou. !importantje zahrnutá, aby sa predišlo problémom so špecifickosťou. Triedy možno použiť aj ako mixíny.

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

Stred blokov obsahu

Nastavte prvok display: blocka vycentrujte ho pomocou margin. K dispozícii ako mix a trieda.

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

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

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

Clearfix

Jednoduché vymazanie floats pridaním .clearfix do nadradeného prvku . Využíva mikro clearfix , ktorý spopularizoval Nicolas Gallagher. Možno použiť aj ako 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();
}

Zobrazenie a skrytie obsahu

Vynútiť zobrazenie alebo skrytie prvku ( vrátane čítačiek obrazovky ) pomocou tried .showa . .hiddenTieto triedy sa používajú !importantna zabránenie konfliktom špecifickosti, rovnako ako rýchle plávajúce . Sú k dispozícii iba na prepínanie úrovne blokov. Dajú sa použiť aj ako mixíny.

.hideje k dispozícii, ale nie vždy má vplyv na čítačky obrazovky a je zastaraný od verzie 3.0.1. Namiesto toho použite .hiddenalebo ..sr-only

Okrem toho .invisiblesa dá použiť iba na prepínanie viditeľnosti prvku, čo znamená, že displaysa nemení a prvok môže stále ovplyvniť 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 čítačky obrazovky a navigácie pomocou klávesnice

Skryť prvok vo všetkých zariadeniach okrem čítačiek obrazovky pomocou .sr-only. Skombinujte .sr-onlys .sr-only-focusable, ak chcete prvok znova zobraziť, keď je zaostrený (napr. používateľom, ktorý používa iba klávesnicu). Nevyhnutné pre dodržiavanie osvedčených postupov dostupnosti . Možno použiť aj ako 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ýmena obrazu

Využite .text-hidetriedu alebo mix, aby ste nahradili textový obsah prvku obrázkom na pozadí.

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

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

Pre rýchlejší vývoj vhodný pre mobilné zariadenia použite tieto pomocné triedy na zobrazenie a skrytie obsahu podľa zariadenia prostredníctvom mediálneho dotazu. Zahrnuté sú aj pomocné triedy na prepínanie obsahu pri tlači.

Pokúste sa ich používať v obmedzenom rozsahu a vyhnite sa vytváraniu úplne odlišných verzií tej istej lokality. Namiesto toho ich použite na doplnenie prezentácie každého zariadenia.

Dostupné triedy

Použite jednu alebo kombináciu dostupných tried na prepínanie obsahu medzi bodmi prerušenia zobrazenia.

	Extra malé zariadeniaTelefóny (<768 pixelov)	Malé zariadeniaTablety (≥768 pixelov)	Stredné zariadeniaStolné počítače (≥992 pixelov)	Veľké zariadeniaStolné počítače (≥1200 pixelov)
`.visible-xs-*`	Viditeľné	Skryté	Skryté	Skryté
`.visible-sm-*`	Skryté	Viditeľné	Skryté	Skryté
`.visible-md-*`	Skryté	Skryté	Viditeľné	Skryté
`.visible-lg-*`	Skryté	Skryté	Skryté	Viditeľné
`.hidden-xs`	Skryté	Viditeľné	Viditeľné	Viditeľné
`.hidden-sm`	Viditeľné	Skryté	Viditeľné	Viditeľné
`.hidden-md`	Viditeľné	Viditeľné	Skryté	Viditeľné
`.hidden-lg`	Viditeľné	Viditeľné	Viditeľné	Skryté

Od verzie 3.2.0 .visible-*-*prichádzajú triedy pre každý bod prerušenia v troch variáciách, jedna pre každú displayhodnotu vlastnosti CSS uvedenú nižšie.

Skupina tried	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Napríklad pre extra malé ( xs) obrazovky sú dostupné .visible-*-*triedy: .visible-xs-block, .visible-xs-inlinea .visible-xs-inline-block.

Triedy .visible-xs, .visible-sm, .visible-md, a .visible-lgtiež existujú, ale od verzie 3.2.0 sú zastarané . Sú približne ekvivalentné .visible-*-block, s výnimkou dodatočných špeciálnych prípadov pre prepínanie <table>prvkov súvisiacich s prepínaním.

Tlačové triedy

Podobne ako bežné responzívne triedy ich použite na prepínanie obsahu pre tlač.

triedy	Prehliadač	Tlačiť
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Skryté	Viditeľné
`.hidden-print`	Viditeľné	Skryté

Trieda .visible-printtiež existuje, ale od verzie 3.2.0 je zastaraná . Je približne ekvivalentný .visible-print-block, s výnimkou dodatočných špeciálnych prípadov pre <table>súvisiace prvky.

Testovacie prípady

Zmeňte veľkosť prehliadača alebo načítajte na rôznych zariadeniach, aby ste otestovali responzívne triedy nástrojov.

Viditeľné na...

Zelené značky začiarknutia označujú, že prvok je viditeľný vo vašom aktuálnom výreze.

Extra malý ✔ Viditeľné na x-small

Malý ✔ Viditeľné na malom

Stredná ✔ Viditeľné na médiu

Veľký ✔ Viditeľné na veľkom

Extra malý a malý ✔ Viditeľné na x-small a small

Stredné a veľké ✔ Viditeľné na stredných a veľkých

Extra malé a stredné ✔ Viditeľné na x-small a medium

Malé aj veľké ✔ Viditeľné na malých aj veľkých

Extra malý a veľký ✔ Viditeľné na x-malých aj veľkých

Malé a stredné ✔ Viditeľné na malých a stredných

Skryté na...

Zelené značky začiarknutia tiež označujú, že prvok je skrytý vo vašom aktuálnom výreze.

Extra malý ✔ Skryté na x-small

Malý ✔ Skryté na malom

Stredná ✔ Skryté na médiu

Veľký ✔ Skryté na veľkom

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

Stredné a veľké ✔ Skryté na strednej a veľkej

Extra malé a stredné ✔ Skryté na x-small a medium

Malé aj veľké ✔ Skryté na malom a veľkom

Extra malý a veľký ✔ Skryté na x-malých a veľkých

Malé a stredné ✔ Skryté na malých a stredných

CSS Bootstrapu je postavené na Less, preprocesore s ďalšími funkciami, ako sú premenné, mixíny a funkcie na kompiláciu CSS. Tí, ktorí chcú použiť zdrojové súbory Less namiesto našich kompilovaných súborov CSS, môžu využiť množstvo premenných a mixov, ktoré používame v rámci celého rámca.

Grid premenné a mixiny sú zahrnuté v sekcii Grid systém .

Kompilácia Bootstrap

Bootstrap je možné použiť minimálne dvoma spôsobmi: s skompilovaným CSS alebo so zdrojovými súbormi Less. Ak chcete skompilovať súbory Less, pozrite si časť Začíname , kde nájdete informácie o tom, ako nastaviť vývojové prostredie na spustenie potrebných príkazov.

Kompilačné nástroje tretích strán môžu fungovať s Bootstrap, ale náš hlavný tím ich nepodporuje.

Premenné

Premenné sa používajú v celom projekte ako spôsob centralizácie a zdieľania bežne používaných hodnôt, ako sú farby, medzery alebo zásobníky písiem. Úplný rozpis nájdete v Prispôsobovači .

Farby

Ľahko využite dve farebné schémy: odtiene sivej a sémantické. Farby v odtieňoch šedej poskytujú rýchly prístup k bežne používaným odtieňom čiernej, zatiaľ čo sémantické zahŕňajú rôzne farby priradené zmysluplný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žite ktorúkoľvek z týchto farebných premenných tak, ako sú, alebo ich priraďte k zmysluplnejším premenným pre 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šenie

Niekoľko premenných na rýchle prispôsobenie kľúčových prvkov kostry vášho webu.

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

Odkazy

Jednoducho upravte svoje odkazy správnou farbou s iba jednou 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šimnite si, že @link-hover-colorpoužíva funkciu, ďalší úžasný nástroj od spoločnosti Less, na automatické vytvorenie správnej farby vznášania. Môžete použiť darken, lighten, saturatea desaturate.

Typografia

Pomocou niekoľkých rýchlych premenných si jednoducho nastavíte typ písma, veľkosť textu, úvod a ďalšie. Bootstrap ich využíva aj na poskytovanie jednoduchých typografických mixov.

@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

Dve rýchle premenné na prispôsobenie umiestnenia a názvu vašich ikon.

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

Komponenty

Komponenty v Bootstrape využívajú niektoré predvolené premenné na nastavenie spoločných hodnôt. Tu sú najčastejšie 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;

Miešanie predajcu

Mixiny dodávateľov sú mixy, ktoré pomáhajú podporovať viacero prehliadačov zahrnutím všetkých relevantných predpôn dodávateľov do vášho kompilovaného CSS.

Veľkosť krabice

Resetujte model krabice vašich komponentov jediným mixom. Kontext nájdete v tomto užitočnom článku od Mozilly .

Mixin je zastaraný od verzie 3.2.0 so zavedením Autoprefixeru. Aby sa zachovala spätná kompatibilita, Bootstrap bude naďalej interne používať mix 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šetky moderné prehliadače podporujú vlastnosť bez predpony border-radius. Ako taký neexistuje žiadny .border-radius()mix, ale Bootstrap obsahuje skratky na rýchle zaoblenie dvoch rohov na konkrétnej strane 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) tiene

Ak vaša cieľová skupina používa najnovšie a najlepšie prehliadače a zariadenia, nezabudnite použiť túto box-shadowvlastnosť samostatne. Ak potrebujete podporu pre staršie zariadenia so systémom Android (pre-v4) a iOS (pre-iOS 5), použite zastaraný mix na získanie požadovanej -webkitpredpony.

Mixin je od verzie 3.1.0 zastaraný , pretože Bootstrap oficiálne nepodporuje zastarané platformy, ktoré nepodporujú štandardnú vlastnosť. Aby sa zachovala spätná kompatibilita, Bootstrap bude naďalej interne používať mix až do Bootstrap v4.

Nezabudnite použiť rgba()farby v tieňoch rámčeka, aby čo najhladšie splynuli 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;
}

Prechody

Viacnásobné mixy pre flexibilitu. Nastavte všetky informácie o prechode na jednu alebo podľa potreby zadajte samostatné oneskorenie a trvanie.

Mixiny sú od verzie 3.2.0 zastarané , so zavedením Autoprefixeru. Aby sa zachovala spätná kompatibilita, Bootstrap bude naďalej používať mixiny interne až do Bootstrap v4.

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

Premeny

Otáčajte, zmenšujte, posúvajte (presúvajte) alebo skoste akýkoľvek objekt.

Mixiny sú od verzie 3.2.0 zastarané , so zavedením Autoprefixeru. Aby sa zachovala spätná kompatibilita, Bootstrap bude naďalej používať mixiny interne až do Bootstrap v4.

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

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

Animácie

Jediný mix na použitie všetkých vlastností animácie CSS3 v jednej deklarácii a ďalšie mixiny pre jednotlivé vlastnosti.

Mixiny sú od verzie 3.2.0 zastarané , so zavedením Autoprefixeru. Aby sa zachovala spätná kompatibilita, Bootstrap bude naďalej používať mixiny interne až do Bootstrap v4.

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

Nepriehľadnosť

Nastavte nepriehľadnosť pre všetky prehliadače a poskytnite filterzáložné riešenie pre IE8.

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

Zástupný text

Poskytnite kontext pre ovládacie prvky formulára v každom 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
}

Stĺpce

Generujte stĺpce pomocou CSS v rámci jedného 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;
}

Prechody

Ľahko premeňte ľubovoľné dve farby na gradient pozadia. Buďte pokročilejší a nastavte smer, použite tri farby alebo použite radiálny prechod. S jediným mixom získate všetky predponové syntaxe, ktoré budete potrebovať.

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

Môžete tiež určiť uhol štandardného dvojfarebného lineárneho prechodu:

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

Ak potrebujete gradient v štýle barber-stripe, je to tiež jednoduché. Stačí zadať jednu farbu a my prekryjeme priesvitný biely pásik.

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

Zvýšte ante a namiesto toho použite tri farby. Nastavte prvú farbu, druhú farbu, zastavenie farby druhej farby (percentuálna hodnota ako 25 %) a tretiu farbu pomocou týchto mixov:

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

Hlavy hore! Ak by ste niekedy potrebovali odstrániť prechod, nezabudnite odstrániť všetky špecifické pre IE filter, ktoré ste pridali. Môžete to urobiť použitím .reset-filter()mixínu spolu s background-image: none;.

Úžitkové zmesi

Utility mixins sú mixiny, ktoré kombinujú inak nesúvisiace vlastnosti CSS na dosiahnutie konkrétneho cieľa alebo úlohy.

Clearfix

Zabudnite na pridávanie class="clearfix"do akéhokoľvek prvku a namiesto toho pridajte .clearfix()mixin tam, kde je to vhodné. Používa micro clearfix od Nicolasa Gallaghera .

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

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

Horizontálne centrovanie

Rýchlo vycentrujte akýkoľvek prvok v rámci jeho rodiča. Vyžaduje widthalebo max-widthje potrebné nastaviť.

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

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

Pomocníci na dimenzovanie

Jednoduchšie špecifikujte rozmery 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 nastaviteľnou veľkosťou

Jednoducho konfigurujte možnosti zmeny veľkosti pre ľubovoľnú textovú oblasť alebo akýkoľvek iný prvok. Predvolené je normálne správanie prehliadača ( both).

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

Skracovanie textu

Jednoduché skracovanie textu pomocou elipsy pomocou jediného mixu. Vyžaduje, aby prvok bol blockalebo bol na inline-blockúrovni.

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

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

Obrázky sietnice

Zadajte dve cesty k obrázku a rozmery obrázka @1x a Bootstrap poskytne dopyt na médium @2x. Ak chcete zobraziť veľa obrázkov, zvážte manuálne napísanie CSS obrázkov sietnice v jednom mediálnom dopyte.

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

Zatiaľ čo Bootstrap je postavený na Less, má aj oficiálny port Sass . Udržiavame ho v samostatnom úložisku GitHub a aktualizácie spracovávame pomocou konverzného skriptu.

Čo je zahrnuté

Keďže port Sass má samostatné repo a slúži trochu inému publiku, obsah projektu sa značne líši od hlavného projektu Bootstrap. To zaisťuje, že port Sass je kompatibilný s čo najväčším počtom systémov založených na Sass.

Cesta	Popis
`lib/`	Kód rubínového drahokamu (konfigurácia Sass, integrácie Rails a Compass)
`tasks/`	Konvertorové skripty (premena upstream Less na Sass)
`test/`	Kompilačné testy
`templates/`	Manifest balíka kompas
`vendor/assets/`	Sass, JavaScript a súbory fontov
`Rakefile`	Interné úlohy, ako napríklad rake a konvertovanie

Navštívte úložisko GitHub portu Sass a pozrite si tieto súbory v akcii.

Inštalácia

Informácie o tom, ako nainštalovať a používať Bootstrap pre Sass, nájdete v súbore readme úložiska GitHub . Je to najaktuálnejší zdroj a obsahuje informácie na použitie s projektmi Rails, Compass a štandardnými projektmi Sass.

Bootstrap pre Sass

CSS

Prehľad

HTML5 doctype

Najskôr mobil

Typografia a odkazy

Normalize.css

Kontajnery

Mriežkový systém

Úvod

Mediálne otázky

Možnosti mriežky

Príklad: Skladaný vodorovne

Príklad: Nádoba na tekutiny

Príklad: Mobil a počítač

Príklad: mobil, tablet, počítač

Príklad: Ovíjanie stĺpcov

Responzívny stĺpec sa resetuje

Odsadenie stĺpcov

Vnorené stĺpy

Usporiadanie stĺpcov

Menej mixov a premenných

Premenné

Mixins

Príklad použitia

Typografia

Nadpisy

h1. Hlavička bootstrapu

h2. Hlavička bootstrapu

h3. Hlavička bootstrapu

h4. Hlavička bootstrapu

h5. Hlavička bootstrapu

h6. Hlavička bootstrapu

h1. Bootstrap nadpis Sekundárny text

h2. Bootstrap nadpis Sekundárny text

h3. Bootstrap nadpis Sekundárny text

h4. Bootstrap nadpis Sekundárny text

h5. Bootstrap nadpis Sekundárny text

h6. Bootstrap nadpis Sekundárny text

Kópia tela

Kópia tela olova

Postavené s menej

Vložené textové prvky

Označený text

Odstránený text

Prečiarknutý text

Vložený text

Podčiarknutý text

Malý text

Tučné

Kurzíva

Alternatívne prvky

Triedy zarovnania

Transformačné triedy

Skratky

Základná skratka

Inicializmus

Adresy

Blokové úvodzovky

Predvolená bloková ponuka

Možnosti blockquote

Pomenovanie zdroja

Alternatívne zobrazenia

zoznamy

Neusporiadané

Objednané

Neštýlové

V rade

Popis

Horizontálny popis

Automatické skrátenie

kód

V rade

Vstup používateľa

Základný blok

Premenné

Ukážkový výstup

Tabuľky

Základný príklad

Pruhované riadky

Kompatibilita medzi prehliadačmi

Demo `:focus`stav

Upozornenie týkajúce sa funkčnosti odkazu`<a>`

Voliteľné ikony so skrytými `.sr-only`štítkami