1、.container

為頁面內容和柵格系統包裹.container容器，響應式，大屏固定寬度且居中，小屏百分百自適應。

2、.row . col-*-*

Bootstrap中定義了一套響應式的網格系統，將一個容器劃分成12列，然後通過col-*-*的類名控制每一列的佔比（每列寬度通過百分比實現）。

每一個列預設有一個15px的左右外邊距，row類的一個作用是通過左右-15px遮蔽掉這個邊距。

col-xs-[列數] 、col-sm-[列數] 、col-md-[列數]、 col-lg-[列數]分別指在超小螢幕（<768px）、小螢幕（≥768px）、中等螢幕（≥992px）、大螢幕（≥1200px）佔幾份。

可以給一個div新增多個col-*-*，使不同螢幕下佔不同份數。不寫col-xs-12時雖然預設佔12列，但是沒有padding等樣式。

<div class="container">
    <div class="row">
        <div class="col-md-2 text-center"></div>
        <div class="col-md-5"></div>
        <div class="col-md-2"></div>
        <div class="col-md-3"></div>
    </div>
</div>
 

text-center的作用是讓內部內容居中顯示。

3、.btn

為<a>、<button>或<input>元素新增按鈕類即可使用Bootstrap提供的樣式，有預定義樣式和不同尺寸的按鈕。

http://blog.koalite.com/bbg/可以輸入顏色得到自定義的按鈕，也可以直接複製原始碼（如下）修改。

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}
 

4、.hidden-*、.visible-*-*

hidden-*：在某種螢幕尺寸下隱藏；                   

visible-*-*：在某種螢幕尺寸下顯示，第二個*代表display為block、inline或inline-block。

<div class="topbar hidden-xs hidden-sm"></div>
<div class="topbar visible-md-block visible-lg-block"></div>