瞭解下Foundation 按鈕組

大雄45發表於2022-08-19
導讀 Foundation 可以在同一行內建立一系列的按鈕，可以使用<ul>元素並新增 .button-group 類來建立按鈕組。
按鈕組

Foundation 可以在同一行內建立一系列的按鈕。

可以使用<ul>元素並新增 .button-group 類來建立按鈕組：

例項
 
    Apple
    Samsung
    Sony
垂直按鈕組

垂直按鈕組使用 .stack 類來建立。注意，按鈕會跨越父元素的整個寬度:

例項
 
    Apple
    Samsung
    Sony

.stack-for-small 類用於小尺寸的螢幕，按鈕有水平排列變為垂直排列：

例項
 
    Apple
    Samsung
    Sony
圓角按鈕組

按鈕組中使用 .radius 和 .round 類為按鈕新增圓角效果：

例項
 
    Apple
均勻延展按鈕組

.even-num 類用於在按鈕組中均勻的分配按鈕的寬度並跨越父元素 100% 寬度。

num 為按鈕組中按鈕的數量，從 1 到 8：

例項
 
    Apple
    Samsung
    Sony
 
    Apple
    Samsung
    Sony
    HTC
    Huawei
 
    A  B  C  D  E  F  G  H
下拉選單按鈕

下拉選單按鈕可以讓使用者選取設定好的值：

例項
   Dropdown Button

原文來自：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69955379/viewspace-2911129/，如需轉載，請註明出處，否則將追究法律責任。

相關文章