zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:带表格的面板

    带表格的面板

    为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>,则组件会无中断地从面板头部移动到表格。

    下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:带表格的面板</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div style="padding:20px">
    <div class="panel panel-success">
    <div class="panel-heading">
    <h2 class="panel-title">面板标题</h2>
    </div>
    <div class="panel-body">
    <table class="table">
    <thead>
    <tr>
    <th>produce</th><th>price</th>
    </tr>
    <tr><td>A001</td><td>100</td></tr>
    <tr><td>A002</td><td>200</td></tr>
    </thead>
    </table>
    </div>
    </div>
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h2 class="panel-title">面板标题</h2>
    </div>
    <div class="panel-body">
    面板主题
    </div>
    <table class="table">
    <thead>
    <tr>
    <th>produce</th>
    <th>price</th>
    </tr>
    <tr><td>A001</td><td>100</td></tr>
    <tr><td>A002</td><td>200</td></tr>
    </thead>
    </table>
    </div>
    <div class="panel panel-info">
    <div class="panel-heading">
    <h2 class="panel-title">面板标题</h2>
    </div>

    <table class="table">
    <thead>
    <tr>
    <th>produce</th>
    <th>price</th>
    </tr>
    <tr><td>A001</td><td>100</td></tr>
    <tr><td>A002</td><td>200</td></tr>
    </thead>
    </table>
    </div>
    </div>

    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    Qt 任务调度器
    我又回来了,行情好转。
    设置IIS7文件上传的最大大小 maxAllowedContentLength,maxRequestLength
    ckfinder 1
    Oracle 数据库备份还原(Expdp/impdp)记录
    vs2015 去除 git 源代码 绑定
    java 核心技术之多线程篇
    java 核心技术之基础篇(三)
    java核心技术之基础篇(二)
    java 核心技术之基础篇(一)
  • 原文地址:https://www.cnblogs.com/melao2006/p/5001503.html
Copyright © 2011-2022 走看看