Щебетать-Кнопки Bootstrap удивительно красивы. Попробуйте их прокрутить по ним
Но они ограничены в цветах.
Можно ли изменить базовый цвет кнопки, сохраняя при этом красивый эффект зависания, который загрузочный станок сделал настолько красивым и легким?
Я совершенно не знаю, что выглядит css/javascript, что твиттер использует для поддержания этих эффектов.
В принципе, кнопки в Twitter Bootstrap управляются в CSS с помощью ".btn {}". Что вам нужно сделать, это перейти в файл CSS и найти там, где он говорит "btn", и изменить настройки цвета. Тем не менее, это не так просто, как просто делать это, так как вам также нужно изменить цвет, на который меняется кнопка, когда вы выделяете ее и т.д. Для этого вам нужно искать другие теги в CSS, например:.btn: hover {} "и т.д.
Изменение этого требует изменения CSS. Вот быстрая ссылка на этот файл:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
Мне показалось, что самый простой способ - это переопределить это. Извините за мой невообразимый выбор цвета
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
.my-btn {
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
}
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
.btn-primary {
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
}
.btn-primary {
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
}
Он позаботится о зависании/активах для вас
Из комментариев, если вы хотите осветлить кнопку вместо темного при использовании черного (или просто хотите инвертировать), вам нужно еще немного расширить класс следующим образом:
.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
}
}
Вы можете перезаписать цвета в вашем 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), вы можете добавить эти два стиля 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 имеет версию LESS на 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/
Я знаю, что это более старый поток, но просто для добавления другой перспективы. Я бы сказал, что использование переопределений действительно немного запаха кода и быстро выйдет из-под контроля над крупными проектами. Сегодня вы переопределяете кнопки, завтра Модалы, на следующий день выпадающие меню и т.д. И т.д.
Я бы посоветовал попробовать, комментируя include для buttons.less и либо определить свою собственную, либо найти другую библиотеку кнопок, которая больше подходит для моего проекта. Бесстыдный штепсель: вот пример того, насколько легко смешивать нашу библиотеку Buttons с TB: Использование кнопок с загрузочным лотком Twitter. На практике, опять же, вы, скорее всего, захотите удалить buttons.less, чтобы улучшить производительность, но это показывает, как вы можете сделать вещи немного менее "универсальными". Я еще не делал этого упражнения, но я бы предположил, что вы можете начать с просто комментирования строк, таких как:
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
И затем перекомпилируйте, используя `lessc, используя один из ваших собственных модулей кнопок. Таким образом, вы получаете битву, тестируемую ядро туберкулеза, но все равно можете настраивать вещи, не прибегая к основным переоценкам. Нет абсолютно никакой причины не использовать только части библиотеки, такие как 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;
}