Дополнительная щелкает ярлык загрузки/кнопки/предупреждения/цвета значков Twitter

Ответ 1

вы можете быстро и легко установить свой собственный набор цветов для меток, используя этот вид CSS:

.label-default {
  background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}
.label-primary {
  background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

Вот два набора:

• default: #95a5a6/#7f8c8d
• primary: #3498db/#2980b9
• успех: #2ecc71/#27ae60
• информация: #9b59b6/#8e44ad
• предупреждение: #e67e22/#d35400
• опасность: #e74c3c/#c0392b

• default: #95a5a6/#7f8c8d
• primary: #00A388/#007D68
• успех: #79BD8F/#659E78
• информация: #BEEB9F/#A5CC8A
• предупреждение: #FFFF9D/#D1D181
• опасность: #FF6138/#D6512F

Пример загрузки

Ответ 2

Некоторые сторонние пользовательские темы добавили цвета, но я не знаю о "готовом к использованию пакете". Легко добавить свои собственные, просто расширив CSS. Например, здесь есть "социальные" кнопки.

CSS

.btn-facebook {
    background-color:#3b5998;
    color:#fff;
}
.btn-google {
    background-color:#dd4b39;
    color:#fff;
}
.btn-twitter {
    background-color:#2ba9e1;
    color:#fff;
}
.btn-pinterest {
    background-color:#cb2027;
    color:#fff;
}
.btn-tumblr {
    background-color:#2c4762;
    color:#fff;
}

Использование

<button class="btn btn-facebook btn-lg">Facebook</button>

ИЗМЕНИТЬ

Вы также можете использовать селекторы шаблонов CSS для создания таких стилей.

Демо-версия Apple: http://bootply.com/112999

Ответ 3

Хотя ОП просит "готовый к использованию пакет", я наткнулся на это, ища что-то сам. Генератор кнопок Bootstrap предлагает простой простой онлайн-инструмент для быстрого создания дополнительных цветов кнопок.

Кроме того, он будет создавать HTML и CSS для пользовательской кнопки: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

Ответ 4

Несмотря на то, что ответ zessx правильный, возможно, некоторые пользователи не поймут, что это решение действительно для создания новых классов, как в моем примере ниже:

.label-alarm {
  background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
  background-color: #e0e12;
}

Добавив этот код, у нас будет новый класс ярлыков под названием "label-alarm", помимо всех стандартных классов Bootstrap (label-default, label-primary и т.д.)

Ответ 5

Я делаю это с помощью bootstrap less mixins для кнопок и что-то вроде следующего:

@import "path/to/bootstrap/mixins/buttons.less";
// Danger and error appear as red
.btn-sample {
  .button-variant(@btn-sample-color; @btn-sample-bg; @btn-sample-border);
}

Это сэкономит вам много времени и потенциальных ошибок при написании пользовательских css, особенно если вы хотите, чтобы метки, кнопки, панели и т.д. находились в новом цвете.

По какой-то причине я не могу найти информацию об этом параметре на веб-сайте Bootstrap, но здесь вы найдете руководство для некоторых из этих сторон: https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/