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>
Bootstrap历练实例：带表格的面板的更多相关文章
- Bootstrap历练实例：默认的面板(Panels)
Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...
- Bootstrap历练实例：带列表组的面板
带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...
- Bootstrap历练实例：语境色彩的面板
带语境色彩的面板 使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如下: ...
- Bootstrap历练实例：面板的标题
面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...
- Bootstrap历练实例：带徽章的列表组
向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...
- bootstrap历练实例：面板脚注
面板脚注 我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可.下面的实例演示了这点: <!DOCTYPE htm ...
- Bootstrap历练实例：带链接的警告
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：默认的缩略图
本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...
- bootstrap历练实例：标签式的导航菜单
本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...
随机推荐
- unite2017《Unity企业级支持案例与分析》
在今天举办的Unite2017开发者大会上,Unity大中华区技术支持总监张黎明以"Unity企业级支持案例与分析"为主题进行了分享. 以下为演讲实录: 张黎明:非常感谢大家来参加 ...
- Unite 2017 干货整理 同步篇
http://www.kisence.com/2017/05/17/unite-2017-gan-huo-zheng-li-tong-bu-pian/ Unite 2017 干货整理 同步篇 2017 ...
- 51nod1100(计算斜率)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1100 题意:中文题啦- 思路:算斜率不用多说吧?本题唯一一个 ...
- linux 安装mysql 5.7
1.下载安装包http://dev.mysql.com/downloads/mysql/#downloads推荐下载通用安装方法的TAR包(http://cdn.mysql.com//Download ...
- JavaScript进阶 - 第1章 系好安全带,准备启航
第1章 系好安全带,准备启航 1-1让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂 ...
- The new week-学习Python-数据类型
记录自学Python心得 之前有一段时间的JAVA自学,但最终以“无目标”的状态下被懒散驱散了动力,此为前提 Python的历程就不细细说道了,蛮有趣的 一般大家都是学习的CPython,速度较快(这 ...
- 图片旋转js代码
function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...
- 图解css3のborder-radius
早期制作圆角都是使用图片来实现.通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余.如今有了CSS3的圆角属性——borde ...
- 关于office转换成pdf组件服务中的DCOM配置问题
在开始->运行 中录入“dcomcnfg” 单击“确定”后弹出“组件服务”窗口 依次选择“组件服务”->“计算机”->“我的电脑”->“DCOM配置” 在“DCOM配置”下找到 ...
- C# List的使用
1.所需引入的命名空间: using System.Collections.Generic; 2.初始化 [1]空: List<int> list = new List<int> ...