【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

文章目錄

- @[toc]
- - Bootstrap概述
  - Bootstrap特點
  - Bootstrap的下載下傳
  - Bootstrap Validator下載下傳
  - Bootstrap的導入
  - Bootstrap和BootstrapValidator入門案例
  - 關于Bootstrap的使用
  - 關于Bootstrap Validator的使用

所有知識體系文章，GitHub已收錄，歡迎Star！再次感謝，願你早日進入大廠！

GitHub位址： https://github.com/Ziphtracks/JavaLearningmanual

搜尋關注微信公衆号“碼出Offer”，Z哥送你學習福利資源！

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使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

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之後，我們隻需要将以下幾個檔案導入到項目中即可！

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

注意：因為再項目中我們會使用到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樣式

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

元件

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

JavaScript插件

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

關于Bootstrap Validator的使用

關于Bootstrap Validator我這裡說一下，并分享他的官網，可以自行查找使用。如果感覺不太友好的話，也可以使用Validate！

位址： https://formvalidation.io/

Bootstrap Validator詳細使用教程請參考： Bootstrap Validator超詳細詳細使用說明書

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

【Bootstrap使用說明書】Bootstrap和Bootstrap Validator的簡單使用步驟

文章目錄

Bootstrap概述

Bootstrap特點

Bootstrap的下載下傳

Bootstrap Validator下載下傳

Bootstrap的導入

Bootstrap和BootstrapValidator入門案例

關于Bootstrap的使用

關于Bootstrap Validator的使用

繼續閱讀

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method