Bootstrap

20

Validate

概念：

  • Validate是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证。
  • 一个标准的验证方法库。

作用：

  • 内置验证规则：
    • 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则。
  • 自定义验证规则：
    • 可以很方便地自定义验证规则。
  • 简单强大的验证信息提示：
    • 默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能。
  • 实时验证：
    • 可能通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。

使用步骤：

  • 导入jQuery文件。
  • 导入validate.js。
  • 页面加载成功后，对表单进行验证，$("选择器").validate();
  • 在validate中编写校验规则。

参考资料：

Getting Started - BootstrapValidator (votintsev.ru)

jQuery Validate | 菜鸟教程 (runoob.com)

校验规则：

先看个普通校验：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  </head>
  <body>
    <form
      action=""
      method="post"
      onsubmit="return checkFiled()"
      enctype="application/x-www-form-urlencoded"
    >
      <input
        type="text"
        name="username"
        id="username"
        placeholder="请输入用户名"
      /><br />
      <input
        type="password"
        name="pwd"
        id="pwd"
        placeholder="请输入密码"
      /><br />
      <input type="submit" value="提交" />
    </form>
    <script>
      function checkFiled() {
        var username = $("username").val();
        var pwd = $("pwd").val();
        if (username == null || username.trim().length == 0) {
          alert("username为空");
        }
        if (pwd == null || pwd.trim().length == 0) {
          alert("pwd为空");
        }
      }
    </script>
  </body>
</html>

使用validate进行校验：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <!-- 中文提示(不加messages时起作用) -->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  </head>
  <body>
    <form
      id="myform"
      action=""
      method=""
      enctype="application/x-www-form-urlencoded"
    >
      <input
        type="text"
        name="username"
        id="username"
        placeholder="请输入用户名"
      /><br />
      <input
        type="password"
        name="pwd"
        id="pwd"
        placeholder="请输入密码"
      /><br />
      <input type="submit" value="提交" />
    </form>
    <script>
      $(function () {
        $("#myform").validate({
          rules: {
            username: {
              required: true,
              maxlength: 10,
              minlength: 6,
            },
            pwd: {
              required: true,
              rangelength: [10, 6],
            },
          },
          messages: {
            username: {
              required: "用户名必填",
              maxlength: "最大长度为10",
              minlength: "最小长度为6",
            },
            pwd: {
              required: "密码必填",
              rangelength: "长度为${0}-${1}",
            },
          },
        });
      });
    </script>
  </body>
</html>

课堂案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <!-- 中文提示(不加messages时起作用) -->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  </head>
  <body>
    <form id="formId" action="">
      必填:<input type="text" name="username" /><br />
      必填数字:<input type="text" id="password" name="password" /><br />
      必填重复:<input type="text" name="repassword" /><br />
      最小值:<input type="text" name="minvalue" /><br />
      区间:<input type="text" name="qujian" /><br />
      <input type="submit" value="提交" />
    </form>
    <script>
      $(function () {
        $("#formId").validate({
          rules: {
            username: "required",
            password: {
              required: true,
              number: true,
            },
            repassword: {
              equalTo: "#password",
            },
            minvalue: {
              min: 10,
            },
            qujian: {
              range: [10, 20],
            },
          },
        });
      });
    </script>
  </body>
</html>

Bootstrap

概念：

  • 用于快速开发Web应用程序和网站的前端框架。
  • Bootstrap是基于HTML、CSS、JavaScript的。

特点：

  • 移动设备优先：自Bootstrap 3起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：

  • 所有的主流浏览器都支持Bootstrap。
  • 容易上手：
    • 只要具备HTML和CSS的基础知识，就可以学习Bootstrap。
  • 响应式设计：
    • Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

使用步骤：

  • 下载：http://www.bootcss.com/。
  • 导入bootstrap.css文件。
  • 导入jquery.js文件。
  • 导入bootstrap.js文件。
  • 将所有的内容放到布局容器中。

组成：

  • 全局CSS的样式。
  • 组件。
  • JS插件。

参考资料：

Bootstrap 教程 | 菜鸟教程 (runoob.com)

Bootstrap4 教程 | 菜鸟教程 (runoob.com)

基本模板页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 编码 -->
    <meta charset="UTF-8" />
    <!-- 和IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口：设备宽度、初始缩放比例1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- 固定宽度：和窗口大小有关系 -->
    <div class="container" style="background-color: aqua">
      <h1>欢迎使用bootstrap</h1>
    </div>
    <!-- 完整宽度：和视口窗口大小有关 -->
    <div class="container-fluid" style="background-color: blue">
      <h2>布局容器的使用</h2>
    </div>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

栅格系统

概念：

  • 一套响应式、移动设备优先的流式网格系统。
  • 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • 通过一系列的行（row）与列（column）的组合来创建页面布局。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>栅格系统</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      #div1 div {
        border: 1px solid green;
      }
      #div2 div {
        border: 1px solid yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="div1">
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">2</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">3</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">4</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">5</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">6</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">7</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">8</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">9</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">10</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">11</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">12</div>
      </div>
      <div id="div2">
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">1</div>
      </div>
    </div>
  </body>
</html>

排版

标题：

  • HTML 中的所有标题标签，h1到h6均可使用。
  • 提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。

对齐：

  • 通过文本对齐类，可以简单方便的将文字重新对齐。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 标题 -->
    <div class="container">
      <h1>阿松大</h1>
      <h2>阿松大</h2>
      <h3>阿松大</h3>
      <h4>阿松大</h4>
      <h5>阿松大</h5>
      <h6>阿松大</h6>
    </div>
    <hr />
    <!-- 对齐 -->
    <div class="container">
      <p class="text-center">阿松大</p>
      <p class="text-right">阿松大</p>
      <p class="text-left">阿松大</p>
    </div>
  </body>
</html>

表格

基本样式：.table。

行状态：通过状态类可以为行或单元格设置颜色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <table class="table table-striped table-bordered table-hover">
      <caption class="text-center">
        测试
      </caption>
      <tr>
        <th>书名</th>
        <th>书名</th>
        <th>书名</th>
      </tr>
      <tr class="info">
        <td>王五</td>
        <td>王五</td>
        <td>王五</td>
      </tr>
      <tr class="warning">
        <td>王五</td>
        <td>王五</td>
        <td>王五</td>
      </tr>
      <tr class="success">
        <td>王五</td>
        <td>王五</td>
        <td>王五</td>
      </tr>
    </table>
  </body>
</html>