adminLTE 教程 -4 轮播控件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了adminLTE 教程 -4 轮播控件相关的知识,希望对你有一定的参考价值。

轮播可以放在首页用来展示需要显示的内容,其实内容没有什么可以讲解的,就是在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 轮播控件的主要内容,如果未能解决你的问题,请参考以下文章

最全最详细publiccms常用的代码片段

最全最详细publiccms其他常用代码片段(内容站点)

轮播控件外的轮播控件

AdminLTE 入门教程

Android自己定义控件之轮播图控件

一行代码快速实现今日头条 网易新闻焦点图自动循环轮播效果