加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Bootstrap轮播插件使用代码

发布时间:2020-12-18 00:48:47 所属栏目:安全 来源:网络整理
导读:Bootstrap不仅提供了整套的样式,还提供了一系列插件,帮助开发者构建更受欢迎的网站。 Bootstrap的轮播插件用起来很简单,代码如下。 html lang="en" meta charset="utf-8" Bootstrap,from Twitter meta name="viewport" content="width=device-width,initi

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

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

<html lang="en">

<meta charset="utf-8">

Bootstrap,from Twitter

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

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

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active">

<li data-target="#myCarousel" data-slide-to="1">

<li data-target="#myCarousel" data-slide-to="2">

<div class="carousel-inner">

<div class="item active">

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

<div class="carousel-caption">

八月十五回家拍摄

八月十五回家时正赶上下雨,雨后的天空挂上了彩虹

<div class="item">

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

<div class="carousel-caption">

眼睛里的景色更迷人

照片中的彩虹总不如眼睛看到的美。

<div class="item">

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

<div class="carousel-caption">

雨后的黄昏

美好的东西总是短暂的,一会天就黑了。

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹

<a class="carousel-control right" href="#myCarousel" data-slide="next">›

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

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

效果图:

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读