Pri pohľade cez bootstrap to vyzerá, že podporujú zbalenie položiek menubaru pre menšie obrazovky. Existuje niečo podobné aj pre ostatné položky na stránke?
Napríklad mám
Je to možné v rámci existujúceho frameworku Bootstrap?
Malé zariadenia
Telefóny (<768px) (Názvy tried : .visible-xs-block, hidden-xs)
Malé zariadenia
Tablety (≥768px) (Názvy tried : .visible-sm-block, hidden-sm)
Stredné zariadenia
Stolné počítače (≥992px) (Názvy tried : .visible-md-block, hidden-md)
Veľké zariadenia
Stolné počítače (≥1200px) (Názvy tried : .visible-lg-block, hidden-lg)
Dole uvedené je od verzie 3.2.0 zastarané
Mimoriadne malé zariadenia
Telefóny (<768px) (Názvy tried : .visible-xs, hidden-xs)
Malé zariadenia
Tablety (≥768px) (Názvy tried : .visible-sm, hidden-sm)
Stredné zariadenia
Stolné počítače (≥992px) (Názvy tried : .visible-md, hidden-md)
Veľké zariadenia
Stolné počítače (≥1200px) (Názvy tried : .visible-lg, hidden-lg)
Mnoho starší Bootstrap
.hidden-phone, .hidden-tablet
atď. sú nepodporované/obsoletné.
AKTUALIZÁCIA:
V Bootstrap 4 existujú 2 typy tried:
hidden-*-down
, ktoré skryjú prvok, keď je viewport v danom bode zlomu alebo menší.Tiež je pridaný nový viewport xl
pre zariadenia, ktoré majú šírku väčšiu ako 1200px. Viac informácií nájdete tu.
Tieto prípony tried modulov môžete zadať pre každý modul, aby ste lepšie kontrolovali, kde sa bude zobrazovať alebo skrývať.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html posunúť na koniec
Chcem k tomu dodať niekoľko vysvetlení:
V Bootstrape 3 je zoznam (visible-phone, visible-tablet atď.) zastaraný. Nové hodnoty sú:
Hviezdička sa pre každú z nich prekladá na nasledujúce hodnoty (nižšie uvádzam len viditeľné-xs-*):
Napríklad:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
Viac informácií a najnovšie špecifikácie nájdete tu a vyhľadajte "visible": http://getbootstrap.com/css/.