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. excel表格，根据某一列的值对整行进行颜色填充

    1.选中要影响的表格范围,选择 “条件格式”,选择 “新建规则” (2)选择 “使用公式确定要设置格式的单元格”,录入公式,选择 “ 格式”,注意: 公式为:=$H1="待解决" ...

  2. 每天都在用String，你真的了解吗？

    1.String概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如"abc")都可以被看作是实现此类的实例 String 中包括用于检查各个 ...

  3. JavaScript学习系列博客_9_JavaScript中的if语句、switch语句

    条件判断语句 - 条件判断语句也称为if语句 - 语法一: if(条件表达式){ 语句... } - 执行流程: if语句执行时,会先对条件表达式进行求值判断, 如果值为true,则执行if后的语句 ...

  4. web渗透测试之sqlmap拿到数据库信息

    通过扫描我们发现目标网站存在sql注入漏洞,我们访问该里面后发现该网站里面有个表格提交参数.确实存在没有过滤 使用sqlmap扫描发现漏洞的确存在,这里是布尔盲注 查看当前数据库名 查看表名得到以下信 ...

  5. （新手向）N皇后问题详解（DFS算法）

    非常经典的一道题: N皇后问题: 国际象棋中皇后的势力范围覆盖其所在的行.列以及两条对角线,现在考察如下问题:如何在n x n的棋盘上放置n个皇后,使得她们彼此互不攻击 . 免去麻烦我们这里假定n不是 ...

  6. Java并发必知必会第三弹：用积木讲解ABA原理

    Java并发必知必会第三弹:用积木讲解ABA原理 可落地的 Spring Cloud项目:PassJava 本篇主要内容如下 一.背景 上一节我们讲了程序员深夜惨遭老婆鄙视,原因竟是CAS原理太简单? ...

  7. Spring Security 入门学习--数据库认证和授权

    首先是使用的SpringBoot框架 基础需要的pom以来如下,基础的springboot项目的创建就不一一赘述了. <!--spring web--> <dependency> ...

  8. Ubuntu 20.04.1 安装软件和系统配置脚本

    #!/bin/bash # https://launchpad.net/ubuntu # https://www.easyicon.net # https://download-chromium.ap ...

  9. 力扣Leetcode 21. 合并两个有序链表

    合并两个有序链表 将两个升序链表合并为一个新的升序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1-> ...

  10. 【Go语言入门系列】（八）Go语言是不是面向对象语言？

    [Go语言入门系列]前面的文章: [Go语言入门系列](五)指针和结构体的使用 [Go语言入门系列](六)再探函数 [Go语言入门系列](七)如何使用Go的方法? 1. Go是面向对象的语言吗? 在[ ...