Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 글리프 아이콘(Glyphicons)Bootstrap 보조 클래스

Bootstrap 반응형 도구

Bootstrap는 모바일 장치에 친화적인 개발을 빠르게 구현하기 위해 도움 클래스를 제공합니다. 이는 대형, 소형 및 중형 장치와의 미디어 쿼리를 통해 내용이 장치에 대한 표시와 숨기기를 구현할 수 있습니다.

이 도구를 주의 깊게 사용하여 동일한 사이트에서 완전히 다른 버전을 생성하지 않도록 주의하세요.반응형 도구는 현재 블록과 테이블 전환에만 적용됩니다.

	extra small 화면 모바일 (<768px)	소 화면 패드 (≥768px)	중화 화면 데스크톱 (≥992px)	대 화면 데스크톱 (≥1200px)
.visible-xs-*	보이기	숨기기	숨기기	숨기기
.visible-sm-*	숨기기	보이기	숨기기	숨기기
.visible-md-*	숨기기	숨기기	보이기	숨기기
.visible-lg-*	숨기기	숨기기	숨기기	보이기
.hidden-xs	숨기기	보이기	보이기	보이기
.hidden-sm	보이기	숨기기	보이기	보이기
.hidden-md	보이기	보이기	숨기기	보이기
.hidden-lg	보이기	보이기	보이기	숨기기

v3.2.0 버전부터, .visible와 같은 형식-*-* 의 클래스는 각 화면 크기에 대해 세 가지 변형이 있습니다. 각각은 CSS의 다른 display 속성에 대해 목록如下:

클래스 그룹	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: 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	브라우저	프린터
.visible-프린트-block .visible-프린트-inline .visible-프린트-inline-block	숨기기	보이기
.hidden-프린트	보이기	숨기기

온라인 예제

위에 나열된 도구 클래스의 사용법을 보여줍니다. 브라우저 창 크기를 조절하거나 다른 장치에서 예제를 로드하여 반응형 도구 클래스를 테스트하세요.

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　반응형 도구/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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"스타일=background"-색상: #dedef8box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span class="hidden-xs">특별 소형</span>
			<span class="visible-xs">✔ 특별 소형 장치에서 보입니다</span>
		</div>
		<div class="col-xs-6　col-sm-3"스타일=background"-색상: #dedef8box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span class="hidden-sm">소형</span>
			<span class="visible-sm">✔ 소형 장치에서 보입니다</span>
		</div>
		<div class="clearfix visible-xs"></div>
		<div class="col-xs-6　col-sm-3"스타일=background"-색상: #dedef8box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span class="hidden-md">중형</span>
			<span class="visible-md">✔ 중형 장치에서 보입니다</span>
		</div>
		<div class="col-xs-6　col-sm-3"스타일=background"-색상: #dedef8box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444">
			<span class="hidden-lg">대형</span>
			<span class="visible-lg">✔ 대형 장치에서 보입니다</span>
		</div>
	</div>
</div>
</body>
</html>

테스트를 보세요.‹/›

결과는 다음과 같습니다:

체크 마크(✔) 현재 화면에 표시되는 요소를 나타냅니다.

Bootstrap 글리프 아이콘(Glyphicons)Bootstrap 보조 클래스