bootstrap面板

来源：互联网发布：ftp客户端软件下载编辑：程序博客网时间：2024/04/30 02:16
面板

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <title>XXX</title>    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">    <link rel="stylesheet" href="css/main.css">    <!--[if lt IE 9]>    <script src="lib/html5shiv/html5shiv.min.js"></script>    <script src="lib/respond/respond.min.js"></script>    <![endif]--></head><body style="margin: 200px;"><!--基础面板--><div class="panel panel-default">    <div class="panel-heading">        我是面板存放标题的区域    </div>    <div class="panel-body">        我是面板主体部分    </div></div><!--带标题的面板--><div class="panel panel-default">    <div class="panel-heading">        <h3 class="panel-title">            标题        </h3>    </div>    <div class="panel-body">        我是面板主体部分    </div></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>    <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>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>        <tr>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>        <tr>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>    </table>    <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>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>        <tr>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>        <tr>            <td>haha</td>            <td>haha</td>            <td>haha</td>            <td>haha</td>        </tr>    </table>    <div class="list-group">        <a href="#" class="list-group-item">1、第一个</a>        <a href="#" class="list-group-item">2、第二个</a>        <a href="#" class="list-group-item">3、第三个</a>        <a href="#" class="list-group-item">4、第四个</a>    </div>    <div class="panel-footer">        我是底部    </div></div><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/main.js"></script></body></html>
阅读全文
0 0