Bootstrap概述
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。
Bootstrap特點
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 bootstrap。比如：Internet Explorer、Firefox、Opera、Google Chrome、Safari
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 bootstrap。
- 響應式設計：bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。
Bootstrap的下載
Bootstrap的下載，我們需要進入到官網中 https://www.bootcss.com/ 。
Bootstrap Validator下載
關於Bootstrap Validator的下載，它的下載地址是在GitHub中，大家可以自行下載。因爲它沒有友好的官方地址和官方文檔，感覺不太友好不想用的小夥伴，也是可以使用Validate的！
地址： https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip
Bootstrap Validator詳細使用教程請參考： Bootstrap Validator超詳細詳細使用說明書
Bootstrap的導入
BootStrap爲我們提供封裝好的樣式的各種組件、插件等等，我們只需要在項目中導入BootStrap所需文件即可，並在使用的時候遵循Bootstrap文檔操作就OK！
下載好Bootstrap之後，我們只需要將以下幾個文件導入到項目中即可！
注意： 因爲再項目中我們會使用到jQuery，所以也導入進去。bootstrap文件夾和validator文件夾我也在IDEA中修改過，大家找好文件導入到項目中即可。
如果不願意去分離的話，全部導入到項目也是ok的。但是在代碼中引入的時候也不能引入錯！
最後在項目的JSP中引入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的其他使用，我在這裏不一一列出了。大家可以去官網查看尋找適合自己的樣式。
另外，Bootstrap的使用需要根據文檔來使用，因爲它是一個開源免費的封裝好的庫。所以在使用的時候必須遵循Bootstrap文檔語法。否則，會沒有效果，使用不了。
這裏我貼幾張圖，大致可以看出Bootstrap文檔內的資源內容！
從官網來看，Bootstrap的資源是非常豐富的，而且操作簡單，只需要導入文件，找到自己想要的黏貼複製到自己的項目中即可實現。再一次生命，一定要遵循其語法格式。
全局CSS樣式
組件
JavaScript插件
關於Bootstrap Validator的使用
關於Bootstrap Validator我這裏說一下，並分享他的官網，可以自行查找使用。如果感覺不太友好的話，也可以使用Validate！
地址： https://formvalidation.io/
Bootstrap Validator詳細使用教程請參考： Bootstrap Validator超詳細詳細使用說明書