Bootstrap学习第二天轮播插件
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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Bootstrap学习第二天轮播插件的更多相关文章
- bootstrap 学习笔记 轮播（Carousel）插件
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
详情请查看 http://aehyok.com/Blog/Detail/26.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...
- 第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap 学习笔记12 轮播插件
轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...
- Bootstrap 轮播插件
一．轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
- bootstrap学习之三—插件
一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...
- BootStrap：轮播插件
前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQ ...
- 使用BootStrap框架中的轮播插件
在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...
- 第二百四十五节，Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...
随机推荐
- 虚拟化技术之kvm基础
一.KVM简介 KVM的全称是kernel base virtual machine(基于内核的虚拟机)是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. ...
- Newbe.Claptrap 框架如何实现在多种框架之上运行？
Newbe.Claptrap 框架如何实现在多种框架之上运行?最近整理了一下项目的术语表.今天就谈谈什么是 Claptrap Box. 特别感谢 kotone 为本文提供的校对建议! Newbe.Cl ...
- Android Studio gridview 控件使用自定义Adapter, 九宫格items自适应全屏显示
先看效果图,类似于支付宝首页的效果.由于九宫格显示的帖子网上已经很多,但是像这样九宫格全屏显示的例子还不是太多.本实例的需求是九宫格全屏显示,每个子view的高度是根据全屏高度三等分之后自适应高度,每 ...
- Robotium和Espresso大PK——速度篇
引言 Espresso和Robotium都是android UI自动化测试框架,且都是建立在Android Instrument的基础之上.对于测试人员来说,UI测试应该具备如下三个特点:1. 容易编 ...
- Linux环境下安装JDK8
Linux环境下搭建Java项目运行环境,首先要安装JDK,安装JDK8的步骤如下: 1 下载JDK安装包 下载地址:http://www.oracle.com/technetwork/java/ja ...
- 数字货币比特币以太坊买卖五档行情数据API接口
数字货币比特币以太坊买卖五档行情数据API接口 数字货币一般包含比特币BTC.以太坊ETH.瑞波币XRP.泰达币USDT.比特币现金BCH.比特币SV.莱特币LTC.柚子币EOS.OKB. ...
- SpringSecurity权限管理系统实战—九、数据权限的配置
目录 SpringSecurity权限管理系统实战-一.项目简介和开发环境准备 SpringSecurity权限管理系统实战-二.日志.接口文档等实现 SpringSecurity权限管理系统实战-三 ...
- css基本样式设置
div中文字居中 如何让一个div中的文字水平和垂直居中?设置如下: 给定该div的长宽(或者二者只给出其一也可) .box{ height: 100px; width: 30%; text-alig ...
- JdbcTemplate jar包 下载
我给了一个链接, 是jar download网站上的. 能上去的就可以下载. https://jar-download.com/maven-repository-class-search.php?se ...
- 【原创】Kuberneters-ConfigMap的实践
一.什么是ConfigMap ConfigMap翻译过来即为“配置字典”,在实际的生产环境中,应用程序配置经常需要且又较为复杂,参数.config文件.变量等如果直接打包到镜像中,将会降 ...