it-swarm.com.ru

Скрытие элементов в адаптивном макете?

Глядя через начальную загрузку, кажется, что они поддерживают свертывание элементов меню для небольших экранов. Есть ли что-то похожее для других предметов на странице?

Например, у меня наряду с таблетками навплывало право. На маленьком экране это вызывает проблемы. Я хотел бы, по крайней мере, поместить его в похожее раскрывающееся меню.

Возможно ли это в рамках существующей среды Bootstrap?

275
Kaitlyn2004

Новые видимые классы добавлены в 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)

Для получения дополнительной информации: http://getbootstrap.com/css/#responsive-utilities


Ниже устарело с версии 3.2.0


Очень маленькие устройства Телефоны (<768 пикселей) (Class names : .visible-xs, hidden-xs)

Маленькие устройства Планшеты (≥768px) (Class names : .visible-sm, hidden-sm)

Средние устройства Настольные компьютеры (≥992px) (Class names : .visible-md, hidden-md)

Большие устройства Рабочие столы (≥1200 пикселей) (Class names : .visible-lg, hidden-lg)


Намного старше Bootstrap 


.hidden-phone, .hidden-tablet и т. д. не поддерживаются/устарели.

Обновление:

В Bootstrap 4 есть 2 типа классов:

  • hidden-*-up, который скрывает элемент, когда область просмотра находится на заданной точке останова или шире.
  • hidden-*-down, который скрывает элемент, когда область просмотра находится на заданной точке останова или меньше.

Также добавлен новый видовой экран xl для устройств шириной более 1200 пикселей. Нажмите сюда, для получения дополнительной информации .

623
Marc Uberstein

Bootstrap 4 Beta Ответ:

d-block d-md-none для скрытия на средних, больших и очень больших устройствах.

d-none d-md-block для скрытия на маленьких и очень маленьких устройствах.

 enter image description here

Обратите внимание, что вы также можете встроить, заменив 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/

98
Julien

Вы можете ввести эти суффиксы класса модуля для любого модуля, чтобы лучше контролировать, где он будет отображаться или быть скрытым.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://Twitter.github.com/bootstrap/scaffolding.html прокрутить вниз 

21
john taylor

У меня есть пара разъяснений, чтобы добавить здесь:

1) Показанный список (видимый телефон, видимый планшет и т.д.) Устарел в Bootstrap 3. Новые значения:

  • видимая xs- * 
  • видимая SM- * 
  • видимая MD- *
  • видимая LG- * 
  • скрытый-xs- *
  • скрытый-SM- * 
  • скрытый-MD- * 
  • скрытый-LG- *

Звездочка означает следующее для каждого (я показываю только visible-xs- * ниже):

  • видимый-XS-блок
  • видимый-хз-рядный
  • видимый-хз-рядный блок

2) Когда вы используете эти классы, вы не добавляете точку впереди (как смутно показано в части ответа выше).

Например:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Вы можете использовать visible- * и hidden- * (например, visible-xs и hidden-xs), но они не рекомендуются в Bootstrap 3.2.0.

Для получения более подробной информации и последних характеристик, перейдите сюда и выполните поиск по запросу «visible»: http://getbootstrap.com/css/

18
Jazimov

Классы 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 показывает элемент только на средних и больших устройствах).

Документация

14
kiranvj

В бета-версии 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

2
Przemek Nowak

Все классы 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>
2
Gediminas

В 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

0
Tai Ly