1.1 Bootstrap概述
Bootstrap简介：
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Boostrap特点
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持： - 所有的主流浏览器都支持 bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari - 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
- 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
1.2 编写响应式页面
对应的模版和框架等，参考Bootstrap，可以直接下载代码，修改；另外还可以看LayUI
Bootstrap的使用步骤：
1.下载bootstrap
http://www.bootcss.com/
2.导入bootstrap.css文件
3.导入jquery.js
4.导入bootstrap.js
<!--导入css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 导入jquery-->
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<!--导入css.js -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!--导入css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
5.导入兼容支持移动设备标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
6.将所有的内容放到布局容器中
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
测试1: 使用container显示
<div class="container">
<div style="border: 1px solid red;">111111</div>
</div>
测试2: 使用container显示
<div class="container-fluid">
<div style="border: 1px solid red;">111111</div>
</div>
1.3 Bootstrap的组成
1.全局css样式
2.组件
3.js插件
Bootstrap入门
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap入门</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container" style="background-color: skyblue; height: 200px">
<h1>布局容器1</h1>
</div>
<div class="container-fluid " style="background-color: pink; height: 200px">
<h1>布局容器2</h1>
</div>
</body>
</html>
1.4 栅格系统
1.4.1 什么是栅格系统
栅格系统可以替代【table】制作注册和登录界面
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
注意: Bootstrap将每一行分成12份!
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
（1）“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
1.4.2 媒体查询功能
bootstrap通过媒体查询判断是什么上网设备
（1）超小屏幕（ 手机 <768px 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的）
（2）小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... }
（3）中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: @screen-md-min) { ... }
（4）大屏幕（大桌面显示器，大于等于 1200px）
@media (min-width: @screen-lg-min) { ... } col-lg-2
大屏幕 大于1200 col-lg-
中屏幕 大于992<1200 col-md-
小屏幕 大于768<922 col-sm-
最小屏幕 小于768 col-xs-
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap栅格系统</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
#div1 div{
border: 1px solid pink;
}
#div2 div{
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color: beige; height: 300px">
<!--row：将页面纵向分为12份-->
<div class="row" id="div1">
<!--屏幕最大的时候，一份一个-->
<!--屏幕中等的时候，2份一个-->
<!--屏幕小的时候，4分一个-->
<!--屏幕极小的时候，6份一个-->
<!--也可以不均分-->
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">2</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">3</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">4</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">5</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">6</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">7</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">8</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">9</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">10</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">11</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">12</div>
</div>
<div id="div2" class="row">
<div class = "col-xs-3">xxx</div>
<div class = "col-xs-3">yyy</div>
<div class = "col-xs-3">zzz</div>
<div class = "col-xs-3">aaa</div>
</div>
</div>
</body>
</html>
1.5 排版
1.5.1 标题
标题: HTML 中的所有标题标签，
到
均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap排版系统</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<h1>标题</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>对齐</h1>
<p class="text-center">你好</p>
<p class="text-right">Java</p>
<h1>列表</h1>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>榴莲</li>
</ul>
</body>
</html>
1.5.2 mark标签
you can use the mark tag to <mark> hight hight</mark>
<br/>
del标签
you can use the mark tag to <del> hight hight</>
1.5.3 对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
1.5.4 表格
table 表格
table-striped 表格隔行变色
table-hover 悬浮变色
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap表格</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--table-hover 鼠标经过变色-->
<table class="table table-striped table-bordered table-hover">
<!--success/info/warning对应不同的颜色-->
<tr class="success">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
<tr class="info">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
<tr class="warning">
<td>xxx</td>
<td>yyy</td>
<td>zzz</td>
</tr>
</table>
</body>
</html>
1.6 表单
元素都将被默认设置宽度属性为 width: 100%;将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.6.1 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>
-把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
-向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
form-group 会将label和input上下排列
form-control 会自动将input填充满屏幕 并添加点击高亮效果
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap表单</title>
<!--1.三个meta标签引入-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!--3.引入js，一个是jquery的，一个是bootstrap的-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<h1>表单</h1>
<!--form-inline表示一行显示-->
<form action="" method="post" class="form-inline">
<div>
<!--for的属性，可以保证点击【用户名】文字的时候也能选中输入-->
<label for="username">用户名：</label>
<div>