《JavaEE》第九周day4学习笔记-Bootstrap、插件

一、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/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
引用博文：https://blog.csdn.net/csdnluolei/article/details/83510197（BootstrapTable入门Demo）