-
模态弹出框--结构分析 Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
-
在 Bootstrap 框架中把模态弹出框统一称为 Modal 。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。查看全部
-
Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： 调用统一编译的bootstrap.js； 调用单一的过渡动画的JavaScript插件文件transition.js查看全部
-
动画过渡（Transitions）:对应的插件文件“transition.js” 模态弹窗（Modal）:对应的插件文件“modal.js” 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js” 选项卡（Tab）：对应的插件文件“tab.js” 提示框（Tooltips）：对应的插件文件“tooltop.js” 弹出框（Popover）：对应的插件文件“popover.js” 警告框（Alert）：对应的插件文件“alert.js” 按钮（Buttons）：对应的插件文件“button.js” 折叠/手风琴（Collapse）：对应的插件文件“collapse.js” 图片轮播Carousel：对应的插件文件“carousel.js” 自动定位浮标Affix：对应的插件文件“affix.js”查看全部
-
使用 'data-toggle="button"' 自动切换按钮为激活状态。查看全部
-
data-toggle="dropdown" still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.查看全部
-
$(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); $("#mymodal").on('show.bs.modal',function(){ alert('模态框即将显示！！！'); }); $("#mymodal").on('shown.bs.modal',function(){ alert('模态框已经显示！！！'); }); $("#mymodal").on('hide.bs.modal',function(){ alert('模态框即将关闭！！！'); }); $("#mymodal").on('hidden.bs.modal',function(){ alert('模态框已关闭！！！'); }); });查看全部
-
$('#myModal').modal() // 以默认值初始化查看全部
-
在 Bootstrap 框架中把模态弹出框统一称为 Modal 。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。查看全部
-
.modal('toggle') 手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。 eg:$('#myModal').modal('toggle')查看全部
-
在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。查看全部
-
弹出框中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>查看全部
-
在制作提示框（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>查看全部
-
弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的 $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"right" }); });查看全部
-
$(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); placement控制提示框位置.查看全部
举报
0/150
提交
取消