<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>列表组面板和嵌入组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:50px;">
<!--
这是列表组组件:badge自带徽章 disable 禁用 适用于做侧栏
-->
<ul class="list-group">
<li class="list-group-item">1.这是第一页</li>
<li class="list-group-item">2.这是第二页<span class="badge">10</span></li>
<li class="list-group-item disable">3.这是第三页</li>
<li class="list-group-item list-group-item-warning">4.这是第四页</li>
</ul>
<!--链接和首选 active 首选项-->
<div class="list-group">
<a href="#" class="list-group-item">1.这是第一页</a>
<a class="list-group-item active" >2.这是第二页<span class="badge">10</span></a>
<a class="list-group-item">3.这是第三页</a>
<a class="list-group-item">4.这是第四页</a>
</div>
<!--button列表 active 首选项-->
<div class="list-group">
<button href="#" 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 href="#" class="list-group-item">
<h3>世界</h3>
<span>你好bootstrap</span>
</a>
<a class="list-group-item active" >2.这是第二页<span class="badge">10</span></a>
<a class="list-group-item">3.这是第三页</a>
<a class="list-group-item">4.这是第四页</a>
</div>
<!--面板组件是用来存放内容的组件: 登录注册小窗口-->
<div class="panel panel-default">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<div class="panel-footer">面板底部</div>
</div>
<!--面板的六大情景类 default success warning info danger primary
-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<div class="panel-footer">面板底部</div>
</div>
<!--添加表格-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<div class="panel-footer">面板底部</div>
</div>
<!--添加列表-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<ul class="list-group">
<li class="list-group-item">1.这是第一页</li>
<li class="list-group-item">2.这是第二页<span class="badge">10</span></li>
<li class="list-group-item disable">3.这是第三页</li>
<li class="list-group-item list-group-item-warning">4.这是第四页</li>
</ul>
<div class="panel-footer">面板底部</div>
</div>
<!--
响应式嵌入组件可以直接用于 iframe embed video and object
-->
<div class="container">
<h3>响应式嵌入组件</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.iqiyi.com/v_19rra5ok9c.html?fc=87bbded392d221f5" ></iframe>
</div>
<hr/>
<div class="embed-responsive embed-responsive-4by3">
<embed class="embed-responsive-item" src="http://www.iqiyi.com/v_19rra5ok9c.html?fc=87bbded392d221f5"
width="350px" height="240px" align="middle"
></embed>
</div>
</div>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
时间： 2024-11-02 23:27:47