本文介绍了如何使用Bootstrap来实现一个注册页面。首先从Bootstrap官网下载生产环境版本，并集成jQuery。接着，通过测试确保Bootstrap和jQuery可用。然后，展示了Bootstrap的基本用法，包括基本排版、表格、按钮和表单的测试。进一步讲解了栅格系统的应用，以及如何创建导航。最后，文章通过实例演示了如何利用Bootstrap构建一个留言板注册界面，并展示了最终效果。
安装
- 去官网下载bootstrap，下载用于生产环境的版本
- 下载jQuery，直接复制链接用迅雷下载js文件即可
- 提取bootstrap中的bootstrap.min.js和bootstrap.min.css
- 把三个文件（bootstrap.min.js、bootstrap.min.css、jquery-3.5.1.min.js）整合到一个js文件夹中
测试是否可用
上个代码看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css" />
</head>
<body>
<input type="button" name="测试按钮" value="测试按钮" />
<br>
<button>测试按钮</button>
<br>
<input type="button" name="" value="测试按钮" class="btn btn-default"/>
</body>
</html>
基本用法
基本排版测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css" />
</head>
<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</body>
</html>
运行结果：
表格测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css" />
</head>
<body>
<table class="table table-hover">
<tr>
<th>序号</th>
<th>年龄</th>
<th>姓名</th>
<th>住址</th>
</tr>
<tr>
<th>1</th>
<th>20</th>
<th>王五</th>
<th>山东</th>
</tr>
<tr>
<th>2</th>
<th>21</t
最低0.47元/天 解锁文章
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
