Latest web development tutorials

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 >

嘗試一下»

按鈕類可以使用在<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" >

嘗試一下»

Note 為什麼將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 >

嘗試一下»

圓角按鈕

可以使用.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 >

嘗試一下»

延展按鈕

可以使用.expand類來設置按鈕的寬帶為100%:

實例

< button type= "button" class= "button" > Default 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 >

嘗試一下»