Стильные кнопки Twitter Bootstrap 3.x

Щебетать Bootstrap 3 ограничены в цветах. По умолчанию будет 5 7 цветов (по умолчанию основной, ошибка, предупреждение, информация, успех и ссылка). Смотрите:

Каждая кнопка получила 3 состояния (по умолчанию, активна и отключена)

Как добавить больше цветов или создать пользовательские кнопки? Этот вопрос уже ответил для Twitter Bootstrap 2.x: Стилизация твиттерных загрузочных кнопок. Bootstrap 3 не поддерживает обратную совместимость. В файлах less и css будет много изменений. Поддержка IE7 будет отключена. TB3 является мобильным первым. Коды разметки также будут изменены.

Ответ 1

Добавьте дополнительные цвета в свои файлы и перекомпилируйте их. Также см. Лучшие рекомендации по настройке бутстрапа Twitter. Обновление

Как упоминалось @ow3n, так как v3.0.3 использует:

.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

Примечание в приведенном выше @btn-default-color устанавливает цвет шрифта, @btn-default-bg цвет фона и @btn-default-border цвет границы. Цвета для состояний, таких как активный, зависающий и отключенный, рассчитываются на основе этих параметров.

Например:

.btn-custom {
  .button-variant(blue; red; green);
}

приведет к:

Для тех, кто хочет использовать CSS direct, замените цвета в этом коде:

.btn-custom {
  color: #0000ff;
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #0000ff;
  background-color: #d60000;
  border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom .badge {
  color: #ff0000;
  background-color: #0000ff;
}

окончательное обновление

Чтобы создать пользовательскую кнопку:

.btn-custom {
    .btn-pseudo-states(@yourColor, @yourColorDarker);
 }

Вышеприведенное будет генерировать следующий css:

.btn-custom {
  background-color: #1dcc00;
  border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #19b300;
  border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #1dcc00;
  border-color: #1dcc00;
}

В приведенном выше # 1dcc00 будет ваш собственный цвет и # 19b300 ваш темный цвет. Вместо меньшего решения вы также можете добавить этот css прямо в ваши html файлы (после загрузки css).

Или получите свой код css прямо из Twitter Bootstrap 3 Button Generator

Ответ 2

Это довольно легко сделать с необработанным css, а также

CSS

.btn-purple {
    background: #9b59b6;
    border-color: #9b59b6;
}

.btn-purple:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

.btn-teal {
    background: #1abc9c;
    border-color: #1abc9c;
}

.btn-teal:hover {
    background: #16a085;
    border-color: #16a085;
 }

HTML

<button class="btn btn-purple">purple</button>

<button class="btn btn-teal">teal</button>

Скрипт: http://jsfiddle.net/z7hV6/

Ответ 3

После поиска этого решения через google и понимания кнопок бутстрапа я нашел следующий инструмент для создания разных цветов для кнопок начальной загрузки.

Это означает, что вам придется добавить это в отдельный css, но он идеально подходит для того, что мне нужно. Здесь надеются, что это полезно для других:

http://twitterbootstrap3buttons.w3masters.nl/

Ответ 4

Вот хороший и простой способ создать дополнительные цвета кнопки Bootstrap

Генератор кнопок начальной загрузки

Ниже приведен образец CSS, который он будет генерировать:

.btn-sample { 
  color: #ffffff; 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample:hover, 
.btn-sample:focus, 
.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  color: #ffffff; 
  background-color: #49247A; 
  border-color: #130269; 
} 

.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  background-image: none; 
} 

.btn-sample.disabled, 
.btn-sample[disabled], 
fieldset[disabled] .btn-sample, 
.btn-sample.disabled:hover, 
.btn-sample[disabled]:hover, 
fieldset[disabled] .btn-sample:hover, 
.btn-sample.disabled:focus, 
.btn-sample[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-sample.disabled:active, 
.btn-sample[disabled]:active, 
fieldset[disabled] .btn-sample:active, 
.btn-sample.disabled.active, 
.btn-sample[disabled].active, 
fieldset[disabled] .btn-sample.active { 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample .badge { 
  color: #611BBD; 
  background-color: #ffffff; 
}

Ответ 5

Я искал возможное решение довольно долго, чтобы стилизовать кнопки бутстрапа. Я следовал последнему языку стиля css (http://lesscss.org/) и довольно обходным путем для настройки кнопок, но ни один из них не был полезен. Есть довольно удивительные генераторы кнопок начальной загрузки, доступные в Интернете, такие как http://www.plugolabs.com/twitter-bootstrap-button-generator/ и многие другие. Но, к моему удивлению, одна строка кода в файле css работала прилично для меня. (Примечание: вместо "background-color" я использовал "background" в качестве параметра, чтобы указать имя цвета кнопки. В html-коде я использовал btn-custom как имя класса, которое я переопределил в css файл.)

Код HTML

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

Код CSS

.btn-custom {
    background: #colorname; 
}

Ответ 6

Вот еще одна альтернатива с тем преимуществом, что вы можете добавить столько "действий кнопок" (цветов), сколько хотите. Здесь короткое демонстрационное видео: Использование кнопок Unicorn-UI с помощью бутстрапа Twitter

Если вы захватите библиотеку и скомпилируете себя, вы можете определить столько "действий кнопок", отредактировав список Sass, который выглядит следующим образом:

$ubtn-colors: ('primary' #1B9AF7  #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37  #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;

Добавление как можно большего количества настраиваемых типов (и, конечно, также удаление тех, которые вам не нужны).