Отображение элементов
Быстрое переключение отображаемых элементов и многого другого с помощью наших утилит отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
На этой странице
Как это устроено
Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display . Классы можно комбинировать для создания различных эффектов, как вам надо.
Обозначение
Классы отображения, которые подходят всем контрольным точкам, от xs до xxl , не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.
Поэтому классы называются по формату:
- .d- for xs
- .d— for sm , md , lg , xl , and xxl .
Где значение– это одно из:
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.
Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg , xl и xxl .
Примеры
div class="d-inline p-2 bg-primary text-white">d-inlinediv> div class="d-inline p-2 bg-dark text-white">d-inlinediv>d-block d-block
span class="d-block p-2 bg-primary text-white">d-blockspan> span class="d-block p-2 bg-dark text-white">d-blockspan>Скрытие элементов
Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.
Чтобы скрыть элементы, используйте класс .d-none или один из классов .d—none .
Для показа элемента только на определенном интервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-* , например .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент на всех размерах экрана, кроме средних и больших.
| Размер экрана | Класс |
|---|---|
| Скрыто на всех | .d-none |
| Скрыто только на xs | .d-none .d-sm-block |
| Скрыто только на sm | .d-sm-none .d-md-block |
| Скрыто только на md | .d-md-none .d-lg-block |
| Скрыто только на lg | .d-lg-none .d-xl-block |
| Скрыто только на xl | .d-xl-none .d-xxl-block |
| Скрыто только на xxl | .d-xxl-none |
| Видно на всех | .d-block |
| Видно только на xs | .d-block .d-sm-none |
| Видно только на sm | .d-none .d-sm-block .d-md-none |
| Видно только на md | .d-none .d-md-block .d-lg-none |
| Видно только на lg | .d-none .d-lg-block .d-xl-none |
| Видно только на xl | .d-none .d-xl-block .d-xxl-none |
| Видно только на xxl | .d-none .d-xxl-block |
скрыто на экранах шире lg
скрыто на экранах меньше чем lg
div class="d-lg-none">скрыто на экранах шире lgdiv> div class="d-none d-lg-block">скрыто на экранах меньше чем lgdiv>Отображение при печати
Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display , как в наших отзывчивых классах .d-* .
- .d-print-none
- .d-print-inline
- .d-print-inline-block
- .d-print-block
- .d-print-grid
- .d-print-table
- .d-print-table-row
- .d-print-table-cell
- .d-print-flex
- .d-print-inline-flex
Классы печати и отображения можно сочетать.
Только экран (Скрывать только при печати)
Только печать (скрыть только на экране)
Скрыть до большого размера на экране, но всегда показывать на печати
div class="d-print-none">Только экран (Скрывать только при печати)div> div class="d-none d-print-block">Только печать (скрыть только на экране)div> div class="d-none d-lg-block d-print-block">Скрыть до большого размера на экране, но всегда показывать на печатиdiv>Sass
API утилит
Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилиты.
"display": ( responsive: true, print: true, property: display, class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ),
Можно ли скрыть колонку таблицы при маленьком разрешении экрана?
Здравствуйте, хочу спросить, есть ли в bootstrap класс на таблицу, который будет скрывать целую колонку при маленьком разрешении, например sm?
Просто таблица не помещается в ширину экрана. .table-responsive-sm не подходит.
Если нет варианта на bootstrap предложите как бы сделать на CSS.
Заранее спасибо
- Вопрос задан более трёх лет назад
- 528 просмотров
1 комментарий
Простой 1 комментарий
MethaTrader @MethaTrader Автор вопроса
Решения вопроса 1
@media screen and(max-width:480px) < table< width:100%;//таблица на всю ширину экрана >.col1 < width:;//ваша ширина 1 ячейки >.col2 < width:;//ваша ширина 2 ячейки >> колонка 1 колонка 2
Попробуйте так.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1
Виктор Таран @shambler81
да но я лично делаю это достаточно просто
делаю td на сол 12
со всеми стилями и тд для таблицы с ховерами хуеверами и тд.
А внутри вмето тд дивы с колами.
Это позволяет одновременно получить все рабочие стили таблиц и это таблица, но внутри адаптив на бутстрапе
что позволяет не только скрыавть колонки но и разваливать их при разных разрешениях на разные уровни.
без js и кастома бутстрапа.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как открыть модальное окно bootstrap при навидению?
- 1 подписчик
- 18 часов назад
- 100 просмотров
Как спрятать все строки таблицы, которые содержат нули?
Добрый день!
Как можно по чекбоксу спрятать все строки таблицы, колонки которой содержат одни нули ? Мне пока приходит в голову вариант, при котором все пустые строки имеют класс < tr >и с помощью js меняю style , но при этом вся таблица плывёт — ячейки становятся разной ширины.
Изначально таблицу создаю сам, поэтому есть возможность устанавливать классы и стили.
//js файл function toggle() < var rows = document.getElementsByClassName('zero'); for (var i = 0; i < rows.length; i++) < if (this.checked) rows[i].style.display = 'block'; else rows[i].style.display = 'none' >> document.getElementById('chkTest').onchange = toggle; Ivanov 0 0 0 0 0 0 Petrov 1 2 0 9 8 0 Sidorov 0 0 0 0 0 0 Morozov 0 0 0 0 0 0 Tosterov 2 1 5 0 0 1
Нашел данный способ на просторах инета. Сам только начал изучать JS. P.S. Интересуют все варианты, но выделите, пожалуйста, как следует делать и какие способы быстрее работают.
Таблица примерная, по факту таблица содержит сотни строк.
Заранее спасибо.
Свойство отображения
Быстро и оперативно переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
На этой странице
Как это устроено
Измените значение свойства display property с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display . Классы можно комбинировать для получения различных эффектов по мере необходимости.
Обозначение
Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl , не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.
Таким образом, классы именуются в следующем формате:
Где значение — одно из:
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.
Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg , xl и xxl .
Примеры
div class="d-inline p-2 bg-primary text-white">d-inlinediv> div class="d-inline p-2 bg-dark text-white">d-inlinediv>d-block d-block
span class="d-block p-2 bg-primary text-white">d-blockspan> span class="d-block p-2 bg-dark text-white">d-blockspan>Скрытие элементов
Для более быстрой разработки, удобной для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов по устройствам. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элементы в зависимости от размера экрана.
Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d—none для любого варианта адаптивного экрана.
Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс .d-*-none с классом .d-*-* , например, .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.
| Размер экрана | Класс |
|---|---|
| Скрыто на всех | .d-none |
| Скрыто только на xs | .d-none .d-sm-block |
| Скрыто только на sm | .d-sm-none .d-md-block |
| Скрыто только на md | .d-md-none .d-lg-block |
| Скрыто только на lg | .d-lg-none .d-xl-block |
| Скрыто только на xl | .d-xl-none .d-xxl-block |
| Скрыто только на xxl | .d-xxl-none |
| Видно на всех | .d-block |
| Видно только на xs | .d-block .d-sm-none |
| Видно только на sm | .d-none .d-sm-block .d-md-none |
| Видно только на md | .d-none .d-md-block .d-lg-none |
| Видно только на lg | .d-none .d-lg-block .d-xl-none |
| Видно только на xl | .d-none .d-xl-block .d-xxl-none |
| Видно только на xxl | .d-none .d-xxl-block |
скрыть на lg и более широких экранах
скрыть на экранах меньше lg
div class="d-lg-none">скрыть на lg и более широких экранахdiv> div class="d-none d-lg-block">скрыть на экранах меньше lgdiv>Показать в печати
Измените значение display элементов при печати с помощью наших служебных классов отображения при печати. Включает поддержку тех же значений display , что и наши адаптивные утилиты .d-* .
- .d-print-none
- .d-print-inline
- .d-print-inline-block
- .d-print-block
- .d-print-grid
- .d-print-table
- .d-print-table-row
- .d-print-table-cell
- .d-print-flex
- .d-print-inline-flex
Классы печати и отображения можно комбинировать.
Только экран (Скрывать только при печати)
Только печать (скрыть только на экране)
Скрыть до большого размера на экране, но всегда показывать на печати
div class="d-print-none">Только экран (Скрывать только при печати)div> div class="d-none d-print-block">Только печать (скрыть только на экране)div> div class="d-none d-lg-block d-print-block">Скрыть до большого размера на экране, но всегда показывать на печатиdiv>Sass
API утилит
Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.
"display": ( responsive: true, print: true, property: display, class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ),
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.1.3.