> 웹 프론트엔드 > 프런트엔드 Q&A > 부트스트랩 적응형이란 무엇입니까?

부트스트랩 적응형이란 무엇입니까?

WBOY
풀어 주다: 2022-06-21 17:12:53
원래의
3083명이 탐색했습니다.

부트스트랩에서 적응형이란 화면 크기에 따라 기기를 초소형 화면, 중형 화면, 중형 화면, 대형 화면의 네 가지 유형으로 나누는 것을 의미합니다. 웹페이지는 다양한 기기 화면에 따라 12개 열로 구분됩니다. 브라우저는 자체 적응을 위해 행과 열로 나눕니다. 화면이 아무리 크더라도 줄 바꿈을 하지 말고 수평으로 크기를 조정하세요.

부트스트랩 적응형이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩 적응형이란 무엇입니까?

부트스트랩 적응형:

부트스트랩은 장치를 초소형 화면으로 분할합니다. 화면 크기에 따른 작은 화면 화면은 중형 화면, 대형 화면 4가지가 있고 화면은 12열로 나누어져 있습니다

해당 화면 너비는 다음과 같습니다.

  • 초소형 화면(휴대폰): 0-768px 해당 설정 클래스=col-xs-number

  • 작은 화면(태블릿): 768-992px 해당 설정 클래스=col-sm-number

  • 중형 화면(컴퓨터): 992-1200px 해당 설정 클래스=col -md-number

  • 대형 화면(컴퓨터): 1200px-? 해당 설정 class=col-lg-number

크롬 브라우저에서는 화면 너비가 다음보다 작을 때 요소 창에서 찾을 수 있습니다. 768,

com-xs-12만 적용됩니다.

적응형: 웹페이지는 부트스트랩 프레임워크를 사용하여 다양한 장치에 적응합니다.

원리: 장치 너비를 쿼리하는 것은 미디어(장치/브라우저) @미디어 전용 화면입니다

부트스트랩은 적응형이라는 것을 의미합니다. 크기에 관계없이 줄을 줄 바꿈하지 말고 가로로 크기를 조정하세요. 부트스트랩은 울타리 시스템을 통해 적응력이 있으며, 그리드 시스템은 컨테이너의 크기를 정의하고 이를 12개의 동일한 부분으로 나누고 브라우저를 행으로 나눕니다. 적응을 달성하기 위한 열입니다.

예는 다음과 같습니다:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}
로그인 후 복사

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩 적응형이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿