本文深入探讨Bootstrap的栅格系统，展示如何使用12列系统创建响应式布局，包括列偏移、嵌套和流体布局等高级特性，通过实例代码帮助理解。
栅格系统与布局
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.
扫一扫
9068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
