在编辑网页前我们先了解一下 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>