부트 스트랩-반응 형 유틸리티

Bootstrap은보다 빠른 모바일 친화적 개발을 위해 몇 가지 도우미 클래스를 제공합니다. 이는 대형, 소형 및 중형 장치와 결합 된 미디어 쿼리를 통해 장치별로 콘텐츠를 표시하고 숨기는 데 사용할 수 있습니다.

이것을 아껴서 사용하고 동일한 사이트의 완전히 다른 버전을 생성하지 마십시오. Responsive utilities are currently only available for block and table toggling.

클래스	장치
.visible-xs	매우 작음 (768px 미만) 표시
.visible-sm	작게 (최대 768 픽셀) 표시
.visible-md	중간 (768 ~ 991 픽셀) 표시
.visible-lg	더 크게 (992 픽셀 이상) 표시
.hidden-xs	매우 작음 (768px 미만) 숨김
.hidden-sm	작게 (최대 768 픽셀) 숨김
.hidden-md	중간 (768 ~ 991 픽셀) 숨김
.hidden-lg	더 크게 (992 픽셀 이상) 숨김

인쇄 클래스

다음 표는 인쇄 클래스를 나열합니다. 인쇄 할 내용을 전환하는 데 사용합니다.

클래스	인쇄
.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>

Checkmarks 요소가 현재 뷰포트에 표시됨을 나타냅니다.