为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(JS插件篇)

  • 和模态弹出窗一样,触发下拉菜单方式有两种,一种是属性声明式用法,另一种是JavaScript方法。
    查看代码快照
  • 对参数设置和事件设置进行介绍。 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体
    查看代码快照
  • http://img.mukewang.com/544f0bd50001b34409020384.jpg
    查看代码快照
  • JavaScript触发方法 除了使用自定义属性触发模态弹出框之外,还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗。
    查看代码快照
  • http://img.mukewang.com/544f09480001d6c409000872.jpg<br> 除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。
  • 为模态弹出框增加过度动画效果: 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。
    查看代码快照
  • 方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")。例如: <!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div> 注意以下事项: 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器); 2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。 方法二:触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性,如: <!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div> 不过建议还是使用统一使用data-target的方式来触发。
    查看代码快照
  • transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。 默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果: ☑ 模态弹出窗(Modal)的滑动和渐变效果; ☑ 选项卡(Tab)的渐变效果; ☑ 警告框(Alert)的渐变效果; ☑ 图片轮播(Carousel)的滑动效果。 右侧举了一个“模态弹出窗(Modal)的滑动和渐变效果”源代码例子。
    查看代码快照
  • 自定义Bootstrap框架主要有两种方式来实现: 使用 CSS 预处理器语言 使用在线自定义设置 在线自定义设置主要包括三个部分: Bootstrap 组件 Bootstrap 插件 Bootstrap 的 LESS 版本变量设置
  • <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>
  • Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定
  • $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });
  • <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>
  • 第四步:设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 a.carousel-control 样式配合 a.left 和 a.right 来实现。其中left表示向前播放,right表示向后播放。其同样放在carousel容器内 通过两个 a 链接然后在内部定义要显示的小图标,一个是向前,一个是向后。 <span class="glyphicon glyphicon-chevron-right"> 这两个图标都显示在图片容器的上面(z-index的值大于carousel-inner的)。
  • 第三步:设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用 div.carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 div.item 容器来放置每张轮播的图片 在每个图片上还对应有自己的标题和描述内容,只需要在 div.item 中图片下面添加

举报

0/150
提交
取消
课程须知
本课程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、使用JS自由控制Bootstrap中提供的组件。
意见反馈 帮助中心 APP下载
官方微信