bootstrap自定義功能按鈕
阿新 • • 發佈:2019-02-12
在bs中,都有用過.btn-defaule
或者 .btn-primary
,我們也可以自定義我們想要的按鈕效果。
(1)準備一組新的按鈕變數,在 bs,less檔案中,開啟variables.less,
可以看到原始的一些資料,
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
按照這個模子寫我們自己的
@brand-feature: #ff0 ;
@btn-feature-color: #fff;
@btn-feature-bg: @brand-feature; //注意,@brand-feature需我們自己在上面定義,或者你寫成顏色值,也可,考慮到多處需要用到,還是在上面定義一下比較好
@btn-feature-border: darken(@btn-feature-bg, 5%);
(2)然後建立一個資料夾來儲存自定義按鈕的樣式,新建buttons-custom.less並根據bootstrap/buttons.less中的混入寫一個下面這樣的混入呼叫。
.btn-feature{
.button-variant(@btn-feature-color; @btn-feature-bg; @btn-feature-border);
}
在bootstrap/mixins.less,可以看到.button-variant
的呼叫方式
.button-variant(@color; @background; @border)
在buttons.less
中可以看到.btn-default
等是如何呼叫的。
(3)儲存檔案,,並新增到bootstrap.less
中,進行編譯。
(4)在網頁中進行呼叫 .btn-feature
即可。