bootstarp(carousel)组件
##### 1.5.1.Bootstrap中轮播图插件叫作Carousel ##### 1.5.2.基本的轮播图实现 ```html
<!--
以下容器就是整个轮播图组件的整体,
注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
bootstrap.js会自动为当前元 素添加图片轮播的特效
-->
<div id="轮播图的ID" class="carousel slide" data-ride="carousel">
<!-- ol标签是图片轮播的控制点 -->
<ol class="carousel-indicators">
<!--
每一个li就是一个单独的控制点
data-target属性就是指定当前控制点控制的是哪一个轮播图,其目的是如果界面上有多个轮播图,便于区分到底控制哪一个
data-slide-to属性是指当前的li元素绑定的是第几个轮播项
注意,默认必须给其中某个li加上active,展示的时候就是焦点项目
-->
<li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
<li data-target="#轮播图的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是所有轮播项的容器盒子,
注意role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加一个语义
-->
<div class="carousel-inner" role="listbox">
<!-- 每一个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点 -->
<div class="item active">
<!-- 轮播项目中展示的图片 -->
<img src="example.jpg" alt="示例图片">
<div class="carousel-caption">
<!-- 标题或说明性文字,如果不需要,直接删除当前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张 -->
<!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
<!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反 -->
<a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
```
bootstarp(carousel)组件的更多相关文章
- ngx-bootstrap使用04 carousel组件
1 carousel 是一个通过循环播放图片.文本的幻灯片:就像一个旋转旋转木马一样,但是不支持嵌套使用 2 如何使用 2.1 搭建ngx-bootstrap使用环境 参见博文:点击前往 2.2 在模 ...
- 如何在某个按钮上触发 bootstarp Modal 组件
<?php Modal::begin([ 'id'=>'myModal', 'header' => '<h2>标题</h2>']); echo '内容'; M ...
- Bootstrap 之 Carousel
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap之Carousel不能自动播放的解决办法(转)
Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...
- Bootstrap之Carousel问题
一.不能自动播放的解决办法 1.默认使用Bootstrap的Carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了.无需使用初始化的js函 ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- Bootstarp的安装以及简单的使用方法(pycharm中)
一.安装 首先打开Bootstarp的官网:https://v3.bootcss.com 下载完成后,解压压缩包,把解压后的文件导入pycham中 在HTML页面中的style中导入bootstrap ...
- 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- [原]sencha touch之carousel
carousel组件是个非常不错的东东,自带可滑动的效果,效果如下图 上面部分可以左右滑动,下面部分可以上下滑动,效果还是不错的,app程序中很有用的布局 代码如下: Ext.application( ...
随机推荐
- jquery 单击table行事件和radio的选中事件冲突
原文地址:http://zhidao.baidu.com/link?url=HER7lu4jqejWUhWQO2nq6LZ6tf7vyhPZRADSL-xaBQSF4P4yftD9vg08Ss8HF- ...
- poj1458 dp入门
Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37551 Accepted: 15 ...
- Exception in thread "main" java.io.IOException: Failed to set permissions of path
在跑BuildForest的时候,编写了下面的程序: package test.breiman; import org.apache.mahout.classifier.df.mapreduce.Bu ...
- 灵活使用getconf命令来获取系统信息
http://blog.chinaunix.net/uid-23105261-id-109513.html 灵活使用getconf命令来获取系统信息 我们时常需要查询系统相关的信息,比如页面大小,整数 ...
- 关于httpHandlers、handlers和httpModules、modules的那些配置中的各种问题
在web.config中配置httpHandlers.handlers和httpModules.modules根据服务器环境不同设置各有不同 在IIS6及IIS7.0以上的经典模式中配置httpMod ...
- 前端学习——JQuery Ajax使用经验
0.前言 在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...
- c++单元测试框架googletest
一.概述 Googletest是一个用来写C++单元测试的框架,它是跨平台的,可应用在windows.linux.Mac等OS平台上: 代码框架: [root@docker googletest-re ...
- Mysql Binlog Dump原理
Register 首先,我们需要伪造一个slave,向master注册,这样master才会发送binlog event.注册很简单,就是向master发送COM_REGISTER_SLAVE命令,带 ...
- Mongodb常见错误
1. log目录没有创建,而在logpath中有设定 2. SECONDARY默认不可以读取数据,需要db.getMongo().setSlaveOk(); 3. SECONDARY不可以写数据 4. ...
- python基础教程
转自:http://www.cnblogs.com/vamei/archive/2012/09/13/2682778.html Python快速教程 作者:Vamei 出处:http://www.cn ...