Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 Bootstrap的下载，我们需要进入到官网中 https://www.bootcss.com/ 。 关于Bootstrap Validator的下载，它的下载地址是在GitHub中，大家可以自行下载。因为它没有友好的官方地址和官方文档，感觉不太友好不想用的小伙伴，也是可以使用Validate的！ 地址： https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip BootStrap为我们提供封装好的样式的各种组件、插件等等，我们只需要在项目中导入BootStrap所需文件即可，并在使用的时候遵循Bootstrap文档操作就OK！ 下载好Bootstrap之后，我们只需要将以下几个文件导入到项目中即可！ 注意： 因为再项目中我们会使用到jQuery，所以也导入进去。bootstrap文件夹和validator文件夹我也在IDEA中修改过，大家找好文件导入到项目中即可。 如果不愿意去分离的话，全部导入到项目也是ok的。但是在代码中引入的时候也不能引入错！ 最后在项目的JSP中引入Bootstrap！ 关于Bootstrap的其他使用，我在这里不一一列出了。大家可以去官网查看寻找适合自己的样式。 另外，Bootstrap的使用需要根据文档来使用，因为它是一个开源免费的封装好的库。所以在使用的时候必须遵循Bootstrap文档语法。否则，会没有效果，使用不了。 这里我贴几张图，大致可以看出Bootstrap文档内的资源内容！ 从官网来看，Bootstrap的资源是非常丰富的，而且操作简单，只需要导入文件，找到自己想要的黏贴复制到自己的项目中即可实现。再一次生命，一定要遵循其语法格式。 全局CSS样式 组件 JavaScript插件 关于Bootstrap Validator我这里说一下，并他的官网，可以自行查找使用。如果感觉不太友好的话，也可以使用Validate！ 地址： https://formvalidation.io/
Bootstrap概述
Bootstrap特点
Bootstrap的下载
Bootstrap Validator下载
Bootstrap Validator详细使用教程请参考： Bootstrap Validator超详细详细使用说明书Bootstrap的导入
<%--bootstrap.css--%> <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <%--bootstrapValidator.css--%> <link href="${pageContext.request.contextPath}/validator/css/bootstrapValidator.min.css" rel="stylesheet"> <%--jQuery.js--%> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <%--bootstrap.js--%> <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script> <%--bootstrapValidator.js--%> <script src="${pageContext.request.contextPath}/validator/js/bootstrapValidator.min.js"></script> Bootstrap和BootstrapValidator入门案例
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>入门案例</title> <%--bootstrap.css--%> <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <%--bootstrapValidator.css--%> <link href="${pageContext.request.contextPath}/validator/css/bootstrapValidator.min.css" rel="stylesheet"> <%--jQuery.js--%> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <%--bootstrap.js--%> <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script> <%--bootstrapValidator.js--%> <script src="${pageContext.request.contextPath}/validator/js/bootstrapValidator.min.js"></script> <script type="text/javascript"> $(function () { $("#myForm").bootstrapValidator({ message: "this is not valid field", fields: { username: { validators: { notEmpty: { message: "账户不能为空" }, stringLength: { message: "账户长度在6~10之间", min: 6, max: 10 }, regexp: { message: "账户由小写字母、数字组成", regexp: /^[a-z0-9]+$/ } } }, password: { validators: { notEmpty: { message: "密码不能为空" }, stringLength: { message: "密码长度在6~10之间", min: 6, max: 10 }, regexp: { message: "密码由小写字母、数字组成", regexp: /^[a-z0-9]+$/ }, different: { message: "账户和密码不能一致", field: "username" } } }, rePassword: { validators: { identical: { message: "两次密码不一致！", field: "password" } } }, email: { validators: { notEmpty: { message: "邮箱不能为空！" }, emailAddress: { message: "邮箱格式不正确！" } } } } }); }); </script> </head> <body> <form id="myForm" action="${pageContext.request.contextPath}/demo01" method="post"> <div class="form-group"> 账户：<input type="text" name="username"><br> </div> <div class="form-group"> 密码：<input type="text" name="password"><br> </div> <div class="form-group"> 确认密码：<input type="text" name="rePassword"><br> </div> <div class="form-group"> 邮箱：<input type="text" name="email"><br> </div> <div class="form-group"> <button type="submit">提交</button> <br> </div> </form> </body> </html> package com.mylifes1110.java.controller; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet(name = "DemoServlet", value = "/demo01") public class DemoServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); response.getWriter().write("哈哈哈！你终于提交成功了！"); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } } 关于Bootstrap的使用
关于Bootstrap Validator的使用
Bootstrap Validator详细使用教程请参考： Bootstrap Validator超详细详细使用说明书
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
