-
警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可： <div class="alert " role="alert"> <buttonclass="close" type="button" >×</button> 恭喜您操作成功！ </div> 除此差别之外，警告框插件与警示框没有其他的区别。查看全部
-
两种触发方式： $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); $(function(){ $('#myTooltip33').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' });查看全部
-
按钮提示框： <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button>查看全部
-
<script> $(function(){ $("#myTab2 a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); }) </script> </head> <body> <!-- 选项卡组件（菜单项nav-pills）--> <ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>查看全部
-
选项卡的设计：可以参考本页代码：查看全部
-
asfd查看全部
-
弹出框--提示框和弹出框的异同 从之前的学习可知，弹出框中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> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); }); </script>查看全部
-
<button type="button" class="btn btn-default" data-toggle="popover" title="提示框居左" data-trigger="hover click" data-delay="500" data-original-title="弹出框的标题" data-content="我是弹出框的内容"> 猛击我吧 </button> title的优先级高于data-original-title，只有title为空时，才会取data-original-title的值查看全部
-
弹出框--触发弹出框的方法 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" }); });查看全部
-
<script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script>查看全部
-
弹出框--弹出框的结构 简单回忆一下，在制作提示框（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)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多， 不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 <script> $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"right" }); }); </script>查看全部
-
<script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>查看全部
-
<h4>延时500毫秒出现提示框</h4> <button type="button" class="btn btn-default" data-delay="500" data-toggle="tooltip" data-placement="left" data-original-title="延时500毫秒出现提示框" data-animation data-animation="true">延时500毫秒出现提示框</button>查看全部
-
提示框--JS触发提示框方法 Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如： $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); });查看全部
举报
0/150
提交
取消