<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 条纹类使用progress-bar-striped -->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
<span class="sr-only">40% complete</span>40%
</div>
</div>
<!-- 媒体对象抽象样式，用以构建不同类型的组件，具有在文本内容的左或右侧对齐的图片-->
<div class="media">
<div class="media-left media-middle">
<a href="#"><img class="media-object" src="111.png"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p class="media-right">this is a titlt this ia a title this is a title ssss rrr rrrr gggg tttt</p>
</div>
</div>
<!-- media-left和media-right进行布局 -->
<!-- 列表组 -->
<ul class="list-group">
<li class="list-group-item"><span class="badge">3</span>1111</li>
<li class="list-group-item"><span class="badge">5</span>2222</li>
<li class="list-group-item">3333</li>
<li class="list-group-item">4444</li>
<li class="list-group-item">5555</li>
</ul>
<!-- 链接作为列表组 也可添加情景类-->
<div class="list-group">
<a href="#" class="list-group-item active">2222</a>
<a href="#" class="list-group-item disabled">33333</a>
<a href="#" class="list-group-item-success">44444</a>
<a href="#" class="list-group-item-info">55555</a>
</div>
<!-- 按钮作为列表组，使用div,不要用.btn类 -->
<div class="list-group">
<button type="button" class="list-group-item list-group-item-warning">1111</button>
<button type="button" class="list-group-item-danger">2222</button>
<button type="button" class="list-group-item-success">3333</button>
<button type="button" class="list-group-item-info">4444</button>
</div>
<!-- 列表组定制内容 -->
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">list group item</h4>
<p class="list-group-item-text">11111</p>
</a>
<a href="#" class="list-group-item ">
<h4 class="list-group-item-heading">list group item</h4>
<p class="list-group-item-text">22222</p>
</a>
</div>
<!-- 面板 panel-->
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<!-- 带标题的面板panel-body和panel-heading -->
<div class="panel panel-primary">
<div class="panel-heading">panel heading without title</div>
<div class="panel-body">
panel content
</div>
</div>
<!-- 带脚注的面板 -->
<div class="panel panel-primary">
<div class="panel-body">
panel content
</div>
<div class="panel-footer">panel footer</div>
</div>
<!-- 为表格添加面板边框 -->
<div class="panel panel-default">
<div class="panel-heading">panel heading</div>
<div class="panel-body">
<p>22222222</p>
</div>
<table class="table table-bordered table-hover table-condensed table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<th>xx</th>
<th>yy</th>
</tr>
</tbody>
</table>
</div>
<!-- 响应式判断文件存在与否 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 带有嵌入的效果 -->
<div class="well well-sm">12121211111111111</div>
</body>
</html>