带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 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. AGC001 C - Shorten Diameter【枚举】

    一开始没看到要保证最后是树--所以一定要从叶子开始删 枚举重心,如果k是偶数,那么按当前重心提起来deep大于k/2的全都要切掉,这样枚举重心然后取min即可 奇数的话就是枚举直径中间的边,然后从两边 ...

  2. 51nod 1562 玻璃切割

      1562 玻璃切割 http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1562 题目来源: CodeForces 基准时间 ...

  3. pytest框架（二）

    一.示例代码一 D:YOYO\ __init__.py test_class.py # content of test_class.py class TestClass: def test_one(s ...

  4. Invalid YGDirection 'vertical'. should be one of: ( inherit, ltr, rtl )

    react native 路由( react-native-router-flux )跳转页面一直都报错 本项目解决方法:不是路由的问题,是跳转的页面有有问题,删除下图标记的红色即可(解决方法是排除法 ...

  5. nutzboot 使用nacos替换zookeeper

    先放一段从网上拷贝一段分布式CAP理论的概念 分布式领域中存在CAP理论,且该理论已被证明:任何分布式系统只可同时满足两点,无法三者兼顾. ①C:Consistency,一致性,数据一致更新,所有数据 ...

  6. jave （java的ffmpeg框架）简单使用

    引入文件( jave-native-win64 windows 64位系统jave-native-linux64 linux 64位系统按自己服务器系统来替换 ) <dependency> ...

  7. iphone状态栏，导航栏，标签栏高度一览表

    iphone状态栏,导航栏,标签栏高度一览表   设备分辨率 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus  1242×2208 px 60px  132px  147px iPhon ...

  8. Python web前端 10 bootstrp

    Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: ...

  9. Java中

  10. Jmeter4.0----设置集合点_并发（11）

    1.说明 LR中集合点可以设置多个虚拟用户等待到一个点,同时触发一个事务,以达到模拟真实环境下多个用户同时操作,实现性能测试的最终目的. jmeter中使用Synchronizing Timer实现L ...