一、前用
我們在做一些頁面的設計時，總會想到自適應的問題。其實 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 框架有很多很多好的東西和思想，值得我學習的東西還很多呀！