文章目录
1 什么是Bootstrap
1.1 介绍
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
1.2 特点
1.传统的网页制作，程序员消耗了大量的精力于网页中各个元素的css样式，一些特殊的网页效果。
2.Bootstrap使得程序员从中解放了出来，对元素的css样式进行了封装，不用过多的关心细节的css样式。
1.3 编辑器推荐
1.学习阶段使用webstorm或者简单的notepad++
2.以后熟悉了制作简单网页可以使用Jetstrap，LayoutIt，bootswatchr等的可视化工具。
1.4 浏览器推荐
我们使用chrome谷歌浏览器
2 搭建Bootstrap环境
css可以用link标签导入，js用script标签导入。
2.1 本地的bootstrap文件导入
1.https://v4.bootcss.com/docs/4.0/getting-started/download/ 我们这里选择了bootstrap4.
2.解压后，进入这个文件夹，我们看看文件的类型
（1）有一个css文件夹，里面都是css文件，这就是用来修饰网页文件里各种元素的样式
（2）有一个js文件夹，里面都是js文件，用来实现特效。同时这里js的代码大多依赖于jQuery库，因此我们可以去jQuery官网寻找对应的jQuery包。
3.
（1）在bootstrap文件夹下创建一个demo.html文件，用来引入测试文件。
（2）在demo.html文件里写入内容。引入bootstrap的css，js，jQuery的js.
<1>css通过link标签导入公共库。
<2>js文件可以通过link标签、script标签导入公共库。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"><!--用于http传输-->
<title>引入bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap4\css\bootstrap.min.css">
<script type="text/javascript" src="bootstrap4\script\bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
</head>
<body>
<button class="btn btn-info">hello world</button>
</body>
</html>
2.2 CDN（content delivery network）内容分发网络
1.CDN可以程序员提供API，这些API不需要下载到本地，只需要在文件头部指定相应的CDN地址，就可以实现像API在本地一样的效果。
2.寻找CDN，百度搜索寻找CDN，我们这里就用百度自己的CDN吧
（1）bootstrapCDN
css http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css
js http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js
（2）jQueryCDN http://libs.baidu.com/jquery/2.0.0/jquery.js
可以发现上面的版本都不太新，想要新的话就自己找吧，我暂时还找不到的。所以以后的都用本地的库了。
3.CDN导入，这样就不用关心文件所在的目录。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"><!--用于http传输-->
<title>引入bootstrap</title>
<link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
</head>
<body>
<button class="btn btn-info">hello world</button>
</body>
</html>
3 Bootstrap功能
3.1 CSS部分
1.标签元素有默认的效果，这里称为Bootstrap的全局样式。
2.通过类实现特殊的修饰效果。
3.关于类的概念复习
（1）与其他编程语言的class不同，其他编程语言里的类是用来创建对象的。而在这里的类的概念，更加相似于平常生活里的类的概念，用来表示一组相同特征的html标签元素。在css中可以使用类来修饰多个元素。
（2）一个html标签元素可以有多个class，用class=“类名1 类名2 …”表示，后面类的css效果会覆盖前面的css效果。
4.实例
复制下面的代码，可以发现通过简单的类名，就可以实现元素的效果了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"><!--用于http传输-->
<title>尝试bootstrap</title>
<link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" >Learn more »</a></p>
</div>
</body>
</html>
3.2 Javascript部分
待补充。\
4.Bootstrap的学习方法
4.1 了解
看慕课网的这个视频快速了解 https://www.imooc.com/learn/826
4.2 简单练习
跟着慕课网的这个视频快速练习 https://www.imooc.com/learn/141
4.3 详细了解
1.菜鸟教程了解大部分的内容 https://www.runoob.com/bootstrap/bootstrap-tutorial.html
2.Bootstrap3官方文档 https://v3.bootcss.com/css/
3.Bootstrap4官方文档 https://v4.bootcss.com/docs/4.0/getting-started/introduction/
先看3再看4，虽然4是最新的但是有些效果被砍掉了。所以看4的时候着重看新增加的效果
4.4 写博客
1.先在博客里列出提纲
2.在每个点下面写详细的内容
4.5 复习回顾
有时间的时候回复回去看提纲，知道哪个东西是用来干什么的，大概事先得到思路是什么。
用Xmind实现思维导图