一、前用

　　我們在做一些頁面的設計時，總會想到自適應的問題。其實 Bootstrap 框架就很好的融合這個問題了。下面是我學習 Bootstrap 的總結。

二、問題來源

　　我為什麽會遇見這個問題，是因為我在做一個登陸頁面。想實現的樣例入下圖。如果我的屏幕的寬度( Width ) >= 930 那麽我的顯示如下。

　　但屏幕寬度小於<930 的時候，顯示如下

三、解決方案

　　方案是想大的一塊放在上面。通過使用 Bootstrap 的自適應。首先我們把這兩塊放在一個body 、div 都可以。然後使用 Bootstrap 的Col 屬性我們 8、4分。代碼示例如下

　　主要使用的是： col-md-* 這是屏幕的占比。

　 然後我們站8分的，就是大的一塊 push（推走） 4格。將占 4 pull （拉回），就可以將大的一塊移動到右邊（原本大的一塊在左邊的）。

　　這樣就可以得到我的上面展示的示例模板。

　　代碼如下：

　　
<!--展示項目名塊-->
<div class="col-md-8 col-md-push-4" style="background-image:url(./metronic/assets/global/img/bg-4.jpg);"></div>

<!--登陸信息塊-->

<div class="col-md-4 col-md-pull-8"> </div>

四、總結

　　Bootstrap 框架有很多很多好的東西和思想，值得我學習的東西還多呀！

Bootstrap 自適應排列順序