bootstrap按鈕樣式有哪些 為什么修改了bootstrap的css文件自定義的樣式不起作用?
為什么修改了bootstrap的css文件自定義的樣式不起作用?引導(dǎo)已經(jīng)成為前端開(kāi)發(fā)不可或缺的框架之一。bootstrap的應(yīng)用使得布局和樣式的設(shè)置非常簡(jiǎn)單。然而,bootstrap提供的默認(rèn)樣式往往
為什么修改了bootstrap的css文件自定義的樣式不起作用?
引導(dǎo)已經(jīng)成為前端開(kāi)發(fā)不可或缺的框架之一。bootstrap的應(yīng)用使得布局和樣式的設(shè)置非常簡(jiǎn)單。
然而,bootstrap提供的默認(rèn)樣式往往不能滿足我們的需要,因此定制bootstrap成為我們經(jīng)常需要做的工作。本文討論了如何更有效、更易維護(hù)地定制引導(dǎo)。如下圖所示,通過(guò)向按鈕添加bootstrap類:BTN BTN primary,您可以將默認(rèn)按鈕(左)更改為右樣式。但是如果我們想應(yīng)用我們自己的風(fēng)格,例如,我們希望有圓形按鈕。通常,我們可以直接覆蓋引導(dǎo)樣式。我們?cè)谧约旱捻?xiàng)目目錄中創(chuàng)建我的-自定義.cssBTN{-WebKit border radius:20px-Moz border radius:20px border radius:20px}將我的-自定義.css文件引用引導(dǎo).css在文件末尾,我們定義的BTN樣式將覆蓋原始樣式(注意:這里的“cover”指的是增量覆蓋樣式)。但這種方法有其優(yōu)缺點(diǎn),優(yōu)點(diǎn):不會(huì)改變你的工作流程。您可以快速直接地修改您的樣式。即使您的網(wǎng)站引用了類似于bootstrap的其他框架樣式,您也可以在同一位置自定義它們。缺點(diǎn):不過(guò),對(duì)于更徹底的修改(如重新設(shè)計(jì)導(dǎo)航欄)或非本地修改(如修改適用于整個(gè)網(wǎng)站的突出顯示顏色),東西方覆蓋風(fēng)格更像是一種修補(bǔ)解決方案。另外,您的新樣式應(yīng)該添加到bootstrap的默認(rèn)樣式表中,以使已經(jīng)100kb的文件變得越來(lái)越龐大。如果您不只是想做一些覆蓋,請(qǐng)考慮一種更具可伸縮性的方法。另一種方法是生成定制的引導(dǎo)。我們可以使用官方的生成器,你可以在bootstrap中自定義樣式變量。如下圖所示:
如何更改bootstrap的字體樣式?
不建議使用*{}選擇器,因?yàn)樵谄渌恍邮讲寮吞厥獠糠种袝?huì)有更好的字體樣式設(shè)置,并且會(huì)完全被*.*覆蓋。在正常引入引導(dǎo)的CSS樣式之后,記得在它后面放上自定義樣式表,然后主.css在第一句中,添加:body,button,input,select,textarea,H1,H2,H3,H4,H5,H6{字體系列:Microsoft YaHei,“Tahoma,Helvetica,Arial,”5b8b4f53“,Sans-serif}用Microsoft YaHei替換了首選字體,后者在用英語(yǔ)書(shū)寫字體名稱時(shí)具有更好的兼容性,在所有瀏覽器中都很常見(jiàn)。之所以要寫H1~H6的標(biāo)簽,是因?yàn)樵谧钚碌腷ootstrap3中H1~H6的字體是分開(kāi)設(shè)置的。