当前位置：首页 > article >正文

初试Bootstrap前端框架

article 2025/1/18 17:04:31

文章目录

一、Bootstrap概述
二、Bootstrap实例
- 1、创建网页
- 2、编写代码
- 3、代码说明
- 4、浏览网页，查看结果
- 5、登录按钮事件处理
- 6、浏览网页，查看结果
三、实战小结

一、Bootstrap概述

大家好，今天我们将一起学习一个非常流行的前端框架——Bootstrap。Bootstrap是一个用于快速开发响应式和移动优先网页的框架。它提供了丰富的CSS类和JavaScript插件，帮助我们简化布局、导航、表单、按钮等常见组件的创建。Bootstrap的核心特点包括易用性、灵活性和广泛的社区支持，这使得开发者能够高效地构建美观且功能强大的网站。

二、Bootstrap实例

1、创建网页

首先，我们将创建一个名为bootstrap_demo.html的网页文件。

2、编写代码

接下来，我们需要导入Bootstrap框架的样式和JavaScript文件，然后编写页面代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>演示Bootstrap</title>
	<!-- 导入Bootstrap框架的CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<!-- 导入Bootstrap框架的JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container mt-5">
		<div class="row justify-content-center">
			<div class="col-md-6">
				<div class="card">
					<div class="card-header">
						<h3 class="text-center">用户登录</h3>
					</div>
					<div class="card-body">
						<form action="#" method="post">
							<div class="mb-3 row">
								<label for="username" class="col-sm-3 col-form-label">账号</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
								</div>
							</div>
							<div class="mb-3 row">
								<label for="password" class="col-sm-3 col-form-label">密码</label>
								<div class="col-sm-9">
									<input type="password" class="form-control" id="password" placeholder="请输入密码" required>
								</div>
							</div>
							<div class="d-grid gap-2">
								<button type="submit" class="btn btn-primary btn-block">登录</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

3、代码说明

container mt-5：创建一个容器，并增加顶部外边距。
row justify-content-center：创建一个行，并使列居中对齐。
col-md-6：创建一个中等屏幕及以上宽度为6列的列。
card：创建一个卡片组件，用于包裹表单。
card-header：创建卡片的头部，包含标题。
text-center：设置标题居中对齐。
card-body：创建卡片的主体，包含表单内容。
form：创建一个表单，使用POST方法提交。
mb-3 row：创建一个行，并增加底部外边距。
col-sm-3 col-form-label：创建一个标签，设置标签宽度为3列。
col-sm-9：创建一个列，宽度为9列，用于包含输入框。
form-control：应用Bootstrap样式的文本输入框。
d-grid gap-2：创建一个网格布局，子元素占满整行，子元素之间添加间距。
btn btn-primary btn-block：创建一个按钮，设置按钮样式，并使其占满整行。

4、浏览网页，查看结果

不输入用户名和密码，单击【登录】按钮。
输入用户名但不输入密码，单击【登录】按钮。

5、登录按钮事件处理

导入jQuery库。
设置登录按钮的id属性为btnLogin。
编写脚本代码，处理登录按钮的单击事件。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>演示Bootstrap</title>
	<!-- 导入Bootstrap框架的CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<!-- 导入Bootstrap框架的JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
	<!-- 导入jQuery库 -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head>
<body>
	<div class="container mt-5">
		<div class="row justify-content-center">
			<div class="col-md-6">
				<div class="card">
					<div class="card-header">
						<h3 class="text-center">用户登录</h3>
					</div>
					<div class="card-body">
						<form action="#" method="post">
							<div class="mb-3 row">
								<label for="username" class="col-sm-3 col-form-label">账号</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
								</div>
							</div>
							<div class="mb-3 row">
								<label for="password" class="col-sm-3 col-form-label">密码</label>
								<div class="col-sm-9">
									<input type="password" class="form-control" id="password" placeholder="请输入密码" required>
								</div>
							</div>
							<div class="d-grid gap-2">
								<button id='btnLogin' type="submit" class="btn btn-primary btn-block">登录</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			// 编写登录按钮单击事件处理代码
			$('#btnLogin').click(function(){
				// 获取用户名和密码数据
				let username = $('#username').val();
				let password = $('#password').val();
				// 判断用户是否登录成功
				if (username == '无心剑' && password == '903213') {
					alert('恭喜，[' + username + ']，登录成功~');
				} else {
					alert('遗憾，[' + username + ']，登录失败~');
				}
			});
		});
	</script>
</body>
</html>