집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap의 적응형 화면에 대한 간략한 토론
Bootstrap의 적응형 화면에 대한 간략한 토론
- 青灯夜游앞으로
- 2021-05-11 11:23:234622검색
이 기사에서는 Bootstrap의 적응형 화면에 대해 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
Bootstrap은 HTML.css.javaScript를 기반으로 개발된 간단하고 직관적이며 강력한 프런트 엔드 개발 프레임워크로, 이를 통해 웹 개발자는 반응형 웹 페이지를 빠르게 만들 수 있습니다. [관련 추천: "bootstrap Tutorial"]
bootstrap Adaptive:
Bootstrap은 화면 크기에 따라 장치를 초소형 화면, 소형 화면, 중형 화면, 대형 화면으로 나누고 화면을 12열로 나눕니다. 해당 화면 너비는 다음과 같습니다.
초소형 화면(휴대폰): 0-768px 해당 설정 클래스=col-xs-number
소형 화면(태블릿): 768-992px 해당 설정 클래스=col-sm-number
Medium 화면( 컴퓨터):992-1200px 해당 설정 class=col-md-number
대형 화면(컴퓨터):1200px-? 해당 설정 class=col-lg-number
크롬 브라우저에서 요소 창에서 화면 너비가 변경됩니다. 768 미만인 경우 com-xs-12만 적용됩니다.
Adaptive: 웹페이지는 부트스트랩 프레임워크를 사용하여 다양한 장치에 적응합니다
Principle: 장치의 너비를 쿼리하는 것은 미디어(장치/브라우저) 쿼리 @media 전용 화면입니다
하단 레이어는 렌더링을 위한 @media 전용 화면 및 (min -width: 최소값) 및 (max-width: 최대값) 기준:
배경 쌍 예시:
@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;
}
}블록 수준 요소 두 쌍 예시 p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style type="text/css">
div{
float:left;
}
/**小屏0px-768px*/
@media only screen and (min-width:0px) and (max-width:768px){
.sm-12{
width:100%;
}
}
/**大屏768*/
@media only screen and (min-width:768px){
.lg-6{
width:50%;
}
}
</style>
<!-- 两个样式不会同时生效 在小屏上sm-12生效, width是100%在大屏上lg-6生效,width50%
css中标签分块级标记和行级标记,div是块级元素 -->
<div class="sm-12 lg-6">div1</div>
<div class="sm-12 lg-6">div2</div>
</body>
</html>bootstarp는 이를 통합하고 적용합니다.
단계
1.링크 태그가 있는 bootstrap.css 파일을 소개합니다
2. bootstrap에서 정의합니다
1) 루트 요소는 p 클래스 값이어야 하며 컨테이너와 동일해야 합니다.
2) 루트 요소는 행 요소를 포함해야 하며 행 요소 클래스 값은 row
와 동일해야 합니다. 3) 행에 포함된 열 클래스의 값은 col-*-number
예:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="bootstrap.css" rel="stylesheet" type="text/css"> </head> <body> <!-- 根元素必须是div class必须=container --> <div class="container"> <!-- 根元素必须包含行 class=row --> <div class="row"> <!-- 行中包含列 -- class=col-*-number--> <div class="col-xs-12 col-sm-6 col-md-4">div1</div> <div class="col-xs-12 col-sm-6 col-md-4">div2</div> <div class="col-xs-12 col-sm-6 col-md-4">div3</div> </div> <div class="row"></div> </div> </body> </html>
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 Bootstrap의 적응형 화면에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!