Seznam tříd Bootstrap 3 i s popisem

Seznam tříd Bootstrap 3 i s popisem

Responsivní design je dnes již nevyhnutelný trénd a tím pádem je nutné, aby každý HTML kodér / webový vývojář uměl dělat responsivní weby. Bootstrap 3 od Twitteru je skvělý framework, který jednak dokáže naučit myslet "responsivně" a jednak tvorbu čehokoliv responsivního velmi ulehčuje a zrychluje.

Když jsem se učil Bootstrap 3, hledal jsem jednoduchý seznam tříd Bootstrap 3 s popisem a nikde žádný nebyl k nalezení, pouze asi dva neaktuální seznamy - pro Bootstrap 2, které už jsou pro mé potřeby v podstatě k ničemu. Proto jsem napsal vlastní seznam Bootstrap tříd pro třetí verzi, a hlavně s krátkými popisky - snad jsou pochopitelné.

Nejde ale o dokumentaci, je to zkrátka rychlý přehled pro základní pochopení každé zmíněné třídy. Také tu nejsou vyjmenovány všechny třídy, vše popsat by mi trvalo dlouhé dny, a navíc není vůbec potřeba znát všechny třídy BS3 frameworku. Podívejte se na zdroje v dolní části této stránky, abyste zjistili i význam tříd, které zde nezmiňuji (např. třídy tlačítek).


Základní Bootstrap Třídy

.container

  • nastaví elementu pevnou šířku (která se ale mění podle velikosti displaye, takže je stále responsivní), defaultně je pevná šířka na všech velikostech displayů kromě xs, tam je 100%, takže se počítá automaticky
  •   (ale šířky lze upravit pro 100% i při jiných velikostech)
  • pro responsivní weby s pevnou šířkou může být na wrapperu celého webu nebo na jednotlivých elementech (hlavička, menu...)
  • .container by neměl obsahovat žádný další .container (ani .container-fluid)

.container-fluid

  • nastaví 100% šířku, margin-left a margin-right na auto, a globální padding zleva a prava (15px)
  • pro weby přes celou šířku
  • .container-fluid by neměl obsahovat žádný další .container-fluid (ani .container)

.row

  • vytvoří horizontální skupinu kolonek, které mají responsivní šířky
  • musí být uvnitř .container / .container-fluid pro správný padding a zarovnání
  • v .row mohou být jako přímí potomci pouze kolonky (divy se šířkovými třídami, col-xs-12 apod.)
  • nastavuje margin-left a margin-right na -15px pro zabránění dvojímu paddingu (ten jde totiž z .container i z kolonek na kraji)

.pull-right
.pull-left

  • nastavní float: left / float: right

.center-block

  • pro vycentrování blokového elementu s pevnou šířkou
  • nastaví margin-left a margin-right na auto


Bootstrap Třídy mřížky

  • mohou se zanořovat i do sebe, ale každá kolonka, která obsahuje další kolonky, musí obsahovat .row znovu
  • všechny kolonky mají float: left a position: relative

.col-xs-1
.col-xs-2
.col-xs-3
.col-xs-4
.col-xs-5
.col-xs-6
.col-xs-7
.col-xs-8
.col-xs-9
.col-xs-10
.col-xs-11
.col-xs-12

  • nastaví šířku kolonce (v procentech) pro extra malé displaye (defaultně < 768px) a větší (pokud se neneastaví zvláštní třídy pro větší displaye, ty jinak tyto na větších displayích přepíšou)
  • 12 je 100%, 6 je 50%, 1 je 1/12 % (= 8,333%) atd.

.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-6
.col-sm-7
.col-sm-8
.col-sm-9
.col-sm-10
.col-sm-11
.col-sm-12

  • nastaví šířku kolonce (v procentech) pro malé displaye (defaultně ≥ 768px) a větší

.col-md-1
.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
.col-md-7
.col-md-8
.col-md-9
.col-md-10
.col-md-11
.col-md-12

  • nastaví šířku kolonce (v procentech) pro středně velké obrazovky a větší (≥992px)

.col-lg-1
.col-lg-2
.col-lg-3
.col-lg-4
.col-lg-5
.col-lg-6
.col-lg-7
.col-lg-8
.col-lg-9
.col-lg-10
.col-lg-11
.col-lg-12

  • nastaví šířku kolonce (v procentech) provelké obrazovky (≥1200px)

.col-xs-offset-* (.col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3 ... až do -12)
.col-sm-offset-* (.col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3 ... až do -12)
.col-md-offset-* (.col-md-offset-1, .col-md-offset-2, .col-md-offset-3 ... až do -12)
.col-lg-offset-* (.col-lg-offset-1, .col-lg-offset-2, .col-lg-offset-3 ... až do -12)

  • nastaví odsazení (margin-left) dle specifikovaného počtu kolonek (např. .col-sm-offset-3 nastaví odsazení o 3 kolonky zleva na malých obrazovkách)

.col-xs-pull-* (.col-xs-pull-1, .col-xs-pull-2 ... až do 12)
.col-sm-pull-* (.col-sm-pull-1, .col-sm-pull-2 ... až do 12)
.col-md-pull-* (.col-md-pull-1, .col-md-pull-2 ... až do 12)
.col-lg-pull-* (.col-lg-pull-1, .col-lg-pull-2 ... až do 12)

  • nastaví left position v % jako dle specifikace třídy (např. left: 75% with se nastaví s .col-xs-pull-9 (ale nemusí to být zrovna xs, to je jedno))

.col-xs-push-* (.col-xs-push-1, .col-xs-push-2 ... až do 12)
.col-sm-push-* (.col-sm-push-1, .col-sm-push-2 ... až do 12)
.col-md-push-* (.col-md-push-1, .col-md-push-2 ... až do 12)
.col-lg-push-* (.col-lg-push-1, .col-lg-push-2 ... až do 12)

  • nastaví right position v % podle specifikace třídy (např. right: 25% se nastaví s .col-xs-push-3 (ale nemusí to být zrovna xs, to je jedno))


Bootstrap třídy viditelnosti

  • lze jich nastavit libovolný počet na jeden element, tímto mixováním tříd se dá získat ještě více variability  zobrazení

.clearfix

  • clear: both
  • často kombinovaný s třídami níže, aby v případě jedné kolonky vyšší došlo k odsazení celého dalšího řádku

.visible-xs-block and .visible-xs
.visible-sm-block and .visible-sm
.visible-md-block and .visible-md
.visible-lg-block and .visible-lg

  • zobrazí element (nastaví display: block styl) pouze pro obrazovky specifikované velikosti a automaticky schová element (nastaví display: none) pro všechny ostatní velikosti
  • často kombinované s .clearfix, díky tomu je pak clearfix efektivní jen při určité velikosti obrazovky (musí být ale např. na prázdném divu)

.visible-xs-inline-block
.visible-sm-inline-block
.visible-md-inline-block
.visible-lg-inline-block

  • zobrazí element (nastaví display: inline-block) pouze pro obrazovky specifikované velikosti a automaticky schová element (nastaví display: none) pro všechny ostatní velikosti

.visible-xs-inline
.visible-sm-inline
.visible-md-inline
.visible-lg-inline

  • zobrazí element (nastaví display: inline styl) pouze pro obrazovky specifikované velikosti a automaticky schová element (nastaví display: none) pro všechny ostatní velikosti

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

  • schová element (nastaví display: none) pouze na specifikovaných velikostech obrazovky a automaticky zobrazí element (nastaví display: block)  na obrazovkách jiných velikostí

.visible-print-block

  • zobrazí element (nastaví display: block) v náhledu tisku

.visible-print-inline

  • zobrazí element (nastaví display: inline) v náhledu tisku

.visible-print-inline-block

  • zobrazí element (nastaví display: inline-block) v náhledu tisku

.hidden-print

  • schová element (nastaví display: none) v náhledu tisku

Bootstrap třídy písma / typografie

  • defaultní velikost písma na <body> a <p> je 14px, line-height 1.428; <p> má margin-bottom rovný polovině výšky řádku (line-height, defaultní je 20px), tedy o 10px při výchozím nastavení
  • všechny elementy jako b, big, code, em, i, mark, small, strong, sub, sup, ins, del, s, u, abbr, address a blockquote (a také small a cite uvnitř) jsou nastylované
  • většina těchto tříd se nastavuje pro odstavec, strong nebo em elementy

.page-header

  • třída pro obalení nadpisu, není nutná
  • přidá nějaký margin, padding a border-bottom

.h1
.h2
.h3
.h4
.h5
.h6

  • nastyluje element podle nadpisu příslušné úrovně

.lead

  • pro zvýraznění elementu
  • nastaví font-size to 21px, font-weight: 300, line-height: 1.4 a margin-bottom: 20px

.text-left
.text-center
.text-right
.text-justify

  • zarovná text, většinou na odstavcích, využívá text-align CSS vlastnost

.text-nowrap

  • zachová celý text s touto třídou na jednom řádku, nedojde k zalamování díky white-space: nowrap CSS vlastnosti, kterou tato třída nastavuje

.text-lowercase
.text-uppercase
.text-capitalize

  • nastaví text-transform CSS vlastnost, aby všechny písmena byly malými písmeny, velkými písmeny nebo aby každo slovo začínalo velkým písmenem

.text-muted

  • obarví text do šeda

.text-primary

  • obraví text do modra

.text-success

  • obarví text do zelena

.text-info

  • obarví text do tmavě hnědé

.text-warning

  • obarví text do tmavě žluté

.text-danger

  • obarví text do červena


Bootstrap třídy seznamů

.list-unstyled

  • odstraní list-style a margin-left CSS vlastnosti na <li> v seznamu s touto třídou
  • neaplikuje se automaticky pro vnořené seznamy, pokud chceme tento styl i na vnořeném seznamu, musíme mu dát tuto třídu také

.list-inline

  • umístí položky seznamu na jeden řádek pomocí display: inline-block a paddingu

.dl-horizontal

  • třídy pro definiční seznam (<dl>)
  • nastaví pěkné styly pro <dt> a <dd> uvnitř definičního seznamu (text-align, font-weight...)

.list-group

  • třída pro ul (ale i třeba div)
  • položky seznamu musí mít .list-group-item třídu

.list-group-item

  • třída pro potomky elementu s třídou .list-group
  • nastaví hezčí styly pro položky seznamu
  • většinou na <li> (v případě <ul class="list-group">), ale může být i na <a>, je-li obalem div

.list-group-item-heading

  • pro nadpisy uvnitř .list-group-item, často h4 a podobné

.list-group-item-text

  • pro text uvnitř .list-group-item, často p nebo span


Bootstrap třídy tabulek

.table

  • třída pro obyčejnou tabulku
  • záhlaví tabulky má pouze spodní rámeček a buňky tabulky mají pouze horní rámeček

.table-striped

  • každý lichý rádek je tmavší pro hezčí vzhled (s využitím :nth-child selektoru)
  • měla by se kombinovat s třídou .table

.table-bordered

  • tabulka s rámečky ze všech stran
  • měla by se kombinovat s třídou .table

.table-hover

  • třídy pro tabulku, která má hover efekt na řádcích <tr> v <tbody>
  • měla by se kombinovat s třídou .table

.table-condensed

  • měla by se kombinovat s třídou .table
  • pro obyčejnou tabulku s polovičním paddingem buněk (řádky jsou tedy nižší)

.table-responsive

  • třída pro obal (! většinou div) tabulky, aby zůstala responsivní tak, že na malých obrázovkách se zobrazí scrollbar

.active
.success
.info
.warning
.danger

  • třídy pro <tr> nebo jen <td>
  • nastaví background color pro všechny <td> v daném řádku tabulky (nebo jen v buňce <td>) na šedou (active) / zelenou (success) / modrou (info) / žlutou (warning) / červenou (danger)


Bootstrap třídy formulářů

  • i prvky formulářů mohou být v mřížce Bootstrapu, ideální pro snadné rozložení prvků (vždy je ale třeba použít .row a col-*-* obaly)appers

.form-group

  • třída pro obal (většinou div) labelu a inputu při tvorbě vertikálních formulářů, přidává margin-bottom

.form-control

  • pro každý formulářový element (input, textarea...), dává mu 100% šířku
  • pro zúžení pole je potřeba použít užší obal, nepřenastavuje se šířka inputu jako takového!

.form-control-static

  • pro odstavec, který nahrazuje formulářový element (input...)

.form-horizontal

  • pro horizontální formuláře, kde je label na stejném řádku jako input
  • je třeba používat třídy mřížky pro každý label i jeho input (nebo textarea...)
  • kombinuje se s .form-group-wrapper a .form-control třídami

.form-inline

  • pro jednořádkový formulář (na extra malých obrazovkách je ale stále vertikální)
  • často využívá placeholder atribut, který nahrazuje label
  • labely v inline formulářích by měly mít .sr-only třídu, aby byly napozicovány tak, že nebudou vidět (ale nedostanou display: none ani visibility: hidden vlastnost, je to kvůli dostupnosti)

.input-lg
.input-sm

  • udělá formulářový element (input, textarea, select...) větší nebo menší než je výchozí

.input-group-lg
.input-group-sm

  • třída pro .input-group (viz dále)
  • vždy se používá společně s .input-group třídou

.input-group

  • třída pro obal .input-group-addon nebo .input-group-btn
  • používá se namísto .form-group, když jsou použity třídy výše (.input-group-sm , -lg...)

.input-group-addon

  • třída pro span, který slouží jako obal pro .glyphicon nebo radio/checkbox
  • přidá vybranou glyphiconu na okraj inputu se šedým pozadím
  • span s touto třídou může být před nebo po inputu, záleží, kde chceme, aby se ta ikona zobrazila (levá nebo pravá strana inputu)
  • musí být uvnitř .input-group

.input-group-btn

  • třída pro span, který slouží jako wrapper pro tlačítko, které vypadá jako uvnitř inputu formuláře
  • span s touto třídou může být před nebo po inputu, záleží, kde chceme, aby se ta ikona zobrazila (levá nebo pravá strana inputu)
  • obsahuje <button> (a ten button může obsahovat .dropdown-toggle třídu, span s .caret třídou a data-toggle="dropdown" atribut pro složitější tlačítka, viz dokumentace)

.caret

  • třída pro prázdný span, který vytvoří dropdown šipku

.help-block

  • třída pro span, který slouží jako nápověda pro uživatele
  • musí bý umístěn bezprostředně po inputu formuláře

.has-success
.has-warning
.has-error

  • třídy pro obalení divů s .form-group třídou
  • obarví label, input a .help-block span uvnitř na zelenou/žlutou/červenou
  • label uvnitř obalu s jednou z těchto tříd musí mít .control-label třídu, aby byl obarven také

.has-feedback

  • třída pro obalení divů s .form-group třídou, když je použita glyphicon pro input uvnitř těchto obalů
  • Pro zakázání inputu, stačí použít disabled="disabled" nebo readonly="readonly"
  • pro zakázání celého fieldsetu, obalují se form-groupy fieldsetem s disabled="disabled" atributem

Bootstrap třídy obrázků

  • obrázky by měly mít třídu .img-responsive nebo .thumbnail, aby byly responsivní, a mohou být ještě k tomu obaleny v kolonce (jako col-xs-3 apod.)

.img-rounded

  • třída obrázku, která poskytuje malý border-radius

.img-circle

  • třída obrázku, která dělá obrázek kulatým díky 50% border-radiu

.img-thumbnail

  • třída obrázku pro 1px solid šedý rámeček, 4px padding, bílé pozadí, display: inline-block a rychlý CSS3 transition / přechod

.thumbnail

  • třídy pro obalový div (nebo <a> v případě galerie) obrázku, přidává styly (border, padding, background, transition) a nastauje obrázku max-width: 100%, height: auto; display: block a margin-left a -right na auto margin-right: auto

.img-responsive

  • třída obrázku, která udělá každý obrázek responsivním (bude se škálovat podle svého obalu)
  • používá pouze max-width: 100% a height: auto
  • pokud se obrázek ani s touto třídou neškáluje, může to být způsobeno float vlastností některého z obalů / rodičů

.caption

  • třída pro div uvnitř .thumbnail elementu, může obsahovat h3, p, a a také tlačítka se správným odsazením

.media

  • třída pro div (nebo li, cokoliv), který může obsahovat obrázek, nadpis, small text a odstavce
  • zajišťuje správné odsazení obrázku
  • nadpisy uvnitř by měly mít .media-heading třídu a měly by spolu s odstavci být obaleny v .media-body obalu
  • obrázky uvnitř musí mít buď .pull-left nebo .pull-right třídu, aby obtékaly text

.media-list

  • třídy pro seznam (ul, ol), který má uvnitř .media
  • zajišťuje správné odsazení

.glyphicon

  • základní třídy pro glyphicony (ikony založené na fontu), nastaví font, styly a pozicování
  • měly by být použity na span

.glyphicon-*

  • (* hvězdička musí být nahrazena názvem jedné z glyphicon http://getbootstrap.com/components/#glyphicons )
  • nastaví obrázek z fontu před element pomocí :before CSS3 selektoru, který má content="" nastaven na danou glyphiconu fontu
  • musí být použita společně s .glyphicon třídou, aby se zobrazil obrázek správně
  • použití často na span elementu

Bootstrap Embed třídy (pro iframe, embed...)

.embed-responsive

  • obecná třída pro responsivní obal embedded elementu (např. iframe YouTube videa)

.embed-responsive-4by3
.embed-responsive-16by9

  • konkrétní třídy pro responsivní obal embedded elementu s nastaveným poměrem stran na 4:3 nebo 16:9
  • používá se vždy společně s .embed-responsive třídou

.embed-responsive-item

  • používá se na konkrétní embedded element v obalu, většinou iframe

Bootstrap třídy menu

.nav

  • základní třída pro každou navigační strukturu (ul), odstraní list-style, levý padding a spodní margin
  • také nastaví display: block a position: relative svým <li>
  • musí být na každém seznamu navigace

.active

  • třída pro aktivní položku seznamu (li), nastaví ji jiné styly, aby bylo patrné, že je aktivní

.nav-tabs

  • třída pro navigační strukturu, která jí dá záložkový vzhled (rámečky a float: left)

.nav-pills

  • třída pro navigační strukturu, která jí dá "tabletkový" styl aktivní položka není jako záložka, ale jako buňka s background

.nav-stacked

  • vytvoří vertikální tabletkovou navigaci používá se společně s .nav-pills (a .nav samozřejmě)

.dropdown

  • třída pro <li> seznam položky, která z něj udělá položku s dropdown menu
  • vyžaduje další třídy (.dropodown-toggle a .dropdown-menu, viz níže)

.dropdown-toggle

  • třída pro <a>, který je uvnitř <li class="dropdown">, aby dropdown menu fungovalo
  • vyžaduje další třídy (.dropdown-menu, viz níže)

.dropdown-menu

  • třída pro <ul>, který je uvnitř <a class="dropdown-toggle">, aby dropdown menu fungovalo
  • poskytuje správné zobrazení a skrývání
  • nejdůležitější třída dropdown menu
  • potřebuje .dropdown-toggle a .dropdown třídy na rodičovských elementech, aby bylo vše tip ťop

.nav-justified

  • . třída pro <ul>, spolu s .nav-tabs nebo .nav-pills vytvoří navigaci s vycentrovaným textem a rodičemi odkazů stejné šířky

.disabled

  • třída pro <li> v menu
  • pouze vizuálně znefunkční odkaz a přidá i zvláštní kurzor na myš, ale link zůstává aktivní pro úplně odstranění je třeba odstranit href atribut z odkazu

Bootstrap třídy stylů menu

  • navbar umožňuje zcvrknutí celé navigace pro mobilní zařízení, navigace s třídami výše to sama neumí

.navbar

  • základní třída pro obal navigace (obvykle <nav>), nastaví rámeček, spodní margin, min-height a position: relative
  • pokud nemá mít pevnou pozici, může být kdekoliv .container nebo .container fluid, nebo úplně mimo a mít container třídu na sobě

.navbar-default

  • nastaví základní vizuální styly pro obal navigace (background gradient, box-shadow) a také jeho položky (včetně .active třídy)
  • světlý design, pro tmavý je .navbar-inverse (viz níže)

.navbar-inverse

  • tmavý variace na .navbar-default
  • nikdy se nepoužívá .navbar-default společně s navbar-inverse, nedává to žádný smysl, protože obě třídy slouží k tomu samému, jen v jiných barvách

.navbar-brand

  • nastaví styly pro speciální dokaz a obyčejné texty v menu (float: left, větší font-size, padding, text-shadow...)

.navbar-fixed-top
.navbar-fixed-bottom

  • další třídy pro .navbar, který jej přichytí k hornímu okraji stránky a nastaví position: fixed (je z něj pak tedy pevná lišta)
  • používá se spolu s .navbar a .navbar-default / inverse
  • při použití této třídy by body webu mělo dostat příslušný padding-top / padding-bottom, aby se obsah neshovával za menu

.navbar-static-top

  • odstraní horní, levý a pravý rámeček a také border-radius na navigaci

.navbar-collapse, .collapse

  • tyto 2 třídy umožní scvrknutí menu na malých zařízeních do jednoho tlačítka
  • nastaví automatickou výšku i šířku, overflow: visible, display: block, žádný box-shadow, nulový dolní padding a další vlastnosti
  • spolupracuje s javascripty a dalšími elementy v menu

.breadcrumb

  • třídy pro ul drobečkové navigace pro pěkné styly

.pagination

  • třídy pro ul stránkování
  • správně nastyluje <li> uvnitř, spolu s .disabled a .active třídami (.disabled neodstraní funkčnost odkazu!)

.pagination-lg,
.pagination-sm

  • používá se na <ul> spolu s .pagination, zvětší nebo zmenší stránkování oproti defaultu

.pager

  • používá se na ul, nastyluje "Předchozí" a "Další" odkazy, aby vypadaly lépe, s šedým rámečkem
  • li v tomto seznamu musí mít .previous a .next třídy (a mohou mít i .disabled) pro pěkné styly

.next
.previous

  • používá se na <li> uvnitř <ul class="pager">, přidá odkazům šipky

Zdroje

  • Tutorial Republic's Twitter Bootstrap Tutorial - tohle je asi nejjednodušší možnost, jak se Bootstrap 3 naučit. Nicméně vám to chvíli zabere. Poskytuje "Vyzkoušet kód" feature, takže si s třídami můžete hrát a živě pozorovat jejich chování. Prošel jsem základní část tohoto tutorialu a je opravdu dobrý. Také má své nedostatky (chybějící .img-responsive třída apod.), ale nic hrozného, takže velmi doporučuji.
  • Bootstrap 3 CSS-part documentation - oficiální dokumentace CSS části Bootstrap 3, asi první zdroj, ke kterému se dostanete. Může vám bohatě stačit, ale některé věci jsou vysvětlené méně a nemůžete si kód přímo vyzkoušet.
  • Bootstrap 3 Components-part documentation - oficiální dokumentace jednotlivých komponent Bootstrap 3 frameworku, což jsou volitelné části Bootstrapu, které nemusíte vůbec na svém webu mít. Mnoho z nich je ale velmi důležitých, např. navigace a tlačítka, někdo o ně ale třeba nestojí.

<< Back to the previous page


Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
 
This website uses cookies for ads, just like any other website. Further information