Bootstrap
- 概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简介灵活，使得Web开发更加的快捷。
- 框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化代码。
- 好处：①、定义了很多的css样式和js插件。②、响应式布局。【同一套页面可以兼容不同分别率的设备】
快速入门
- 下载：用于生产环境的 Bootstrap
- 复制这三个文件夹【css、fonts、js】到项目文件夹中。
然后再往js文件中导入jquery-3.2.1.min.js - 创建html页面，引入必要的资源文件。在Bootstrap中文网中上面的菜单栏找到“ 起步 ”，然后往下找到" 基本模板 " 基本模板如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
响应式布局
想要详细了解响应式布局，可参照文档👉全局 CSS 样式
- 同一套页面可以兼容不同分别率的设备。
- 实现：依赖于栅格系统。栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
Boostrap栅格系统：
步骤：
- 定义容器。相当于之前的table。
容器分类：
①、container：两边留白。
②、container-fluid：每一种设备都是100%宽度。 - 定义行。相当于之前的 tr 样式：row。
- 定义元素。 指定该元素在不同的设备上，所占的格子数目。样式：col - 设备 - 格子数目
![在这里插入图片描述]()
- 注意：
①、一行中如果格子数目超过12，则超出部分自动换行。
②、栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
③、如果真实设备宽度小于了设置栅格类属性的代码的最小值，一个元素会沾满一整行。
通过下面的代码我们可以观察到PC端和手机端不同响应式的格局。
<body>
<!-- 1.定义容器 -->
<div class="container-fluid">
<!-- 2.定义行 -->
<div class="row">
<!-- 3.定义元素、在大显示器上一行12个格子、在pad上一行6个格子-->
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
<div class="col-lg-1 col-sm-2 inner ">栅格</div>
</div>
</div>
</body>
手机端的响应式格局：
PC端响应式格局：
CSS样式和JS插件
全局CSS样式：
- 按钮：
class = " btn btn-default "其中的default可以修改为以下内容
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
- 图片：
class="img-responsive"指的是图片在任意模式都占100%
<img src="banner_1.jpg" class="img-responsive">
图片形状：
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
- 表格：
①、条纹状表格：通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。
<table class="table table-striped">
...
</table>
②、带边框的表格：添加 .table-bordered类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
...
</table>
③、鼠标悬停：通过添加 .table-hover类可以让 <tbody>中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
...
</table>
- 表单：Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
👉菜鸟教程Bootstrap 表单
JS组件导航条
- 默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
导航条内所包含元素溢出，通过修改@grid-float-breakpoint变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。依赖 JavaScript 插件，如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse内所包含的内容也将不可见。导航条的可访问性，务必使用<nav>元素，或者，如果使用的是通用的<div>元素的话，务必为导航条设置role="navigation"属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
Bootstrap组件分页条
Bootstrap中文网【分页】
默认分页：
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
禁用和激活状态：
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled类、给当前页添加 .active类。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
我们建议将 active 或 disabled 状态的链接（即<a>标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
JS插件Carousel【轮播图】
Bootstrap中文网JS插件Carousel【轮播图】
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>