-
提示框--JS触发提示框方法 Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); });查看全部
-
选项卡--JavaScript触发方法 除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。 调用方法: 在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
选项卡--胶囊式选项卡（nav-pills） 在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。查看全部
-
选项卡--为选择卡添加fade样式 为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。 在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。查看全部
-
1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。查看全部
-
滚动监控器--在body中加监控查看全部
-
滚动监控器--滚动监控器的设计查看全部
-
被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"查看全部
-
模态弹出框--JavaScript触发时的参数设置（二）查看全部
-
使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。 属性设置 模态弹出窗默认支持的自定义属性主要有：查看全部
-
$(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">查看全部
-
JavaScript触发可以这样写： $(function(){ $("#scrollspy").scrollspy({ target: "#navbar-menu" }); }) Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法： $(function(){ $("[data-spy='scroll']").each(function(){ var $spy=$(this).scrollspy("refresh"); }) }) 需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。查看全部
-
方法一：模态弹出窗声明，只需要自定义两个必要的属性：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的方式来触发。查看全部
-
$(function(){ $(".dropdown-toggle").dropdown("toggle"); }) $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
举报
0/150
提交
取消