Foundation 按鈕
按鈕樣式
Foundation 提供了6 種按鈕樣式。 .button
類創建了一個藍色的按鈕並附有內邊距。 不同顏色按鈕類為: .secondary
, .success
, .info
, .warning
或.alert
:
實例
< button type= "button" class= "button" > Default < /button >
< button type= "button" class= "button secondary" > Secondary < /button >
< button type= "button" class= "button success" > Success < /button >
< button type= "button" class= "button info" > Info < /button >
< button type= "button" class= "button warning" > Warning < /button >
< button type= "button" class= "button alert" > Alert < /button >
< button type= "button" class= "button secondary" > Secondary < /button >
< button type= "button" class= "button success" > Success < /button >
< button type= "button" class= "button info" > Info < /button >
< button type= "button" class= "button warning" > Warning < /button >
< button type= "button" class= "button alert" > Alert < /button >
嘗試一下»
按鈕類可以使用在<a>
, <button>
,或<input>
元素:
實例
< a href= "#" class= "button info" role= "button" > Link Button < /a >
< button type= "button" class= "button info" > Button < /button >
< input type= "button" class= "button info" value= "Input Button" >
< input type= "submit" class= "button info" value= "Submit Button" >
< button type= "button" class= "button info" > Button < /button >
< input type= "button" class= "button info" value= "Input Button" >
< input type= "submit" class= "button info" value= "Submit Button" >
嘗試一下»
為什麼將a標籤的href設置為# ? 當我們不希望鏈接點擊跳轉並得到"404" 頁面時,我們可以將a 標籤的href 設置為#。 |
按鈕大小
我們可以使用.large
, .small
或.tiny
類來設置按鈕大小:
實例
< button type= "button" class= "button large" > Large < /button >
< button type= "button" class= "button" > Default < /button >
< button type= "button" class= "button small" > Small < /button >
< button type= "button" class= "button tiny" > Tiny < /button >
< button type= "button" class= "button" > Default < /button >
< button type= "button" class= "button small" > Small < /button >
< button type= "button" class= "button tiny" > Tiny < /button >
嘗試一下»
圓角按鈕
可以使用.radius
和.round
類來設置圓角按鈕:
實例
< button type= "button" class= "button" > Default Button < /button >
< button type= "button" class= "button radius" > Radius Button < /button >
< button type= "button" class= "button round" > Round Button < /button >
< button type= "button" class= "button radius" > Radius Button < /button >
< button type= "button" class= "button round" > Round Button < /button >
嘗試一下»
延展按鈕
可以使用.expand
類來設置按鈕的寬帶為100%:
實例
< button type= "button" class= "button" > Default Button < /button >
< button type= "button" class= "button expand" > Expanded Button < /button >
< button type= "button" class= "button expand" > Expanded Button < /button >
嘗試一下»
禁用按鈕
可以使用.disabled
類來設置按鈕不可點擊:
實例
< button type= "button" class= "button" > Default Button < /button >
< button type= "button" class= "button disabled" > Disabled Button < /button >
< button type= "button" class= "button disabled" > Disabled Button < /button >
嘗試一下»