<!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>