-
通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示： <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示： $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); }); 运行效果如下：查看全部
-
警告框--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"); }); });查看全部
-
除了通过自定义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"); }); });查看全部
-
当用户点击“关闭”按钮就可以关闭整个警告框。 前面两个示例，操作关闭按钮时都是先查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。也就是说，关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例： <div class="alert alert-warning" role="alert" id="myAlert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>查看全部
-
弹出框--提示框和弹出框的异同 从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同： 提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content) 两个插件的显示模板不同：查看全部
-
方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。查看全部
-
简单回忆一下，在制作提示框（tooltip）时，可以使用<button>或者<a>标签元素，而且通过 data- 属性来声明提示框的信息，如下所示： <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一个提示框tooltip"> 鼠标移上来 </button> 而弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作，如下： <button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover" data-original-title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容" > 猛击我吧 </button> <a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover" title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容"> 猛击我吧 </a> 运行效果如下： 正如上图所示，弹出框的制作结构和提示框并无太多差别，但样式风格上还是有蛮大的区别。其主要定义了弹出框边框、圆角、背景、阴影以及三角形等样式：具体代码见右侧的bootstrap.css。查看全部
-
<div class="btn-group" data-toggle="buttons"> <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" data-loading-text="Loading...">确认</button> </div> <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> <script> $(function() { $('#mybutton').on('click', function() { $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); </script>查看全部
-
使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态查看全部
-
使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]查看全部
-
模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。 在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons". 注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了。查看全部
-
通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示： <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示： $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); });查看全部
-
除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。 $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可. 当用户点击“关闭”按钮就可以关闭整个警告框。 前面两个示例，操作关闭按钮时都是先查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。也就是说，关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。查看全部
-
提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)查看全部
举报
0/150
提交
取消