8、全局CSS样式 —— 栅格布局系统
页面布局的方式：
(a) 使用table做布局
好处：简单，不易出错
不足：语义有问题，性能有问题
(b) 使用DIV+CSS做布局
好处：可扩展性好，性能好
不足：不易控制
(c) Bootstrap 提供的 "Grid System" 栅格布局系统
好处：可扩展性好，性能好，容易控制，实现了响应式布局
Bootstrap栅格布局系统的使用方法
1) 介绍：grid system 底层使用 div+css 来实现，但概念使用的是 "行(row)" 和 "列(col)" 的概念。
2) Bootstrap 把客户端屏幕分为四类：
lg：屏幕宽 >= 1200px 超大PC屏
md：1200px > 屏幕宽 >= 992px 中等PC屏
sm：992px > 屏幕宽 >= 768px 平板屏幕
xs：768px > 屏幕宽 手机屏
3) 所有行和列必须放在容器中，容器有两个：
.container
.container-fluid
4) 栅格系统的基本结构
<div class="container">
<h1...h6>XXX</h1...h6>
<div class="row">
<div class="col">内容</div>
</div>
</div>
注意：.row必须放在容器中，.row 不能直接放置内容，只能放置.col，所有内容放在.col 中
5) 栅格系统可以嵌套，但.col中可以继续放.row>.col，不能直接放.col
6) 一个行中平均分为12份
7) 不同宽度的屏幕中，使用的列不同，分为：
col-lg
col-md
col-sm
col-xs
8) 每个列要制定自己的宽度占比，如：
col-md-1
col-md-2
col-md-3
...
col-md-12
9) 不同的列对指定的屏幕及更大的屏幕都有效，对更小的屏幕无效
col-lg-* 对lg屏幕有效
col-md-* 对md/lg屏幕都有效
col-sm-* 对sm/md/lg屏幕都有效
col-xs-* 对xs/sm/md/lg屏幕都有效
10) 一个列可以指定不同屏幕下的不同的宽度占比
11) 可以知道那个某个列在指定的屏幕宽度下隐藏
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
实例1：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>全局CSS样式 -- 栅格布局系统</title> 8 <link href="css/bootstrap.min.css" rel="stylesheet"> 9 <!--[if lt IE 9]> 10 <script src="js/html5shiv.min.js"></script> 11 <script src="js/respond.min.js"></script> 12 <![endif]--> 13 <style> 14 div{ 15 border: 1px solid #000; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="container"> 21 <h1>全局CSS样式 -- 栅格布局系统</h1> 22 <h2>一行中放置一个列</h2> 23 <div class="row"> 24 <div class="col-md-1">MD-1</div> 25 </div> 26 <div class="row"> 27 <div class="col-md-2">MD-2</div> 28 </div> 29 <div class="row"> 30 <div class="col-md-3">MD-3</div> 31 </div> 32 <div class="row"> 33 <div class="col-md-4">MD-4</div> 34 </div> 35 <div class="row"> 36 <div class="col-md-5">MD-5</div> 37 </div> 38 <div class="row"> 39 <div class="col-md-6">MD-6</div> 40 </div> 41 <div class="row"> 42 <div class="col-md-7">MD-7</div> 43 </div> 44 <div class="row"> 45 <div class="col-md-8">MD-8</div> 46 </div> 47 <div class="row"> 48 <div class="col-md-9">MD-9</div> 49 </div> 50 <div class="row"> 51 <div class="col-md-10">MD-10</div> 52 </div> 53 <div class="row"> 54 <div class="col-md-11">MD-11</div> 55 </div> 56 <div class="row"> 57 <div class="col-md-12">MD-12</div> 58 </div> 59 60 <h2>一行中放置等宽的多列</h2> 61 <div class="row"> 62 <div class="col-md-1">MD-1</div> 63 <div class="col-md-1">MD-1</div> 64 <div class="col-md-1">MD-1</div> 65 <div class="col-md-1">MD-1</div> 66 <div class="col-md-1">MD-1</div> 67 <div class="col-md-1">MD-1</div> 68 <div class="col-md-1">MD-1</div> 69 <div class="col-md-1">MD-1</div> 70 <div class="col-md-1">MD-1</div> 71 <div class="col-md-1">MD-1</div> 72 <div class="col-md-1">MD-1</div> 73 <div class="col-md-1">MD-1</div> 74 </div> 75 <div class="row"> 76 <div class="col-md-2">MD-2</div> 77 <div class="col-md-2">MD-2</div> 78 <div class="col-md-2">MD-2</div> 79 <div class="col-md-2">MD-2</div> 80 <div class="col-md-2">MD-2</div> 81 <div class="col-md-2">MD-2</div> 82 </div> 83 <div class="row"> 84 <div class="col-md-3">MD-3</div> 85 <div class="col-md-3">MD-3</div> 86 <div class="col-md-3">MD-3</div> 87 <div class="col-md-3">MD-3</div> 88 </div> 89 <div class="row"> 90 <div class="col-md-4">MD-4</div> 91 <div class="col-md-4">MD-4</div> 92 <div class="col-md-4">MD-4</div> 93 </div> 94 <div class="row"> 95 <div class="col-md-5">MD-5</div> 96 <div class="col-md-5">MD-5</div> 97 <div class="col-md-5">MD-5</div> 98 </div> 99 <div class="row"> 100 <div class="col-md-6">MD-6</div> 101 <div class="col-md-6">MD-6</div> 102 </div> 103 104 <h2>一行中放置多个不等宽的列</h2> 105 <!-- 1:5的两列 --> 106 <div class="row"> 107 <div class="col-md-2">1:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 108 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 109 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 110 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 111 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 112 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 113 <div class="col-md-10">5:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 114 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 115 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 116 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 117 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 118 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 119 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 120 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 121 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 122 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 123 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 124 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 125 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 126 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 127 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 128 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quas, magnam perspiciatis nulla eveniet quia qui repudiandae corrupti. Possimus unde nam obcaecati reiciendis aliquam minima? Quos at nobis, distinctio ipsam.</div> 129 </div> 130 131 <div class="row"> 132 <div class="col-md-3">3:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 133 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 134 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 135 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 136 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 137 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dicta fuga quasi aliquid non voluptatibus labore adipisci repudiandae, eaque atque odit, aspernatur aut, doloribus. Voluptates ab nesciunt repudiandae, labore quos.</div> 138 <div class="col-md-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates neque dolorem sint minima nisi dolore ducimus officiis illum, accusamus ex architecto minus non maxime ipsum provident quam expedita voluptate accusantium! 139 Voluptate, voluptatem eos. Sit dicta dignissimos eveniet ipsum, natus rem ipsa, quibusdam facere, eos, pariatur deleniti. Fugit veniam voluptatibus saepe facilis reprehenderit, neque, provident perspiciatis culpa, repellendus nobis facere. Laboriosam! 140 Sapiente recusandae praesentium culpa, aut quia ea dolore magnam itaque quo dicta quaerat, aliquid repudiandae, laudantium reiciendis quae ullam est illo consequatur voluptatibus dolores similique eveniet aliquam expedita ducimus. Alias. 141 Sunt cum ea, sequi, aliquid, ut rem a aperiam, nostrum laborum cumque at accusamus eum asperiores! Aspernatur ipsum officiis quaerat molestias a eveniet cupiditate voluptatem, quo, quas, amet magni odit. 142 Praesentium eius sed exercitationem, amet. Quidem blanditiis tempora quia, porro, in laboriosam provident odio eaque a nam harum sit magnam aut nostrum nulla necessitatibus id dignissimos delectus! Necessitatibus, eaque, neque.</div> 143 <div class="col-md-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem vel corporis autem rerum ullam, aspernatur provident, perspiciatis laborum nobis at assumenda labore officiis enim! Amet, velit. Facere, dolore laboriosam consequatur.</div> 144 </div> 145 </div> 146 </body> 147 </html>
实例2：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>全局CSS样式 -- 栅格布局系统</title> 8 <link href="css/bootstrap.min.css" rel="stylesheet"> 9 <!--[if lt IE 9]> 10 <script src="js/html5shiv.min.js"></script> 11 <script src="js/respond.min.js"></script> 12 <![endif]--> 13 <style> 14 div{ 15 border: 1px solid #000; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="container"> 21 <h1>全局CSS样式 -- 栅格布局系统</h1> 22 <h2>不同类型的列</h2> 23 <div class="row"> 24 <div class="col-xs-2">XS-2</div> 25 </div> 26 <div class="row"> 27 <div class="col-sm-2">SM-2</div> 28 </div> 29 <div class="row"> 30 <div class="col-md-2">MD-2</div> 31 </div> 32 <div class="row"> 33 <div class="col-lg-2">LG-2</div> 34 </div> 35 36 <h2>在某种屏幕下隐藏指定的列</h2> 37 <div class="row"> 38 <div class="col-xs-6 hidden-xs">6/12:TARGET</div> 39 </div> 40 41 <h2>列的偏移量</h2> 42 <div class="row"> 43 <div class="col-xs-3 col-xs-offset-6">XS-3</div> 44 <div class="col-xs-2 col-xs-offset-1">XS-2</div> 45 </div> 46 47 48 </div> 49 50 <script src="js/jquery-1.11.3.js"></script> 51 <script> 52 // Bootlint是一个html和Bootstrap代码检查工具 53 (function(){ 54 var s = document.createElement("script"); 55 s.onload = function(){ 56 bootlint.showLintReportForCurrentDocument([]); 57 }; 58 s.src="js/bootlint.js"; 59 document.body.appendChild(s) 60 })(); 61 </script> 62 </body> 63 </html>
9、全局CSS样式 -- 表单相关样式
Bootstrap 提供了三种形式的表单：
1)默认形式的表单：label和输入框分处两行
2)行内形式的表单：所有的label和输入框都在同一行
3)水平形式的表单：一个label和一个输入框在一行
实例：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title></title> 8 <!-- Bootstrap --> 9 <link href="css/bootstrap.css" rel="stylesheet"> 10 <!--[if lt IE 9]> 11 <script src="js/html5shiv.min.js"></script> 12 <script src="js/respond.min.js"></script> 13 <![endif]--> 14 </head> 15 <body> 16 <div class="container"> 17 <h1>全局CSS样式--表单相关样式</h1> 18 <h2>1、默认表单</h2> 19 <form> 20 <div class="fo rm-group"> 21 <label class="control-label" for="uname">用户名:</label> 22 <input type="text" id="uname" class="form-control"> 23 <span class="help-block">用户名只能包含数字、字母、下划线</span> 24 </div> 25 <div class="form-group"> 26 <label class="control-label" for="upwd">密码:</label> 27 <input type="password" id="upwd" class="form-control"> 28 <span cl 29 ass="help-block">密码长度在6-18为之间</span> 30 </div> 31 <div class="checkbox"> 32 <label> 33 <input type="checkbox">我同意本次的使用条款 34 </label> 35 </div> 36 <div class="form-group"> 37 <input class="btn btn-success" type="button" value="提交"> 38 <input class="btn btn-danger" type="button" value="清空"> 39 </div> 40 </form> 41 42 <h2>2、行内表单</h2> 43 <form class="form-inline"> 44 <div class="form-group"> 45 <label class="control-label sr-only" for="uname2">用户名:</label> 46 <input type="text" id="uname2" class="form-control" placeholder="Enter User Name"> 47 </div> 48 <div class="form-group"> 49 <!-- screen read only --> 50 <label class="control-label sr-only" for="upwd2">密码:</label> 51 <input type="password" id="upwd2" class="form-control" placeholder="Enter password"> 52 </div> 53 <div class="form-group"> 54 <input class="btn btn-success" type="button" value="提交"> 55 <input class="btn btn-danger" type="button" value="清空"> 56 </div> 57 </form> 58 59 <h2>3、水平表单--一行中有label+input+提示</h2> 60 <h3>水平表表单必须哦结合栅格布局系统一起使用</h3> 61 <h3>水平表单中的栅格系统不同于普通栅格系统，.container->.form-horizontal, .row->.form-group</h3> 62 <form class="form-horizontal"> 63 <div class="form-group"> 64 <!-- <div class="col-xs-1"> --> 65 <!-- 若要使标签文本右对齐，则将类名col-xs-n写在label中 --> 66 <label class="control-label col-xs-1" for="uname3">用户名:</label> 67 <!-- </div> --> 68 <div class="col-xs-7"> 69 <input type="text" id="uname3" class="form-control"> 70 </div> 71 <div class="col-xs-4"> 72 <span class="help-block">用户名只能包含数字、字母、下划线</span> 73 </div> 74 </div> 75 <div class="form-group"> 76 <!-- <div class="col-xs-1"> --> 77 <label class="control-label col-xs-1" for="upwd">密码:</label> 78 <!-- </div> --> 79 <div class="col-xs-7"> 80 <input type="password" id="upwd" class="form-control"> 81 </div> 82 <div class="col-xs-4"> 83 <span class="help-block">密码长度在6-18为之间</span> 84 </div> 85 </div> 86 <div class="form-group"> 87 <div class="col-xs-10 col-xs-offset-1"> 88 <div class="checkbox"> 89 <label> 90 <input type="checkbox">我同意本次的使用条款 91 </label> 92 </div> 93 </div> 94 </div> 95 <div class="form-group"> 96 <div class="col-xs-10 col-xs-offset-1"> 97 <input class="btn btn-success" type="button" value="提交"> 98 </div> 99 </div> 100 </form> 101 102 </div> 103 104 <script src="js/jquery-1.11.3.js"></script> 105 <script src="js/bootstrap.js"></script> 106 </html>