按钮插件--按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态：

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

默认状态效果：

点击后的效果：

再次点击的效果：

注意，这里自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"。

按钮插件--模拟复选按钮

使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]，如下所示：

<div class="btn-group" data-toggle="buttons">     <label class="btn btn-primary">         <input type="checkbox" name="options" id="options1">电影     </label>     <label class="btn btn-primary">         <input type="checkbox" name="options" id="options2">音乐     </label>     <label class="btn btn-primary">         <input type="checkbox" name="options" id="options3">游戏     </label>     <label class="btn btn-primary">         <input type="checkbox" name="options" id="options4">摄影     </label> </div>

运行效果如下：

按钮插件--模拟单选择按钮

模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。
在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons"，如下所示：

 >     class="btn btn-primary">          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>

有div  label input，

data-toggle="button"是写在div内。

按钮插件--按钮加载状态

通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示：

<button class="btnbtn-primary" " type="button" id="loaddingBtn"></button>

通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示：

$(function(){     $("#loaddingBtn").(function () {         ;       }); });

运行效果如下：

点击前：

点击后：

注意，无法直接通过声明式触发此效果。

任务

警告框--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");     }); });

注意这个写法！！！特别是$(this).alert("close")中的alert("close")，好像是要弹出警告框而不是执行关闭警告框

运行效果如下：

告框--使用声明式触发警告框

如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，如下所示：

<div class="alert alert-success" role="alert">     <button  type="button" ></button>     <p>恭喜您操作成功！</p> </div>

运行效果如下：

点击X会关闭整个警告框。

其实关闭按钮，不一定非要用X号，也可以是只需普通的按钮元素或者链接元素，要保证关闭元素带有自定义属性data-dismiss="alert"即可，如下面示例所示：

<div class="alert alert-warning" role="alert">     <h4>谨防被骗</h4>     <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>    关闭</a> </div>

运行效果如下：

当用户点击“关闭”按钮就可以关闭整个警告框。

前面两个示例，操作关闭按钮时都是先查找 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 class="btn btn-danger" 关闭</button>

这种方式点击“关闭”按钮也可以关闭警告框，只不过“关闭”按钮自身没办法关闭，会一直显示在那，如下图所示：

警告框--结构与样式

在介绍警告框结构之前，我们先来看看警告框插件的效果与警告框的效果在样式风格展示上有何不同：

上图是“警示框”效果。

上图“警告框插件”效果。

相比之下，唯一不同的区别正如前面开头所言，警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：

<div class="alert " role="alert">     <buttonclass="close" type="button" >&times;</button>     恭喜您操作成功！ </div>

除此差别之外，警告框插件与警示框没有其他的区别。所以样式部分，在此不做过多阐述，大家可以回头看看第3章中有关于警示框的内容。

弹出框--提示框和弹出框的异同

从之前的学习可知，弹出框中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>

弹出框--自定义结构属性

同样在弹出框制作时，可以在HTML中定义下表所列的自定义属性：

举例：

 <button type="button"           class="btn btn-default"           data-toggle="popover"           data-placement="bottom"           title="提示框居左"           data-content="我是弹出框的内容"           data-trigger="hover"           data-dalay="600">           猛击我吧   </button>

弹出框--触发弹出框的方法

Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。
最简单的触发方式如下：

html代码：

<button type="button"          class="btn btn-default"          data-toggle="popover"          data-placement="left"          title="提示框居左"          data-content="我是弹出框的内容">         猛击我吧 </button>

js代码：

$(function(){     $('[data-toggle="popover"]').popover(); });

注意：上面这种方法注意要使用 data- 设置弹出框的属性。

使用JS设置参数：

html代码：

<button type="button"           class="btn btn-default"           id="myPopover">           猛击我吧 </button>

除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些data属性，如：

$(function(){     $('#myPopover').popover({         title:"我是弹出框的标题",         content:"我是弹出框的内容",         placement:"top"     }); });

如下面示例所示：

调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置，以便制作出各式各样的效果。

弹出框--弹出框的结构

简单回忆一下，在制作提示框（tooltip）时，可以使用<button>或者<a>标签元素，而且通过 data- 属性来声明提示框的信息

而弹出框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。

提示框--JS设置参数方法

除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数，主要包括：

表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用。

注意格式！！！！！

<script>
  $(function(){
    $('#myTooltip1').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:"top"
    });
  });
</script>

<script>

    $(function(){

       $('#myTooltip2').tooltip({

           html:"true",

           title:"<h>我爱你</h>",

           placement:"top",

           trigger:"click",

           delay:{hide:200,show:100}

       });

    });

</script>

提示框--其他的自定义属性

除此之外，提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义，如下表所示：

(单击可放大)   格式！！！

data-animation="true"

data-original-title="<h1>data-html='true'</h1>" data-html="true"

data-trigger="click"

 data-delay="500"

直接设置属性的正确的写法应该是这样：

提示框--JS触发提示框方法

Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

最简单的触发方式如下：

$(function(){     $(). });

除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：

$(function(){     $().tooltip({       }); });

运行的效果如下：

鼠标悬浮弹出提示时，右边button的会向左移动一点，why?

popover弹出界面会导致整个界面包括背景页面的滑动

提示框--结构

Bootstrap框架中的tooltip的插件提供了四种不同的风格：

提示信息在左边：

在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性：

• 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。

• 通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。

• 还有一个最重要的参数不可缺少，data-toggle="tooltip"。

如下所示：

<button type="button"          class="btnbtn-default"          data-toggle="tooltip"          data-placement="left"          data-original-title="提示框居左">         提示框居左 </button> <button type="button"          class="btnbtn-default"          data-toggle="tooltip"          data-placement="top"          data-original-title="提示框在顶部">         提示框在顶部 </button> <button type="button"          class="btnbtn-default"          data-toggle="tooltip"          data-placement="bottom"          data-original-title="提示框在底部">         提示框在底部 </button> <button type="button"          class="btnbtn-default"          data-toggle="tooltip"          data-placement="right"          data-original-title="提示框居右">         提示框居右 </button>

需要特别注意的是：

1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发!!!!!（所以右侧代码是没有动画效果的，不要着急，后面小节会有讲解。）