BS3 Containers
簡介
在 bootstrap 中，定義容器 (container) 的基礎樣式類別有二種：.container 及 .container-fluid。.container 類別為固定寬度，在螢幕尺寸模式為 large, medium 及 small 時，容器於該螢幕尺寸模式下具有固定的寬度，不會隨著流覽器的尺寸改變而改變，只有在螢幕尺寸模式切換時，會改變容器的寬度。唯在 extra small 的模式下，其定義和 .container-fluid 的定義相同，行為模式也一樣。.container-fluid 類別的容器會佔據流覽器的全部寬度；因此，當流覽器的寬度改變時，便會立即改變容器的寬度，在任何螢尺寸幕模式下，行為都一致。
以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中與 .container 及 .container-fluid 相關的樣式定義：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
第 1~6 行定義了預設螢幕尺寸模式，也就是 extra small 的模式下，.container 類別的屬性設定，其設定和 .container-fluid 類別的設定是一樣的。第7~21 行，則用媒體查詢 (media query) 的語法，分別設定了 .container 類別容器在 small, medium 及 large 螢幕尺寸模式下，寬度分別為 750px, 970px 及 1170px。使用 .container 類別容器時，要注意有時會因為裝置正落於某一螢幕尺寸模式下，但其流覽器寬度卻比 .container 在該模式下所設定的寬度要小，此時容器的右邊內容會被切除，需要用移動水平捲軸才能看到被切除部份的內容。在行動裝置的螢幕尺寸這麼多樣化的情形下，這是很可能發生的情況；要留意處理。
範例
範例中建立了一個 CSS 類別為 .container 和一個 CSS 類別為 .container-fluid 的兩個容器，改變流覽器的寬度，可以觀察兩種不同容器的寬度變化。
CSS
<style>
html {
width:100%;
height:100%;
overflow-x: scroll;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
border: 1px solid gray;
}
.container {
background-color:lightgreen;
max-width: 960px;
}
.container-fluid {
background-color: coral;
}
div[class^="col"] {
line-height: 2em;
border: 2px solid white;
}
</style>
因為在 body{} 中已經將寬度限制在最大為 1000px，加上左、右兩邊的 20px 留白，內容部份正是 960px。這個寬度比 .container 在 medium 中設定的 970px 及 large 中設定的 1170px 寬度都要小，所以 CSS 類別為 .container 的內容都會超出流覽器；因此，另外為 .container{} 設定 max-width 為 960px，以限制 .container 的最大寬度。由此得知，如果為body 設定了寬度，也需考慮為 .container 設定相對應的寬度。
HTML
<body>
.container
col-xs-12 col-sm-12 col-md-6 col-lg-6
col-xs-12 col-sm-12 col-md-6 col-lg-6
.container-fluid
col-xs-12 col-sm-12 col-md-6 col-lg-6
col-xs-12 col-sm-12 col-md-6 col-lg-6
</body>
HTML 中建立二個容器，設定其 CSS 類別各為 .container 及 container-fluid。容器下各含一列 (row) ，列下有三個元件。
沒有留言:
張貼留言