-
弹出框中HTML自定义的data属性和提示框中的自定义的data属性基本相同，只不过在其基础上添加了data-content属性，用来设置弹出框的内容。起始两插件也有略微的不同： 1.提示框tooltip的默认触发事件是hover和focus,而弹出框popover是click 2.提示框tooltip只有一个内容（title），而弹出框不仅设置标题（title）还可以设置内容（content） 提示框tooltip的模板： <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 弹出框popver模板: <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>查看全部
-
一个选项卡主要包括两部分，其一是菜单项，其二是内容面板。其HTML结构搭建关键一点在于，选项卡中链接的锚点与对应的面板内容容器的ID相匹配。在bootstrap框架中选项卡nav-tabs已带有样式，而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的查看全部
-
滚动监视器是如何设计的 第一步：首先在页面中加载插件（bootstrap.js或scrollspy.js） 第二部：设计一个带有下拉菜单的导航条，分别为导航条和下拉菜单定义一个描点链接，描点分别为“#blog”...,同时为导航条定义一个id值“navbar-menu”(id名称可自由定义，方便滚动监听。) 第三部：设计监控对象。这里将监控对象内容都放置在一个名为scrollspy(这个类名可以自由定义)的容器，其中放了多个子内容框。每个子内容框都有一个标题，而且每个标题的ID值与导航菜单中的描点链接名相对应，并且注意加入“data-target=#navbar-menu”（这个属性值要与前面的nav标签的id名称保持一致）查看全部
-
滚动监视器是如何设计的 第一步：首先在页面中加载插件（bootstrap.js或scrollspy.js） 第二部：设计一个带有下拉菜单的导航条，分别为导航条和下拉菜单定义一个描点链接，描点分别为“#blog”...,同时为导航条定义一个id值“navbar-menu”(id名称可自由定义，方便滚动监听。) 第三部：设计监控对象。这里将监控对象内容都放置在一个名为scrollspy(这个类名可以自由定义)的容器，其中放了多个子内容框。每个子内容框都有一个标题，而且每个标题的ID值与导航菜单中的描点链接名相对应，并且注意加入“data-target=#navbar-menu”（这个属性值要与前面的nav标签的id名称保持一致）查看全部
-
在BootStrap框架中为弹窗也添加了一个这样的蒙版样式“modal-backdrop” .modal-backdrop{ position:fixed; top:0; right:0;left:0;bottom:0;z-index:1040;background-color:#000; } .modal-backdrop.fade{ filter:alpha(opacity=0);opacity:0; } .modal-backdrop.fade{ filter:alpha(opacity=50);opacity:50; }查看全部
-
实现原理解析： bootstrap中的“模态弹出框”有以下几个特点： 1.模态弹出框是固定在浏览器中的 2.模态框宽度是自适应的，而且modal-dialog水平居中 固定在浏览器中源码实现 .modal{position:fixed;top:0;left:0;bottom:0;right:0;z-index:1050;display:none;overfollow:hidden;outline:none;-webkit-overflow-scroll:touch;} 水平居中（源代码实现） .modal-dialog{ position:relative;width:auto;margin:10px; }查看全部
-
一次性导入： bootstrap提供了一个单一的文件，这个文件包含了bootstrap的所有JavaScript插件，即bootstrap.js(压缩版本：bootstrap.min.js) <!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） --> <script src="js/bootstrap.min.js"></script> 单独导入： 为方便单独导入特效文件，bootstrapV3.2中提供了12种JavaScript插件，有动画过度（transitions）,模态弹窗（Modal）,下拉菜单（Dropdown）,滚动侦测（Scrollspy）,选项卡（tab ）,提示框（tooltips),弹出框（popover）,警告框（alert）,按钮（buttons）,折叠/手风琴（collapse）,图片轮播（caroasel）,自动定位浮标（Affix） 上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）查看全部
-
提示框参考查看全部
-
代码实现！！ 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。 3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。查看全部
-
模态弹出框参考模板查看全部
-
<!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#yl" role="tab" data-toggle="tab">娱乐</a></li> <li><a href="#fc" role="tab" data-toggle="tab">房产</a></li> <li><a href="#gn" role="tab" data-toggle="tab">国内</a></li> <li><a href="#gw" role="tab" data-toggle="tab">国外</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent2" class="tab-content"> <div class="tab-pane active" id="yl">娱乐内容面板</div> <div class="tab-pane" id="fc">房产内容面板</div> <div class="tab-pane" id="gn">国内内容面板</div> <div class="tab-pane" id="gw">国外内容面板</div> </div> data-toggle="tab" 这个为触发点查看全部
-
如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"：查看全部
-
data-toggle="dropdown" 在下拉的li上面加上查看全部
-
Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下： $(function(){ $('[data-toggle="tooltip"]').tooltip(); });查看全部
-
固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数： 1、data-spy：取值 affix，表示元素固定不变的。 2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。 data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。 data-offset-bottom 刚好与 data-offset-top 相反。 具体使用如下： <div data-spy="affix" data-offset="90">affix元素</div> 分开设置 data-offset 值方式： <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 我们来看一个简单的示例： <nav class="navbar navbar-default" role="navigation"> … </nav> <div class="container"> <div class="row"> <div class="col-md-3" id="sidebarMenu"> <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20"> … </ul> </div> <div class="col-md-9"> … </div> </div> </div> 注意，在 body 要声明滚动监控。 <body data-spy="scroll" data-target="sidebarMenu">查看全部
举报
0/150
提交
取消