Styling Twitter Bootstrap 3.x Кнопки

Question

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

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

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

Answer 1

Добавьте дополнительные цвета в свои файлы и перекомпилируйте их. Также см. Twitter Bootstrap Customization Best Practices. обновление

Как упомянуто @ ow3n поскольку использование 3.0.3:

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

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

Например:

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

приведет:

Для желающих использовать CSS прямой, заменять цвета в этом коде:

.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's Bootstrap 3 Button Generator

Answer 2

Я искал возможное решение на некоторое время, чтобы стилизовать бутстраповскую кнопку. Я следил за последним языком стиля 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; 
} 

Answer 3

Это довольно легко сделать это с необработанной 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> 

Fiddle на: http://jsfiddle.net/z7hV6/

Answer 4

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

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

http://twitterbootstrap3buttons.w3masters.nl/

Answer 5

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

Bootstrap Button Generator

Ниже приведен образец 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; 
} 

Answer 6

Вот еще одна альтернатива с тем преимуществом, что вы можете добавить столько «действий кнопок» (цветов) как пожелаете. Вот короткое видео демо: Using Unicorn-UI Buttons with Twitter Bootstrap

Если взять библиотеку и скомпилировать самостоятельно, вы можете определить, как много «кнопок действий», редактируя список 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; 

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