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

Bootstrap은 더 빠른 모바일 친화적인 개발을 위해 몇 가지 도우미 클래스를 제공합니다. 미디어 쿼리를 통해 대형, 소형 및 중형 장치와 결합하여 장치에 콘텐츠를 표시하거나 숨길 수 있습니다.

이러한 도구는 동일한 사이트의 완전히 다른 버전이 생성되지 않도록 주의해서 사용해야 합니다. 반응형 유틸리티는 현재 블록 및 테이블 전환에서만 작동합니다.

Hidden-xsshiddenvisible visible .hidden-smvisible hiddenvisible.hid den-mdvisible VisibleHideVisible.hidden-lgVisibleVisibleVisibleHide버전 v3.2.0부터 .visible-*-* 클래스처럼 보입니다. 각 화면 크기에는 세 가지 변형이 있으며 각각은 아래와 같이 CSS의 서로 다른 디스플레이 속성을 대상으로 합니다.

	초소형 화면 휴대폰 (<768px)	작은 화면 태블릿(≥768px)	중형 화면 데스크톱(≥992px)	대형 화면 데스크톱(≥1200px)
.visible-xs-*	visible	hide	hide	hide
.visible-sm-*	hide	표시	숨기기
.visible-md-*	Hide	Hide	Visible	Hide
.visible-lg-*	Hide	Hide	숨기기	가시적

Class group

CSS display

.visible-*-blockdisplay: block ;.visible-*-inlinedisplay: inline;.visible-*-inline-block display: inline-block;인쇄 수업




작은 화면(xs)을 예를 들어, 사용 가능한 .visible-- 클래스는 .visible-xs-block, .visible-xs-inline 및 .visible-xs-inline-block입니다.	.visible-xs, .visible-sm, .visible-md 및 .visible-lg 클래스도 존재합니다. 그러나 v3.2.0부터는 더 이상 사용이 권장되지 않습니다. <table> 관련 요소의 특별한 경우를 제외하면 .visible-*-block과 대부분 동일합니다.

인쇄 수업은 아래 표에 나열되어 있습니다. 콘텐츠를 인쇄하려면 이 토글을 사용하세요.

class

browser

printer.visible-print-block .visible-print-inline-blockhiddenvisible.hidden-printvisiblehide

예제

다음 예는 위에 나열된 도우미 클래스의 사용법을 보여줍니다. 브라우저 창 크기를 조정하거나 다른 장치에 인스턴스를 로드하여 반응형 유틸리티 클래스를 테스트합니다.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 반응형 유틸리티</title>
<link href="http://libs.baidu .com/ bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js" ></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
< ;/head> ;
<body>

<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class=" col-xs -6 col-sm-3" style="배경색: #dedef8;
상자 그림자: 삽입 1px -1px 1px #444, 삽입 -1px 1px 1px #444;">
<span 클래스 ="숨김 -xs">아주 작은</span>
   class="col-xs-6 col-sm-3" style="Background-color: #dedef8;
" box-shadow: 삽입 1px -1px 1px #444, inset -1px 1px 1px #444;">
< ;span class="hidden-sm">Small</span>
   div class="clearfix visible-xs"></div>
                                                                                                              ~ div

← 부트스트랩 도우미 클래스

제출하다

PHP 중국어 웹사이트

		.visible-print-inline