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

玩转Bootstrap(JS插件篇)

  • 用户点击或悬浮对应的菜单项,能切换出对应的内容。 •选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) •底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示 <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="bulletin">公告内容面板</div> <div class="tab-pane" id="rule">规则内容面板</div> <div class="tab-pane" id="forum">论坛内容面板</div> <div class="tab-pane" id="security">安全内容面板</div> <div class="tab-pane" id="welfare">公益内容面板</div> </div>
    查看全部
    0 采集 收起 来源:选项卡(Tabs)

    2018-03-22

  • 模态事件
    查看全部
  • $("#mymodal").on('show.bs.modal',function(e){ alert('模态弹出前!'); }); $("#mymodal").on('shown.bs.modal',function(e){ alert('模态弹出后!'); }); $("#mymodal").on('hide.bs.modal',function(e){ alert('模态隐藏前!'); }); $("#mymodal").on('hidden.bs.modal',function(e){ alert('模态隐藏后!'); });
    查看全部
  • 关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。
    查看全部
  • 在Web页面中实现Bootstrap滚动监控器其实非常简单,接下来我们一步一步来看滚动监控器是如何设计的。 第一步:使用滚动监控器,首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。 第二步:设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接,锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。 第三步:设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,并且注意加入“data-target="#navbar-menu"”属性(这个属性值要与前面的nav标签的id名称保持一致) 第四步:为监控对象定义样式,设置容器scrollspy大小(设置高度目的是为了产生垂直滚动条)。 .scrollspy{ height:500px; font-size:20px; overflow:auto; }
    查看全部
  • 滚动监控器是Bootstrap提供的非常实用的JavaScript插件,被广泛应用到Web开发中。其表现形式是: 1、当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项。 2、用户拖动滚动条,当滚动到@mdo时,上面的@mdo导航项就会高亮显示 这是因为该插件可以自动检测滚动条到达哪个位置,然后在需要高亮的菜单元素上加了一个“active”样式。
    查看全部
    0 采集 收起 来源:滚动监控器

    2015-05-07

  • 和模态弹出窗一样,Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的,不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。 $('.dropdown-toggle').dropdown()
    查看全部
  • 用户只需要点击有向下三角形的按钮链接或者直接点击三角形就会弹出下拉菜单。实现这个效果,都是依赖于HTML相关元素自定义的属性完成。所以在编写HTML结构的时候必须满足下面的规则: ☑ 按照制作菜单的结构编写结构,如前面“下拉菜单”一节(5-21)所介绍 ☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown" 实现下拉菜单原理: Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。 简单的说,要制作下拉菜单,其结构基本如下: <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果触发下拉菜单的元素是一个链接元素,为了避免点击链接,页面跳到顶部,可以使用data-target="#"来替代href="#"
    查看全部
  • 和模态弹出窗一样,触发下拉菜单方式有两种,一种是属性声明式用法,另一种是JavaScript方法。
    查看全部
  • 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置 toggle show hide 事件设置: 模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后 show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性 shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件 hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发 hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发 $('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })
    查看全部
  • 手风琴标签
    查看全部
  • 自定义Bootstrap框架主要有两种方式来实现: 1.使用 CSS 预处理器语言 2.使用在线自定义设置 在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ,可以通过这里进行配置。 在线自定义设置主要包括三个部分: Bootstrap 组件 Bootstrap 插件 Bootstrap 的 LESS 版本变量设置
    查看全部
    0 采集 收起 来源:自定义Bootstrap

    2015-04-30

  • 固定定位--声明式触发固定定位 通过自定义属性 data 来触发。其主要包括两个参数: 1、data-spy:取值 affix,表示元素固定不变的。 2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px
    查看全部
  • 图片轮播--声明式触轮播图的播放(一) 声明式方法是通过定义 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 上。
    查看全部
  • 图片轮播--轮播图片的设计(三): 设计轮播图片控制器 在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!