CSS
Globálne nastavenia CSS, základné prvky HTML štylizované a vylepšené rozšíriteľnými triedami a pokročilý systém mriežky.
Globálne nastavenia CSS, základné prvky HTML štylizované a vylepšené rozšíriteľnými triedami a pokročilý systém mriežky.
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.
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>
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=no
metaznač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">
Bootstrap nastavuje základné globálne štýly zobrazenia, typografie a odkazov. Konkrétne my:
background-color: #fff;
nabody
@font-family-base
, @font-size-base
, a@line-height-base
@link-color
a použite podčiarknutie odkazu iba na:hover
Tieto štýly nájdete v scaffolding.less
.
Na vylepšené vykresľovanie v rôznych prehliadačoch používame Normalize.css , projekt Nicolasa Gallaghera a Jonathana Neala .
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 padding
a viac nie je ani jeden kontajner vnoriteľný.
Použite .container
pre citlivý kontajner s pevnou šírkou.
<div class="container">
...
</div>
Použite .container-fluid
pre 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í .
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:
.container
(pevná šírka) alebo .container-fluid
(plná šírka), aby boli správne zarovnané a vyplnené..row
a .col-xs-4
sú k dispozícii na rýchle vytváranie rozložení mriežky. Menej mixinov možno použiť aj pre sémantické rozloženia.padding
. Táto výplň je posunutá v riadkoch pre prvý a posledný stĺpec prostredníctvom záporného okraja na .row
s..col-xs-4
..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.
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-width
obmedzenie 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) { ... }
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 |
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
.
<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>
Premeňte akékoľvek rozloženie mriežky s pevnou šírkou na rozloženie s plnou šírkou tak, že zmeníte svoju krajnú .container
na .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
Stavte na predchádzajúcom príklade vytvorením ešte dynamickejších a výkonnejších rozložení s .col-sm-*
triedami tabletov.
<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>
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.
<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 > 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>
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 .clearfix
a našich responzívnych pomocných tried .
<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>
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-4
prejde .col-md-4
cez štyri stĺpce.
<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-0
tried.
<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>
Ak chcete obsah vnoriť do predvolenej mriežky, pridajte nový stĺpec .row
a 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).
<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>
Ľ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-*
<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>
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é 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;
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));
}
}
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>
K dispozícii sú všetky nadpisy HTML <h1>
až po <h6>
. .h1
cez .h6
triedy 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 .small
triedou.
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>
Globálna predvolená hodnota Bootstrapu font-size
je 14 pixelov s line-height
hodnotou 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>
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>
Typografická škála je založená na dvoch premenných Menej v premenných.less : @font-size-base
a @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í.
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.
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>
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>
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>
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.
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-size
pre vnorené <small>
prvky.
Alternatívne môžete použiť vložený prvok .small
namiesto ľ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>
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>
Na zvýraznenie úryvku textu kurzívou.
Nasledujúci úryvok textu sa vykreslí ako text kurzívou .
<em>rendered as italicized text</em>
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ď.
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>
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.
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>
Štylizovaná implementácia <abbr>
prvku HTML pre skratky a akronymy na zobrazenie rozšírenej verzie pri umiestnení kurzora myši. Skratky s title
atribú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í.
Skratka slova atribút je attr .
<abbr title="attribute">attr</abbr>
Pridajte .initialism
skratku 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>
Uveďte kontaktné informácie na najbližšieho predka alebo celé dielo. Zachovajte formátovanie ukončením všetkých riadkov znakom <br>
.
<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>
Na citovanie blokov obsahu z iného zdroja vo vašom dokumente.
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>
Zmeny štýlu a obsahu pre jednoduché variácie štandardu <blockquote>
.
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.
<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>
Pridať .blockquote-reverse
pre blokovú citáciu s obsahom zarovnaným doprava.
<blockquote class="blockquote-reverse">
...
</blockquote>
Zoznam položiek, pri ktorých na poradí výslovne nezáleží .
<ul>
<li>...</li>
</ul>
Zoznam položiek, pri ktorých na poradí vyslovene záleží .
<ol>
<li>...</li>
</ol>
Odstráňte predvolený list-style
a ľ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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Umiestnite všetky položky zoznamu na jeden riadok so display: inline-block;
svetlou výplňou.
<ul class="list-inline">
<li>...</li>
</ul>
Zoznam výrazov s ich priradenými popismi.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Zabaľte vložené útržky kódu pomocou <code>
.
<section>
by mali byť zabalené ako vložené.
For example, <code><section></code> should be wrapped as inline.
Použite <kbd>
na označenie vstupu, ktorý sa zvyčajne zadáva pomocou klávesnice.
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>
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><p>Sample text here...</p></pre>
Voliteľne môžete pridať .pre-scrollable
triedu, ktorá nastaví maximálnu výšku 350 pixelov a poskytne posuvnú lištu osi y.
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>
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>
Pre základný štýl – ľahké čalúnenie a iba horizontálne oddeľovače – pridajte základnú triedu .table
k ľ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.
# | Krstné meno | Priezvisko | Používateľské meno |
---|---|---|---|
1 | Marka | Otto | @mdo |
2 | Jacob | Thornton | @tuk |
3 | Larry | vták |
<table class="table">
...
</table>
Použite .table-striped
na pridanie zebrovaného pruhu do ľubovoľného riadku tabuľky v rámci <tbody>
.
Pruhované tabuľky sú štylizované pomocou :nth-child
selektora 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 |
<table class="table table-striped">
...
</table>
Pridajte .table-bordered
okraje 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 |
<table class="table table-bordered">
...
</table>
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 |
<table class="table table-hover">
...
</table>
Ak chcete, aby boli stoly kompaktnejšie, pridajte .table-condensed
výplň buniek na polovicu.
# | Krstné meno | Priezvisko | Používateľské meno |
---|---|---|---|
1 | Marka | Otto | @mdo |
2 | Jacob | Thornton | @tuk |
3 | Vtáčik Larry |
<table class="table table-condensed">
...
</table>
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>
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-only
triedou.
Vytvorte responzívne tabuľky tak, že ľubovoľné zabalíte .table
, .table-responsive
aby 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.
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 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>
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-control
sú width: 100%;
predvolene nastavené na. Zabaľte štítky a ovládacie prvky, .form-group
aby 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 priamo so vstupnými skupinami . Namiesto toho vnorte vstupnú skupinu do skupiny formulárov.
Pridajte .form-inline
do 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.
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.
Čí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-only
triedy. Existujú ďalšie alternatívne spôsoby poskytovania označenia pre asistenčné technológie, ako napríklad atribút aria-label
, aria-labelledby
alebo . title
Ak nie je prítomný žiadny z týchto atribútov, čítačky obrazovky sa môžu uchýliť k použitiu placeholder
atribútu, ak je prítomný, ale upozorňujeme, že použitie placeholder
ako 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>
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-horizontal
do formulára (čo nemusí byť <form>
). Tým sa zmení .form-group
s, 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>
Príklady štandardných ovládacích prvkov formulára podporovaných vo vzorovom rozložení formulára.
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
, tel
a color
.
Vstupy budú plne štylizované iba vtedy, ak budú type
správne deklarované.
<input type="text" class="form-control" placeholder="Text input">
Ak chcete pridať integrovaný text alebo tlačidlá pred a/alebo za ľubovoľný textový súbor <input>
, pozrite si komponent vstupnej skupiny .
Ovládanie formulára, ktoré podporuje viacero riadkov textu. Zmeňte rows
atribút podľa potreby.
<textarea class="form-control" rows="3"></textarea>
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ť .disabled
triedu do nadradenej triedy .radio
, .radio-inline
, .checkbox
alebo .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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>
Použite triedy .checkbox-inline
alebo .radio-inline
na 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>
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>
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-radius
vlastností.
<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 multiple
atribú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>
Keď potrebujete umiestniť obyčajný text vedľa menovky formulára vo formulári, použite .form-control-static
triedu 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>
Odstránime predvolené outline
štýly na niektorých ovládacích prvkoch formulárov a box-shadow
namiesto nich použijeme a pre :focus
.
:focus
stavVyššie uvedený príklad vstupu používa vlastné štýly v našej dokumentácii na demonštráciu :focus
stavu na .form-control
.
Pridajte disabled
booleovský atribút na vstup, aby ste zabránili interakciám používateľa. Deaktivované vstupy sú svetlejšie a pridávajú not-allowed
kurzor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Pridajte disabled
atribút do a <fieldset>
, aby ste zakázali všetky ovládacie prvky <fieldset>
naraz.
<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.
disabled
Zatiaľ č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>
Pridajte readonly
booleovský 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>
Blokovať text pomoci pre ovládacie prvky formulára.
Text pomocníka by mal byť explicitne spojený s ovládacím prvkom formulára, na ktorý sa vzťahuje pomocou aria-describedby
atribú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>
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-success
do nadradeného prvku. Akékoľvek .control-label
, .form-control
, a .help-block
v rámci tohto prvku získajú overovacie štýly.
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-only
triedy – 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>
Môžete tiež pridať voliteľné ikony spätnej väzby pridaním .has-feedback
a pravej ikony.
Ikony spätnej väzby fungujú iba s textovými <input class="form-control">
prvkami.
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-only
triedou. Ak sa musíte zaobísť bez menoviek, upravte top
hodnotu ikony spätnej väzby. Pre vstupné skupiny upravte right
hodnotu na vhodnú hodnotu pixelov v závislosti od šírky vášho doplnku.
Aby sa zabezpečilo, že asistenčné technológie – ako napríklad čítačky obrazovky – správne vyjadrujú význam ikony, do .sr-only
triedy 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-only
textu 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>
<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>
.sr-only
štítkamiAk použijete .sr-only
triedu na skrytie ovládacích prvkov formulára <label>
(namiesto použitia iných možností označovania, ako je napríklad aria-label
atribú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>
Nastavte výšky pomocou tried ako .input-lg
, a nastavte šírky pomocou tried stĺpcov mriežky ako .col-lg-*
.
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>
Rýchlo upravte veľkosť štítkov a ovládacích prvkov formulárov .form-horizontal
pridaním .form-group-lg
alebo .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>
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>
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">
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.
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"
.
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-height
of- <input>
based, čo spôsobuje, že sa presne nezhodujú s výškou ostatných tlačidiel vo Firefoxe.
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>
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-only
triedou.
Máte chuť na väčšie alebo menšie tlačidlá? Pridajte .btn-lg
, .btn-sm
, alebo .btn-xs
pre ď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>
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ť .active
na <button>
s (a zahrnúť aria-pressed="true"
atribút), ak potrebujete programovo replikovať aktívny stav.
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>
Pridajte .active
triedu do <a>
tlačidiel.
<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>
Aby tlačidlá vyzerali tak, že sa na ne nedá kliknúť, ich vyblednutím pomocou opacity
.
Pridajte disabled
atribú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>
Ak pridáte disabled
atribút do <button>
, Internet Explorer 9 a nižšie vykreslí text sivou farbou s nepríjemným tieňom textu, ktorý nedokážeme opraviť.
Pridajte .disabled
triedu do <a>
tlačidiel.
<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 .disabled
ako pomocnú triedu, podobnú bežnej .active
triede, takže nie je potrebná žiadna predpona.
Táto trieda sa používa pointer-events: none
na 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.
Obrázky v Bootstrap 3 môžu byť prispôsobené tak, aby zodpovedali pridaním .img-responsive
triedy. 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-responsive
triedu, použite .center-block
namiesto .text-center
. Viac podrobností o používaní nájdete v sekcii pomocných tried ..center-block
V programe Internet Explorer 8-10 majú obrázky SVG .img-responsive
neprimeranú 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">
Pridajte triedy do <img>
prvku, aby ste mohli jednoducho upravovať obrázky v akomkoľvek projekte.
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">
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>
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.
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-only
triedou . .
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>
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.
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ý.
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">×</span></button>
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>
Umiestnite prvok doľava alebo doprava s triedou. !important
je 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();
}
Nastavte prvok display: block
a 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();
}
Jednoduché vymazanie float
s 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();
}
Vynútiť zobrazenie alebo skrytie prvku ( vrátane čítačiek obrazovky ) pomocou tried .show
a . .hidden
Tieto triedy sa používajú !important
na 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.
.hide
je 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 .hidden
alebo ..sr-only
Okrem toho .invisible
sa dá použiť iba na prepínanie viditeľnosti prvku, čo znamená, že display
sa 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();
}
Skryť prvok vo všetkých zariadeniach okrem čítačiek obrazovky pomocou .sr-only
. Skombinujte .sr-only
s .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();
}
Využite .text-hide
triedu 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.
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ú display
hodnotu vlastnosti CSS uvedenú nižšie.
Skupina tried | CSSdisplay |
---|---|
.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-inline
a .visible-xs-inline-block
.
Triedy .visible-xs
, .visible-sm
, .visible-md
, a .visible-lg
tiež 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.
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-print
tiež 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.
Zmeňte veľkosť prehliadača alebo načítajte na rôznych zariadeniach, aby ste otestovali responzívne triedy nástrojov.
Zelené značky začiarknutia označujú, že prvok je viditeľný vo vašom aktuálnom výreze.
Zelené značky začiarknutia tiež označujú, že prvok je skrytý vo vašom aktuálnom výreze.
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 .
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é 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 .
Ľ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;
}
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;
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-color
používa funkciu, ďalší úžasný nástroj od spoločnosti Less, na automatické vytvorenie správnej farby vznášania. Môžete použiť darken
, lighten
, saturate
a desaturate
.
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;
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 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;
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.
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;
}
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;
}
Ak vaša cieľová skupina používa najnovšie a najlepšie prehliadače a zariadenia, nezabudnite použiť túto box-shadow
vlastnosť 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 -webkit
predpony.
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;
}
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;
}
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;
}
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;
}
Nastavte nepriehľadnosť pre všetky prehliadače a poskytnite filter
záložné riešenie pre IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
Ľ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;
.
Utility mixins sú mixiny, ktoré kombinujú inak nesúvisiace vlastnosti CSS na dosiahnutie konkrétneho cieľa alebo úlohy.
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();
}
Rýchlo vycentrujte akýkoľvek prvok v rámci jeho rodiča. Vyžaduje width
alebo max-width
je potrebné nastaviť.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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;
}
Jednoduché skracovanie textu pomocou elipsy pomocou jediného mixu. Vyžaduje, aby prvok bol block
alebo 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();
}
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.
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.
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.