登录界面BootStramp模板

原创已于 2022-11-28 18:44:26 修改 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-11-23 17:44:03 首次发布

工具包同时被 2 个专栏收录

19 篇文章

订阅专栏

HTML页面模板

1 篇文章

订阅专栏

本文提供了一个HTML登录页面的完整代码示例，利用Bootstrap实现了响应式布局，并引入了Vue.js等前端框架，便于开发者快速搭建美观实用的登录界面。

一、效果图

二、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="height: 410px;border: 1px solid black;margin-top: 80px; border-radius: 8px; ">
            <div class="row">
                <!--                登录-->
                <div class="col-md-12" style="text-align: center;font-size: 50px;font-weight: bold;margin-top: 50px;">
                    登录
                </div>
            </div>
            <div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
                <div class="col-md-6 col-md-offset-3">
                    <label>用户名</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <!--                div bootstrap行-->
            <div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
                <div class="col-md-6 col-md-offset-3">
                    <label>密码</label>
                    <input type="password" class="form-control" />
                </div>
            </div>
            <div class="row" style="height: 60px;margin-bottom: 20px;margin-top: 40px">
                <div class="col-md-8 col-md-offset-2" style="text-align: center">
                    <button class="btn btn-primary" style="margin-right: 8px;" >登录</button>
                    <button class="btn btn-default" >重置</button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

方便大家使用和调用,节省代码时间