Bootstrap~Panel和Table

简介:

在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每列进行宏观的布局后,就是在每一个大块里建立小块,而小块可以使用Panel来实现,下面看个例子

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

这是最简单的格式了,它运行后的效果

其实在我们设计自己的系统时,如果panel运行得当,也可以快速的建立一个页面,如下

它其实于一个栅格(1x2)和两个panel组件,缩减代码如下

  View Code

下面再来看一下表格table,bootstrap基本就是为它添加的css样式,没有什么特别的

<table class="table table-striped">
  ...
</table>

下面也有带边框的表格

<table class="table table-bordered">
  ...
</table>

同时也集成了JS的悬浮效果

<table class="table table-hover">
  ...
</table>

OK,对于布局中的Panel和Table就介绍到这里,最后让大家看一下我的bootstrap的demo,感觉真的很简单,很方便!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:Bootstrap~Panel和Table,如需转载请自行联系原博主。

目录
相关文章
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
111 1
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
136 0
|
前端开发 容器
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
115 0
|
7月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
105 0
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
212 2
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
223 1
|
前端开发 JavaScript Java
Bootstrap Table批量(全选)删除
Bootstrap Table批量(全选)删除
105 1
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
60 0