bootstrap快速入门上手

Bootstrap是什么？

是一个简洁、直观、强悍的前端开发框架，它能让web开发更迅速、简单。Bootstrap是一个简洁、直观、强悍的前端开发框架，它能让web开发更迅速、简单。
我第一次接触这个东西的时候，咋一进去看文档有时候还有点蒙？毕竟文档都是官方术语，接触多了用多了就知道了，其实这里面有一个概念是这样的：

bootstrap是别人已经写好得前端样式(css)和逻辑文件(js)，我们如果从白手起家，一无所有开始写这些东西，要一个div，一个div的写样式再定义，然后交互的动态效果也是要写js逻辑代码或者css过渡动画代码，对于像快速建站的人来说，这样写会花费很多时间，你还要去定义class等于啥，style里面写啥样式，所以直接从bootstrap官网下载他们已经写好的css和js代码，引入你的html页面，直接在标签元素上写上bootstrap规定的class类名，就可以在浏览器上看到别人给你写好的精美样式。

说了这么多，我们就来实践一下，我们以bootstrap3.3.7为例：

第一步，引入包（也就是别人写好的css,js文件）

---

引入包的方式有两种，第一种是在线引入>>>

1，离线引入，也就是直接下载到你本地去使用

下载到的是一个压缩包

2，在线引入文件（直接复制bootstrap的CDN后粘贴到你的代码中就可以使用）

引入CSS的CDN（相当于应用了服务器上的css文件，只要有网你就能通过浏览器加载出来，无需自己拥有该CSS文件）

切换到下载页面的步骤和上面一样，
在线引入文件就无需下载，只要有网就能使用bootstrap的文件，但是前提是有网！！！
如下图所示，只需要引入这3个link或script标签中 (引入其中一个就可以行) 你需要的地址就行

第二步，引入并使用

方法一引入后的使用

上面我介绍了两种方法如何引入，现在开始使用bootstrap框架
将离线的包解压后，可以得到这样的文件：
新建html文档引入文件，然后在头部导入该bootstrap的css文件

再写入类名后标签即可以使用，为了规范符合官方风格，就懒得写了，可以直接复制他们的代码粘贴并且修改内容就行了

方法一的效果：我们打开浏览器看结果

是不是很容易实现了，把bootstrap的样式都拿过来了，只要写好相应标签，类名就能和bootstrap官网提供的样式一样，实在不想写，可以直接复制他们的代码粘贴并且修改内容就行了

方法二引入后的使用

在线引入只需要改link的链接就行，改成在线链接地址，记住，一定要有网

方法二的效果：效果依旧相同

本文的内容只是引入了css文件，要做一些有动态的效果时（比如轮播图），要引入bootstrap.js文件。

---

其他扩展

关于栅格化的使用

同理复制代码后粘贴即可以使用，该demo演示步骤：

1，复制栅格化的代码，然后粘贴到html文件里面

2，再百度随便搜索一些图片，复制图片的src然后在html文件引入，放在 <div class=“col-md-4”>里面

3，打开浏览器就可以查看

---

尝试栅格化+缩略图的应用

1，找到略缩图，然后复制代码粘贴到栅格化的 <div class=“col-md-4”>里面

2，尝试引入各种图片在栅格化里面

3，最终结果展示：

该篇只是简单的简略的演示，如需扩展其他功能可以依此类推到bootstarp中文网（https://www.bootcss.com/）进行查看