bootstrap 图片轮播.docx

模态弹出窗主体内容

关闭

保存

--/.modal-content-->

--/.modal-dialog-->

--/.modal-->

4、模态弹出框--结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

  ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

  ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

  ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

模态弹出窗的结构如下：

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭

保存

--/.modal-content-->

--/.modal-dialog-->

--/.modal-->

弹出窗的主体样式实现：

但是对于一个模态弹出窗而言，modal-content才是样式的关键。

其主要设置了弹出窗的边框、边距、背景色和阴影等样式。

/*bootstrap.css文件第5412行～第5423行*/

.modal-content{

position:

relative;

background-color:

#fff;

-webkit-background-clip:

padding-box;

background-clip:

padding-box;

border:

1pxsolid#999;

border:

1pxsolidrgba（0,0,0,.2）;

border-radius:

6px;

outline:

0;

-webkit-box-shadow:

03px9pxrgba（0,0,0,.5）;

box-shadow:

03px9pxrgba（0,0,0,.5）;

}

除此之外，modal-content中的modal-header、modal-body和modal-footer三个部分样式设置：

/*bootstrap.css文件第5441行～第5461行*/

.modal-header{

min-height:

16.42857143px;

padding:

15px;

border-bottom:

1pxsolid#e5e5e5;

}

.modal-header.close{

margin-top:

-2px;

}

.modal-title{

margin:

0;

line-height:

1.42857143;

}

.modal-body{

position:

relative;

padding:

15px;

}

.modal-footer{

padding:

15px;

text-align:

right;

border-top:

1pxsolid#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-block{

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都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

代码如下所示：

--选项卡组件（菜单项nav-tabs）-->

公告

--选项卡面板-->

公告内容面板

规则内容面板

论坛内容面板

安全内容面板

公益内容面板

运行效果如下：

 6、图片轮播（Carousel）

插件对应的文件：

carousel.js

引用地址：

样式对应的文件：

☑ LESS版本：

源文件carousel.less

☑ Sass版本：

源文件_carousel.scss

☑ 编译后的版本：

源文件bootstrap.css第5715行～第5905行

图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。

其主要显示的效果就是多幅图片轮回播放，如下图所示：

上面的轮播效果是6张广告图从右向左播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片。

这种图片轮播效果，在Bootstrap框架中是通过Carousel插件来实现，在下面小节中我们将要介绍的是如何使用Carouse插件实现图片轮播效果。

DOCTYPEhtml>

//images3.c-alt="">

标题一

图片一内容简介

//images3.c-alt="">

标题二/h4>

图片二内容简介

//images3.c-alt="">

标题三

图片三内容简介

‹

›

7、图片轮播--轮播图片的设计

（一）

一个轮播图片主要包括三个部分：

 ☑ 轮播的图片

 ☑ 轮播图片的计数器

 ☑ 轮播图片的控制器

复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。

那么在Bootstrap框架中，轮播图是如何设计的呢？

第一步：

设计轮播图片的容器。

在Bootstrap框架中采用carousel样式，并且给这个容器定义一个ID值，方便后面采用data属性来声明触发。

第二步：

设计轮播图片计数器。

在容器div.carousel的内部添加轮播图片计算器，采用carousel-indicators样式，其主要功能是显示当前图片的播放顺序（有几张图片就放置几个li），一般采用有顺列表来制作：

--设置图片轮播的顺序-->

1

...

在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-indicatorsli{

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

bootstrap 图片轮播 图片

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。