Foundation 塊狀網格
塊狀網格用於均分頁面內容:例如一行內要顯示四張圖片,不管什麼屏幕下都需要均分寬度。
可以使用 <ul>
元素加上 .small|medium|large-block-grid-num
類來創建塊狀網格。num 用於指定均分是數量:
實例
<ul class="small-block-grid-3">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
另一個實例,使用段落:
實例
<ul class="small-block-grid-3">
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
</ul>
不同尺寸屏幕顯示不同數量
通過添加多個網格塊類可以設置不同尺寸屏幕顯示不同的塊數量:
實例
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
※Foundation 網格-大型設備
※Foundation 網格系統
※Foundation 均衡器(Equalizer)
TAG:程序員小新人學習 |
※如何在亞洲多個「城市網格」中,演繹 adidas Originals DEERUPT?
※Nature再發DeepMind研究:AI復現大腦網格細胞模擬導航!
※PowerPoint中的標尺、網格線及參考線
※網格交易的頭部玩家,BitUniverse到底怎麼樣?
※利用photoshop製作一個科技感線條網格
※Atomontage採用體素技術取代多邊形圖形網格
※5月機器學習TOP 10熱文:Google Duplex,「換臉術」、網格單元
※Nature在線公布穀歌DeepMind重大成果,AI替科學家搞定「網格細胞」,要搶諾貝爾獎?
※使用網格搜索優化CatBoost參數
※Firefox開始支持子網格,產生新的網格布局
※Adv.Mater:3D列印高剛性&韌性多核殼架構網格
※NYU Courant 二年級博士生薑仲石:網格曲面的神經網路
※英偉達用Asteroids展示網格著色技術 顯著提高圖像質量
※如何使用Python超參數的網格搜索ARIMA模型
※Lumin OS 0.97已支持多人模式,加入手部網格API
※TeXtreme展寬碳纖維織物又添±45°網格布新成員
※Nature:利用人工智慧模擬大腦中的網格細胞
※今日Nature,AI已經替人搞定網格細胞,下面要搶諾貝爾獎?
※今日芯品:Vishay將展出其最新的網格和繞帶電阻
※Shams:籃網格拉漢姆左腿筋撕裂 預計將缺戰兩個月