-
<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>查看全部
-
在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性： 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。 还有一个最重要的参数不可缺少，data-toggle="tooltip"。 需要特别注意的是： 1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。 2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。查看全部
-
声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。查看全部
-
Bootstrap框架中的选项卡主要有两部分内容组成： 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs） 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示查看全部
-
在body中加监控 <body data-spy="scroll" data-target="#navbar-menu"> <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu"> </div> <h3 id="blog">Blog</h3> <p>…</p> </body> 注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。查看全部
-
JavaScript触发方法 除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。 <button class="btn btn-primary" type="button">点击我</button> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div> </div> JavaScript触发的弹出窗代码： $(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });查看全部
-
2种动态弹窗的使用方法<br> 声明式触发方法：<br> <br> 方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。 <!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div> 注意以下事项： 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)； 2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。 方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如： <!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div> 不过建议还是使用统一使用data-target的方式来触发。查看全部
-
1、 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区； 2、使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； 3、每个 panel 里的触发元素都要指定data-parent属性； 4、data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； 5、触发元素需要指定 data-toggle，并且值为 collapse； 6、触发元素都要指定 data-target属性； 7、data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
ootstrap中的“模态弹出框”有以下几个特点： 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。 3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。 固定在浏览器(源代码)实现： /*bootstrap.css文件第5379行～第5389行*/ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }查看全部
-
当浏览器视窗大于768px时，模态弹出窗的宽度为600px（源代码）实现：<br> <br> /*bootstrap.css文件第5479行～第5491行*/<br> @media (min-width: 768px) {<br> .modal-dialog {<br> width: 600px;<br> margin: 30px auto;<br> }<br> .modal-content {<br> -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);<br> box-shadow: 0 5px 15px rgba(0, 0, 0, .5);<br> }<br> .modal-sm {<br> width: 300px;<br> }<br> } 水平居中(源代码)实现： /*bootstrap.css文件第5407行～第5411行*/ .modal-dialog { position: relative; width: auto; margin: 10px; } 当浏览器视窗大于768px时，模态弹出窗的宽度为600px（源代码）实现： /*bootstrap.css文件第5479行～第5491行*/ @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } .modal-sm { width: 300px; } }查看全部
-
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
-
除了上面介绍的属性声明使用方法之外，按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义： 1、切换按钮状态（得到焦点）： $("#mybutton").button("toggle") 2、重新恢复按钮： $("#mybutton").button("reset") 如下代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意参数： $("#mybutton").button("任意字符参数名") 上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button> js代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });查看全部
-
注意，这里自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"。使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态： <button type="button" data-toggle="button" class="btn btn-primary">确认</button> 默认状态效果： 点击后的效果： 再次点击的效果：查看全部
-
注意，无法直接通过声明式触发此效果 通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示： <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示： $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); });查看全部
-
弹出框--提示框和弹出框的异同 从之前的学习可知，弹出框中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>查看全部
举报
0/150
提交
取消