新聞中心
Foundation 按鈕
按鈕樣式
Foundation 提供了 6 種按鈕樣式。 .button 類創(chuàng)建了一個(gè)藍(lán)色的按鈕并附有內(nèi)邊距。不同顏色按鈕類為: .secondary, .success, .info, .warning 或 .alert:

目前創(chuàng)新互聯(lián)已為超過(guò)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、邵陽(yáng)網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
實(shí)例
<
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
>
嘗試一下 ?
實(shí)例
<
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"
>
嘗試一下 ?
| 為什么將 a 標(biāo)簽的 href 設(shè)置為 # ? 當(dāng)我們不希望鏈接點(diǎn)擊跳轉(zhuǎn)并得到 "404" 頁(yè)面時(shí),我們可以將 a 標(biāo)簽的 href 設(shè)置為 #。 |
按鈕大小
我們可以使用 .large, .small 或 .tiny 類來(lái)設(shè)置按鈕大?。?/p>
實(shí)例
<
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 類來(lái)設(shè)置圓角按鈕:
實(shí)例
<
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 類來(lái)設(shè)置按鈕的寬度為 100%:
實(shí)例
<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>
<
button
type=
"button"
class=
"button expand"
>Expanded Button
<
/button
>
嘗試一下 ?
禁用按鈕
可以使用 .disabled 類來(lái)設(shè)置按鈕不可點(diǎn)擊:
實(shí)例
<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>
<
button
type=
"button"
class=
"button disabled"
>Disabled Button
<
/button
>
嘗試一下 ?
分享文章:創(chuàng)新互聯(lián)Foundation教程:Foundation按鈕
網(wǎng)站地址:http://www.dlmjj.cn/article/cccdpsi.html


咨詢
建站咨詢
