|
******************面板组件********************************************* * *面板组件的基本样式是.panel * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************************************************************** *用.panel-heading可以简单地加入一个标题容器。您也可以用<h1>-<h6>和.panel-title *类加入预定义样式的标题。 * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************************************************************** * *把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜 *色，因为它不是在前面的内容。 * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************给面板加颜色********************************************* * *添加样式:panel-*,*的内容为primary,success,info,warning,danger * ******************带表格的面板********************************************* * *为了无缝的设计，在面版中加入.table。 *如果有.panel-body，就在表格的上方加上一个用于分割的边界。 *如果没有.panel-body,面板标题会和表格链接起来,没有空隙 ******************************************************************** * *为了无缝的设计，在面版中加入.table。 *如果有.panel-body，就在表格的上方加上一个用于分割的边界。 *如果没有.panel-body,面板标题会和表格链接起来,没有空隙 ******************************************************************** ------------------------------------------------------------------------------------------------------------------- 效果图：    ------------------------------------------------------------------------------------------------------------------- 源码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <title>Navbar Template for Bootstrap</title> <link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"></link> </head> <body> <!-- ******************面板组件********************************************* * *面板组件的基本样式是.panel * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default"> <div class="panel-body"> 基本的面板 </div> </div> </div> <!-- ******************带标题的面板********************************************* * *用.panel-heading可以简单地加入一个标题容器。您也可以用<h1>-<h6>和.panel-title *类加入预定义样式的标题。 * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default"> <div class="panel-heading"> <h4>面板标题</h4> </div> <div class="panel-body"> <p>基本的面板</p> <p>基本的面板</p> </div> </div> </div> <!-- ******************带脚注的面板********************************************* * *把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜 *色，因为它不是在前面的内容。 * *默认的.panel所做的只是提供基本的边界和内部，来包含内容 * ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default"> <div class="panel-heading"> <h4>面板标题</h4> </div> <div class="panel-body"> <p>基本的面板</p> <p>基本的面板</p> </div> <div class="panel-footer"> 面板脚注 </div> </div> </div> <!-- ******************给面板加颜色********************************************* * *添加样式:panel-*,*的内容为primary,success,info,warning,danger * ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-primary"> <div class="panel-heading"> <b>面板标题</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> </div> </div> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-info"> <div class="panel-heading"> <b>面板标题</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> </div> </div> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-warning"> <div class="panel-heading"> <b>面板标题</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> </div> </div> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <b>面板标题</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> </div> </div> <!-- ******************带表格的面板********************************************* * *为了无缝的设计，在面版中加入.table。 *如果有.panel-body，就在表格的上方加上一个用于分割的边界。 *如果没有.panel-body,面板标题会和表格链接起来,没有空隙 ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <b>带表格的面板--有.panel-body</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> <table class="table"> <tr> <td>#</td> <td>First Name</td> <td>Last Name</td> </</tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> </</tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> </</tr> </table> </div> </div> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <b>带表格的面板-没有.panel-body</b> </div> <table class="table"> <tr> <td>#</td> <td>First Name</td> <td>Last Name</td> </</tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> </</tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> </</tr> </table> </div> </div> <!-- ******************带列表组的面板********************************************* * *为了无缝的设计，在面版中加入.table。 *如果有.panel-body，就在表格的上方加上一个用于分割的边界。 *如果没有.panel-body,面板标题会和表格链接起来,没有空隙 ******************************************************************** --> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <b>带列表组的面板</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> <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> </ul> </div> </div> <div style="width:80%; margin:20px"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <b>带列表组的面板</b> </div> <div class="panel-body"> <p>基本的面板</p> </div> <div class="list-group"> <a class="list-group-item active">这个是列表项--1<span class="badge">5</span></a> <a class="list-group-item">这个是列表项--2</a> <a class="list-group-item">这个是列表项--3</a> </div> </div> </div> </body> <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> </html> |
|
|
来自： I_T_馆 > 《bootstrap》
