一、Bootstrap
（一）概念
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年 8月在 GitHub 上发布的开源产品。具有以下优点：
- 简单易用：安装、使用方式简单明了，并且为开源项目，被主流浏览器支持。
- 效果丰富：定义了很多css样式和js插件，开发者使用这些样式和插件即可获得丰富的页面效果。
- 响应式布局：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机，兼容不同分辨率的设备。
Bootstrap包的内容
- css：Bootstrap 自带全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的栅格系统。
- fonts：包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- js：包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
（二）栅格系统
Bootstrap的栅格系统可使同一套页面兼容不同分辨率的设备，将一行平均分成12份，自定义div元素占据的数量。
- 容器样式：container（两边留白）/container-fluid（全部占满）
- 行样式：class=“row”
- 元素样式：class=“col-设备代号-栅格数目”（xs:<768px，sm:≥768px，md:≥992px，lg:≥1200px）
（三）媒体查询
@media 媒体查询,媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
注意，980px为浏览器标准阈值，max-width小于980px时设置失效！
（四）字体/图标
Bootstrap 捆绑了 200 多种字体格式的字形，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
第三方字体库：
- FontAwesome：http://fontawesome.dashgame.com
- LineAwesome：https://icons8.com/line-awesome
- SocialIcons：http://www.socicon.com/chart.php
- 阿里巴巴矢量图标库：http://www.iconfont.cn
（五）CSS样式、组件、插件
1.全局CSS样式
按钮：class=“btn btn-default”
图片：class=“img-responsive”
表格：class=“table table-bordered table-hover”
表单：class=“form-control”
2.组件
导航条：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
分页条：为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。
3.插件
轮播图：用于在元素间循环的幻灯片组件，如轮播。不支持嵌套的轮播！
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
二、Bootstrap精美插件
（一）BootstrapValidator
1.插件说明
bootstrapValidator是一个前端表单数据校验的插件。
API：http://bootstrapvalidator.votintsev.ru/api/
引入文件：
<link href="plugin/css/bootstrapValidator.min.css">//校验样式
<script src="plugin/js/bootstrapValidator.min.js"></script>//校验逻辑
<script src="plugin/js/language/zh_CN.js"></script>//中文校验
2.插件使用
<form class="form-horizontal" id="registerForm">
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="inputUsername" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="inputPassword" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="inputEmail" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
3.添加验证规则
$(function () {
//表单验证
$("#registerForm").bootstrapValidator({
// 通用的错误提示语
message:"该字段无需验证",
// 指定验证后验证字段的提示字体图标
feedbackIcons: {
// Bootstrap 版本 >= 3.1.0
// 验证通过的输入框状态
valid: 'glyphicon glyphicon-ok',
// 验证失败的输入框状态
invalid: 'glyphicon glyphicon-remove',
// 验证中的状态
validating: 'glyphicon glyphicon-refresh'
},
/**
* 需要验证的输入框 注意跟input的name属性的名字一样
*/
fields:{
username:{
validators:{
notEmpty:{
message:"用户名不能为空"
},
stringLength:{
min:8,
max:30
//message:"用户名长度必须是8-30位"
}
}
},
password:{
validators:{
notEmpty:{
message:"密码不能为空"
},
regexp:{
regexp:/^[a-zA-Z]\w{7,15}$/,
message:"密码必须以字母开头长度为8-16位"
}
}
},
email:{
validators:{
notEmpty:{
message:"邮箱不能为空"
},
regexp:{
regexp:/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
message:"不符合邮箱格式"
}
}
}
}
});
})
4.提交数据
/**
* 1. 当提交按钮的[type=”submit”]时
*/
$form = $("#login").bootstrapValidator(...)
// 2.触发点击登录的事件
$form.on("success.form.bv", function (e) {
// 3.判断数据通过验证
let valid = $(this).data('bootstrapValidator').isValid();
if (valid) {
// 4.获取提交的url地址
let url = $(this).attr("action");
// &username=xxx&password=xxx
let data = $(this).serialize();
// 5.ajax提交数据
$.post(url, data, function (result) {
// 成功的回调函数
alert(result)
});
}
// 阻止事件冒泡
return false;
})
（二）Bootstrap Table
与一些最广泛使用的CSS框架集成的扩展表。（支持Bootstrap，语义UI，Bulma，Material Design，Foundation）Bootstrap Table旨在减少开发时间，并且不需要开发人员的特定知识，既轻量级又功能丰富。
官方网页：https://www.bootstrap-table.com.cn/
引入插件：
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
引用博文：https://blog.csdn.net/csdnluolei/article/details/83510197（BootstrapTable入门Demo）
