Стилизация кнопок twitter bootstrap

Кнопки Twitter-Bootstrap потрясающе красивы. Попробуйте их, прокрутив их

Но они ограничены по цветовой гамме.

Можно ли как-нибудь изменить базовый цвет кнопки, сохранив при этом красивый эффект наведения курсора, который бутстрап сделал таким красивым и легким?

Я совершенно не знаю, как выглядит css / javascript, который использует твиттер для поддержки этих эффектов.

В основном, кнопки в Twitter Bootstrap управляются в CSS с помощью ".btn {}". Что вам нужно сделать, это перейти к файлу CSS, найти, где написано «btn», и изменить настройки цвета. Однако это не так просто, как просто сделать это, так как вам также нужно изменить цвет, в который кнопка меняет цвет, когда вы ее выделяете, и т. Д. Для ЭТОГО вы должны искать другие теги в CSS, например ".btn: hover {}" ", и т.д.

Для его изменения требуется изменить CSS. Вот быстрая ссылка на этот файл:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Я обнаружил, что самый простой способ - поместить это в свои переопределения. Извините за мой неординарный выбор цвета

Бутстрап 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Пример Bootstrap 4 Alpha SASS

Bootstrap 3 МЕНЬШЕ

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Пример Bootstrap 3 LESS

Бутстрап 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 Пример SASS

Bootstrap 2.3 МЕНЬШЕ

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Пример Bootstrap 2.3 LESS

Бутстрап 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

Он позаботится о зависании / активностях за вас

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

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Пример Bootstrap 3 SASS Lighten

Вы можете перезаписать цвета в своем CSS, например, для кнопки Danger:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Вот хороший ресурс: http://charliepark.org/bootstrap_buttons/

Вы можете изменить цвет и увидеть эффект в действии.

Если вы уже загружаете свой собственный файл CSS после загрузки bootstrap.css (версия 3), вы можете добавить эти 2 стиля CSS в свой custom.css, и они переопределят значения по умолчанию начальной загрузки для стиля кнопки по умолчанию.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

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

Вместо того, чтобы менять значения CSS одно за другим, я бы предложил использовать LESS. Bootstrap имеет МЕНЬШЕ версию на Github: https://github.com/twbs/bootstrap

LESS позволяет вам определять переменные для изменения цвета, что делает его намного более удобным. Определите цвет один раз, и LESS компилирует файл CSS, который изменяет значения глобально. Экономит время и силы.

Чтобы полностью переопределить стили кнопки начальной загрузки, вам необходимо переопределить список свойств. См. Пример ниже.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

Если вы не используете все перечисленные стили, то при выполнении действий с кнопкой вы увидите стили по умолчанию. Например, как только вы нажмете кнопку и уберете указатель мыши с кнопки, вы увидите цвет по умолчанию. Или удерживайте кнопку нажатой, вы увидите цвета по умолчанию. Итак, я перечислил все псевдо-стили, которые нужно переопределить.

Для Bootstrap для переопределения Sass это

.btn-default {

    @include button-variant($color, $background, $border);

}

Вы можете увидеть его источник здесь: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Или попробуйте http://twitterbootstrapbuttons.w3masters.nl/ . Он создает CSS для кнопок на основе ввода цвета html. Добавьте css после начальной загрузки css. Он предоставляет три стиля кнопок (светлые, темные и вращающиеся).

Вот очень простой и эффективный способ: добавьте в свой CSS класс с цветами, которые вы хотите применить к своей кнопке:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

и добавьте стиль к кнопке или ссылке начальной загрузки:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

В Twitter Bootstrap bootstrap 3.0.0 кнопка Twitter плоская. Вы можете настроить его на http://getbootstrap.com/customize . Цвет кнопки, рамка и т. Д.

Также вы можете найти HTML-код и другие функции http://twitterbootstrap.org/bootstrap-css-buttons .

Кнопка Bootstrap 2.3.2 градиентная, но 3.0.0 (новая версия) плоская и выглядит более круто.

а также вы можете найти для настройки всего внешнего вида и стиля начальной загрузки следующие ресурсы: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Я знаю, что это более старая ветка, но просто чтобы добавить другую перспективу. Я бы сказал, что использование переопределений на самом деле немного похоже на запах кода и быстро выйдет из-под контроля в более крупных проектах. Сегодня вы переопределяете кнопки, завтра модальные окна, на следующий день - выпадающие списки и т. Д. И т. Д.

Я бы посоветовал попробовать, возможно, закомментировать включение buttons.lessи либо определить свою собственную, либо найти другую библиотеку кнопок, более подходящую для моего проекта. Бесстыдный плагин: вот пример того, как легко смешать нашу библиотеку Buttons с TB: Использование кнопок с Twitter Bootstrap . На практике, опять же, вы, вероятно, захотите полностью удалить buttons.lessвключение, чтобы повысить производительность, но это показывает, как вы можете сделать вещи менее «общими». Я сам еще не делал это упражнение, но думаю, вы могли бы начать с простого комментария таких строк, как:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

А затем перекомпилировать с помощью `lessc, используя один из ваших собственных модулей кнопок. Таким образом, вы получаете проверенное в боях ядро ​​TB, но при этом можете настраивать вещи, не прибегая к серьезным переопределениям. Нет абсолютно никаких причин не использовать только части библиотеки, такие как Bootstrap. Конечно, то же самое относится и к Sass-версии TB.

Для Bootstrap (по крайней мере, для версии 3.1.1) и LESS вы можете использовать это:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

Это определено в bootstrap/less/buttons.less.

Вы можете изменить цвет фона и использовать! Important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}