Bootstrap - responsywne narzędzia

Bootstrap udostępnia kilka klas pomocniczych, które przyspieszają rozwój aplikacji mobilnych. Można ich używać do wyświetlania i ukrywania treści według urządzenia za pomocą zapytań o media, w połączeniu z dużymi, małymi i średnimi urządzeniami.

Używaj ich oszczędnie i unikaj tworzenia zupełnie różnych wersji tej samej witryny. Responsive utilities are currently only available for block and table toggling.

Zajęcia	Urządzenia
.visible-xs	Widoczny bardzo mały (mniej niż 768 pikseli)
.visible-sm	Widoczny mały (do 768 pikseli)
.visible-md	Widoczny średni (od 768 do 991 pikseli)
.visible-lg	Widoczny większy (992 piksele i więcej)
.hidden-xs	Bardzo mały (mniej niż 768 pikseli) ukryty
.hidden-sm	Mały (do 768 pikseli) ukryty
.hidden-md	Średni (od 768 do 991 pikseli) ukryty
.hidden-lg	Większy (992 piksele i więcej) ukryty

Drukuj klasy

Poniższa tabela zawiera listę klas drukowania. Użyj ich do przełączania treści do druku.

Zajęcia	Wydrukować
. widoczny nadruk	Tak widoczne
.hidden-print	Widoczne tylko dla przeglądarki, aby nie drukować.

Przykład

Poniższy przykład demonstruje użycie wyżej wymienionych klas pomocników. Zmień rozmiar przeglądarki lub załaduj przykład na różnych urządzeniach, aby przetestować responsywne klasy narzędzi.

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

Checkmarks wskazuje, że element jest widoczny w bieżącej rzutni.