Bootstrap3.2.0 起首用container還是container-fliud?

我個人啦,認為寫網站第一步,比較麻煩的就是定出網頁最外圍的版面大小。 有時,為了寫滿版的網頁,需要先確定body的高度是100%。
body {
   height:100%;
}
...
有時,可能得先寫出某個適當寬度的外框,不是寫死寬度,就是寫好相對寬度的百分比之後,還得設min-height以防網頁縮小後跑版。
.wrapper {
   width:793px; 
}
或是
.wrapper {
   width:50%;
   height:50%;
   min-width:400px;
   min-height:50px; 
}
/*可能還得加上 @media screen and (min-width:???px)...唉 @_@*/

不過,Bootstrap3框架已經幫我們定義好網頁大小的基本版型,所以上面的問題都能輕鬆解決囉。


.container

<body>
   <div class="container">
      ...
   </div>
</body>

.container 幫我們定義了適當寬度(適不適當就見仁見智啦...),也就是左右有稍微留白。很適合簡單的網誌或是小型網站。

  • 螢幕寬度>768px,.container 750px
  • 螢幕寬度>992px,.container 970px
  • 螢幕寬度>1200px,.container 1170px

.container-fluid

<body>
   <div class="container-fluid">
      ...
   </div>
</body>

.container-fluid沒有設寬度,所以一直是滿版,適合用在需要一直滿版的網站。

以上介紹到這,來看看兩者實際上的差異。



.container vs .container-fluid

(Plunkr)
<body>
   <div class="container-fluid">...</div>
   <div class="container>...</div>
</body>


.container vs .container-fluid 導覽列

(Plunkr)

在前一個例子中,.container和.container-fluid分別加入一個導覽列

<div class="navbar navbar-default">
     <div class="navbar-header">
         <a class="navbar-brand text-warning">container...</a>
       </div>
</div>

留言

這個網誌中的熱門文章

AngularJS (2) 用 $filter 轉換數值和過濾