1. 程式人生 > >bootstrap自定義功能按鈕

bootstrap自定義功能按鈕

在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即可。