Foundation 網格實例
以下我們收集了一些網格常用的實例。
三個均等列
該實例演示瞭如何創建三個均等列(33.3%/33.3%/33.3%) ,在中型和大型設備上顯示三個列,在小型設備上自動堆疊:
實例
< div class= "medium-4 columns" style= "background-color:yellow;" >
< p > .medium-4 < /p >
< /div >
< div class= "medium-4 columns" style= "background-color:pink;" >
< p > .medium-4 < /p >
< /div >
< div class= "medium-4 columns" style= "background-color:yellow;" >
< p > .medium-4 < /p >
< /div >
< /div >
嘗試一下»
三個不均等列
該實例演示瞭如何創建三個不均等列(25%/50%/25%),在中型和大型設備上顯示三個列,在小型設備上自動堆疊:
實例
< div class= "medium-3 columns" style= "background-color:yellow;" >
< p > .medium-3 < /p >
< /div >
< div class= "medium-6 columns" style= "background-color:pink;" >
< p > .medium-6 < /p >
< /div >
< div class= "medium-3 columns" style= "background-color:yellow;" >
< p > .medium-3 < /p >
< /div >
< /div >
嘗試一下»
兩個均等列
該實例演示瞭如何創建兩個均等列(50%/50%),在小型、中型和大型設備上列的比例始終為50%/50%:
實例
< div class= "small-6 columns" style= "background-color:yellow;" >
< p > .small-6 < /p >
< /div >
< div class= "small-6 columns" style= "background-color:pink;" >
< p > .small-6 < /p >
< /div >
< /div >
嘗試一下»
兩個不均等列
該實例演示瞭如何創建兩個不均等列(33.3%/66.6%),在小型、中型和大型設備上列的比例始終為33.3%/66.6%:
實例
< div class= "small-8 columns" style= "background-color:yellow;" >
< p > .small-8 < /p >
< /div >
< div class= "small-4 columns" style= "background-color:pink;" >
< p > .small-4 < /p >
< /div >
< /div >
嘗試一下»
修改列的順序
通過使用.small|medium|large-push-*
和.small|medium|large-pull-*
類來修改列的順序:
實例
< div class= "small-4 small-8-push columns" style= "background-color:yellow;" >
< p > .small-4 .small-8-push < /p >
< /div >
< div class= "small-8 small-4-pull columns" style= "background-color:pink;" >
< p > .small-8 .small-4-pull < /p >
< /div >
< /div >
嘗試一下»
嵌套列
你可以使用嵌套網格(列中插入列):
實例
< div class= "small-8 columns" > .small-8
< div class= "row" >
< div class= "small-8 columns" > .small-8 Nested
< div class= "row" >
< div class= "small-8 columns" > .small-8 Nested Again < /div >
< div class= "small-4 columns" > .small-4 < /div >
< /div >
< /div >
< div class= "small-4 columns" > .small-4 < /div >
< /div >
< /div >
< div class= "small-4 columns" > .small-4 < /div >
< /div >
嘗試一下»
混合:手機、桌面設備
Foundation網格系統有三個列: .small-*
(手機), .medium-*
(平板),和.large-*
(桌面設備)。 這些類可以動態組合使用,讓佈局更加靈活:
提示:每個類都能放大,如果你希望小型和大型屏幕設備的寬度一樣可以設置指定.small-*
。
實例
< div class= "small-6 large-8 columns" > .small-6 .large-8 < /div >
< div class= "small-6 large-4 columns" > .small-6 .large-4 < /div >
< /div >
< div class= "row" >
< div class= "small-2 large-4 columns" > .small-2 .large-2 < /div >
< div class= "small-4 large-4 columns" > .small-4 .large-2 < /div >
< div class= "small-6 large-4 columns" > .small-6 .large-2 < /div >
< /div >
< div class= "row" >
< div class= "small-3 large-5 columns" > .small-3 .large-5 < /div >
< div class= "small-9 large-7 columns" > .small-9 .large-7 < /div >
< /div >
嘗試一下»
混合:手機、平板和桌面設備
實例
< div class= "medium-6 large-8 columns" > .medium-6 .large-8 < /div >
< div class= "medium-6 large-4 columns" > .medium-6 .large-4 < /div >
< /div >
< div class= "row" >
< div class= "small-4 medium-3 large-7 columns" > .small-4 .medium-3 .large-7 < /div >
< div class= "small-4 medium-6 large-3 columns" > .small-4 .medium-6 .large-3 < /div >
< div class= "small-4 medium-3 large-2 columns" > .small-4 .medium-3 .large-2 < /div >
< /div >
嘗試一下»
居中列
列居中可以使用.small-centered
類。 中型和大型設備可以繼承小型設備的居中,但你需要在大型設備上設置居中類.large-centered
。
實例
< div class= "small-4 small-centered columns" > small-4 small-centered < /div >
< /div >
< div class= "row" >
< div class= "small-6 small-centered columns" > small-6 small-centered < /div >
< /div >
< div class= "row" >
< div class= "small-6 large-centered columns" > small-6 large-centered < /div >
< /div >
< div class= "row" >
< div class= "small-8 small-centered large-uncentered columns" > small-8 small-centered large-uncentered < /div >
< /div >
< div class= "row" >
< div class= "small-10 small-centered columns" > small-10 small-centered < /div >
< /div >
嘗試一下»
列偏移量
可以使用.large-offset-*
(或.small-offset-*
)類設置列向右移。 左側外邊距的列數量使用* 號控制:
實例
< div class= "large-1 columns" > 1 < /div >
< div class= "large-11 columns" > 11 < /div >
< /div >
< div class= "row" >
< div class= "large-1 columns" > 1 < /div >
< div class= "large-10 large-offset-1 columns" > 10, offset 1 < /div >
< /div >
< div class= "row" >
< div class= "large-1 columns" > 1 < /div >
< div class= "large-9 large-offset-2 columns" > 9, offset 2 < /div >
< /div >
< div class= "row" >
< div class= "large-1 columns" > 1 < /div >
< div class= "large-8 large-offset-3 columns" > 8, offset 3 < /div >
< /div >
嘗試一下»
不完整列
如果一行中的列數量之和不是12 , Foundation 將自動將最後一列向右浮動,並使用空白來填充剩下的列。
可選項.end
類用於設置最後一列的元素向左邊浮動:
實例
< div class= "medium-3 columns" > .medium-3 < /div >
< div class= "medium-3 columns" > .medium-3 < /div >
< div class= "medium-3 columns" > .medium-3 < /div >
< /div >
< div class= "row" >
< div class= "medium-3 columns" > .medium-3 < /div >
< div class= "medium-3 columns" > .medium-3 < /div >
< div class= "medium-3 columns end" > .medium-3 .end < /div >
< /div >
寬屏
網格( .row
)最大尺寸( max-width)為62.5rem。 在寬屏設備上尺寸可能大於62.5rem, 這樣列就無法完整填充頁面,即便寬度設置為100%。 但是我們可以通過CSS 來設置新的max-width:
如果你想使用默認的max-width,但是背景顏色需要跨域整個頁面,這時你在容器元素上使用.row
類,並指定你需要的背景顏色:
實例
< div class= "row" >
< div class= "small-6 columns" style= "background-color:yellow;" > .small-6 < /div >
< div class= "small-6 columns" style= "background-color:pink;" > .small-6 < /div >
< /div >
< /div >
嘗試一下»