蓝色的教育平台服务列表介绍bootstrap响应式布局。这是一款通用的图标文字列表布局代码。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/bootstrap.min.css">

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、body引入部分

<div class="shou_zhu" style="background: url(images/san.png);" >
	<div class="container">
		<div align="center">
			<h2><span>三大主题</span></h2>
			<div class="xian1"></div>
			<div class="xian2"></div>
		</div>
		<div class="col-lg-4" align="left">
			<div class="thumbnail" align="center">
				<div class="col-xs-3 col-lg-12">
					<h3>资源共享平台</h3>
					<div class="yuan">
						<img src="images/tuc_1.png" />
					</div>
				</div>
				<div class="col-xs-9 col-lg-12">
					<h4>中国财经•政法教育资源共享平台</h4>
					<ul class="list-inline">
						<li><a href="#">学位论文库</a></li>
						<li><a href="#">特色资源库</a></li>
						<li><a href="#">机构知识库</a></li>
						<li><a href="#">商业数据库</a></li>
						<li><a href="#">财经博导库</a></li>
						<li><a href="">外文期刊库</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-4" align="center">
			<div class="thumbnail" align="center">
				<div class="col-xs-3 col-lg-12">
					<h3>E-MOOC平台</h3>
					<div class="yuan">
						<img src="images/tuc_2.png" />
					</div>
				</div>
				<div class="col-xs-9 col-lg-12">
					<h4>中国财经教育E-MOOC联盟</h4>
					<ul class="list-inline">
						<li><a href="#">中国财经教育E-MOOC平台</a></li>
						<li><a href="#">财经资源及信息素养平台</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-4" align="right">
			<div class="thumbnail" align="center">
				<div class="col-xs-3 col-lg-12">
					<h3>教学案例平台</h3>
					<div class="yuan">
						<img src="images/tuc_3.png" />
					</div>
				</div>
				<div class="col-xs-9 col-lg-12">
					<h4>中国经管实验教学案例平台</h4>
					<ul class="list-inline">
						<li><a href="#">中国经管实验教学案例库</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

资源出处：https://www.moyublog.com/codes/59.html