使用bootstrap写一个实用的注册页面

最新推荐文章于 2023-04-12 15:30:27 发布

13号同学

最新推荐文章于 2023-04-12 15:30:27 发布

阅读量2k

点赞数 4

文章标签： bootstrap jquery

本文链接：https://blog.csdn.net/weixin_45758314/article/details/103789818

版权

功能：
1、可以查看/隐藏密码
2、校验手机号
3、发送信息60秒倒计时
在这里插入图片描述
准备好
jquery-1.10.2.min.js
bootstrap.min.js

代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册模态框</title>
<%--    <link rel="stylesheet" href="/css/bootstrap.min.css">--%>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <style>
        #h-btn{
   
            display:inline-block;
            /*border:1px solid red;*/
            width:30px;
            height:33px;
            position:absolute;
            right:2px;
            z-index:100;
            cursor: pointer;"
        }
        /*将number的按钮去掉*/
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button{
   
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        打开注册
    </button>
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog"><!--role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button-->
        <div class="modal-dialog">
            <div class="modal-content">
<%--                <div class="modal-header">--%>

<%--                </div>--%>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" style="display: block; margin-right: 20px;">&times;</span> <!-- aria-hidden="true" 没有什么作用（有没有都无所谓） -->
                </button>
                <h4 class="modal-title" id="myModallabel" style="font-family: 宋体; font-size: 20px; font-weight: 800; margin-left: 10px; margin-top: 10px;">欢迎注册</h4>
                <div class="modal-body">
                    <form class="form-group" role="form">
                        <div class="form-group input-group has-info has-feedback">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="number" class="form-control" name="username" placeholder=

最低0.47元/天解锁文章

13号同学

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap写一个实用的注册页面

功能：1、可以查看/隐藏密码2、校验手机号3、发送信息60秒倒计时准备好jquery-1.10.2.min.jsbootstrap.min.js代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <meta chars...
复制链接

扫一扫