Foundation 網格-小型設備
假設我們在小型設備上有一個簡單的網格布局,兩列,寬度比例為 25% 和 75%。
提示: 小型設備的定義是屏幕小於 40.0625em
。
小型設備上我們使用 .small-*
類。
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
以下實例設置了兩個列,比例為 25% 和 75% (Foundation 是移動優先: 如果沒有特別說明,在大型設備上會繼承 .small 類的代碼): .small
in them and use those".
實例
<div class="row">
<div class="small-3 columns" stylex="background-color:yellow;">
<p>菜鳥</p>
</div>
<div class="small-9 columns" stylex="background-color:pink;">
<p>菜鳥教程</p>
</div>
</div>
如果需要設置 33.3%/66.6% 的比例,你可以使用 .small-4
和 .small-8
:
實例
<div class="row">
<div class="small-4 columns" stylex="background-color:yellow;">
<p>菜鳥</p>
</div>
<div class="small-8 columns" stylex="background-color:pink;">
<p>菜鳥</p>
</div>
</div>
注意:
要保證數列加起來是 12 列!※Foundation 均衡器(Equalizer)
※Foundation 網格-水平堆疊
※Foundation 網格-中型設備
※Foundation 開關
※Foundation 滑塊
TAG:程序員小新人學習 |
※如何檢查你的Iphone、Android及Windows設備存在Spectre Bug
※Google Lens將登陸更多Android設備
※如何使用 TensorFlow mobile將PyTorch和Keras 部署到移動設備
※Facebook 發布視頻聊天設備 Portal,以及 Portal Plus
※Cisco 設備中的linux容器
※在 Android 設備上運行 Linux
※Zynga的《CSR Racing 2》AR模式進入Android設備
※John Carmack:Quest與Switch同為便攜遊戲設備,或成
※索尼PS4 Remote Play正式登陸iPhone/iPad設備
※Windows Lite系統爆料:將用於雙屏設備和Chromebook競品上
※Inclusive Technology發布通過滑鼠操縱iOS設備的適配器
※VRgineers將Leap Motion手勢追蹤集成到VRHero頭戴設備
※Google的「ARCore 1.2」實現對iPhone系統設備的兼容
※CES 2019:Antilatency讓Oculus Go成為多用戶6DoF VR設備
※Molex 汽車功率輸出模塊充分利用Microchip Technology 的創新性設備
※8.17 VR掃描:HTC宣布Viveport將支持Oculus Rift;OptiTrack推出新動捕設備
※Cradlepoint為AT&T提供5G路由器設備
※Valve宣布遊戲串流應用Steam Link Anywhere 不支持iOS設備
※Phil Spencer表示希望讓Xbox Game Pass登陸更多設備
※蜂窩版iPad mini5體驗,比iPhone還好的移動iOS設備?