bootstrap栅格系统的列表组样式详解

作者(出处):百宝箱工作室发布时间:2018年4月9日 10:32:14查阅量:358

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-09
        	描述:列表组样式详解
        	实现列表组有两种方法:一种是用ul和li标签实现,另一种是用div和a标签实现。
        	list-group		列表组样式,放在ul标签或div标签的class中。
        	list-group-item		列表项样式,放在li标签或a标签的class中。
        	list-group-item-danger	列表项的背景色。
        	list-group-item-info	列表项的背景色。
        	list-group-item-success	列表项的背景色。
        	list-group-item-warning	列表项的背景色。
        	list-group-item-heading	列表项的标题样式。
        	list-group-item-text	列表项的段落样式。
        	active			列表项激活状态。
        	disabled		列表项禁用状态。
        -->
		<div class="container">
			<div class="row">
				<!--1.使用ul和li标签实现列表效果,在右侧增加访问量或点击率-->
				<ul class="list-group">
					<li class="list-group-item">
						<a href="#">网页设计与制作</a><span class="badge">268</span>
					</li>
					<li class="list-group-item">
						<a href="#">网站建设与维护</a><span class="badge">208</span>
					</li>
					<li class="list-group-item list-group-item-info">
						<a href="#">平面设计与制作</a><span class="badge">177</span>
					</li>
					<li class="list-group-item">
						<a href="#">C#.NET程序设计教学</a><span class="badge">198</span>
					</li>
					<li class="list-group-item list-group-item-danger">
						<a href="#">ASP.NET程序设计与教学</a><span class="badge">375</span>
					</li>
					<li class="list-group-item">
						<a href="#">C语言教学</a><span class="badge">135</span>
					</li>
					<li class="list-group-item">
						<a href="#">Office办公软件教学</a><span class="badge">588</span>
					</li>
					<li class="list-group-item">
						<a href="#">数据库设计与教学</a><span class="badge">436</span>
					</li>
				</ul>
			</div>
			<div class="row">
				<!--2.使用div和a标签实现列表效果,可以添加激活状态、禁用状态和背景色-->
				<div class="list-group">
					<a class="list-group-item active" href="#">网页设计与制作<span class="badge">268</span></a>
					<a class="list-group-item disabled" href="#">ASP.NET程序设计与教学<span class="badge">375</span></a>
					<a class="list-group-item list-group-item-danger" href="#">Office办公软件教学<span class="badge">588</span></a>
					<a class="list-group-item list-group-item-info" href="#">网站建设与维护<span class="badge">208</span></a>
					<a class="list-group-item list-group-item-success" href="#">数据库设计与教学<span class="badge">436</span></a>
					<a class="list-group-item list-group-item-warning" href="#">C语言教学<span class="badge">135</span></a>
				</div>
			</div>
			<div class="row">
				<!--3.有标题有段落的列表组,list-group-item-heading控制标题,list-group-item-text控制段落-->
				<ul class="list-group">
					<li class="list-group-item active">
						<h4 class="list-group-item-heading">IT微课堂项目教学</h4>
						<p class="list-group-item-text">目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
					</li>
					<li class="list-group-item">
						<h4 class="list-group-item-heading">百宝箱网站开发</h4>
						<p class="list-group-item-text">主要承接基于ASP.NET技术框架的网站开发,可以是个人站、企业站、电子商务网站、或者学校网站。</p>
					</li>
					<li class="list-group-item">
						<h4 class="list-group-item-heading">百宝箱网站建设与维护</h4>
						<p class="list-group-item-text">如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息