Latest web development tutorials

응답 유틸리티 부트 스트랩

부트 스트랩 친화적 빠른 휴대 기기 용 발전을 달성하기 위하여 헬퍼 클래스를 제공한다. 이 쿼리는 표시하고 숨길 장치의 내용을 실현하기 위해, 미디어를 통해, 많은 중소 규모의 장비를 결합 할 수 있습니다.

이러한 도구가 필요 사용하면 같은 사이트의 완전히 다른 버전을 만드는 않도록주의합니다.응답 유틸리티는 현재 블록과 테이블 스위칭에서만 사용할 수 있습니다.

초소형 화면
전화 (<768px)
작은 화면
태블릿 (≥768px)
중간 화면
데스크탑 (≥992px)
큰 화면
데스크탑 (≥1200px)
.visible-xs- * 눈에 보이는 숨기기 숨기기 숨기기
.visible-SM- * 숨기기 눈에 보이는 숨기기 숨기기
.visible-MD-* 숨기기 숨기기 눈에 보이는 숨기기
.visible-LG- * 숨기기 숨기기 숨기기 눈에 보이는
.hidden-XS 숨기기 눈에 보이는 눈에 보이는 눈에 보이는
.hidden-SM 눈에 보이는 숨기기 눈에 보이는 눈에 보이는
.hidden-MD 눈에 보이는 눈에 보이는 숨기기 눈에 보이는
.hidden - LG 전자 눈에 보이는 눈에 보이는 눈에 보이는 숨기기

* - - .visible 모양 v3.2.0 릴리스에서 각 화면에 대한 * 클래스의 크기는 다음과 같이 다른 CSS 표시 속성 목록에 대한 각이며, 세 가지 변형이 있습니다 :

클러스터 CSS 표시
.visible - * - 블록 디스플레이 : 블록;
.visible - * - 인라인 디스플레이 : 인라인;
.visible - * - 인라인 블록 디스플레이 : 인라인 블록;

따라서, 초소형 화면 (XS), 예를 들어, 사용할 수 .visible - * - * 클래스는 다음과 같습니다 .visible-XS-블록, .visible-XS-인라인 및 .visible-XS-인라인 블록.

.visible-XS, .visible-SM, .visible-MD와 .visible-LG 클래스도 존재한다. 그러나 시작 v3.2.0 버전에서 더 이상 권장되지 않습니다. * - - 블록 같은 외부 관련된 특별한 경우 <표> 요소에서, 그들은 .visible.

인쇄 카테고리

다음 표는 인쇄 범주를 나열합니다. 인쇄 콘텐츠를 전환하려면 다음을 사용합니다.

클래스 브라우저 프린터
.visible 인쇄 블록
.visible - 인쇄 - 인라인
.visible 인쇄 인라인 블록
눈에 보이는
.hidden 인쇄 눈에 보이는

다음의 예는 헬퍼 클래스 사용 위에 나열된 보여줍니다. 브라우저 윈도우의 크기를 조정하거나, 다른 장치, 시험 응답 유틸리티 클래스의 인스턴스를로드.

<사업부 클래스 = "용기" 스타일 = "패딩 : 40px;" > <사업부 클래스 = "행 가시에" > <사업부 클래스 = "COL-XS-6 COL-SM-3" 스타일 = "배경 색 : #의 dedef8, 상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 # 444 1 픽셀;"> <스팬 클래스 = "숨겨진-XS"> 특별한 미니 </ SPAN> <스팬 클래스 = "가시 XS">특히 소형 기기에 표시 </ SPAN> </ DIV> <사업부 클래스 = "COL-XS-6 COL-SM-3" 스타일 = "배경 색 : #의 dedef8, 상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 # 444 1 픽셀;"> <스팬 클래스 = "-SM 숨겨진"> 작은 </ SPAN> <스팬 클래스 = "볼-SM">소형 기기에 표시 </ SPAN> </ DIV> <사업부 클래스 = "clearfix 볼 수-XS" > </ DIV> <사업부 클래스 = "COL-XS-6 COL-SM-3" 스타일 = "배경 색 : #의 dedef8, 상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 # 444 1 픽셀;"> <스팬 클래스 = "숨겨진-MD"> 중간 </ SPAN> <스팬 클래스 = "볼-MD">미드 레인지 장치에 표시 </ SPAN> </ DIV> <사업부 클래스 = "COL-XS-6 COL-SM-3" 스타일 = "배경 색 : #의 dedef8, 상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 # 444 1 픽셀;"> <스팬 클래스 = "숨겨진-LG"> </ SPAN> <스팬 클래스 = "가시 LG 전자">대형 장비에 표시 </ SPAN> </ DIV> </ DIV> </ DIV>

»시도

결과는 다음과 같다 :

응답 유틸리티

확인 표시 (✔) 요소가 현재 뷰포트에서 볼 수 있음을 나타냅니다.