-
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>查看全部
-
第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 a.carousel-control 样式配合 a.left 和 a.right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内 通过两个 a 链接然后在内部定义要显示的小图标，一个是向前，一个是向后。 <span class="glyphicon glyphicon-chevron-right"> 这两个图标都显示在图片容器的上面（z-index的值大于carousel-inner的）。查看全部
-
第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 div.carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 div.item 容器来放置每张轮播的图片 在每个图片上还对应有自己的标题和描述内容,只需要在 div.item 中图片下面添加查看全部
-
一个轮播图片主要包括三个部分： ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器查看全部
-
☑ 使用 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或者其他样式标识符。查看全部
-
第五步，激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID 注意：在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。 第六步，定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。这个data-parent取值与手风琴面板容器panel-group的标识符相匹配查看全部
-
触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。 第一步，设计一个面板组合，里面有三个折叠区 第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式,并且在这里面添加内容panel-body。查看全部
-
将几个面板组合在一起，就是一个面板组合 panel-group 手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel简单点就是一个触发器和一个折叠区： <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>查看全部
-
通过下面的JavaScript代码来触发： $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
弹出框除了有标题 title 以外还增加了内容 content 部分。查看全部
-
删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用： $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })查看全部
-
为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。 在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。查看全部
-
声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"查看全部
-
data-toggle="dropdown" still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.查看全部
-
要制作下拉菜单，其结构基本如下： <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"： <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>查看全部
举报
0/150
提交
取消