BrootStrap学习笔记
col-xs/col-sm/col-md/col-lg/col-xl总结
*表示当前div所占的列数（共12列）；
col-sm-3表示该div在小屏幕中占6列，
|
.col-xs-* |
column-extra small-* |
超小屏幕 手机 (<768px) |
|
.col-sm-* |
column-small-* |
小屏幕 手机 (≥ 576px) |
|
.col-md-* |
column-medium-* |
中等屏幕 平板 (≥ 768px) |
|
.col-lg-* |
column-large-* |
大屏幕 桌面显示器 (≥ 992px) |
|
.col-xl-* |
column-extra large-* |
超大屏幕 大桌面显示器 (≥ 1200px) |
BootStrap之Hello World
这是BootStrap的基本框架，后续的测试和代码都将在该框架的基础上进行；
<!DOCTYPE html>
<html lang="zh-cn">
<meta>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉IE浏览器以尽可能高的版本显示该网页-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--页面宽度设定为设备宽度，缩放比例为100%-->
<title>Bootstrap 模板</title>
<!-- 引入 Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><!--引入bootstrap的样式文件 rel表示relationship-->
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--lt表示less than表示低于IE9版本-->
<!--这是一个条件注释，如果IE版本低于IE9，则执行注释中的代码，否则不执行-->
<!--这个条件注释将帮助在IE8上正确显示网页，对于其他浏览器，不起作用-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好 BootStrap!</h1>
<!--要使用Bootstrap，必须要先引入jquery-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 Bootstrap的javascript文件-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>运行结果
表格测试
<!DOCTYPE html>
<html lang="zh-cn">
<meta>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--告诉IE浏览器以尽可能高的版本显示该网页-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--页面宽度设定为设备宽度，缩放比例为100%-->
<title>Bootstrap 模板</title>
<!-- 引入 Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!--引入bootstrap的样式文件 rel表示relationship-->
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--lt表示less than表示低于IE9版本-->
<!--这是一个条件注释，如果IE版本低于IE9，则执行注释中的代码，否则不执行-->
<!--这个条件注释将帮助在IE8上正确显示网页，对于其他浏览器，不起作用-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 50px;
padding-left: 10px;
}
/*奇数行的背景色*/
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgb(237, 143, 143);
}
/*偶数行的背景色*/
.table-striped>tbody>tr:nth-of-type(even) {
background-color: #95a3f4;
}
tbody>tr:hover {
background-color: #95f4a7;
}
</style>
</head>
<body>
<table class="table table-striped">
<caption>联系方式 使用class="table table-striped"</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
<table class="table table-condensed">
<caption>联系方式 使用class="table table-condensed"</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr class="success">
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
<table class="table table-bordered">
<caption>联系方式 使用class="table table-bordered"</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
<table class="table table-hover">
<caption>联系方式 使用class="table table-hover"</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
<table>
<caption>联系方式 不使用Bootstrap样式</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
<div class="panel panel-default">
<div class="panel-heading">
表格面板标题 class="panel-heading"
</div>
<div class="panel-body">
表格面板体 class="panel-body"
</div>
<table class="table">
<caption>联系方式 Bootstrap默认样式</caption>
<thead>
<th>姓名</th>
<th>标题</th>
<th>URL</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>总经理</td>
<td>www.zhangsan.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>李四</td>
<td>经理</td>
<td>www.lisi.com</td>
<td>[email protected]</td>
</tr>
<tr>
<td>王五</td>
<td>打工人</td>
<td>www.wangwu.com</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>备注：张三是李四的舅舅，李四是王五的表叔</p>
</p>
</td>
</tr>
</tfoot>
</table>
</div>
<!--要使用Bootstrap，必须要先引入jquery-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 Bootstrap的javascript文件-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>运行结果
表单测试
<!DOCTYPE html>
<html lang="zh-cn">
<meta>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--告诉IE浏览器以尽可能高的版本显示该网页-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--页面宽度设定为设备宽度，缩放比例为100%-->
<title>Bootstrap 模板</title>
<!-- 引入 Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!--引入bootstrap的样式文件 rel表示relationship-->
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--lt表示less than表示低于IE9版本-->
<!--这是一个条件注释，如果IE版本低于IE9，则执行注释中的代码，否则不执行-->
<!--这个条件注释将帮助在IE8上正确显示网页，对于其他浏览器，不起作用-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
</style>
</head>
<body>
<!--标签和表单分行显示-->
<div class="form-group">
<form action="#" width="50%">
<label for="name">姓名：</label>
<input type="text" autofocus required id="name" placeholder="请输入姓名" class="form-control"></input><br>
<label for="Email">邮箱：</label>
<input type="email" required id="email" placeholder="请输入电子邮箱" class="form-control"></input><br>
<label for="homePhone">家庭电话:</label>
<input type="tel" id="homePhone" placeholder="请输入家庭电话" pattern="[0-9]{4}-[0-9]{8}"
class="form-control"></input><br>
<label for="mobilePhone">手机号：</label>
<input type="tel" id="mobilePhone" placeholder="请输入手机号" pattern="1[0-9]{10}"
class="form-control"></input><br>
<label for="country">国家：</label>
<select id="country" class="form-control">
<option>中国</option>
<option>美国</option>
<option>新加坡</option>
<option>日本</option>
<option>巴西</option>
</select><br>
<label for="provience">省份：</label>
<select id="provience" class="form-control">
<option>江西</option>
<option>湖南</option>
<option>黑龙江</option>
<option>北京</option>
<option>海南</option>
</select><br>
<label for="zip">邮政编码：</label>
<input type="number" id="zip" name="zip" placeholder="请输入邮政编码" class="form-control"></input><br>
<input type="submit" value="提交" class="form-control"></input>
</form>
</div>
<!--标签和表单在一行显示-->
<form action="#" class="form-horizontal">
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">姓：</label>
<div class="col-sm-9">
<input type="text" autofocus required id="firstName" placeholder="请输入姓氏"
class="col-sm-3 control-label"></input>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-3 control-label">名：</label>
<div class="col-sm-9">
<input type="text" autofocus required id="lastName" placeholder="请输入名字"
class="col-sm-3 control-label"></input>
</div>
</div>
</form>
<!--内联显示-->
<form action="#" class="form-inline">
<div class="form-group">
<label for="Email">邮箱：</label>
<input type="email" required id="email" placeholder="请输入电子邮箱" class="form-control"></input><br>
</div>
<div class="form-group">
<label for="homePhone">家庭电话:</label>
<input type="tel" id="homePhone" placeholder="请输入家庭电话" pattern="[0-9]{4}-[0-9]{8}"
class="form-control"></input><br>
</div>
<div class="form-group">
<label for="mobilePhone">手机号：</label>
<input type="tel" id="mobilePhone" placeholder="请输入手机号" pattern="1[0-9]{10}"
class="form-control"></input><br>
</div>
</form><br>
<!--要使用Bootstrap，必须要先引入jquery-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 Bootstrap的javascript文件-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>运行结果
