Bootstrap의 적응형 화면에 대한 간략한 토론-부트스트랩 튜토리얼-php.cn

Bootstrap의 적응형 화면에 대한 간략한 토론

青灯夜游

풀어 주다： 2021-05-12 11:16:08

앞으로

4580명이 탐색했습니다.

이 기사에서는 Bootstrap의 적응형 화면에 대해 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!