有時候我們會想要在行動裝置的寬度下,讓按鈕中的文字或圖案消失,在不變更版面的排列下讓UI的體驗可以更加一致性,這篇文章將展示如何做到這樣的語法。
首先我們有下列的HTML:
<div class="row col-12 mt-4"> <div class="col-8 col-md-6"> <h3><i class="fab fa-microsoft fa-fw"></i> OOO管理系統</h3> </div> <div class="col-4 col-md-6"> <div class="d-inline float-right"> <a href="#" class="btn btn-primary"><i class="fas fa-check fa-fw"></i> 新增</a> <a href="#" class="btn btn-danger"><i class="fas fa-times fa-fw"></i> 刪除</a> </div> </div> </div>
畫面如下:
而我們希望如果畫面寬度再進一步縮小,是否可以留下打勾跟打叉的ICON就好,新增跟刪除的中文字眼可以消失。
答案就是利用d-none CSS類別來進行控制,例如某個元素只想要在md(Medium)以上的裝置才顯現,md以下的裝置都消失,則我們可以使用這樣的語法。
OOO<span class="d-none d-md-inline">這行字在md以下的裝置會消失喔!</span>OOO
承剛才的HTML,套用上去後會長的如下:
<div class="row col-12 mt-4"> <div class="col-8 col-md-6"> <h3><i class="fab fa-microsoft fa-fw"></i> OOO管理系統</h3> </div> <div class="col-4 col-md-6"> <div class="d-inline float-right"> <a href="#" class="btn btn-primary"><i class="fas fa-check fa-fw"></i> <span class="d-none d-sm-inline">新增</span></a> <a href="#" class="btn btn-danger"><i class="fas fa-times fa-fw"></i> <span class="d-none d-sm-inline">刪除</span></a> </div> </div> </div>
在sm(Small)、xs(Extra small)這種可視寬度極小的狀況下,新增跟刪除的字眼消失嘍!