Bootstrap后台主区域

1.设置背景

运行效果

（注意：整个page-main占满全屏，而“hello”也被左边的功能栏给遮挡住了。

所以我们要做的就是当屏幕大于768像素的时候，让核心的主要区域离左边的间距255px，同样我们可以设高度为600px。）

运行效果：

这样的话，我们左边就比较高了，右边就可以写主要的内容，主要的内容首先我们给一个面包屑的导航，我们在学bootstrap组件的时候学过。

2.添加面包屑导航

运行效果

3.添加两个面板显示列表信息

将这个panel复制一个。

（注意：我们要将最开始设置的背景给取消掉。并且要将之前在<div>里面设置的”col-lg-3”的属性给取消掉，因为大屏幕下它一行要显示四列，把一行拆成四列表格就很小了。我们在中屏上设置了一行两列同样在大屏上也会显示一行两列。

在表格上给一个“table-bordered”，表格就会加上边框。）

运行效果

当屏幕缩小，一行就显示一列：

4.再做个一行一列的大表格

运行效果

（这样我们就完成了后台界面一个简单的布局。）

5.最后，完成一个功能点

（当屏幕小于768像素时，点击右上方的按钮把主菜单隐藏和显示。在主菜单上取一个名字“slider_sub”，当单击这个按钮的时候它的target就是“slider_sub”。）

运行效果

6.设置分页