All knowledge system articles have been included in GitHub , welcome to Star! Thank you again, and I hope you enter Dachang soon!
GitHub address: https://github.com/Ziphtracks/JavaLearningmanual
Search and follow the WeChat public account "Code Out Offer", Brother Z will send you learning welfare resources!
Bootstrap overview
Bootstrap is a front-end framework for rapid development of Web applications and websites. Bootstrap is based on HTML, CSS, and JavaScript. Bootstrap was developed by Mark Otto and Jacob Thornton of Twitter. Bootstrap is an open source product released on GitHub in August 2011.
Bootstrap features
- Mobile device first: Since Bootstrap 3, the framework includes mobile device first styles throughout the library.
- Browser support: All major browsers support bootstrap. For example: Internet Explorer, Firefox, Opera, Google Chrome, Safari
- Easy to use: As long as you have the basic knowledge of HTML and CSS, you can start learning bootstrap.
- Responsive design: Bootstrap's responsive CSS can adapt to desktops, tablets and mobile phones.
Bootstrap download
To download Bootstrap, we need to enter the official website https://www.bootcss.com/.
Bootstrap Validator download
Regarding the download of Bootstrap Validator, its download address is in GitHub. You can download it yourself. Because it doesn't have a friendly official address and official documents, you can use Validate if you don't feel that it is friendly!
Address: https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip
Bootstrap Validator detailed tutorial, please refer to: Bootstrap Validator super detailed user manual
Bootstrap import
BootStrap provides us with various components, plug-ins, etc. with encapsulated styles. We only need to import the files required by BootStrap into the project, and follow the Bootstrap documentation when using it.
After downloading Bootstrap, we only need to import the following files into the project!
Note: Because we will use jQuery in the project, we also import it. I have also modified the bootstrap folder and validator folder in IDEA. You can find the files and import them into the project.
If you don't want to separate, it's ok to import all of them into the project. But you can't introduce errors when you introduce them into the code!
Finally, Bootstrap is introduced into the project's JSP!
<%--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>
Getting started with Bootstrap and 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);
}
}
About the use of Bootstrap
Regarding other uses of Bootstrap, I will not list them here. You can go to the official website to find a style that suits you.
In addition, the use of Bootstrap needs to be used according to the documentation, because it is an open source and free packaged library. So you must follow the Bootstrap document syntax when using it. Otherwise, it will have no effect and cannot be used.
Here I post a few pictures, you can roughly see the resource content in the Bootstrap document!
From the official website, Bootstrap's resources are very rich, and the operation is simple. You only need to import the file, find the paste you want and copy it to your project. Once again, we must follow its grammatical format.
Global CSS style
Component
JavaScript plugin
About the use of Bootstrap Validator
Let me talk about Bootstrap Validator and share his official website, you can find and use it yourself. If you feel unfriendly, you can also use Validate!
Address: https://formvalidation.io/
Bootstrap Validator detailed usage tutorial, please refer to: Bootstrap Validator super detailed and detailed instructions
