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

玩转Bootstrap(JS插件篇)

  • 单独导入: 为方便单独导入特效文件,Bootstrap V3.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去下载(https://github.com/twbs/bootstrap)。
  • $在JS中本身只是一个符号而异,在JS里什么也不是。 但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。 后来,可能有些程序员JQUERY用得多了,发现$这个函数很好用,很方便,所以,在不用JQUERY的情况,一般自己也会自定义一个$函数。 即: function $(Nid){ return document.getElementById(Nid); } 就这么简单(在JSQUERY里可能稍微功能再强大一点,但主要还是我写的这个功能。) 以后在网页就不用每次使用document.getElementById("ID名")来获取元素,只用$('ID名')即可,非常简使了。
  • 1、$("#mymodal").modal("toggle"); toggle 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。 Jquery中toggle用法:$("p").toggle(); 2、动画效果 bootstrap-mini.js <div class="modal fade" id="mymodal"> fade样式增加了动画效果
  • 删除右侧的a标签的data-toggle="dropdown"属性以后再次点击并不能隐藏下拉列表,为什么?
    查看代码快照
  • 监控对象是包含详细内容的div,不是导航条 data-target指向对应的导航条 需要注意要设置position:relative;才可以看到效果
    查看代码快照
  • 最后的关闭按钮写在外面,关闭它上面的alert,再点击的话就会关闭它上面的所有alert
  • 模态弹出窗一样,触发下拉菜单方式有两种,一种是属性声明式用法, data-toggle="dropdown"。另一种是JavaScript方法。
  • 冒个泡,哈哈哈。……。……。。……
  • 在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性,然后通过下面的脚本来调用:
  • Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
    查看代码快照
  • 图片轮播--声明式触轮播图的播放(一)

    触发轮播图的播放方法也有两种,一种是声明式,另外一种是JavaScript方式。首先来看声明式方法。

    声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:

    • data-ride 属性:取值 carousel,并且将其定义在 carousel 上。

    • data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上!!!!!!最重要这个,是用容器的div的id!!!!

    • data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。

    • data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。

    基于上例,设置了自定义的 data 属性之后如下:

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

    这样页面一加载就会有轮播效果了且单击向前向后按钮也可以切换图片了:

    <!-- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放,无需使用初始化的js函数 -->

  • 导入jquery库和javascript插件 <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>
首页上一页1234567下一页尾页

举报

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