-
Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮查看全部
-
☑ 使用 panel 的 panel-title 做为触元素,使用panel-body的父元素作为折叠区; ☑ 使用一个 panel-group 来包含多个 panel,从而实现手风琴效果; ☑ 每个 panel 里的触发元素都要指定data-parent属性; ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符; ☑ 触发元素需要指定 data-toggle,并且值为 collapse; ☑ 触发元素都要指定 data-target属性; ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
好不容易码的查看全部
-
通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边。 还有一个最重要的参数不可缺少,data-toggle="tooltip"。查看全部
-
选项卡--胶囊式选项卡(nav-pills) 在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。查看全部
-
1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。查看全部
-
选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示查看全部
-
用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。查看全部
-
自定义结构属性查看全部
-
也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些data属性,如: $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"top" }); });查看全部
-
弹出框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> <script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script>查看全部
-
弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 <button type="button" class="btn btn-default" id="myPopover">猛击我吧</button> <script> $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"内容", placement:"bottom" }); }); </script>查看全部
-
示例代码着实坑爹啊查看全部
-
哭态也绝美 风继续吹 不忍远离查看全部
-
将html代码作为提示框内容: <h4>data-html="true"</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="<h1>data-html='true'</h1>" data-html="true">data-html="true"</button>查看全部
举报
0/150
提交
取消