突然领导让我搭前端页面，我好方，20分钟玩转Bootstrap
随着互联网的发展，人们对网页的体验度不断提升，不仅仅是满足功能需求，还要追求审美，追求好的体验度。作为一个后端，写前端好难，怎么写好前端？
什么是Bootstrap？
基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 而且它还支持响应式布局。
Bootstrap学习路线
了解
Flat Ui
Bootstrap select2
Bootstrap datetimepicker
Bootstrap datatables
font awesome官网
熟练使用
API:https://v3.bootcss.com/全局CSS样式
组件
JavaScript插件
Bootstrap菜鸟使用步骤
进入：https://v3.bootcss.com 下载
下载后的文件
如何在项目中引用Bootstrap框架
步骤：
1、 在项目中新建一个bootstrap目录，将提前下载好的文件copy到bootstrap文件目录中来（css、fonts、js）。并且将jquery的函数库插件也copy到项目中来。
2、 页面中引入的标签及文件
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>接下来打开API文档跟着操作
重点关注三个模块：全局css样式、组件、JavaScript插件
全部看完，实践跟着操作。
实例代码：
Title
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
重点难点-栅格布局
一定先理解12个格子
实例代码：
Title
-- col-xs-4 : 指小于768px的小设备
11 -- col-sm-4 ：指>=768px的设备
22 -- col-md-4 ：指>=992px设备
33 -- col-lg-4 ：值1200px设备
11
22
33
11
22
33
11
22
33
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
谁在最需要的时候轻轻拍着我肩膀，谁在最快乐的时候愿意和我分享。今天我的分享就到这里，大家有没有什么好的学习方法呢？欢迎来留言评论，和我们一起交流。如果喜欢我的文章，也欢迎大家关注、点赞、转发。我是丫丫，一个专注分享项目实战技能的IT从业者。