-
自定义Bootstrap框架主要有两种方式来实现： 1.使用 CSS 预处理器语言 前提条件，那就是开发人员会使用 LESS 或 Sass 预处理器语言 2.使用在线自定义设置 在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ，可以通过这里进行配置。查看全部
-
固定定位--声明式触发固定定位: 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 相反。 注意，在 body 要声明滚动监控。 <body data-spy="scroll" data-target="sidebarMenu">查看全部
-
图片轮播--JavaScript触发方法： 默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下： $(".carousel").carousel(); 也可以通过容器的 ID 来指定： 在 carousel() 方法中可以设置具体的参数，如： 属性名称 类型 默认值 描述 interval number 5000 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 pause string hover 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 wrap 布尔值 true 轮播是否持续循环 使用时，在初始化插件的时候可以传关相关的参数，如： $("#slidershow").carousel({ interval: 3000 }); 实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下： .carousel("cycle")：从左向右循环播放； .carousel("pause")：停止循环播放； .carousel("number")：循环到指定的帧，下标从0开始，类似数组； .carousel("prev")：返回到上一帧； .carousel("next")：下一帧查看全部
-
除了data-ride="carousel"、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性： 属性名称 类型 默认值 描述 data-interval number 5000 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div> 上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。 data-pause string hover 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 data-wrap 布尔值 true 轮播是否持续循环查看全部
-
图片轮播--声明式触轮播图的播放: 声明式方法是通过定义 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 上。 在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。查看全部
-
手风琴--声明式触发手风琴: <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> </div> 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区； 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； 每个 panel 里的触发元素都要指定data-parent属性； data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； 触发元素需要指定 data-toggle，并且值为 collapse； 触发元素都要指定 data-target属性； data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
按钮插件--JavaScript用法: 1、切换按钮状态（得到焦点）： $("#mybutton").button("toggle") 2、重新恢复按钮： $("#mybutton").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>查看全部
-
按钮插件--模拟复选按钮: 使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]查看全部
-
按钮插件--模拟单选择按钮: 模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。 在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons" 注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了。查看全部
-
弹出框--自定义结构属性: http://img1.sycdn.imooc.com//54af444c0001dd6a08600851.jpg查看全部
-
提示框--其他的自定义属性: http://img1.sycdn.imooc.com//549162370001204910970690.jpg查看全部
-
下拉菜单--JavaScript触发方法: 使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。 $(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"); })查看全部
-
模态弹出框--JavaScript触发时的参数设置（二） 参数设置： 参数 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示 show $(“#mymodal”).modal(“show”) 触发时，显示模态弹出窗 hide $(“#mymodal”).modal(“hide”) 触发时，关闭模态弹出窗查看全部
-
模态弹出框--JavaScript触发时的参数设置（一） 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。 属性设置 模态弹出窗默认支持的自定义属性主要有： http://img1.sycdn.imooc.com//544f0bd50001b34409020384.jpg查看全部
-
模态弹出框--模态弹出窗的使用（data-参数说明）: 以下是说明data-属性的一些用途 http://img1.sycdn.imooc.com//544f09480001d6c409000872.jpg查看全部
举报
0/150
提交
取消