bootstrap 图片轮播.docx

1、bootstrap 图片轮播1、导入JavaScript插件Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。一次性导入：Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.mi

2、n.js）。具体使用如下（或见右侧代码编辑器28-29行）：script src=特别声明：jQuery版本库也可以加载你本地的jQuery版本。单独导入：为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：动画过渡（Transitions）:对应的插件文件“transition.js”模态弹窗（Modal）:对应的插件文件“modal.js”下拉菜单（Dropdown）：对应的插件文件“dropdown.js”滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”选项卡（Tab）：对应的插件文件“tab.js”提示框（T

3、ooltips）：对应的插件文件“tooltop.js”弹出框（Popover）：对应的插件文件“popover.js”警告框（Alert）：对应的插件文件“alert.js”按钮（Buttons）：对应的插件文件“button.js”折叠/手风琴（Collapse）：对应的插件文件“collapse.js”图片轮播Carousel：对应的插件文件“carousel.js”自动定位浮标Affix：对应的插件文件“affix.js”上述单独插件的下载可到github去下载（下载后可查看js文件夹，如下图：接下来依次向大家介绍这些插件如何使用，至于插件源码分析，在本系列不做过多的阐述，具体源码可以

4、阅读各插件的代码。注意：在后面的例子中我们为了方便都采用一次性导入的方法，即引入“bootstrap.min.js”文件（小伙伴们可以在自己的项目中跟据需要选择单独导入还是一次性导入）。2、模块弹出框导入JavaScript插件link rel=stylesheet href=/点击我 ×Close 模态弹出窗标题 模态弹出窗主体内容 关闭 保存 script src=script src= $(function() $(.btn).click(function() $(#mymodal).modal(toggle); ); );3、动画过渡（Transitions）导入JavaS

5、cript插件link rel=stylesheet href=/点击我 ×Close 模态弹出窗标题 模态弹出窗主体内容 关闭 保存 script src=script src=script src= $(function() $(.btn).click(function() $(#mymodal).modal(toggle); ); );4、模态弹出框-结构分析Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：弹出框头

6、部，一般使用“modal-header”表示，主要包括标题和关闭按钮弹出框主体，一般使用“modal-body”表示，弹出框的主要内容弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮模态弹出窗的结构如下： ×Close 模态弹出窗标题 模态弹出窗主体内容 关闭 保存 弹出窗的主体样式实现：但是对于一个模态弹出窗而言，modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。/*bootstrap.css文件第5412行第5423行*/.modal-content position: relative; background-

7、color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);除此之外，modal-content中的modal-header、moda

8、l-body和modal-footer三个部分样式设置：/*bootstrap.css文件第5441行第5461行*/.modal-header min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5;.modal-header .close margin-top: -2px;.modal-title margin: 0; line-height: 1.42857143;.modal-body position: relative; padding: 15px;.modal-footer paddin

9、g: 15px; text-align: right; border-top: 1px solid #e5e5e5;这三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理。/*bootstrap.css文件第5462行第5471行*/.modal-footer .btn + .btn margin-bottom: 0; margin-left: 5px;.modal-footer .btn-group .btn + .btn margin-left: -1px;.modal-footer .btn-block + .btn-blo

10、ck margin-left: 0;5、选项卡-触发切换效果同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置data-toggle=tab 2、并且设置data-target=对应内容面板的选择符(一般是ID); 如果是链接的话，还可以通过href=对应内容面板的选择符(一般是ID) 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个

11、独立的选择符（最好是ID）与选项卡中的data-target或href的值匹配。代码如下所示： 公告 规则 论坛 安全 公益 公告内容面板 规则内容面板 论坛内容面板 安全内容面板 公益内容面板运行效果如下：6、图片轮播（Carousel）插件对应的文件：carousel.js引用地址：script src=样式对应的文件：LESS版本：源文件carousel.lessSass版本：源文件_carousel.scss编译后的版本：源文件bootstrap.css第5715行第5905行图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放，如下图所示：上面

12、的轮播效果是6张广告图从右向左播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片。这种图片轮播效果，在Bootstrap框架中是通过Carousel插件来实现，在下面小节中我们将要介绍的是如何使用Carouse插件实现图片轮播效果。 link rel=stylesheet href= bodypadding:10px;margin:10px; 标题一 图片一内容简介 标题二/h4 图片二内容简介 标题三 图片三内容简介 ‹ › $(.carousel).carousel() script src= script src= 7、图片轮播

13、-轮播图片的设计（一）一个轮播图片主要包括三个部分： 轮播的图片 轮播图片的计数器 轮播图片的控制器复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。那么在 Bootstrap 框架中，轮播图是如何设计的呢？第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来

14、制作： 1 2 3 4 5 . 在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现，其具体样式如下：/*bootstrap.css文件第5835行第5863行*/.carousel-indicators position: absolute; /*整个计数区域绝对定位*/ bottom: 10px; /*距容器carousel底部10px*/ z-index: 15; /*设置其在Z轴的层级*/ /*让整个计数区水平居中*/ left: 50%; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none;.carousel-indicators li