Bootstrap不仅提供了整套的样式，还提供了一系列插件，帮助开发者构建更受欢迎的网站。

Bootstrap的轮播插件用起来很简单，代码如下。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap, from Twitter</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="">

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body>

<div id="myCarousel" class="carousel slide">

<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 items -->

<div class="carousel-inner">

<div class="item active">

<img src="Demo_lunbo1.jpg" alt="">

<div class="carousel-caption">

<h4>八月十五回家拍摄</h4>

<p>八月十五回家时正赶上下雨，雨后的天空挂上了彩虹</p>

</div>

</div>

<div class="item">

<img src="Demo_lunbo2.jpg" alt="">

<div class="carousel-caption">

<h4>眼睛里的景色更迷人</h4>

<p>照片中的彩虹总不如眼睛看到的美。</p>

</div>

</div>

<div class="item">

<img src="Demo_lunbo3.jpg" alt="">

<div class="carousel-caption">

<h4>雨后的黄昏</h4>

<p>美好的东西总是短暂的，一会天就黑了。</p>

</div>

</div>

</div>

<!-- Carousel nav -->

<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>

<script src="bootstrap/js/jquery.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>

</body>

</html>

Bootstrap学习第二天轮播插件的更多相关文章

  1. bootstrap 学习笔记 轮播（Carousel）插件

    Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...

  2. Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)

    详情请查看 http://aehyok.com/Blog/Detail/26.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  3. 第二百四十八节，Bootstrap轮播插件

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

  4. Bootstrap 学习笔记12 轮播插件

    轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...

  5. Bootstrap 轮播插件

    一．轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...

  6. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

  7. BootStrap：轮播插件

    前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQ ...

  8. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  9. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

随机推荐

  1. 题解 洛谷 P3332

    题目描述 权值线段树套线段树板子题 首先观察题目,判断为二维偏序问题 操作1为区间修改,所以一定是外部线段树维护权值,内部线段树维护所在区间,否则时间复杂度爆炸qwq 为方便查找,哈希时我采用哈希每个 ...

  2. 没有Qt Quick UI，没有 Qt Quick Project

    书上写的是File ‣ New File or Project ‣ Qt Quick Project ‣ Qt Quick UI 但实际上是File ‣ New File or Project ‣ O ...

  3. 30分钟闲置服务器建站(gitlab为例)

    前言 最近博主的阿里云主机又到了续费的时候了,刚买云主机的时候那是各种优惠各种打折,续费的时候只能当孙子了. 为了节省开支,又保证高性能的前提下,买了台10代NUC,内存和ssd自选,搭建一台个人服务 ...

  4. 布隆过滤器（Bloom Filters）的原理及代码实现（Python + Java）

    本文介绍了布隆过滤器的概念及变体,这种描述非常适合代码模拟实现.重点在于标准布隆过滤器和计算布隆过滤器,其他的大都在此基础上优化.文末附上了标准布隆过滤器和计算布隆过滤器的代码实现(Java版和Pyt ...

  5. ms14-064漏洞复现

    本博客最先发布于我的个人博客,如果方便,烦请移步恰醋的小屋查看,谢谢您! 这是我在实验室学习渗透测试的第五个漏洞复现,一个多小时便完成了.学长给的要求只需完成查看靶机信息.在指定位置创建文件夹两项操作 ...

  6. CAS和锁的相关面试题

    CAS 锁 锁的四种状态和升级 锁的四种状态:无锁.偏向锁.轻量级锁和重量级锁 无锁 无锁就是没有真正意义上的上锁,所有的线程还是能访问并修改同一个资源,但是通过算法控制,实现同时只有一个线程修改成功 ...

  7. JavaFX桌面应用-SpringBoot + JavaFX

    SpringBoot对于Java程序员来说可以是一个福音,它让程序员在开发的时候,大大简化了各种spring的xml配置. 那么在JavaFX项目使用SpringBoot会是怎么样的体验呢? 这次使用 ...

  8. C# 根据出生年月 计算天数/计算X岁X月X天字符串

    public class TimeTool { //根据出生年月计算 整数天 private static int GetAgeByBirthdate(DateTime birthdate) { Da ...

  9. 《Head First 设计模式》：模板方法模式

    正文 一.定义 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 要点: 模板方法定义了一个算法的步骤,每 ...

  10. Salesforce LWC学习(二十二) 简单知识总结篇二

    本篇参看: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reactivity_fi ...