Bootstrap用法（实现注册页面）

最新推荐文章于 2023-12-12 00:56:02 发布

VIP文章 1匹黑马

最新推荐文章于 2023-12-12 00:56:02 发布

阅读量5.2k

点赞数 1

分类专栏： PHP 文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_43573676/article/details/109391555

版权

文章目录

安装

去官网下载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>

最低0.47元/天解锁文章

1匹黑马

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
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><htm
复制链接

扫一扫