부트스트랩 그리드 시스템 연구 노트
- 高洛峰원래의
- 2016-12-05 13:21:241785검색
부트스트랩 그리드 시스템에 대해 얼마나 알고 계시나요?
1. 소개
Bootstrap에는 반응형 모바일 우선 유동 그리드 시스템이 내장되어 있습니다. 화면 장치나 뷰포트 크기가 증가하면 시스템이 자동으로 이를 가장 큰 12개 열로 나눕니다. 여기에는 보다 의미 있는 레이아웃을 생성하기 위한 사용하기 쉬운 사전 정의된 클래스와 강력한 믹스인이 포함되어 있습니다.
2. 그리드 옵션
bootstrap3.x는 그리드 시스템을 구성하기 위해 네 가지 옵션을 아래와 같이 공식 홈페이지에 소개하고 있습니다. 네 가지 그리드 옵션의 차이점을 자세히 설명하겠습니다. 실제로 유일한 차이점은 다양한 크기의 화면 장치에 적합하다는 것입니다. 클래스 접두사를 살펴보겠습니다. 이 네 가지 그리드 옵션은 col-xs, col-sm, col-md 및 col-lg입니다. md는 mid의 약어, sm은 small의 약어, xs는 ***의 약어입니다. 이 이름 지정은 이러한 클래스가 적용되는 다양한 화면 너비를 반영합니다. 아래에서는 이들 클래스의 특징을 각각 소개합니다.
아래 표를 사용하여 Bootstrap의 그리드 시스템이 다양한 화면 장치에서 어떻게 작동하는지 자세히 알아보세요.
3. 열 오프셋
열을 오른쪽으로 오프셋하려면 .col-md-offset-*를 사용하세요. 이러한 클래스는 * 선택기를 사용하여 모든 열의 왼쪽 여백을 늘립니다. 예를 들어 .col-md-offset-4는 .col-md-4를 4열 너비만큼 오른쪽으로 이동합니다.
4. 중첩된 열
내장 그리드를 사용하여 콘텐츠를 중첩하려면 기존 .col-md -*에 새 .row 및 일련의 .col-md-* 열을 추가하세요. 열 내에서 달성할 수 있습니다. 중첩된 행에 포함된 열의 합은 12와 같아야 합니다.
5. 열 정렬
.col-md-push-* 및 .col-md-pull-*을 사용하여 열 순서를 쉽게 변경할 수 있습니다.
사례
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>栅格</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="author" content="linjiqin218@126.com" />
<meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="/demo/base/js_bootstrap.jsp" />
<style type="text/css">
.show-grid [class ^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
</style>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<b>col-lg-*用法</b>
<br/>
<div class="row show-grid">
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<br/>
<b>col-md-*用法</b>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<br/>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<br/>
<b>col-sm-*用法</b>
<div class="row show-grid">
<div class="col-sm-8">.col-sm-8</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<br/>
<b>col-xs-*用法</b>
<div class="row show-grid">
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<br/>
<b>列偏移: col-md-offset-*</b>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row show-grid">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row show-grid">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<br/>
<b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
<div class="row show-grid">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row show-grid">
<div class="col-md-6">Level 2: .col-md-6</div>
<div class="col-md-6">Level 2: .col-md-6</div>
</div>
</div>
</div>
<br/>
<b>列排序: .col-md-push-*和.col-md-pull-*</b>
<div class="row show-grid">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</body>
</html>시연효과 :
