框架概述
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架 本身，使用者要按照框架所规定的某种规范进行开发。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等。
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
框架： 大而全，一整套解决方案 插件： 小而专一，某个功能的解决方案
Bootstrap
Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。
它能开发PC端，也能开发移动端 Bootstrap JS插件使用步骤：
1. 引入相关js 文件
先引入jquery文件，注意的是这个是依赖于jq文件，因此要写在jq下面
2. 复制HTML 结构
3. 修改对应样式
4. 修改相应JS 参数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="bootstrap/js/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><style>.focus {width: 800px;height: 300px;background-color: pink;margin: 100px auto;}.carousel,.carousel img {width: 100%;height: 300px!important;}</style></head><body><div class="focus"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators 小圆点 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides 轮播图片 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="upload/banner.dpg" alt="..."><div class="carousel-caption">这是我的图片1</div></div><div class="item"><img src="upload/banner1.dpg" alt="..."><div class="carousel-caption">这是我的图片2</div></div><div class="item"><img src="upload/banner2.dpg" alt="..."><div class="carousel-caption">这是我的图片3</div></div>...</div><!-- Controls 左右箭头 --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><script>$('.carousel').carousel({interval: 2000})</script></body></html>
使用方式和插件差不多，需要什么就去复制什么
复制然后该属性 ，修改属性就可以了
阿里百秀轮播图
给中间添加轮播图。
首先还是导入文件
复制相应代码到特定位置，根据分析应该在news clearfix下
然后就根据内容修改相应属性
效果就实现了
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--[if lt IE 9]><script src="/html5shiv/3.7.2/html5shiv.min.js"></script><script src="/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 引入bootstrap 样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- 引入我们自己的首页样式文件 --><link rel="stylesheet" href="css/index.css"><!-- 先引入jquery js文件 --><script src="bootstrap/js/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><title>Document</title></head><body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href="#"><img src="images/logo.png" alt="" class="hidden-xs"><span class="visible-xs">阿里百秀</span></a></div><div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li><li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li><li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li></ul></div></header><article class="col-md-7"><!-- 新闻 --><div class="news clearfix"><ul><li><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="upload/banner.dpg" alt="..."><div class="carousel-caption">阿里百秀1</div></div><div class="item"><img src="upload/banner1.dpg" alt="..."><div class="carousel-caption">阿里百秀2</div></div><div class="item"><img src="upload/banner2.dpg" alt="..."><div class="carousel-caption">阿里百秀3</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><script>$('.carousel').carousel({interval: 2000})</script></li><li><a href="#"><img src="upload/1.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/2.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/3.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/4.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li></ul></div><!-- 发表 --><div class="publish"><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/3.jpg" alt=""></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="upload/zgboke.jpg" alt=""></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></a></aside></div></div></body></html>
