-
弹出框（Popover）查看全部
-
提示框--其他的自定义属性 http://img1.sycdn.imooc.com//549162370001204910970690.jpg查看全部
-
JS触发提示框方法查看全部
-
在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的代码触发。查看全部
-
提示框(Tooltip)查看全部
-
使用Bootstrap框架的不方便： 很多时候在创建Web页面或应用的时候，需要自己独立的UI界面效果，此时仅仅使用BootStrap框架并不能满足我们自身的UI需求，也造成很多样式代码来覆盖bootstrap框架提供的样式代码 解决办法： 在Bootstrap框架中提供多种方式来自定义Bootstrap. 自定义Bootstrap框架主要有两种方式来实现： 1.使用CSS预处理器语言 使用CSS预处理器来重新定义Bootstrap框架有一个前提条件，那就是开发人员会使用LESS或Sass预处理器语言，否则要在此基础上实现Bootstrap框架自定义不是一件容易的事情 2.使用在线自定义设置 在线自定义设置主要包括三个部分： 1.Bootstrap组件 2.Bootstrap插件 3.Bootstrap的LESS版本变量设置查看全部
-
选项卡--JavaScript触发方法查看全部
-
在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。查看全部
-
选项卡--为选择卡添加fade样式 为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。 在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。查看全部
-
声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。查看全部
-
记一下查看全部
-
滚动监控器--在body中加监控 除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在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）。查看全部
-
监控对象是包含详细内容的div，不是导航条 data-target指向对应的导航条 需要注意要设置position:relative;才可以看到效果查看全部
-
滚动监控器查看全部
-
激活手风琴交互行为，要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle,并取值为collapse; 另一个是data-target,取值为各个面板内容的标识符，在a链接中不加入data-target="#panel1"也是可以的，但如果button按钮作为触发器就必须使用data-target="#panel1"语句了 定义data-parent属性，实现点击其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果button按钮作为触发器就必须使用data-target="#panel1"语句了） 通过示例，我们都可以看出以下几点： 1.使用panel的panel-title作为触元素，使用panel-body的父元素作为折叠区 2.使用一个panel-group来包含多个panel,从而实现手风情效果 3.每个panel里的触元素都要指定data-patent属性 4.data-parent属性值对应panel-ground样式元素的ID或者其他样式标识符 5.触发元素指定data-toggle,并且值为：collapse； 6.触发元素都要指定data-target属性 7.data-target属性的值对应panel-body的父元素的ID或者其他样式标识符查看全部
举报
0/150
提交
取消