bootstrap3-listGroup 列表

最新推荐文章于 2020-09-07 23:24:18 发布

schy_hqh

最新推荐文章于 2020-09-07 23:24:18 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端@BootStrap3 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/schy_hqh/article/details/84515654

WEB前端@BootStrap3 专栏收录该内容

21 篇文章

订阅专栏

本文展示了一个使用Bootstrap3框架创建的定价表格示例。该表格包括三种套餐：青铜套餐、白银套餐和黄金套餐，并展示了不同套餐的功能和服务价格。通过自定义CSS样式增强了视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px; /*边距*/
}

/*设置list列表的样式*/
ul.list-group.col-lg-4>li {
	background-color: #c952ca;
	color: white;
	text-align: center;
	font-size: 125%;
}

ul.list-group.col-lg-4>li.list-group-item:first-child {
	background-color: #64086f;
	font-size: 200%;
}

.badge {
	background-color: #FAFAD2;
	color: #FF8C00;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	
	<div class="container">
		<div class="row">
			<ul class="list-group col-lg-4">
				<li class="list-group-item">Bronze Package</li>
				 <li class="list-group-item">Unlimited users</li>
				  <li class="list-group-item">Unlimited storage</li>
				  <li class="list-group-item">Forum Support</li>
				  <li class="list-group-item">$9/Month</li>
				  <li class="list-group-item">
				  	<a href="#">
				  		<!-- 按钮 -->
				  		<button class="btn btn-lg btn-default">Buy Now</button>
				  	</a>
				  </li>
			</ul>
			<ul class="list-group col-lg-4">
				<li class="list-group-item">
					<!-- badge标签 -->
					Gold Package<span class="badge">Most Preferred</span>
				</li>
				<li class="list-group-item">Unlimited users</li>
				<li class="list-group-item">Unlimited storage</li>
				<li class="list-group-item">24X7 Support</li>
				<li class="list-group-item">$25/Month</li>
				<li class="list-group-item">
					<a href="#">
						<button class="btn btn-lg btn-warning">Buy Now</button>
					</a>
				</li>
			</ul>
			<ul class="list-group col-lg-4">
				  <li class="list-group-item">Silver Package</li>
				  <li class="list-group-item">Unlimited users</li>
				  <li class="list-group-item">Unlimited storage</li>
				  <li class="list-group-item">email support</li>
				  <li class="list-group-item">$15/Month</li>
				  <li class="list-group-item">
				  	<a href="#">
				  		<button class="btn btn-lg btn-success">Buy Now</button>
				  	</a>
				  </li>
			</ul>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
	<script src="../../bootstrap-3.0.0/js/alert.js"></script>
</body>
</html>