随着互联网的发展，人们对网页的体验度不断提升，不仅仅是满足功能需求，还要追求审美，追求好的体验度。作为一个后端，写前端好难，怎么写好前端？
什么是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、 页面中引入的标签及文件
<!--第一步：将bootstrap全局css样式文件引入-->
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>接下来打开API文档跟着操作
重点关注三个模块：全局css样式、组件、JavaScript插件
全部看完，实践跟着操作。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered table-hover">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>重点难点-栅格布局
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
div{
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- 设置栅栏式布局-->
<div class="container"><!--或者container-fluid-->
<div class="row"> -- col-xs-4 : 指小于768px的小设备
<div class="col-xs-4">11</div> -- col-sm-4 ：指>=768px的设备
<div class="col-xs-4">22</div> -- col-md-4 ：指>=992px设备
<div class="col-xs-4">33</div> -- col-lg-4 ：值1200px设备
</div>
<div class="row">
<div class="col-md-4">11</div>
<div class="col-md-4">22</div>
<div class="col-md-4">33</div>
</div>
<div class="row">
<div class="col-sm-4">11</div>
<div class="col-sm-4">22</div>
<div class="col-sm-4">33</div>
</div>
<div class="row">
<div class="col-lg-4">11</div>
<div class="col-lg-4">22</div>
<div class="col-lg-4">33</div>
</div>
</div>
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>谁在最需要的时候轻轻拍着我肩膀，谁在最快乐的时候愿意和我分享。今天我的分享就到这里，大家有没有什么好的学习方法呢？欢迎来留言评论，和我们一起交流。如果喜欢我的文章，也欢迎大家关注、点赞、转发。我是丫丫，一个专注分享项目实战技能的IT从业者。