-
代码如下显示查看全部
-
滚动监控器--在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）。查看全部
-
滚动监控器： 1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。 2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示：查看全部
-
和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式: $(function(){ $(".dropdown-toggle").dropdown(); }) 还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法： $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })查看全部
-
在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下： 参数 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示 show $(“#mymodal”).modal(“show”) 触发时，显示模态弹出窗 hide $(“#mymodal”).modal(“hide”) 触发时，关闭模态弹出窗查看全部
-
滚动监控器--滚动监控器的设计查看全部
-
滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。其表现形式是： 1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。如Bootstrap官 2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示：查看全部
-
<body data-spy="scroll" data-target="#sidebarMenu"> 提示中少了# <body data-spy="scroll" data-target="#sidebarMenu"> 提示中少了#查看全部
-
和模态弹出窗一样，触发下拉菜单方式有两种，一种是属性声明式用法，另一种是JavaScript方法。查看全部
-
在线自定义设置--Bootstrap组件 在 Bootstrap 组件设置这一部分，提供了公共样式（Common CSS），UI 组件(Components)和 JavaScript 组件(JavaScript components)三个部分查看全部
-
固定定位--声明式触发固定定位 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">查看全部
-
固定定位（Affix） Affix 一词不好翻译，根据其效果，我将其译为固定定位。Affix 插件是从 Bootstrap V2.1 版本新增的一个插件，其主要功能就是通过插件给某个元素（需要固定的元素）添加或删除 affix 类名，实现元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。 Affix 效果常见的有以下三种： 顶部固定 侧边栏固定 底部固定查看全部
-
实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下： .carousel("cycle")：从左向右循环播放； .carousel("pause")：停止循环播放； .carousel("number")：循环到指定的帧，下标从0开始，类似数组； .carousel("prev")：返回到上一帧； .carousel("next")：下一帧 例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作，代码如下： $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });查看全部
-
提示框（tooltip）与弹出框（popover）的区别： 提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)查看全部
-
图片轮播--声明式触轮播图的播放（二） 除了data-ride="carousel"、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性： 属性名称 类型 默认值 描述 data-interval number 5000 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 data-pause string hover 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 data-wrap 布尔值 true 轮播是否持续循环 如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div> 上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。查看全部
举报
0/150
提交
取消