运用 bootstrap 创建简单的登陆界面

好好学习月薪过万

已于 2023-08-16 10:21:26 修改

阅读量3.4k

点赞数 3

文章标签： vue.js 前端 javascript

于 2023-08-15 23:12:23 首次发布

本文链接：https://blog.csdn.net/m0_73384165/article/details/132303846

版权

在编辑网页前我们先了解一下 Bootstrap,

详细的可以查看 Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

什么是 Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

下载 Bootstrap

因为 Bootstrap 是国外的资源，所以打开的时候会有点慢，我这里使用的是 Bootstrap 图表库的文件，链接： Release v1.10.5 · twbs/icons · GitHub

点击下载 zip 压缩包就好了

代码展示

为了更好地展示这里就不把 css、js 与 html 代码分离了

这个是没有使用 Bootsrap 的版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登 录</title>

    <style>
        body {
            background: url("imgs/back.png") no-repeat;
            /*background-size: cover;*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="width: 400px; margin: 100px auto; text-align: center; border: 1px solid #eee; padding: 30px 0 50px 0;
         border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
            <div style="width: 80%; margin: 0 auto ">
                <div style="margin: 20px; color: #0c63e4">
                    <h2>登录</h2>
                </div>
                <div>
                    <span><i>用户名:  </i></span>
                    <input type="text" placeholder="用户名" v-model="username">
                </div>
                <div>
                    <span><i>密码:  </i></span>
                    <input type="password" placeholder="密码" v-model="password">
                </div>
                <div class="mb-3">
                    <button style="width: 80%" @click="login">登录</button>
                </div>
                <div style="text-align: right;"><a href="/register.html">前往注册</a></div>
            </div>
        </div>
    </div>
</body>
</html>

我们自己去写样式的话，就会像现在一样非常麻烦，所以这就是为什么我们要使用 Bootstrap。

现在我们开始使用 Bootstrap。

第一步、先将所需要的文件放入项目文件夹中，我这里是将文件按照文件类型区分。

这里使用的是 bootstrap-icons-1.10.5 里面的 css 文件 bootstrap.min.css 和 bootstrap-icons.css

切记必须带上 fonts 文件夹

第二步、连接 CSS 文件


    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-icons.css">

第三步、使用 class 来对标签进行美化

BootStrap 就是使用别人已经写好的 CSS 样式，通过 class 来引用已经写好的 CSS 样式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登 录</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        body {
            background: url("imgs/back.png") no-repeat;
            /*background-size: cover;*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="width: 400px; margin: 100px auto; text-align: center; border: 1px solid #eee; padding: 30px 0 50px 0;
         border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
            <div style="width: 80%; margin: 0 auto ">
                <div style="margin: 20px; color: #0c63e4">
                    <h2>登录</h2>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i>用户名: </i></span>
                    <input type="text" class="form-control" placeholder="用户名" v-model="username">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i>密码: </i></span>
                    <input type="password" class="form-control" placeholder="密码" v-model="password">
                </div>
                <div class="mb-3">
                    <button style="width: 100%" class="btn btn-primary" @click="login">登录</button>
                </div>
                <div style="text-align: right;"><a href="/register.html">前往注册</a></div>
            </div>
        </div>
    </div>
</body>
</html>

第四步、使用 Bootstrap 图标库进行改善。（可忽略）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登 录</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-icons.css">
    
    <style>
        body {
            background: url("imgs/back.png") no-repeat;
            /*background-size: cover;*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="width: 400px; margin: 100px auto; text-align: center; border: 1px solid #eee; padding: 30px 0 50px 0;
         border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
            <div style="width: 80%; margin: 0 auto ">
                <div style="margin: 20px; color: #0c63e4">
                    <h2>登录</h2>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="bi bi-person-circle"></i></span>
                    <input type="text" class="form-control" placeholder="用户名" v-model="username">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                    <input type="password" class="form-control" placeholder="密码" v-model="password">
                </div>
                <div class="mb-3">
                    <button style="width: 100%" class="btn btn-primary" @click="login">登录</button>
                </div>
                <div style="text-align: right;"><a href="/register.html">前往注册</a></div>
            </div>
        </div>
    </div>
</body>
</html>

好好学习月薪过万

关注

3
点赞
踩
34

收藏

觉得还不错? 一键收藏
1
评论
运用 bootstrap 创建简单的登陆界面

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
复制链接

扫一扫