-
http://v3.bootcss.com/customize/查看全部
-
第11行的data-target 属性 就是这个按钮 的目标对对象。点击这个按钮触发这个目标对象的代表事件，比如显示查看全部
-
如果去掉transition.js文件，淡入淡出的效果就会消失！查看全部
-
jquery的库一定要在bootstrap的插件库之前导入。真有这样才能能让bootstrap 运行， 因为插件库就是在jquery的基础上开发出来的！查看全部
-
http://img1.sycdn.imooc.com//5420d99d000191d806890476.jpg查看全部
-
自定义Bootstrap框架主要有两种方式来实现： 使用 CSS 预处理器语言 使用在线自定义设置 1.使用 CSS 预处理器语言 在学习 Bootstrap 框架的使用时，可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架，完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改，然后将修改好的源码重新编译出 bootstrap.css 文件，从而实现适合自己的 UI 界面风格。 使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件，那就是开发人员会使用 LESS 或 Sass 预处理器语言，否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心，就算你不懂 LESS 或 Sass 也不用怕，可以通过在线自定义设置来实现自定义 Bootstrap 框架。 2.使用在线自定义设置 在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ，可以通过这里进行配置。 在线自定义设置主要包括三个部分： Bootstrap 组件 Bootstrap 插件 Bootstrap 的 LESS 版本变量设置 我们只需要根据自己的需求设置完成之后，点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。查看全部
-
Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：<br> <br> 1、data-spy：取值 affix，表示元素固定不变的。<br> <br> 2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。<br> <br> data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。<br> data-offset-bottom 刚好与 data-offset-top 相反。<br> 具体使用如下：<br> <br> <div data-spy="affix" data-offset="90">affix元素</div><br> 分开设置 data-offset 值方式：<br> <br> <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。查看全部
-
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"); }); });查看全部
-
实际上，当我们给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"); }); });查看全部
-
除了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>查看全部
-
触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。 声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种： data-ride 属性：取值 carousel，并且将其定义在 carousel 上。 data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。 data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。 data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。查看全部
-
第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内：查看全部
-
第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：查看全部
-
第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：查看全部
举报
0/150
提交
取消