-
data-backdrop="static"点击背景不会关闭，设置为true点击背景会关闭模态框 data-keyboard="true"当按ESC按键时 模态框会关闭，设置为false时不会关闭查看全部
-
<!-- 触发模态弹出窗的元素 --> <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>查看全部
-
模态框直接调用一个html页面查看全部
-
动画过度包括 模态弹出窗 警告框 图片轮播 选择卡查看全部
-
图片轮播--JavaScript触发方法 默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下： $(".carousel").carousel(); 也可以通过容器的 ID 来指定： $("#slidershow").carousel(); 使用时，在初始化插件的时候可以传关相关的参数，如： $("#slidershow").carousel({ interval: 3000 }); 实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下： .carousel("cycle")：从左向右循环播放； .carousel("pause")：停止循环播放； .carousel("number")：循环到指定的帧，下标从0开始，类似数组； .carousel("prev")：返回到上一帧； .carousel("next")：下一帧 例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作，代码如下： $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });查看全部
-
钮插件--模拟单选择按钮 模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。 在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons"，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div>查看全部
-
警告框--JavaScript触发警告框 除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示： html代码: <div class="alert alert-warning" role="alert" id="myAlert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> <button type="button" class="btn btn-danger" id="close">关闭</button> </div> 通过下面的JavaScript代码来触发： $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
提示框--其他的自定义属性 除此之外，提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义查看全部
-
选项卡--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"); }); })查看全部
-
为防止在点击向左、向右按钮时，页面跳转到顶部，可以把两个<a>标签里的href属性换为data-target！！！查看全部
-
方法一：模态弹出窗声明，只需要自定义两个必要的属性：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的方式来触发。查看全部
-
1、data-spy：取值 affix，表示元素固定不变的。 2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。查看全部
-
使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； 每个 panel 里的触发元素都要指定data-parent属性； data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； 触发元素需要指定 data-toggle，并且值为 collapse； 触发元素都要指定 data-target属性； data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
1.选项卡导航链接中要设置 data-toggle="tab" 2.设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。查看全部
-
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
举报
0/150
提交
取消