带表格的面板

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

    firefly (9秒社团-游戏服务端开源引擎) 编辑 Firefly是免费.开源.稳定.快速扩展.能 “热更新”的分布式游戏服务器端框架,采用Python编写,基于Twisted框架开发.它包括了开 ...

  2. 洛谷P3004 [USACO10DEC]宝箱Treasure Chest

    P3004 [USACO10DEC]宝箱Treasure Chest 题目描述 Bessie and Bonnie have found a treasure chest full of marvel ...

  3. 2017-9-13 NOIP模拟赛[xxy]

    全排列 (permutation.cpp/c/pas)Description从 n 个不同元素中任取 m(m≤n)个元素,按照一定的顺序排列起来,叫做从 n个不同元素中取出 m 个元素的一个排列.当 ...

  4. Python学习笔记（yield与装饰器）

    yeild:返回一个生成器对象: 装饰器:本身是一个函数,函数目的装饰其他函数(调用其他函数) 功能:增强被装饰函数的功能 装饰器一般接受一个函数对象作为参数,以便对其增强 @原函数名  来调用其他函 ...

  5. Luogu P3092 [USACO13NOV]没有找零No Change【状压/二分】By cellur925

    题目传送门 可能是我退役/NOIP前做的最后一道状压... 题目大意:给你\(k\)个硬币,FJ想按顺序买\(n\)个物品,但是不能找零,问你最后最多剩下多少钱. 注意到\(k<=16\),提示 ...

  6. Theme Section

    题目链接 #include <cstdio> #include <iostream> #include <cstring> using namespace std; ...

  7. 查找库中的某个函数，grep命令的用法。

    程序中调用了某个库中的函数,我想知道这个函数具体的作用,就必须去看这个库的源代码. 那么问题来了:如何从库中众多的.h文件中,得知我想要的函数在哪个文件里? 最后用grep命令成功解决. 具体用法:先 ...

  8. BZOJ 1116: [POI2008]CLO 并查集

    成立时当且仅当每个联通块都有环存在.一个连通块若有m个点,则必有多于m条有向边,可用并查集来维护. #include<cstdio> #include<iostream> #d ...

  9. net Core 入门实战

    Asp.net Core 入门实战   Asp.Net Core 是开源,跨平台,模块化,快速而简单的Web框架. Asp.net Core官网的一个源码合集,方便一次性Clone 目录 快速入门 安 ...

  10. Linux清空屏幕和清空当前输入的快捷键

    Linux清空屏幕和清空当前输入的快捷键 但是实际上...放弃当前的命令,命令行提示符跳到下一行的有效命令是ctrl + c