1

Twitter ブートストラップを使用して Web アプリを開発しています。独自の背景で独自のボタンを作成したい、btn-primaryなどを使用して既に存在するボタンを使用したくない...しかし、独自のクラスで独自のボタンを作成したい. btnクラスのコア機能を使用したい。理想的には、私のボタンはclass=" btn btn-myPrimary".

variables.less と buttons.less をチェックインしましたが、 などの既存のボタンの値を変更することしかできませんbtn-primary。のような独自のボタンを作成できませんbtn-myPrimary。

助けてくれてありがとう。

4

2 に答える 2

7

less ファイルをコンパイルできる場合は、このボタン mixin ( mixins.lessから)を使用できます。

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
...

buttons.lessを見ると、どのように使用されているかがわかります。

.btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
于 2013-10-08T07:03:11.817 に答える
2

ref links以下のように

リンク

于 2013-10-08T06:58:28.237 に答える