Глядя через начальную загрузку, кажется, что они поддерживают свертывание элементов меню для небольших экранов. Есть ли что-то похожее для других предметов на странице?
Например, у меня наряду с таблетками навплывало право. На маленьком экране это вызывает проблемы. Я хотел бы, по крайней мере, поместить его в похожее раскрывающееся меню.
Возможно ли это в рамках существующей среды Bootstrap?
Ответы:
Очень маленькие устройства
Телефоны (<768 пикселей)(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)
Ниже устарела с версии 3.2.0
Очень маленькие устройства Телефоны (<768 пикселей) (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 и т.д. не поддерживаются / устарели.
ОБНОВИТЬ:
В Bootstrap 4 есть 2 типа классов:
hidden-*-upскрывают элемент, когда область просмотра находится на заданной точке останова или шире.hidden-*-down которые скрывают элемент, когда область просмотра находится на заданной точке останова или меньше.Также xlдобавлен новый видовой экран для устройств шириной более 1200 пикселей. Для получения дополнительной информации нажмите здесь .
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/
На Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
.d-классы, чтобы скрыть или показать в разных размерах. getbootstrap.com/docs/4.0/utilities/display
d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Bootstrap 4.x ответ
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 прокрутить вниз
У меня есть пара разъяснений, чтобы добавить здесь:
1) Показанный список (visible-phone, visible-tablet и т. Д.) Устарел в Bootstrap 3. Новые значения:
Звездочка означает следующее для каждого (я показываю только visible-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.
Для получения более подробной информации и последних спецификаций, перейдите сюда и выполните поиск по запросу «visible»: 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>В бета-версии 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
В boostrap 4.1 (запустите сниппет, потому что я скопировал весь код таблицы из документации Bootstrap):
.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
.hidden-phoneи.hidden-tabletне рекомендую ** - они ** не поддерживаются . Устаревший имеет тенденцию означать, что «был заменен другими подходами, хотя все еще поддержанный, должен скоро быть прекращен» . Похоже, что это имеет место с Bootstrap 3.2.0 -.visible-xsи тому подобное пока работает, в то время как.hidden-phoneи друзья полностью отсутствуют в функциональности Bootstrap.