柵格系統與布局
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.（摘自bootStrap官方文檔）。
The BootStrap is so Great ！now we will Learn the flexbox grid by using eclipse.
For example if we use 12 grid:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="zh-ch"> 5 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/> 6 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/> 7 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script> 8 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script> 9 <title>Grid12</title> 10 <style type="text/css"> 11 .c{ border: 1px solid gray //顯示邊框 寬度 1px 實體 灰色 12 } 13 </style> 14 </head> 15 <body> 16 <div class="container"> 17 <div class="row">//十二列 18 <div class="col-md-1 c ">.col-md-1</div> 19 <div class="col-md-1 c">.col-md-1</div> 20 <div class="col-md-1 c">.col-md-1</div> 21 <div class="col-md-1 c ">.col-md-1</div> 22 <div class="col-md-1 c">.col-md-1</div> 23 <div class="col-md-1 c">.col-md-1</div> 24 <div class="col-md-1 c" >.col-md-1</div> 25 <div class="col-md-1 c">.col-md-1</div> 26 <div class="col-md-1 c">.col-md-1</div> 27 <div class="col-md-1 c">.col-md-1</div> 28 <div class="col-md-1 c">.col-md-1</div> 29 <div class="col-md-1 c">.col-md-1</div> 30 </div> 31 </div> 32 </body> 33 </html>
others:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="zh-ch"> 5 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/> 6 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/> 7 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script> 8 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script> 9 <title>Grid柵格12個格子</title> 10 <style type="text/css"> 11 .c{ 12 border: 1px solid gray 13 } 14 </style> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <div class="col-md-1 c ">.col-md-1</div> 20 <div class="col-md-1 c">.col-md-1</div> 21 <div class="col-md-1 c">.col-md-1</div> 22 <div class="col-md-1 c ">.col-md-1</div> 23 <div class="col-md-1 c">.col-md-1</div> 24 <div class="col-md-1 c">.col-md-1</div> 25 <div class="col-md-1 c" >.col-md-1</div> 26 <div class="col-md-1 c">.col-md-1</div> 27 <div class="col-md-1 c">.col-md-1</div> 28 <div class="col-md-1 c">.col-md-1</div> 29 <div class="col-md-1 c">.col-md-1</div> 30 <div class="col-md-1 c">.col-md-1</div> 31 </div> 32 <div class="row"> 33 <div class="col-md-8 c">.col-md-8</div> 34 <div class="col-md-4 c">.col-md-4</div> 35 </div> 36 <div class="row"> 37 <div class="col-md-4 c">.col-md-4</div> 38 <div class="col-md-4 c">.col-md-4</div> 39 <div class="col-md-4 c">.col-md-4</div> 40 </div> 41 <div class="row"> 42 <div class="col-md-6 c">.col-md-6</div> 43 <div class="col-md-6 c">.col-md-6</div> 44 </div> 45 </div> 46 </body> 47 </html>
The photo of result:
How it works ?
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
Second
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="zh-ch"> 5 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/> 6 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/> 7 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script> 8 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script> 9 <title>Grid柵格12個格子</title> 10 <style type="text/css"> 11 .c{ 12 border: 1px solid gray 13 } 14 </style> 15 </head> 16 <body> 17 <p class="bg-primary">使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。</p> 18 <div class="container"> 19 <div class="row c"> 20 <div class="col-md-4 c">.col-md-4</div> 21 <div class="col-md-4 col-md-offset-4 c">.col-md-4 .col-md-offset-4</div> 22 </div> 23 <div class="row"> 24 <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div> 25 <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div> 26 </div> 27 <div class="row"> 28 <div class="col-md-6 col-md-offset-3 c">.col-md-6 .col-md-offset-3</div> 29 </div> 30 </div> 31 </body> 32 </html>
Third：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="zh-ch"> 5 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/> 6 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/> 7 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script> 8 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script> 9 <title>列偏移</title> 10 <style type="text/css"> 11 .c{ 12 border: 1px solid gray 13 } 14 </style> 15 </head> 16 <body> 17 <p class="bg-primary"></p> 18 <div class="container"> 19 <div class="row c"> 20 <div class="col-md-8 "> 21 <div class="col-md-6 ">第二層6列</div> 22 <div class="col-md-6 c">第二層6列</div> 23 </div> 24 <div class="col-md-4 "> 25 第一層4列 26 </div> 27 </div> 28 </div> 29 </body> 30 </html>
fluid Layout！
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="zh-ch"> 5 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.min.css"/> 6 <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap3/css/bootstrap.theme.min.css"/> 7 <script src="${pageContext.request.contextPath }/bootstrap3/js/jquery-1.11.2.min.js"></script> 8 <script src="${pageContext.request.contextPath }/bootstrap3/js/bootstrap.min.js"></script> 9 <title>container</title> 10 <style type="text/css"> 11 .c{ 12 border: 1px solid yellow 13 } 14 </style> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <div class="col-md-1 c ">.col-md-1</div> 20 <div class="col-md-1 c">.col-md-1</div> 21 <div class="col-md-1 c">.col-md-1</div> 22 <div class="col-md-1 c ">.col-md-1</div> 23 <div class="col-md-1 c">.col-md-1</div> 24 <div class="col-md-1 c">.col-md-1</div> 25 <div class="col-md-1 c" >.col-md-1</div> 26 <div class="col-md-1 c">.col-md-1</div> 27 <div class="col-md-1 c">.col-md-1</div> 28 <div class="col-md-1 c">.col-md-1</div> 29 <div class="col-md-1 c">.col-md-1</div> 30 <div class="col-md-1 c">.col-md-1</div> 31 </div> 32 </div> 33 <br/> 34 <div class="container-fluid "> 35 <div class="row"> 36 <div class="col-md-1 c ">.col-md-1</div> 37 <div class="col-md-1 c">.col-md-1</div> 38 <div class="col-md-1 c">.col-md-1</div> 39 <div class="col-md-1 c ">.col-md-1</div> 40 <div class="col-md-1 c">.col-md-1</div> 41 <div class="col-md-1 c">.col-md-1</div> 42 <div class="col-md-1 c" >.col-md-1</div> 43 <div class="col-md-1 c">.col-md-1</div> 44 <div class="col-md-1 c">.col-md-1</div> 45 <div class="col-md-1 c">.col-md-1</div> 46 <div class="col-md-1 c">.col-md-1</div> 47 <div class="col-md-1 c">.col-md-1</div> 48 </div> 49 </div> 50 </body> 51 </html>
Use .container-fluid for a full width container, spanning the entire width of the viewport.