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.設定分頁