Просматривая загрузочный лоток, похоже, что они поддерживают свертывание элементов меню для меньших экранов. Есть ли что-то подобное для других элементов на странице?
Например, у меня есть наряду с Nav-таблетками, плавающими справа. На маленьком экране это вызывает проблемы. Мне бы хотелось, по крайней мере, поместить его в аналогичное раскрывающееся меню "нажмите и показать".
Возможно ли это в рамках существующей структуры Bootstrap?
Дополнительные мелкие устройства
Телефоны (< 768px) (Class names : .visible-xs-block, hidden-xs)
Маленькие устройства
Таблетки (≥768px) (Class names : .visible-sm-block, hidden-sm)
Средние устройства
Настольные компьютеры (≥992px) (Class names : .visible-md-block, hidden-md)
Крупные устройства
Настольные компьютеры (≥1200px) (Class names : .visible-lg-block, hidden-lg)
Ниже приведена устаревшая версия v3.2.0
Дополнительные небольшие устройства
Телефоны (< 768px) (Class names : .visible-xs, hidden-xs)
Маленькие устройства
Таблетки (≥768px) (Class names : .visible-sm, hidden-sm)
Средние устройства
Настольные компьютеры (≥992px) (Class names : .visible-md, hidden-md)
Крупные устройства
Настольные компьютеры (≥1200px) (Class names : .visible-lg, hidden-lg)
Значительно старше Bootstrap
.hidden-phone, .hidden-tablet
и т.д. не поддерживаются/устарели.
d-block d-md-none
до скрывать на средних, больших и особо больших устройствах.
d-none d-md-block
, чтобы скрыть небольшие и сверхмалые устройства.
Обратите внимание, что вы также можете встроить, заменив d-*-block
на d-*-inline-block
Старый ответ: Bootstrap 4 Alpha
Вы можете использовать классы .hidden-*-up
для скрытия на заданном размере и более крупных устройствах
.hidden-md-up
, чтобы скрывать на средних, больших и особо больших устройствах.
То же самое происходит с .hidden-*-down
для скрытия на заданном размере и меньших устройствах
.hidden-md-down
, чтобы скрывать на средних, маленьких и сверхмалых устройствах
visible- * больше не является вариантом с загрузкой 4
Чтобы отображать только на средних устройствах, вы можете объединить два:
hidden-sm-down
иhidden-xl-up
Допустимые размеры:
xs
для телефонов в портретном режиме (< 34em)sm
для телефонов в альбомном режиме (≥34em)md
для планшетов (≥48em)lg
для настольных компьютеров (≥62em)xl
для настольных компьютеров (≥75em)Это был пример Bootstrap 4, alpha 5 (январь 2017). Подробнее здесь: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
.d-
классы, чтобы скрыть или показать в разных размерах. getbootstrap.com/docs/4.0/utilities/display
Вы можете ввести эти суффиксы класса модуля для любого модуля, чтобы лучше контролировать, где он будет отображаться или быть скрытым.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html прокрутите вниз
У меня есть несколько пояснений, которые можно добавить здесь:
1) Отображенный список (видимый-телефон, видимый-планшет и т.д.) устарел в Bootstrap 3. Новые значения:
Звездочка переводится следующим образом для каждого (я показываю только видимый-xs- * ниже):
2) Когда вы используете эти классы, вы не добавляете период впереди (как показано с ошибкой в части ответа выше).
Например:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
3) Вы можете использовать visible- * и hidden- * (например, visible-xs и hidden-xs), но они устарели в Bootstrap 3.2.0.
Для получения более подробной информации и новейших спецификаций перейдите сюда и найдите "видимый": http://getbootstrap.com/css/
hidden-xs-block
недействителен, но visible-xs-block
Все классы hidden-*-up
, hidden-*
не работают для меня, поэтому я добавляю самодельный класс hidden
до visible-*
(который работает для текущей версии начальной загрузки). Это очень полезно, если вам нужно показать div только для одного экрана и скрыть все остальные.
CSS
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
hidden-*
классы удаляются из Bootstrap 4 beta и далее.
Если вы хотите показывать на среднем и верхнем уровне классы d- *
например:
<div class="d-none d-md-block">This will show in medium and up</div>
Если вы хотите показывать только небольшими и ниже, используйте
<div class="d-block d-md-none"> This will show only in below medium form factors</div>
Вместо того, чтобы использовать явные .visible- * классы, вы создаете элемент видимый, просто не скрывая его при этом размере экрана. Вы можете комбинировать один .d - нет класса с одним .d-блочным классом, чтобы показать только элемент на заданный интервал размеров экрана (например,.d-none.d-md-block.d-xl-none показывает элемент только на средних и больших устройствах).
Документация здесь
Для бета-версии Bootstrap 4.0 (и я предполагаю, что это останется для окончательного) есть изменения - помните, что скрытые классы были удалены.
См. документы: https://getbootstrap.com/docs/4.0/utilities/display/
Чтобы скрыть контент на мобильном устройстве и отобразить его на более крупных устройствах, вы должны использовать следующие классы:
d-none d-sm-block
Первый набор классов не отображает все устройства, а второй отображает его для устройств "sm" вверх (вы можете использовать md, lg и т.д. вместо sm, если вы хотите показывать на разных устройствах.
Я предлагаю прочитать об этом до миграции:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
.hidden-phone
и.hidden-tablet
устарели ** - они ** не поддерживаются . Устаревший имеет тенденцию означать, что «был заменен другими подходами, хотя все еще поддержанный, должен скоро быть прекращен» . Похоже, что это имеет место с Bootstrap 3.2.0 -.visible-xs
и тому подобным, пока работающим, в то время как.hidden-phone
и друзья полностью отсутствуют в функциональности Bootstrap.