Как вы измените цвет Twitter Bootstrap CSS?

Question

До сегодняшнего дня я не использовал меньше.

Я изменил цвет в preboot.less на:

// Color Scheme
@baseColor:         @orange;                  // Set a base color

Затем я собрал меньше файлов.Все вышло, но все было синим.

Так что я попробовал маршрут js.less.Все еще синий.

Answer 1

Вот генератор начальной загрузки, который работает с картинки .... Так что вы можете просто сделать снимок своего "старого" сайта, загрузить его здесь, и он сгенерирует тему, которая соответствует вашей старой цветовой схеме!

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

http://www.lavishbootstrap.com/

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

http://getbootstrap.com/customize/

Answer 2

Вам может пригодиться Bootstrap Generator - он позволяет выбирать цвета и т. Д. И генерирует скомпилированный файл Boostrap CSS для вас.

Answer 3

Если вы используете версию 2.0 с wip, это предложение.

.primary класс использует переменные @blue и @blueDark для создания градиента кнопки. Эти переменные установлены в файле variables.less.

В файле button.less остальные классы кнопок жестко запрограммированы с шестнадцатеричными значениями.

// Danger and error appear as red
  &.danger {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }

Вы должны изменить эти шестнадцатеричные значения или создать переменные, которыми вы заменяете шестнадцатеричные значения. Я новичок в использовании самозагрузки из твиттера, но это похоже на ситуацию.

Answer 4

Чтобы настроить цвет ваших ссылок и .btn-primary (именно это, я думаю, имел в виду вопрос), настройте @linkColor:

@linkColor: @orange;

Answer 5

Это для цвета # 01a4d9 BTN

.btn {
    border-color:#c5c5c5;
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
 }

.btn-primary {
    color:#ffffff;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:#007cc5;
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9),  to(#0193c5));
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5);
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0);
    border-color:#0193c5 #0193c5 #003479;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
    color:#ffffff;
    background-color:#0193c5;
    *background-color:#0049ac;
 }

.btn-primary:active,.btn-primary.active {
    background-color:#003f92 \9;
 }

Answer 6

Вы установили для переменной @orange цвет, например,

@orange: #FF2400;