Когда нам платят за благородный поступок, его у нас отнимают (Н. Шамфор).

Bootstrap – Отзывчивые утилиты

2 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
17 мая 2017
Bootstrap - Отзывчивые утилиты
Bootstrap предоставляет некоторое количество вспомогательных классов для более быстрой мобильной отзывчивости. Они могут быть использованы для отображения и скрытия содержимого с помощью устройства с помощью средств медиа-запросов, в сочетании с большими, малыми, средними устройствами.

Используйте их экономно и не создавайте совершенно разные версии одного и того же сайта. Отзывчивые утилиты в настоящее время доступны только для переключения блоков и таблиц.

КлассыУстройства
.visible-xsОчень мелкий (менее 768px) видно
.visible-smМалые (до 768px) видно
.visible-mdСредний (от 768px до 991px) видно
.visible-lgИзображение большего размера (992px и выше) видно
.hidden-xsОчень мелкий (менее 768px) скрыт
.hidden-smМалые (до 768px) скрыт
.hidden-mdСредний (от 768px до 991px) скрыт
.hidden-lgИзображение большего размера (992px и выше) скрыт

Печать Классы

В следующей таблице перечислены классы печати. Используйте их для переключения контента для печати.

КлассыРаспечатать
.visible-printДа, Видимый
.hidden-printВиден только браузер, не печатать.

Пример

Следующий пример демонстрирует использование перечисленных выше вспомогательных классов. Изменение размера браузера или загрузка примера на различных устройствах для проверки отзывчивых классов.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Очень маленький</span>
         <span class = "visible-xs"> Видно на x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Маленький</span>
         <span class = "visible-sm"> Видно на small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Средний</span>
         <span class = "visible-md"> Видно на medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Большой</span>
         <span class = "visible-lg"> Видно на large</span>
      </div>
      
   </div>  
</div>

Bootstrap - Отзывчивые утилиты

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 125

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close