부트스트랩 그리드 시스템 연구 노트-PHP开发-php.cn

부트스트랩 그리드 시스템 연구 노트

高洛峰

풀어 주다： 2016-12-05 13:21:24

원래의

1739명이 탐색했습니다.

부트스트랩 그리드 시스템에 대해 얼마나 알고 계시나요?

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>

로그인 후 복사

시연효과 :

부트스트랩 그리드 시스템 연구 노트