Bootstrap教程
一、简介
概述
Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。2011年，twitter 的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集 -- BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所设计和建立，在 github上开源之后，迅速成为该站上最多人 watch&fork 的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap 建设的网站：界面清新、简洁;要素排版利落大方。Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。
特点
- 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。
- 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设
计，12列格网，样式向导文档。 - 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bootstrap4 基于 Sass 的 CSS 预处理
技术 - Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，
给用户提供更好的视觉使用体验。 - 丰富的组件
二、下载与使用
下载地址： http://getbootstrap.com/
引入文件：
- 拷贝 jquery.js到项目 js 中
- 拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
- 拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中
在HTML中的模板为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title> <!-- 载入Bootstrap 的css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
三、布局容器和栅格网格系统
布局容器：
- .container 类：用于固定宽度并支持响应式布局的容器。
- .container-fluid类：用于100% 宽度，占据全部视口（viewport）的容器
栅格网格系统
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
注意：列总和数不能超12，大于12，则自动换到下一行。
四、栅格参数
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px (一个列的每边分别 15px） | 30px（一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
//栅格基本结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
五、列偏移
语法：在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)
实例：
<div class="container">
<div class="row">
<div class="col-md-1">居第1列</div>
<div class="col-md-1">居第2列</div>
//向右偏移8个格子
<div class="col-md-1 col-md-offset-8">居第11列</div>
<div class="col-md-1">居第12列</div>
</div>
</div>
六、列排序
语法：
- 添加类名
col-md-push-*(其中星号代表移动的列组合数） - 添加类名
col-md-pull-*(其中星号代表移动的列组合数）
注意：pull往左、push往右
实例：
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">1列</div>
</div>
</div>
七、列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然
后在这个行容器中插入列.
实例：
<div class="container">
<div class="row">
<div class="col-md-2"> 我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-10">我的里面嵌套了一个网格
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>
八、表格
在使用Bootstrap的表格过程中，只需要 添加对应的类名就可以得到不同的表格风格。
基础样式：
- table：基础表格
附加样式：
- table-striped：斑马线表格
- table-bordered：带边框的表格
- table-hover：鼠标悬停高亮的表格
- table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
针对tr、th、td样式 提供了五种不同的类名，每种类名控制了行的不同背景颜色
| 类 | 描述 | 实例 |
|---|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 | #f5f5f5 |
| .success | 表示成功的操作 | #dff0d8 |
| .info | 表示信息变化的操作 | #d9edf7 |
| .warning | 表示一个警告的操作 | #fcf8e3 |
| .danger | 表示一个危险的操作 | #f2dede |
实例：
<table class="table table-bordered table-hover">
<tr class="active">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="danger">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
九、表单
表单中常见的元素主 要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
文本输入框
表单控件： .form-control .input-lg（较大） .input-sm（较小）
<div class="col-sm-3">
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>
下拉选择框
多行选择设置：multiple="multiple"
<div class="col-sm-3">
<select class="form-control">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select class="form-control" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</div>
单选按钮
-
垂直显示： .radio
-
水平显示： .radio-inline
<!-- 垂直显示 --> <div> <div class="radio"> <label><input type="radio" >男</label> </div> <div class="radio"> <label><input type="radio" >女</label> </div> </div> <!-- 水平显示 --> <div> <label class="radio-inline"> <input type="radio" >男 </label> <label class="radio-inline"> <input type="radio" >女 </label> </div>
复选按钮
-
垂直显示： .checkbox
-
水平显示： .checkbox-inline
<!-- 垂直显示 --> <div> <div class="checkbox"> <label> <input type="checkbox" >游戏 </label> </div> <div class="checkbox"> <label> <input type="checkbox" >学习 </label> </div> </div> <!-- 水平显示 --> <div> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> <label class="checkbox-inline"> <input type="checkbox" >学习 </label> </div>
按钮
-
基础样式：.btn
-
附加样式：.btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-link .btn-default
-
按钮禁用：.disabled
-
按钮大小：.btn-lg、.btn-sm 或 .btn-xs
<button class="btn">基础按钮</button> <button class="btn btn-danger">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-default">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-link">按钮</button>
十、表单布局
Bootstrap 提供了下列类型的表单布局：
- 垂直表单（默认）
- 内联表单
- 水平表单
垂直表单
创建基本表单的步骤：
- 向父<form>元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的<div>中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
实例：
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向<form> 标签添加class .form-inline。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
水平表单
如需创建一个水平布局的表单，请按下面的几个步骤进行：
-
向父 <form> 元素添加 class .form-horizontal。
-
把标签和控件放在一个带有 class .form-group 的 <div> 中。
-
向标签添加 class .control-label。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form>
十一、布局组件
图标可查阅阿里巴巴矢量图库：https://www.iconfont.cn/
注：其余组件可参照官方文档
十二、插件
Bootstrap 自带 12 种 jQuery 插件，扩展了功能。所有的插件依赖于 jQuery，必须在插件文件之前引用 jQuery。
注：需要使用插件时查阅文档即可很快实现