1、快速入门快速入门
1.1、BootStrap概述
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/81deba0a07246c90c2119d27f6926e0c.png)
1.2、BootStrap快速入门
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7bec4f84843c6f59985cc8953280ba88.png)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
2、BootStrap-栅格系统
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a5d0493f44f50564d44455d0af21b2a6.png)
3、Bootatrap-全局CSS样式
3.1、Bootatrap-全局CSS样式-按钮
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/571b9ebffc66970ce53ad4ec3f8a9311.png)
3.2、Bootatrap-全局CSS样式-表格
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/96794a66280037e2398fc9c88a8ef198.png)
4、Bootatrap-组件和插件
4.1、Bootatrap-组件-导航条&分页条
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/70f49dd8fb16e8cd08b1caf753cff648.png)
4.2、Bootatrap-插件-轮番图
5、案例-黑马旅游网
5.1、案例-黑马旅游网-分析
5.2、案例-黑马旅游网-页眉部分
5.3、案例-黑马旅游网-主体&页脚部分