Guardando attraverso bootstrap sembra che supportino il collasso degli elementi della barra dei menu per schermi più piccoli. C'è qualcosa di simile per altri elementi della pagina?
Per esempio, ho un
Questo è possibile all'interno del framework Bootstrap esistente?
Dispositivi extra piccoli
Telefoni (<768px) (Nomi delle classi: .visible-xs-block, hidden-xs)
Dispositivi piccoli
Tablets (≥768px) (Nomi di classe: .visible-sm-block, hidden-sm)
Dispositivi medi
Desktop (≥992px) (Nomi di classe: .visible-md-block, hidden-md)
Dispositivi grandi
Desktop (≥1200px) (Nomi delle classi: .visible-lg-block, hidden-lg)
Di seguito è deprecato a partire da v3.2.0
Dispositivi extra piccoli
Telefoni (<768px) (Nomi delle classi: .visible-xs, hidden-xs)
Dispositivi piccoli
Tablets (≥768px) (Nomi di classe : .visible-sm, hidden-sm)
Dispositivi medi
Desktop (≥992px) (Nomi di classe: .visible-md, hidden-md)
Dispositivi grandi
Desktop (≥1200px) (Nomi di classe: .visible-lg, hidden-lg)
Molto più vecchio Bootstrap
.hidden-phone, .hidden-tablet
ecc. non sono supportati/obsoleti.
AGGIORNAMENTO:
In Bootstrap 4 ci sono 2 tipi di classi:
Inoltre, è stato aggiunto il nuovo viewport xl
per i dispositivi che hanno una larghezza superiore a 1200px. Per maggiori informazioni clicca qui.
Puoi inserire questi suffissi di classe per ogni modulo per controllare meglio dove sarà mostrato o nascosto.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html scorrere fino in fondo
Ho un paio di chiarimenti da aggiungere qui:
L'asterisco si traduce in quanto segue per ciascuno (di seguito mostro solo visible-xs-*):
Per esempio:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
Per maggiori dettagli e le ultime specifiche, vai qui e cerca "visible": http://getbootstrap.com/css/