<!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>
效果图: