`

Bootstrap 第12章 列表组面板和嵌入组件

Bootstrap列表组面板嵌入组件 
阅读更多 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>列表组面板和嵌入组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">

<!-- <ul class="list-group">
	<li class="list-group-item">1.这是首页</li>
	<li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li>
	<li class="list-group-item">3.这是第三页</li>
	<li class="list-group-item">4.这是第四页</li>
</ul>

<div class="list-group">
	<a class="list-group-item">1.这是首页</a>
	<a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>
	<a class="list-group-item disabled">3.这是第三页</a>
	<a class="list-group-item list-group-item-success">4.这是第四页</a>
</div>

<div class="list-group">
	<button class="list-group-item">1.这是首页</button>
	<button class="list-group-item active">2.这是第二页 <span class="badge">10</span></button>
	<button class="list-group-item">3.这是第三页</button>
	<button class="list-group-item">4.这是第四页</button>
</div>

<div class="list-group">
	<a class="list-group-item">
		<h4>列表标题</h4>
		<p>详细内容。。。</p>
	</a>
	<a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>
	<a class="list-group-item disabled">3.这是第三页</a>
	<a class="list-group-item list-group-item-success">4.这是第四页</a>
</div> -->

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">我是标题区域</h3>
	</div>
	<div class="panel-body">
		我是一个面板容器
	</div>
	<div class="panel-footer">
		我是底部
	</div>
</div>

<div class="panel panel-danger">
	<div class="panel-heading">
		<h3 class="panel-title">我是标题区域</h3>
	</div>
	<div class="panel-body">
		我是一个面板容器
	</div>
	<table class="table">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</table>
	<ul class="list-group">
		<li class="list-group-item">1.这是首页</li>
		<li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li>
		<li class="list-group-item">3.这是第三页</li>
		<li class="list-group-item">4.这是第四页</li>
	</ul>
	<div class="panel-footer">
		我是底部
	</div>
</div>

<!--div class="embed-responsive embed-responsive-16by9">
	<embed src="http://player.youku.com/player.php/sid/XMTQyMjc1MTg5Ng==/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</div-->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

效果图：

 

  • 大小: 10.5 KB
分享到：
| Bootstrap 第11章 进度条媒体对象和Well组 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics