您的位置：首页 > Web前端 > BootStrap

Bootstrap-列表组面板和嵌入组件

2017-12-14 23:07 387 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!--列表组组件 基本格式-->
<ul class="list-group">
<li class="list-group-item">1页</li>
<li class="list-group-item">2页</li>
<li class="list-group-item">3页</li>
<li class="list-group-item">4页</li>

<!--列表项带勋章-->
<li class="list-group-item">咳咳咳<span class="badge">10</span></li>
</ul>
<!--链接和首选-->
<div class="list-group">
<a href="#" class="list-group-item">1页</a>
<a href="#" class="list-group-item active" >2页</a>
<a href="#" class="list-group-item">3页</a>
<a href="#" class="list-group-item">4页</a>

<!--列表项带勋章-->
<a class="list-group-item">咳咳咳<span class="badge">10</span></a>
</div>

<!--定制内容-->
<div class="list-group">
<a href="#" class="list-group-item">
哈哈哈
<h4>详细内容</h4>
</a>
<a href="#" class="list-group-item active" >2页</a>
<a href="#" class="list-group-item">3页</a>
<a href="#" class="list-group-item">4页</a>
</div>
<!--面板组件-->
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">我是标题</h3>
</div>
<div class="panel-body">
我是一个面板容器
<table class="table">
<tr>
<th>1</th>
<th>2</th>
<th>2</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>

</table>
</div>
<div class="panel-footer">
我是底部
</div>
</div>

<!--响应式嵌入组件：可用于：<iframe> <embed> <video> <object>-->
<div class="embed-responsive embed-responsive-16by9">
<embed src="" type=""/>
</div>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航