bootstrap(手风琴、图片轮换和固定定位)
2015-08-05 21:12
218 查看
手风琴(Collapse)
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏
手风琴–手风琴结构
手风琴最关键的部分,就是每个标题对应有一个内容,在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构
简单点就是一个触发器和一个折叠区:
手风琴–声明式触发手风琴(二)
第三步,为了把标题和内容区捆绑在一起,可以通过锚链接的方法,把标题区域和面板区连在一起:
第四步,控制面板内容区是否可视。在Bootstrap框架中,如果你想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse:
每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,
你只需要在collapse基础上再追加 in 样式:
手风琴–声明式触发手风琴(三)
第五步,激活手风琴交互行为。要完成交互行为,需要在标题链接中自定义两个属性,一个是data-toggle,并且取值为collapse;另一个是data-target,取值为各个面板内容区的标识符,比如说ID,
注意:在这个案例中不加入data-target=”#panel1”也可以,因为前面已经有了href=”#panel1”,但如是button按钮作为触发器就必须使用data-target=”#panel1”语句了。
第六步,定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。这个data-parent取值与手风琴面板容器的标识符相匹配,比如这个例子是指 #myAccordion
图片轮播(Carousel)
图片轮播效果在Web中常常能看到,很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放,
样式对应的文件:
☑ LESS版本:源文件carousel.less
图片轮播–轮播图片的设计(一)
一个轮播图片主要包括三个部分:
☑ 轮播的图片
☑ 轮播图片的计数器
☑ 轮播图片的控制器
第一步:设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。
第二步:设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作:
在 Bootstrap 框架中,轮播图片计数器,都是以圆点向大家呈现,其具体样式如下:
图片轮播–轮播图片的设计(二)
第三步:设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 item 容器来放置每张轮播的图片:
图片轮播–轮播图片的设计(三)
第四步:设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放,right表示向后播放
通过两个 a 链接然后在内部定义要显示的小图标,一个是向前,一个是向后。
图片轮播–声明式触轮播图的播放(一)
触发轮播图的播放方法也有两种,一种是声明式,另外一种是JavaScript方式。首先来看声明式方法。
声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:
data-ride 属性:取值 carousel,并且将其定义在 carousel 上。
data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上。
data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to=”2”,可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。
在这里需要注意可以为 #slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感。
图片轮播–声明式触轮播图的播放(二)
上面三个属性可以在容器元素上定义,也可以在标示符(或左右控制链接)上定义,但是后者定义的优先级比较高。
轮播不持续循环”和“轮播时间间隔为1秒”。
图片轮播–JavaScript触发方法
默认情况之下,如果 carousel 容器上定义了 data-ride=”carousel” 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下:
使用时,在初始化插件的时候可以传关相关的参数
实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:
.carousel(“cycle”):从左向右循环播放;
.carousel(“pause”):停止循环播放;
.carousel(“number”):循环到指定的帧,下标从0开始,类似数组;
.carousel(“prev”):返回到上一帧;
.carousel(“next”):下一帧
固定定位(Affix)
Affix 插件可以对任何元素进行固定定位,
样式文件:
☑ LESS版本:源文件 unilities.less
实现元素在浏览器窗口中固定(元素带有 affix 类名固定)和不固定(元素不带有 affix 类名)的效果。
Affix 效果常见的有以下三种:
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定
固定定位–声明式触发固定定位
通过自定义属性 data 来触发。其主要包括两个参数:
1、data-spy:取值 affix,表示元素固定不变的。
2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom。
data-offset-top 用来设置元素距离顶部的距离。比如 90,表示元素距离顶部 90px,当用户从顶部向下拖动滚动条,当滚动的距离大于 90px 时,affix 元素不再滚动,就会固定在浏览器窗口顶部。
data-offset-bottom 刚好与 data-offset-top 相反。
分开设置 data-offset 值方式:
自定义Bootstrap
解决方法:
自定义Bootstrap框架主要有两种方式来实现:
使用 CSS 预处理器语言
使用在线自定义设置
在线自定义设置主要包括三个部分:
Bootstrap 组件
Bootstrap 插件
Bootstrap 的 LESS 版本变量设置
在线自定义设置–Bootstrap组件
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">标题一对应的内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">标题二对应的内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">标题三对应的内容</div> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
手风琴–手风琴结构
手风琴最关键的部分,就是每个标题对应有一个内容,在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构
简单点就是一个触发器和一个折叠区:
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>
手风琴–声明式触发手风琴(二)
第三步,为了把标题和内容区捆绑在一起,可以通过锚链接的方法,把标题区域和面板区连在一起:
第四步,控制面板内容区是否可视。在Bootstrap框架中,如果你想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse:
每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,
你只需要在collapse基础上再追加 in 样式:
手风琴–声明式触发手风琴(三)
第五步,激活手风琴交互行为。要完成交互行为,需要在标题链接中自定义两个属性,一个是data-toggle,并且取值为collapse;另一个是data-target,取值为各个面板内容区的标识符,比如说ID,
注意:在这个案例中不加入data-target=”#panel1”也可以,因为前面已经有了href=”#panel1”,但如是button按钮作为触发器就必须使用data-target=”#panel1”语句了。
第六步,定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。这个data-parent取值与手风琴面板容器的标识符相匹配,比如这个例子是指 #myAccordion
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a> </h4> </div> ☑ 使用 panel 的 panel-title 做为触元素,使用panel-body的父元素作为折叠区; ☑ 使用一个 panel-group 来包含多个 panel,从而实现手风琴效果; ☑ 每个 panel 里的触发元素都要指定data-parent属性; ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符; ☑ 触发元素需要指定 data-toggle,并且值为 collapse; ☑ 触发元素都要指定 data-target属性; ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。
图片轮播(Carousel)
图片轮播效果在Web中常常能看到,很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放,
样式对应的文件:
☑ LESS版本:源文件carousel.less
图片轮播–轮播图片的设计(一)
一个轮播图片主要包括三个部分:
☑ 轮播的图片
☑ 轮播图片的计数器
☑ 轮播图片的控制器
第一步:设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。
<div id="slidershow" class="carousel"></div>
第二步:设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作:
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... </ol> </div>
在 Bootstrap 框架中,轮播图片计数器,都是以圆点向大家呈现,其具体样式如下:
.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 { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; } /*设置当前状态样式*/ .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff; }
图片轮播–轮播图片的设计(二)
第三步:设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 item 容器来放置每张轮播的图片:
图片轮播–轮播图片的设计(三)
第四步:设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放,right表示向后播放
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
通过两个 a 链接然后在内部定义要显示的小图标,一个是向前,一个是向后。
图片轮播–声明式触轮播图的播放(一)
触发轮播图的播放方法也有两种,一种是声明式,另外一种是JavaScript方式。首先来看声明式方法。
声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:
data-ride 属性:取值 carousel,并且将其定义在 carousel 上。
data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上。
data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to=”2”,可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。
<div id="slidershow" class="carousel" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> <li data-target="#slidershow" data-slide-to="4"></li> <li data-target="#slidershow" data-slide-to="5"></li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
在这里需要注意可以为 #slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感。
<div id="slidershow" class="carousel slide" data-ride="carousel"> ... </div>
图片轮播–声明式触轮播图的播放(二)
上面三个属性可以在容器元素上定义,也可以在标示符(或左右控制链接)上定义,但是后者定义的优先级比较高。
轮播不持续循环”和“轮播时间间隔为1秒”。
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div>
<div id="slidershow" class="carousel" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <a class="left carousel-control " href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body>
图片轮播–JavaScript触发方法
默认情况之下,如果 carousel 容器上定义了 data-ride=”carousel” 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下:
$(".carousel").carousel();
使用时,在初始化插件的时候可以传关相关的参数
$("#slidershow").carousel({ interval: 3000 });
实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:
.carousel(“cycle”):从左向右循环播放;
.carousel(“pause”):停止循环播放;
.carousel(“number”):循环到指定的帧,下标从0开始,类似数组;
.carousel(“prev”):返回到上一帧;
.carousel(“next”):下一帧
$(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });
固定定位(Affix)
Affix 插件可以对任何元素进行固定定位,
样式文件:
☑ LESS版本:源文件 unilities.less
实现元素在浏览器窗口中固定(元素带有 affix 类名固定)和不固定(元素不带有 affix 类名)的效果。
Affix 效果常见的有以下三种:
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定
固定定位–声明式触发固定定位
通过自定义属性 data 来触发。其主要包括两个参数:
1、data-spy:取值 affix,表示元素固定不变的。
2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom。
data-offset-top 用来设置元素距离顶部的距离。比如 90,表示元素距离顶部 90px,当用户从顶部向下拖动滚动条,当滚动的距离大于 90px 时,affix 元素不再滚动,就会固定在浏览器窗口顶部。
data-offset-bottom 刚好与 data-offset-top 相反。
<div data-spy="affix" data-offset="90">affix元素</div>
分开设置 data-offset 值方式:
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
自定义Bootstrap
解决方法:
自定义Bootstrap框架主要有两种方式来实现:
使用 CSS 预处理器语言
使用在线自定义设置
在线自定义设置主要包括三个部分:
Bootstrap 组件
Bootstrap 插件
Bootstrap 的 LESS 版本变量设置
在线自定义设置–Bootstrap组件
相关文章推荐
- 4 classes in Bootstrap Grid system
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
- bootstrap(警告框、按钮)
- bootstrap(选项卡、提示框和弹出框)
- BootStrap Progressbar 实现大文件上传的进度条
- bootstrap(下拉菜单与滚动监听)
- bootstrap实现模态框实例
- 封装了bootstrap的分页组件
- Bootstrap模板Metronic设置默认选中侧边栏
- json数据转化为bootstrap treeview填充数据格式util
- bootstrap(排版)
- bootstrap(支持的JavaScript插件)
- Bootstrap DatetimePicker官方API
- 設定 Bootstrap/SASS/Bower/gulp (Windows平台)
- BootStrap分页和标签
- BootStrap ifram,well
- BootStrap Panel
- bootstrap(组件)
- input text表单中嵌入select选项的方法
- tablesorter对于动态生成的table无法使用解决办法