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

Ответ 1

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

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

http://www.lavishbootstrap.com/

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

http://getbootstrap.com/customize/

Ответ 2

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

Ответ 3

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

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

В файле buttons.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);
  }

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

Ответ 4

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

@orange: #FF2400;

Ответ 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;
 }

Ответ 6

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

@linkColor: @orange;