BootStrap快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44905129/article/details/117992170

本文介绍如何快速上手 BootStrap 框架，包括官网资源、基本文件结构、固定宽度布局、流式布局及栅格系统的使用。同时探讨了如何正确引入 JS 插件，以及使用 BootStrap 进行页面设计的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.BootStrap快速入门

官网地址：https://www.bootcss.com/

在这里插入图片描述

下载：https://v3.bootcss.com/getting-started/

在这里插入图片描述

2.BootStrap引入问题:注意引入的顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>
		<!-- 注意引入的先后顺序 -->
		<!-- 如果要使用BootStrap的js插件，需先导入jQuery -->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<!-- 调用BootStrap的js插件，或者根据需要使用的js插件调用-->
		 <script src="bootStrap/js/bootstrap.min.js"></script>
		 
		 <h1>hello World</h1>
	</body>
</html>

在这里插入图片描述

3.固定宽度：两边留白

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>
		<!-- 注意引入的先后顺序 -->
		<!-- 如果要使用BootStrap的js插件，需先导入jQuery -->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<!-- 调用BootStrap的js插件，或者根据需要使用的js插件调用-->
		 <script src="bootStrap/js/bootstrap.min.js"></script>
		
		 <div class="container" style="background-color: #B2DBA1;height: 500px;">
		 	如果要使用BootStrap的js插件，需先导入jQuery 
		 </div>
		 
	</body>
</html>

4. 流式布局：两边不留白

		<div class="container-fluid" style="background-color: #B2DBA1;height: 500px;">
		 	如果要使用BootStrap的js插件，需先导入jQuery 
		 </div>

5.流式栅格系统

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>			
		<div class="container">
			<div class="row">
				<div class="col-md-4" style="background-color: bisque">4</div>
				<div class="col-md-8" style="background-color: deeppink">8</div>
			</div>
		</div>
		 
	</body>
</html>