Учебники

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

Октябрь 25, 2018

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

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

Классы приборы
.Visible-хз Очень маленький (менее 768 пикселей) видимый
.Visible-см Маленький (до 768 пикселей) видимый
.Visible-мкр Средний (от 768 до 991 пикселей) видимый
.Visible-Л.Г. Более крупный (992 px и выше) видимый
.hidden-хз Очень маленький (менее 768 пикселей) скрытый
.hidden-см Маленький (до 768 пикселей) скрытый
.hidden-мкр Средний (от 768 до 991 пикселей) скрыт
.hidden-LG Большие (992 пикс. И выше) скрыты

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

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

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

пример

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

<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>

Галочки указывают, что элемент виден в вашем текущем окне просмотра.

47
Share: