Отдельные кнопки цвета Bootstrap

Question

Итак, я пробовал целую кучу вещей, чтобы изменить цвет моих кнопок на веб-сайте начальной загрузки. Я пробовал создать класс в css и изменить там цвет фона . Я пытался использовать идентификаторы для изменения цвета фона, я пытался переопределить .btn-primary, но это меняет все кнопки. У меня есть более 6 кнопок, чтобы сделать более 6 цветов кнопок, поэтому мне нужно сделать это, не используя 6 существующих типов кнопок. Кто-нибудь знает, как я могу это сделать?

HTML:

<form action="index.html">
    <button type="submit" class="btn btn-primary btn-lg btn-block home" id="home">
        Home <span class="glyphicon glyphicon-home"></span>
    </button>
</form>

CSS:

.home{
    background-color:#9b59b6;
}

Редактировать: Спасибо всем за ваши ответы. Все они были правильными. Однако ни один из них не решил проблему. Вы знаете, что сделал? Удаление одинокого / символа, который каким-то образом попал в мой код. Извлеченный урок: проверьте свой код на наличие других ошибок, прежде чем обвинять bootstrap и css.

html css twitter-bootstrap button

1

Sean Lev 4 Мар 2015 в 02:02

1

Некоторые идеи: 1) Что произойдет, если вы форсируете свой background-color с помощью !important? Может быть, ваше определение слишком слабое в иерархии определений? 2) Учитывайте определения LESS и то, что ваш CSS может быть переписан (см. здесь, комментарий nalply ) 3) Что вы увидите, если в браузере выберете "Insepct Element"? Откуда на самом деле берется определение цвета?

–

peter_the_oak

4 Мар 2015 в 02:11

Answer 1

Просто вы можете сделать свои собственные кнопки что-то вроде btn-one btn-two btn-three

И стиль, как в следующем примере

.btn-one {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-one:hover,
.btn-one:focus,
.btn-one.focus,
.btn-one:active,
.btn-one.active,
.open > .dropdown-toggle.btn-one {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

И измените цвета на нужные вам цвета

1

dyaa 4 Мар 2015 в 02:13

Answer 2

Вы можете создавать новые классы для своих пользовательских кнопок следующим образом:

<div class="btn btn-home">Home</div>

Css:

.btn-home {
    background-color: #9b59b6;
    border-color: #333;
    color: #fff;
}

/* Change how it looks when hovered or clicked */

.btn-home:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.btn-home:active {
    background-color: red;
    border-color: #333;
    color: #fff;
}

Примере

1

Jack 4 Мар 2015 в 02:16

Отдельные кнопки цвета Bootstrap

2 ответа

Примере

Похожие вопросы

Связанные вопросы

Новые вопросы

html