带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 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>

Bootstrap历练实例：带表格的面板的更多相关文章

  1. Bootstrap历练实例：默认的面板(Panels)

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

  2. Bootstrap历练实例：带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  3. Bootstrap历练实例：语境色彩的面板

    带语境色彩的面板 使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如下: ...

  4. Bootstrap历练实例：面板的标题

    面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...

  5. Bootstrap历练实例：带徽章的列表组

    向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...

  6. bootstrap历练实例：面板脚注

    面板脚注 我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可.下面的实例演示了这点: <!DOCTYPE htm ...

  7. Bootstrap历练实例：带链接的警告

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  9. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

随机推荐

  1. hdu2795(线段树单点更新&区间最值)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2795 题意:有一个 h * w 的板子,要在上面贴 n 条 1 * x 的广告,在贴第 i 条广告时要 ...

  2. 分布式集群环境下，如何实现session共享一（应用场景）

    在web应用中,由于http的请求响应式,无状态.要记录用户相关的状态信息,比如电商网站的购物车,比如用户是否登录等,都需要使用session.我们知道session是由servlet容器创建和管理, ...

  3. Continuous Integration

    https://dzone.com/articles/continuous-delivery-toolchain

  4. 微信小程序请求openid错误码40163

    通过wx.login({})方法获取到的code只能使用一次,如果需要在哎服务器端再次请求获取openid来进行校验,需要再次通过wx.login({})方法获取code 否则会报错误代码40163, ...

  5. 实验一 用户界面与Shell命令

    一.实验课时:2学时 二.实验目的 v  熟悉redhat_linux的用户界面,会进行常用的系统设置. v  掌握常用的shell命令. 三.实验环境 v  运行Windows xp\2000\20 ...

  6. Django之extra

    extra过滤 extra extra(select=None, where=None, params=None, tables=None, order_by=None, select_params= ...

  7. [TCP/IP]IP协议

    IP数据报 IP是TCP/IP协议族中最核心的协议,所有的TCP.UDP.ICMP.IGMP数据都以IP数据报的格式传输.IP仅提供尽力而为的传输服务,如果发生某种错误,IP会丢失该数据,然后发送IC ...

  8. HDU1854 Q-Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=1854 随手练习 #include <bits/stdc++.h> using namespace s ...

  9. STM32之VCP1/VCAP2引脚的处理

    需要根据仔细根据手册来决定这两个引脚是直接接地还是电容下拉到地 转载:STM32的Vcap的问题及解决---原来经验也害人http://bbs.eeworld.com.cn/thread-499497 ...

  10. JDBC连接中Class.forName("")到底干了什么？

    思考了一个问题,Class.forName("***");到底干了什么? 我们知道Class.forName( )静态方法的目的是为了动态加载类,但是一般来说,一个类forName ...