bootstrap 图片轮播.docx

上传人:b****8 文档编号:29868522 上传时间:2023-08-03 格式:DOCX 页数:24 大小:826.90KB
下载 相关 举报
bootstrap 图片轮播.docx_第1页
第1页 / 共24页
bootstrap 图片轮播.docx_第2页
第2页 / 共24页
bootstrap 图片轮播.docx_第3页
第3页 / 共24页
bootstrap 图片轮播.docx_第4页
第4页 / 共24页
bootstrap 图片轮播.docx_第5页
第5页 / 共24页
点击查看更多>>
下载资源
资源描述

bootstrap 图片轮播.docx

《bootstrap 图片轮播.docx》由会员分享,可在线阅读,更多相关《bootstrap 图片轮播.docx(24页珍藏版)》请在冰豆网上搜索。

bootstrap 图片轮播.docx

bootstrap图片轮播

1、导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。

他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。

因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入:

Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:

bootstrap.min.js)。

具体使用如下(或见右侧代码编辑器28-29行):

—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery-->

—-一次性导入所有Bootstrap的JavaScript插件(压缩版本)-->

特别声明:

jQuery版本库也可以加载你本地的jQuery版本。

单独导入:

为方便单独导入特效文件,BootstrapV3.2中提供了12种JavaScript插件,他们分别是:

  ☑ 动画过渡(Transitions):

对应的插件文件“transition.js”

  ☑ 模态弹窗(Modal):

对应的插件文件“modal.js”

  ☑ 下拉菜单(Dropdown):

对应的插件文件“dropdown.js”

  ☑ 滚动侦测(Scrollspy):

对应的插件文件“scrollspy.js”

  ☑ 选项卡(Tab):

对应的插件文件“tab.js”

  ☑ 提示框(Tooltips):

对应的插件文件“tooltop.js”

  ☑ 弹出框(Popover):

对应的插件文件“popover.js”

  ☑ 警告框(Alert):

对应的插件文件“alert.js”

  ☑ 按钮(Buttons):

对应的插件文件“button.js”

  ☑ 折叠/手风琴(Collapse):

对应的插件文件“collapse.js”

  ☑ 图片轮播Carousel:

对应的插件文件“carousel.js”

  ☑ 自动定位浮标Affix:

对应的插件文件“affix.js”

上述单独插件的下载可到github去下载(

下载后可查看js文件夹,如下图:

接下来依次向大家介绍这些插件如何使用,至于插件源码分析,在本系列不做过多的阐述,具体源码可以阅读各插件的代码。

注意:

在后面的例子中我们为了方便都采用一次性导入的方法,即引入“bootstrap.min.js”文件(小伙伴们可以在自己的项目中跟据需要选择单独导入还是一次性导入)。

 

2、模块弹出框

DOCTYPEhtml>

导入JavaScript插件

点击我

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭

保存

--/.modal-content-->

--/.modal-dialog-->

--/.modal-->

3、动画过渡(Transitions)

DOCTYPEhtml>

导入JavaScript插件

点击我

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭

保存

--/.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

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

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索

    当前位置:首页 > 人文社科 > 法律资料

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1