一、bootstrap概述
1.1 什么是bootstrap
Bootstrap，基于 HTML、CSS、JavaScript的前端框架。
该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效）
开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。
作用：
- Bootstrap 使得 Web 开发更加快捷，高效。
- BootStrap支持响应式开发，解决了移动互联网前端开发问题
1.2 什么是响应式布局、响应式布局能够解决的问题
- 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个展示版本。(根据不同的设备的屏幕大小，而显示不同样式的页面，但使用代码是同一份。)
- 原理：根据屏幕的宽度不一样，在screen中做判断，给分配不同的分布样式
- 此概念专为解决移动互联网浏览而诞生的。
- 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性
案例（基本格式）：
<html>
<head >
<meta charset="utf-8" />
<title>BootStrap的基本使用</title>
<!--
1、先引入BootStrap的css文件:我们可以使用css样式
-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--
2、BootStrap依赖于Jquery开发的,想要使用BootStrap的js文件,必须先引入JQuery文件
3、再引入BootStrap的js文件
-->
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
注：引入BootStrap的css文件、JQuery文件、BootStrap的js文件都放在最前面。在head里，或者head的前面都行。
三个文件夹：css，js，fonts
- css样式：引入bootstrap的css文件的话，那么你的页面就可以使用提供好的样式。
- fonts：提供好的字体文件。例如：字体图片
- js：页面特效功能
1.3 布局容器
BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。相当于一个画板。
帮助手册位置：全局CSS样式------->概览------->布局容器
帮助手册链接：https://v3.bootcss.com/
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器
| 样式 | 作用 |
|---|---|
| .container | 类用于固定宽度并支持响应式布局的容器。 【特点：居中，两端留白】 <div class="container"> ... </div> |
| .container-fluid | 类用于 100% 宽度，占据全部视口（viewport）的容器。占用页面所有的宽度，不留空白 <div class="container-fluid"> ... </div> |
为了展示效果明显，我们为div加入了边框样式：style="border:1px solid red;"
示例1：
<!-- 布局容器1：container 特点：居中，两端留白 -->
<div class="container" style="border:1px solid red;">
1111111111
</div>
二、bootstrap栅格系统（按行来划分的）
2.1 简述栅格系统
原始方式：table 缺点：加载慢 优点:简单
div+css 缺点：学习成本高 不易操作 优点:加载速度快,一个一个div加载,加载一个显示一个
bootstrap方式：
吸取了table和div+css各自的优点
为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列（不能多也不能少），一行中的12个列分别使用div，通过设定元素占用的列数来布局元素在页面上的展示位置，整体采用的是表格的样子。col-xx是代表的列。
帮助手册位置：全局CSS样式-----栅格系统
作用：可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。
注意：栅格系统一般都写在bootstrap的布局容器.container或者.container-fluid中（这两个所在的div里）
2.2 栅格系统的特点
- 栅格特点
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
- 行使用的样式
.row，列使用样式col-*-*元素内容应当放置于“列（column）”内
- 基本的书写方式必须是：容器–行—列---内容
- HTML表格：定义一个表格----行-----单元格
- 栅格参数：
col-屏幕尺寸-占用列数
为了方便显示元素大小，我们为展示元素都赋予了相同样式：border:1px solid red;height:100px;
示例1：一个元素占一行
<div class="container">
<div class="col-lg-12" style="border:1px solid red;height:100px;"> 11111 </div>
</div>
示例2：两个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-6" style="border:1px solid red;height:100px;"> 11111 </div>
<div class="col-lg-6" style="border:1px solid red;height:100px;"> 22222 </div>
</div>
</div>
示例3：四个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 11111 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 22222 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 33333 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 44444 </div>
</div>
</div>
注意： 一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列；
注意： 一个row下，如果设置的col列数总和大于12，那么超出的元素会另起一行排列；
注意： 行和列可以进行无限嵌套，嵌套方式必须为 列—行---列----行。。。。
注意： 一个row元素下，有12列的
2.3 栅格屏幕尺寸设置
屏幕尺寸简述：
- large : lg -------大屏幕，一般PC尺寸
- medium : md --------中等屏幕，小PC尺寸
- small: sm : sm -----小屏幕 ，iPad尺寸
- x small : xs -----超小屏幕，智能手机尺寸
注意：
若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占12列的设置。
例如：设置了col-md-4，那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12,col-xs-12
三、响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器
为了展示效果明显，我们为div加入了边框样式：style="border:1px solid red;"
显示:
.visible-xs-*
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
总结：响应式工具里面有两个功能（.visible-xxx-）（.hidden-xxx-）*号代表的参数有三种，block、inline、inline-block。
注意：隐藏某一类的某一个div之后，就得修改相应类的其他数字，使得其和等于12.
举例说明：
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8" />
<title>BootStrap的响应式开发</title>
<!--
引入BootStrap的css文件:我们可以使用css样式
-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--
BootStrap依赖于Jquery开发的,想要使用BootStrap的js文件,必须先引入JQuery文件
-->
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<style type="text/css">
/*使用元素选择器选择div*/
.row div{
/*给div添加一个边框*/
border: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-10 col-xs-5">col</div>
<div class="col-md-4 col-sm-2 col-xs-7">col</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2 col-xs-4">文本</div>
<!--设置div在手机端隐藏hidden-xs-->
<!--style="background-color: blueviolet;是为了分辨清楚。所以给它加个背景色-->
<div class="col-md-4 col-sm-4 hidden-xs" style="background-color: blueviolet;">手机端隐藏</div>
<div class="col-md-4 col-sm-6 col-xs-8">文本</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-1 col-xs-3">文本</div>
<!--设置在平板中可见,在手机、桌面、大屏中隐藏visible-sm-block-->
<div class="visible-sm-block col-sm-7">文本</div>
<div class="col-md-6 col-sm-4 col-xs-9">文本</div>
</div>
</div>
</body>
</html>
四、BootStrap的全局CSS样式
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
4.1 全局css样式–排版–对齐
.text-left:居左
.text-center:居中
.text-right:居右
4.1 全局css样式–列表–内联列表：将所有元素放置于同一行
.list-inline
<ul class="list-inline">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
4.2 全局css样式–表格–基本表格
.table
<table class="table">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
4.3 全局css样式–列表–条纹状表格(各行换色)
.table table-striped
4.4 全局css样式–列表–带边框的表格
class=“table table-bordered”
4.5 全局css样式–列表–鼠标悬停(移入移出事件)
class=“table table-hover”
4.6 全局css样式–图片(三种样式)
<img src="img/brand.jpg" alt="..." class="img-rounded">
<img src="img/brand.jpg" alt="..." class="img-circle">
<img src="img/brand.jpg" alt="..." class="img-thumbnail">
五、bootstrap常用组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
5.1 Glyphicons 字体图标
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
邮件 glyphicon glyphicon-envelope
音乐 glyphicon glyphicon-music
5.2 导航条
BootStrap已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。
帮助手册位置：组件-------导航条
默认导航条:
class=“navbar navbar-default”
反色的导航条:
class=“navbar navbar-inverse”
通过添加 .navbar-inverse 类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
<li ><a href="#">家电数码</a></li>
<li ><a href="#">电脑办公</a></li>
</ul>
</div>
</nav>
5.3 分页
class=“pagination”
分页:上一页和下一页
class=“pager”
六、BootStrap的JavaScript插件
jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。
6.1 轮播图
BootStrap已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。
轮播图DIV的定时换图属性：data-interval="毫秒值"
注意：多个轮播图必须修改轮播图的ID。
帮助手册位置：JavaScript插件— Carousel
6.2 模态框:
单独弹出一个框,让我们输入一些内容,这时候框后边的页面我们是不能操作的