-
按钮插件（Button） 首先要说的是这一节，讨论的不是按钮组件的制作，前面我们专门花了一节的篇幅介绍了Bootstrap框架中的“按钮Buttons”的制作。在此处我们要讨论的是Bootstrap框架中的“按钮插件”。 大家在平时制作Web页面时，或多或少碰到过下列这些情形： 点击按钮时，按钮文字变为“正在加载…”，一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态，比如禁用状态、正在加载状态、正常状态等； 按钮切换状态 按钮模仿单选按钮 按钮模仿复选按钮查看全部
-
警告框--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"); }); });查看全部
-
警告框--使用声明式触发警告框 如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert" <h3>使用a标签作为关闭按钮</h3> <div class="alert alert-warning" role="alert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a> </div> <h3>使用button按钮作为关闭按钮</h3> <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>查看全部
-
警告框--结构与样式 在介绍警告框结构之前，我们先来看看警告框插件的效果与警告框的效果在样式风格展示上有何不同： 相比之下，唯一不同的区别正如前面开头所言，警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可： <div class="alert " role="alert"> <buttonclass="close" type="button" >×</button> 恭喜您操作成功！ </div> 除此差别之外，警告框插件与警示框没有其他的区别。查看全部
-
<h3>示例</h3> <div class="alert alert-success" role="alert"> <button class="close" data-dismiss="alert" type="button" >×</button> <p>恭喜您操作成功！</p> </div>查看全部
-
弹出框--提示框和弹出框的异同 从之前的学习可知，弹出框中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>查看全部
-
弹出框--自定义结构属性 <button type="button" class="btn btn-default" data-toggle="popover" title="提示框居左" data-content="我是弹出框的内容" data-trigger="hover" data-delay="2000"> 猛击我吧 </button>查看全部
-
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button> <!--下面是代码任务部分--> <button type="button" class="btn btn-default" id="myPopover"> 猛击我吧 </button> $(function(){ $('[data-toggle="popover"]').popover(); }); $(function(){ $("#myPopover").popover({ title:"弹出框的标题", content:"弹出框的内容", placement:"right" }); });查看全部
-
弹出框--弹出框的结构 简单回忆一下，在制作提示框（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>查看全部
-
弹出框（Popover） 弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。查看全部
-
提示框--JS设置参数方法 除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数。 <script> $(function(){ $('#myTooltip1').tooltip({ title:"我是一个提示框，我在顶部出现", placement:"top" }); }); </script>查看全部
-
提示框--其他的自定义属性： <h4>data-delay="500"</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="data-delay='500'" data-delay="500"> 提示框延时500毫秒出现 </button>查看全部
-
提示框--JS触发提示框方法 Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); });查看全部
-
提示框--结构 Bootstrap框架中的tooltip的插件提供了四种不同的风格： 在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性： 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。 还有一个最重要的参数不可缺少，data-toggle="tooltip"。查看全部
-
提示框(Tooltip) <h3>按钮做的提示框</h3> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button> <h3>链接制作的提示框</h3> <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示框居左"> 提示框居左 </a> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); </script>查看全部
举报
0/150
提交
取消