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

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

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

Классы печати

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

Классы Вывод на печать
.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">Extra small</span>
         <span class = "visible-xs">✔ Visible on 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">Small</span>
         <span class = "visible-sm">✔ Visible on 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">Medium</span>
         <span class = "visible-md">✔ Visible on 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">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
     
   </div> 
</div>

Посмотреть результат




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok