-
图片轮播--声明式触轮播图的播放（一）
触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。
声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：
data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上!!!!!!最重要这个，是用容器的div的id！！！！
data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。
基于上例，设置了自定义的 data 属性之后如下：
<div id="slidershow" class="carousel" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> <li data-target="#slidershow" data-slide-to="4"></li> <li data-target="#slidershow" data-slide-to="5"></li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。
<div id="slidershow" class="carousel slide" data-ride="carousel"> ... </div>
这样页面一加载就会有轮播效果了且单击向前向后按钮也可以切换图片了：
<!-- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放，无需使用初始化的js函数 -->
查看全部 -
导入jquery库和javascript插件 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多， 不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 <script> $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"right" }); }); </script>
查看全部 -
关于js的内容缓一缓！函数细节不清楚，以后再看！先搞清概况！分先后！查看全部
-
background-clip ： border-box | padding-box | content-box | no-clip 相关属性： background-origin | background-size 取值： border-box：从border区域向外裁剪背景。 padding-box：从padding区域向外裁剪背景。 content-box：从content区域向外裁剪背景。 no-clip：从border区域向外裁剪背景。查看全部
-
例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .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"); }); });查看全部
-
写代码不是从头到尾依照顺序写，应该是从主到次查看全部
-
.scrollspy-example的高度会影响效果： 过大，会导致滚动时出现“跳跃”。 问：【滚动监视器在窗口的位置会不会影响效果？】查看全部
-
在最后一种情况下 如果要连同div之外的button按钮一起都关闭掉的话，先给button按钮加个独有的id或者class属性，假设button的id="col"，然后设置 data-target="#myAlert,#col"，这样就可以连同按钮一起关闭了。当然 除此之外 你还可以通过这个关闭按钮去关闭其他的东西。总之，设置了data-dismiss属性的时候 通过data-target指向谁 就是关闭谁~查看全部
-
属性声明式方法基于2个条件 1.按照制作菜单的结构编写结构，如前面“下拉菜单”一节(5-21)所介绍 2.被点击的链接a或按钮需要添加自定义属性 data-toggle="dropdown"查看全部
-
$(function(){ $('.btn').click(function(){ //触发modal的元素button $('#themodal').modal(); //modal的id }); });查看全部
-
1.从Modal的触发元素和Modal两个部分入手 1.1.声明式触发方法(当触发元素为button): 触发元素button设置为： data-toggle="modal"(必须) data-target="#modal"(CSS的选择符/为模态弹出窗的ID值) Modal(div): 设置对应的id 1.2.(当触发元素为a): 触发元素a设置为 data-toggle="modal"(必须) href="#mymodal" （href属性代替data-target属性） Modal(div): 设置与href对应的id查看全部
-
要想在网页上加上modal弹出框，最外边包裹的是modal、其次是modal-dialog、最后真正的内容是放在modal-content。而modal-content中又包括三个部分：弹出框头部modal-header(主要用于放置标题和关闭按钮)、弹出框主体modal-body(用于放置内容)、弹出框底部modal-footer(主要用于放置操作按钮)查看全部
-
下拉菜单--属性声明式方法（一） 属性声明式方法： 1.一般下拉菜单都是出现在导航条中 2.在胶囊式导航中也具有下拉菜单查看全部
-
data-dismiss="modal":用于关闭模态窗口查看全部
举报