Просматривая начальной загрузку, похоже, что они поддерживают разрушение предметов менубара для небольших экранов. Есть ли что-то подобное для других элементов на странице?
Например, у меня есть < h1 > вместе с навигационными таблетками плавали справа. На маленьком экране это вызывает проблемы. Я хотел бы, по крайней мере, поместить это в подобную раскрывающуюся версию «нажми, чтобы показать больше».
Возможно ли это в рамках существующей системы Bootstrap?
Экстра маленькие устройства
Телефоны (< 768px) (Имена классов: .visible-xs-block, скрытый-xs)
Маленькие устройства
Таблетки (≥768px) (Имена классов: .visible-sm-block, скрытый-sm)
Средние устройства
Настольные компьютеры (≥992px) (Имена классов: .visible-md-block, скрытый-md)
Большие устройства
Настольные компьютеры (≥1200px) (Имена классов: .visible-lg-block, скрытый-lg)
Ниже не рекомендуется по состоянию на v3.2.0
Очень маленькие устройства
Телефоны (< 768px) (Классовые имена: .visible-xs, скрытые-xs)
Маленькие устройства
Таблетки (≥768px) (Имена классов: .visible-sm, скрытый-sm)
Средние устройства
Настольные компьютеры (≥992px) (Классовые названия: .visible-md, скрытый-md)
Большие устройства
Настольные компьютеры (≥1200px) (Классовые названия: .visible-lg, скрытый-lg)
Гораздо старше Bootstrap
.hidden-phone, .hidden-tablet
и т. д. не поддерживаются / устарели.
ОБНОВЛЕНИЕ:
В Bootstrap 4 есть 2 типа классов:
`hidden- * - up
`, который скрывает элемент, когда область обзора находится на заданной точке останова или шире.`hidden- * -down
`, которые скрывают элемент, когда область обзора находится на заданной точке останова или меньше.Кроме того, новый видовой порт xl
добавляется для устройств шириной более 1200 пикселей. Для получения дополнительной информации нажмите здесь.
d-block d-md-none
to скрывается на средних, больших и очень больших устройствах.
Обратите внимание, что вы также можете встроить, заменив 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, альфа 5 (январь 2017). Более подробная информация здесь: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
На Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
Ответ 4.x Bootstrap
hidden- *
классы удаляются из бета-версии Bootstrap 4.
Если вы хотите показывать на носителе и выше, используйте классы 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>
Размер экрана и диаграмма классов
| Screen Size | Class |
|--------------------|--------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
Вместо того, чтобы использовать явные классы
.visible- *
, вы делаете элемент видно, просто не скрывая его при таком размере экрана. Вы можете объединить один класс.d- * -none
с одним классом.d- * -block
, чтобы показать только элемент на заданном интервале размеров экрана (например,..d-none.d-md-block.d-xl-none
показывает элемент только на средних и больших устройствах).
Вы можете ввести эти суффиксы класса модулей для любого модуля, чтобы лучше контролировать, где он будет отображаться или скрываться.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html прокрутите вниз
У меня есть пара разъяснений, чтобы добавить здесь:
Звездочка для каждого из них переводится как (я показываю только видимый-xs- * ниже):
Например:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
Для получения более подробной информации и последних спецификаций, перейдите сюда и найдите «видимый»: http://getbootstrap.com/css/
Все классы hidden- * up
, hidden- *
не работают для меня, поэтому я добавляю самодельный hidden
class перед 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>
Для бета-версии Bootstrap 4.0 (и я предполагаю, что это останется окончательным) есть изменение - имейте в виду, что скрытые классы были удалены.
Смотрите документы: https://getbootstrap.com/docs/4.0/utilities/display/
Чтобы скрыть контент на мобильном телефоне и отобразить его на больших устройствах, необходимо использовать следующие классы:
d-none d-sm-block
На первом классе не отображается ни один из всех устройств, а на втором - устройства «sm» (вы можете использовать md, lg и т. Д.). вместо см, если вы хотите показать на разных устройствах.
Я предлагаю прочитать об этом до миграции:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
В бустрапе 4.1 (запустите фрагмент, потому что я скопировал весь код таблицы из документации Bootstrap):
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
& Лт;!- конец фрагмента - >
https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements