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 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...
随机推荐
- Mybatis-07-多对一和一对多处理
多对一处理 如, 多个学生,对应一个老师 多个学生关联一个老师(多对一) 一个老师有很多学生(一对多) SQL: create table `teacher`( `id` int(10) not nu ...
- K8S(11)配置中心实战-单环境交付apollo三组件
k8s配置中心实战-交付apollo三组件 目录 k8s配置中心实战-交付apollo三组件 1 apollo简单说明 1.1 apollo最简架构图: 1.2 apollo组件部署关系 2 为app ...
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- 图论算法（三） 最短路SPFA算法
我可能要退役了…… 退役之前,写一篇和我一样悲惨的算法:SPFA 最短路算法(二)SPFA算法 Part 1:SPFA算法是什么 其实呢,SPFA算法只是在天朝大陆OIers的称呼,它的正统名字叫做: ...
- MySQL空间函数实现位置打卡
项目需求是跟用户当前位置判断是否在给定的地理位置范围内,符合位置限制才可以打卡,其中的位置范围是一个或多个不规则的多边形.如下图,判断用户是在清华还是北大. 图形获取区域坐标 因为项目前端使用微信小程 ...
- 用python进行实际地址经纬度提取
实际地址经纬度提取 请求接口: https://apis.map.qq.com/ws/place/v1/suggestion/ 所需参数: 参数名称 是否必须 参数类型 说明 keyword 是 St ...
- 【Spring注解驱动开发】自定义组件如何注入Spring底层的组件？看了这篇我才真正理解了原理！！
写在前面 最近,很多小伙伴出去面试都被问到了Spring问题,关于Spring,细节点很多,面试官也非常喜欢问一些很细节的技术点.所以,在 Spring 专题中,我们尽量把Spring的每个技术细节说 ...
- java多线程：线程间通信——生产者消费者模型
一.背景 && 定义 多线程环境下,只要有并发问题,就要保证数据的安全性,一般指的是通过 synchronized 来进行同步. 另一个问题是,多个线程之间如何协作呢? 我们看一个仓库 ...
- leetcode刷题记录——栈和队列
题目 232.用栈实现队列 class MyQueue { private Stack<Integer> in = new Stack<>(); private Stack&l ...
- 要有一颗理财的心 - 读<富爸爸.穷爸爸>
记得工作没多久后的一次加薪的例行谈话.部门经理和我说,不能靠工资过日子,要多想想怎么投资,我的主要财富就是靠投资赚来的.当时第一反应,老板,你不给我加薪找这借口也太牵强了吧.我的收入只有工资,我的工资 ...