學習**：
例項：手機、平板、桌面
在上面案例的基礎上，通過使用針對平板裝置的 .col-sm-* 類，我們來建立更加動態和強大的布局吧。
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
1）響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
2）工作原理
行必須放置在.container(固定寬度)或者.container-fluid(100%寬度) class內，獲得適當的對齊(alignment)和內邊距(padding)
內容放置在列中，唯有列可以是行的直接子元素
預定義的網格類，比如 .row 和 .col-lg-4，可用於快速建立網格布局
列通過內邊距（padding）來建立列內容之間的間隙
3)**查詢
/* 超小裝置（手機，小於 768px） */
/* 沒有任何**查詢相關的**，因為這在 bootstrap 中是預設的（還記得 bootstrap 是移動裝置優先的嗎？） */
/* 小型裝置（平板電腦，大於等於768px） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max)
/* 中型裝置（台式電腦，大於等於992px） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max)
/* 大型裝置（大台式電腦，大於等於1200px） */
@media (min-width: @screen-lg-min)
4）柵格引數
超小螢幕 手機 (<768px)小螢幕 平板 (≥768px)中等螢幕 桌面顯示器 (≥992px)大螢幕 大桌面顯示器 (≥1200px)
柵格系統行為 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列c
.container 最大寬度none （自動） 750px 970px 1170px
類字首 .col-xs- .col-sm- .col-md- .col-lg-
列（column）數 12
最大列（column）寬自動 ~62px ~81px ~97px
間隙寬度 30px （每列左右均有 15px）
可巢狀 是
偏移（offsets） 是
列排序 是
5）//四種螢幕分類全部啟用44
4....
//可以設定列偏移，讓中間保持空隙
1-810-12
//可以巢狀，嵌滿也是 12 列
1-89-12
10-12
//可以把兩個列交換位置，push 向右移動（推），pull 向左移動（拉）84
在css**中寫下如下**，可以實現為所有類中包含col的div設定樣式：
div[class^=col]push 推
pull 拉
偏移、推、拉，都有乙個參照物，即相對的位置，那就是左側， 相對於左側偏移、推、拉
寫法比如：
col-md-offset-3（在左側補充3列）
col-md-push-6（從左側往右側推6列）
col-md-pull-4（往左側拉4列）
效果圖如下：
bootstrap學習筆記
1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列，通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...
bootstrap學習筆記
1 bootstrap簡介 1 是乙個前端自適應ui框架 2 由全域性css樣式，元件，js外掛程式組成 基於jquery 2 組成 1 全域性css樣式 1 寫好的一些html標籤的展示效果，可以全域性進行呼叫，標籤通過class屬性來獲採樣式 2 元件 1 寫好的以下可以直接在頁面上展示的元素，...
bootstrap框架學習筆記
一.在.spann n為1 12的整數 的標籤內加.offsetn n為1 12的整數 可以使標籤左邊距 margin left 增加 spann n為1 12的整數 的距離。二.row以不同的固定寬度定位，而.row fluid以百分比定位。三.muted可以使標籤背景顏色為灰色 999999 四...