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

玩转Bootstrap(JS插件篇)

  • 使用声明式方法触发图片轮播:
    查看全部
  • 1.导入bootstrap的css<br> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><br> 2.导入jQurey的js<br> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br> 3.导入bootstrap的js<br> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    查看全部
  • 图片轮播效果在Bootstrap中通过carousel.js插件实现。
    查看全部
  • Question: 本节中指出通过示例,我们可以看出以下几点中的每个 panel 里的触发元素都要指定data-parent属性;这一点好像在示例中没有体现。。
    查看全部
  • 注意:在上面案例中不加入data-target="#panel1"也可以,因为使用的触发器是a且前面已经有了href="#panel1",但如是button按钮作为触发器就必须使用data-target="#panel1"语句了
    查看全部
  • 203
    需要注意的是,这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外,还提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高一片面前显示所对应的菜单项。
    查看全部
  • bootstrarp
    查看全部
  • 从之前的学习可知,弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同,只不过在其基础上增加了一个 data-content 属性,用来设置弹出框的内容。其实两插件也有略微的不同: 提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content) 两个插件的显示模板不同: 提示框tooltip的模板: <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 弹出框popover的模板: <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
    查看全部
  • 模态弹出框
    查看全部
  • 实现下拉菜单原理: Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。
    查看全部
  • 我们对JavaScript触发模态弹出窗的属性设置进行了介绍,现在我们接着对参数设置和事件设置进行介绍。 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下: 参数 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示 show $(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗 hide $(“#mymodal”).modal(“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) { // 处理代码... })
    查看全部
  • JavaScript触发的弹出窗代码: $(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });
    查看全部
  • 为模态弹出框增加过度动画效果: 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。 <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模态弹出窗 </button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content">
    查看全部
  • 这2种触发模态弹出窗的使用方法。 声明式触发方法: 方法一:模态弹出窗声明,只需要自定义两个必要的属性: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的方式来触发。
    查看全部
  • 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”,只不过他默认情况下是全屏黑色的: .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } 同样,给其添加了一个过渡动画,从fade到in,把opacity值从0变成了0.5。上图展示的就是in状态下的效果: .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .modal-backdrop.in { filter: alpha(opacity=50); opacity: .5; } 两种尺寸选择: 除此之外,Bootstrap框架还为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm”。其结构上稍做调整: <!-- 大尺寸模态弹出窗 --> <div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div> </div> </div> <!-- 小尺寸模态弹出窗 --> <divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-sm"> <divclass="modal-content"> ... </div> </div> </div>
    查看全部
代码语言

举报

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

微信扫码,参与3人拼团

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

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