Bootstrap3 带表格的面板

带表格的面板

在使用面板组件时，往往可能需要在面板中放很多内容，如图片、表格等。如果在面板中添加表格，建议使用无边框的表格，这让整个面板看上去是一个整体。

如果是带有.panel-body的面板，我们还在表格的上方，添加了一个边框来将它们隔离开来。如：

<div class="panel panel-default">
<!—默认的面板内容 -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!— 表格 -->
<table class="table">
...
</table>
</div>

效果如图 3‑99所示：

图3-99 带表格的面板

如果没有.panel-body，表格的上方就不会有边框，面板的标题和表格紧密相连，中间没有空隙。如：

<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table">
...
</table>
</div>

效果如图 3‑100所示：

图3-100 带表格的面板

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 带表格的面板相关推荐

android 带记忆功能的播放器源码,【全开源可二开】带后台管理面板的在线音乐播放器Android应用APP源码...
这是一款带后台管理面板的在线音乐播放器Android应用APP源码,可让您更快地构建在线和离线android音频播放器,代码全开源适合二次开发.该源码自带2个紫色和橙色主题(允许您添加更多主题),多语 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
威联通NAS使用Container搭建我的世界服务器，带网页管理面板
QNAP使用LXC容器搭建Minecraft游戏服务器,带WEB管理面板 Linux搭建我的世界服务器:https://blog.zeruns.tech/archives/584.html windo ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
利用WPF建立自己的3d gis软件（非axhost方式）（十）SDK中一些自带的展示面板应用...
利用WPF建立自己的3d gis软件(非axhost方式)(十)SDK中一些自带的展示面板应用原文:利用WPF建立自己的3d gis软件(非axhost方式)(十)SDK中一些自带的展示面板应用先 ...
poi导出word文件(带表格)
poi导出word文件(带表格) 一.背景介绍现有业务需求根据前端页面上所选的时间和列,来生成word表格,方便打印. 二.POM <dependency><groupId> ...
Bootstrap3 带列表组的面板
带列表组的面板你还可以在面板中加入列表组,面板中的列表组将会占满整个面板的宽度.如: <div class="panel panel-default"> < ...
Bootstrap3 带悬停效果的表格样式
带悬停效果的表格为 <table> 添加 .table-hover 类,就可以让 <tbody> 中的每一行对鼠标悬停状态作出响应.当鼠标经过数据行时,会为该行添加浅灰色背景 ...
Bootstrap3 带条纹的表格样式
带条纹的表格为 <table> 添加 .table-striped 类,就可以为 <tbody> 中的表格行添加条纹背景,即实现表格数据行的隔行换色效果.如: <tab ...

Bootstrap3 带表格的面板

带表格的面板

Bootstrap3 带表格的面板相关推荐

最新文章

热门文章