[JavaScript知识库] bootStrap基础

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> bootStrap基础 -> 正文阅读

[JavaScript知识库]bootStrap基础

validate插件

在这里插入图片描述

使用步骤

在这里插入图片描述

校验规则

在这里插入图片描述

案例

    <tr>
        <td>年龄</td>
        <td>
            <input type="text" name="age" id="age">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="注册" onclick="click1()">
        </td>
    </tr>
</table>

用户名
密码
确认密码
邮箱
出生日期

## Bootstrap概述![在这里插入图片描述](https://img-blog.csdnimg.cn/6e48681dfb764f0cb5ec0080907a2415.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAenNuYmFieQ==,size_20,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/21d85d72e8bb4f6cafa4530292c037b6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAenNuYmFieQ==,size_20,color_FFFFFF,t_70,g_se,x_16) ### 基本模板页面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6cda4859e79042338c0eec1f4af839c7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAenNuYmFieQ==,size_16,color_FFFFFF,t_70,g_se,x_16)

<!DOCTYPE html>
<html lang="en">
<head>
    <!--1.3个meta标签-->
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edag">
    <!--视口：适应移动设备宽度：设备的宽度，缩放比例 1 -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--2引用bootstrap的css样式-->
    <link href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

</head>
<body>
    <h1>欢迎使用bootstrap</h1>
    <!--3引用jquery和bootstrap.js-->
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>