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,可以在不同的样式间进行切 ...
随机推荐
- 洛谷P1220 关路灯（区间dp）
关路灯 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯.为了给村里节 ...
- 洛谷P1074 靶形数独（跳舞链）
传送门 坑着,等联赛之后再填(联赛挂了就不填了233) //minamoto #include<iostream> #include<cstdio> #include<c ...
- git配置命令
一.Git安装及密钥的生成 1.下载Git软件:http://msysgit.github.io/ 2.桌面右键 Git Bash Here 打开git命令行: 3.ssh-keygen -t rsa ...
- Python小世界：匿名函数、高阶函数、推导式
前言 木子本人搞起Python已有多年,一直觉得什么都会,但是有时候实操起来,才觉得很多底层基础的知识都没有彻底的灵活掌握. 另外,网上关于Python基础知识的各种普及已有太多太多. 附上相关大神的 ...
- urllib2基础操作
Urllib2基础操作 1.打开网页(urlopen) 打开一个网页 import urllib2 response = urllib2.urlopen('http://www.baidu.com') ...
- 长春理工大学第十四届程序设计竞赛（重现赛）B.Bowling Game
链接:https://ac.nowcoder.com/acm/contest/912/B 题意: 链接:https://ac.nowcoder.com/acm/contest/912/B来源:牛客网 ...
- 软件模拟I2C时输入与输出切换
一 为达到类似C51的操作需要添加以下位带操作:#include "stm32f10x_gpio.h"#include "stm32f10x_conf.h" / ...
- scau 18087 开始我是拒接的 mobius
其实有一个很有用的技巧就是,把gcd = 4的贡献,压去gcd = 2时的贡献,就不需要考虑这么多的了. 为什么可以把gcd = 4的,压去gcd = 2的呢,gcd = 12的,压去gcd = 6的 ...
- (转)sudo配置文件/etc/sudoers详解及实战用法
sudo配置文件/etc/sudoers详解及实战用法 原文:http://blog.csdn.net/field_yang/article/details/51547804 一.sudo执行命令的流 ...
- TDH-常见运维指令
1.查看cpu: cat /proc/cpuinfo | grep processor2.查看磁盘:df -h (查看磁盘使用率) df -i (查看iNode使用) fdisk -l (查看磁盘整体 ...