學(xué)習(xí)Bootstrap中的按鈕樣式與使用方法
不同樣式的按鈕在任何網(wǎng)頁中,按鈕是常見的元素之一。一個(gè)好的按鈕樣式可以為網(wǎng)站帶來獨(dú)特的美感。下面我們來看一下Bootstrap中的按鈕吧。六種按鈕樣式在Bootstrap中,按鈕有六種不同的展現(xiàn)方式,
不同樣式的按鈕
在任何網(wǎng)頁中,按鈕是常見的元素之一。一個(gè)好的按鈕樣式可以為網(wǎng)站帶來獨(dú)特的美感。下面我們來看一下Bootstrap中的按鈕吧。
六種按鈕樣式
在Bootstrap中,按鈕有六種不同的展現(xiàn)方式,分別為默認(rèn)、主要、成功、信息、警告、危險(xiǎn)和鏈接。
1. 默認(rèn):btn-default
2. 主要:btn-primary
3. 成功:btn-success
4. 信息:btn-info
5. 警告:btn-warning
6. 危險(xiǎn):btn-danger
7. 鏈接:btn-link
其他標(biāo)簽中使用按鈕樣式
從上面的樣式可以看出來,其實(shí)在其他標(biāo)簽也可以使用按鈕樣式,而且同樣也可以達(dá)到我們想要的效果。比如,我們可以用一個(gè)默認(rèn)的樣式,將 "a" 鏈接改成一個(gè)按鈕。當(dāng)然,同樣的效果可以通過 span 元素實(shí)現(xiàn),但是推薦使用 button 標(biāo)簽的方式,因?yàn)樗玫丶嫒莶煌臑g覽器。
按鈕尺寸大小
Bootstrap還定義了一些樣式來控制按鈕的尺寸大小,包括最大樣式(btn-lg)、平板樣式(btn-sm)和手機(jī)版樣式(btn-xs),此外還有一個(gè)默認(rèn)樣式,即不使用 btn-* 的樣式。這些不同的樣式可以根據(jù)實(shí)際需求進(jìn)行選擇。
移動(dòng)端適配
在移動(dòng)端,有時(shí)候我們需要讓按鈕占一行,這樣顯示效果更加舒服和好看。這時(shí)可以使用樣式 btn-block,它的作用是使按鈕充滿父節(jié)點(diǎn)100%的寬度,并且將按鈕變?yōu)閴K級(jí)(block)元素。
禁用按鈕
如果想要禁用按鈕,可以使用 disabled"disabled" 屬性。但需要注意,在IE及更低版本中,這個(gè)屬性會(huì)繪制一個(gè)灰色的背景和陰影,目前還沒有辦法完全解決這個(gè)問題。
多做嘗試
學(xué)習(xí)Bootstrap中的按鈕樣式與使用方法,最重要的是去實(shí)踐、去嘗試。只有在實(shí)踐中遇到問題,我們才能找到解決問題的方法。因此,在學(xué)習(xí)的過程中,多嘗試不同的組合方法,讓自己出錯(cuò)也是一種進(jìn)步。