码迷,mamicode.com
首页 > 其他好文 > 详细

adminLTE 教程 -4 轮播控件

时间:2017-03-16 22:59:44      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:adminlte adminlte 教程 adminlte入门教程

轮播可以放在首页用来展示需要显示的内容,其实内容没有什么可以讲解的,就是在box下面放了carousel控件。

adminLTE演示页面搜索Carousel

技术分享

<div class="box box-solid">
	<div class="box-header with-border">
		<h3 class="box-title">Carousel</h3>
	</div>
	<!-- /.box-header -->
	<div class="box-body">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
				<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
				<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item">
					<img src="http://placehold.it/900x500/39CCCC/ffffff&amp;text=I+Love+Bootstrap" alt="First slide">

					<div class="carousel-caption">
						First Slide
					</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/900x500/3c8dbc/ffffff&amp;text=I+Love+Bootstrap" alt="Second slide">

					<div class="carousel-caption">
						Second Slide
					</div>
				</div>
				<div class="item active">
					<img src="http://placehold.it/900x500/f39c12/ffffff&amp;text=I+Love+Bootstrap" alt="Third slide">

					<div class="carousel-caption">
						Third Slide
					</div>
				</div>
			</div>
			<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
				<span class="fa fa-angle-left"></span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
				<span class="fa fa-angle-right"></span>
			</a>
		</div>
	</div>
	<!-- /.box-body -->
</div>


adminLTE 教程 -4 轮播控件

标签:adminlte adminlte 教程 adminlte入门教程

原文地址:http://11140372.blog.51cto.com/11130372/1907100

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!