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>

同时也集成了ＪＳ的悬浮效果

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

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

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