Bootstrap 第12章 列表组面板和嵌入组件
程序员文章站
2024-02-02 12:45:58
...
<!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>
效果图:
上一篇: 集成学习之多数投票预测