Bootstrap 轮播

时间:2021-12-05 23:17:42

Bootstrap 轮播

1、要设置一个轮播界面,需要注意以下几点:

  1)根div 必须为 class="carousel slide"

  2)根div下含有三块子div

    a)<ol class="carousel-indicators">

    b)<div class="carousel-inner">

    c)<a class="carousel-control left"> 以及 <a class="carousel-control right"

<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;
</a>
</div>

  Bootstrap 轮播

2、<div class="carousel-caption">可以添加标题

3、

  • 通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
    • 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
    • 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
    • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
  • 通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示:
    $('.carousel').carousel()

    

参考:http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

Bootstrap 轮播的更多相关文章

  1. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  2. Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  3. bootstrap轮播组件&comma;大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  4. bootstrap轮播组件之&OpenCurlyDoubleQuote;如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  5. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  6. Bootstrap 轮播(Carousel)详解

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...

  7. 第二百四十八节,Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  8. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. 第十篇&period;bootstrap轮播

    使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. <div id="carous ...

随机推荐

  1. 学习ASP&period;NET Core,你必须了解无处不在的&OpenCurlyDoubleQuote;依赖注入”

    ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middleware自身的实现,以及构建在这个管道的应用,都需要 ...

  2. bzoj1008 &lbrack;HNOI2008&rsqb;越狱

    1008: [HNOI2008]越狱 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5099  Solved: 2207 Description *有 ...

  3. Cache-control使用Cache-control&colon;private学习笔记

    其作用根据不同的重新浏览方式,分为以下几种情况:(1).打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器.而如果指定了max-ag ...

  4. ini 文件

    INI文件是一个无固定标准格式的配置文件.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程序也会采用INI文件做为设置程序之用.视窗操作系统后来以注册表的形式替换掉I ...

  5. 使用jquery构建Metro style 返回顶部

    个人一直对metro风格的东西情有独钟,偶然间在腾讯网看到一款小插件,蓝色Metro风格的,所以决定把它放到我的博客中,这样做应该不会有版权问题吧orz.. Complete code 后言 我把他原 ...

  6. Java Networking&colon; InetAddress

    The InetAddress is Java's representation of an IP address. Instances of this class are used together ...

  7. easyui page添加文本,js验证码

    onLoadSuccess: function (db) { //db是后台数据的返回结果集 $.ajax({ url: "AjaxSource/Buex.ashx", data: ...

  8. CentOS7 编译安装LNMP

    (文章来自:http://www.cnblogs.com/i-it/p/3841840.html,请各位到这个网址去看原文的) LNMP(Linux-Nginx-Mysql-PHP),本文在CentO ...

  9. Spring&period;net 学习IOC------属性注入

    我们就完成我们的第一个spring.net学习IOC的"hello world!". 1> 我们新建一个C# 的控制台项目名为Spring,然后引入Spring.Core.d ...

  10. mysql建立索引的几大原则

    (转)仅供自己学习,特此记录 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确定某条记录.例如,学生表中学号是具有唯一性的字段.为该字段建立唯一性索引可以很快的确定某个学生的信息 ...