Bootstrap學習小小小小筆記

嗯，剛開始學，一點小tips，供自己回憶。

——————————————————————————————————–

（1）bootstrap3已經是移動裝置優先了。所以一般在head中新增

（2）bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

行必須放置在.container內，在行內放置列。

不同裝置會查詢不同class字首，例如

class="container">

class="row" >

class="col-sm-3 col-md-6 col-lg-4">....div>

class="col-sm-9 col-md-6 col-lg-8">....div>

div>

這裡提供了 3 種不同的列布局，分別適用於三種裝置。在手機上，它將是左邊 25% 右邊 75% 的布局（sm的3、9）。在平板電腦上，它將是 50%/50% 的布局（md的6、）。在大型視口的裝置上，它將是 33%/66% 的布局（lg的4、8）。

（3）由於bootstrap 3 是移動裝置優先的，所以在設計上bootstrap **應該從小螢幕裝置開始，然後擴充套件到大螢幕裝置上的元件和網格。

在布局上優先設計更小的寬度。隨著螢幕大小的增加而新增元素。漸進增強。

（4）bootstrap 中的**查詢允許您基於視口大小移動、顯示並隱藏內容。

/* 超小裝置（手機，小於 768px） */ /* bootstrap 中預設情況下沒有**查詢 */ /* 小型裝置（平板電腦，768px 起） */ @media (min-width: @screen-sm-min) /* 中型裝置（台式電腦，992px 起） */ @media (min-width: @screen-md-min) /* 大型裝置（大台式電腦，1200px 起） */

@media (min-width: @screen-lg-min)

（5） .col-md-offset-* 類是偏移列。就是在該列的左margin增加 * 列，其中 * 範圍是從 1 到 11。當然，其他lg,sm也都是有偏移列的。

（6）列之間是可以巢狀的，但首先在父列中新增行，才能在行中巢狀子列

class="col-md-9">
class="row">
class="col-md-6">...div>
class="col-md-6">...div>
div>
div>

（7）bootstrap有個特點，就是列可以排序。即以一種順序編寫列，然後以另一種順序顯示列。用.col-md-push-* 和 .col-md-pull-*實現。

如：class="col-md-8 col-md-pull-4"

（8）可以在、或元素上使用按鈕 class。但最好在上使用按鈕 class，避免跨瀏覽器的不一致性。

Bootstrap學習小小小小筆記

乙個Weex的小小小小小小頁面示例

PHP小小小理

關於滑動視窗的小小小tip

Bootstrap學習小小小小筆記

乙個Weex的小小小小小小頁面示例

PHP小小小理

關於滑動視窗的小小小tip

相關推薦