1、要建立響應式網站的布局，這個時候bootstrap的高級就能體現出來了。
2、先來了解一下bootstrap提供了哪些響應式工具供我們使用：
（1）屏幕寬度尺寸的概念：
<768px xs 超小屏幕（手機）
768px>= <992px sm 小屏幕（平板）
992px>= <1200px md 中等屏幕（桌面）
>=1200px lg 大屏幕（桌面）
（2）通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容
隱藏的時候和面沒有帶*號，顯示的時候帶一個*號。這是因為，顯示分為block、inline-block和inline三種情況。隱藏就是none，所以不帶*號。
3、頭部通欄——topbar
（1）字體圖標
聲明： @font-face{
font-family:"這個名字是你這些字體圖標的代號";
src: url(../font/MiFie-Web-Font.eot) format('embedded-opentype'), url(../font/MiFie-Web-Font.svg) format('svg'), url(../font/MiFie-Web-Font.ttf) format('truetype'), url(../font/MiFie-Web-Font.woff) format('woff');
//src:url() format(); 如上所示
}
使用： [class^="icon-"],[class*=" icon-"] {//字體圖標類名一般用 icon- 開頭
font-family: "與聲明的名字保持一致才可以使用";
}
特定的類就要用特定的字符： .icon-mobile::before {
content: "\e908";//字體圖標的編碼
font-size: 13px;//設置字體圖標的大小
}
（2）柵格系統
這個是bootstrap提前給你寫好的分列系統。咱們只需要拿過來用就好了。