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>
留言
張貼留言