一、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)