5
Я использую Bootstrap CSS Buttons Reference.Могу ли я изменить цвет кнопки Bootstrap?
Я создаю кнопку: class="btn btn-primary".
Я хочу, чтобы фон был черным, а цвет текста будет белым. Как мне это сделать?
A
ответ
12
Вам необходимо переопределить ваш css, чтобы вы могли изменить фон на черный. Простой способ сделать это, чтобы создать пользовательский класс CSS (вы можете поместить это в <style type="text/css"> тег в HTML или поместить это в отдельный файл CSS)
.black-background {background-color:#000000;}
.white {color:#ffffff;}
Затем дайте кнопку эти классы
<input type="submit" class="btn btn-primary black-background white" value="Text" />
+0
hmmm, когда я это делаю, я просто вижу ту же синюю кнопку с прямоугольником черного цвета вокруг слов. – SeanLetendre
+0
@SeanLetendre Если вы просматриваете элемент в браузере, щелкнув правой кнопкой мыши, то нажав «проверить», есть ли другой стиль, переопределяющий вашу кнопку? – Zac
0
Да, вы можете, попробуйте создать новое имя файла it custom.css, чтобы добавить то, что вам нужно для настройки вашей темы (просьба указать его после загрузки файлов).
0
Другие способы могут включать:
- Используйте бутстрэпами собственные настройки страницы: http://getbootstrap.com/customize/
- Узнайте, как использовать меньше или Sass файлов.
- Посмотрите на свободные темы на: http://bootswatch.com/ (я собирался забыть этот)
Я могу предложить первый, если второй кажется слишком сложным, потому что есть несколько типов кнопок и вы можете настроить каждая кнопка bg цветов, а также другие свойства. Когда вы хотите обновить свои файлы или конфигурацию, вы можете загрузить свою собственную конфигурацию, чтобы получить новые файлы или изменить свою конфигурацию.
И это делает решение менее сложным и более ремонтопригодным.
3
Этот вопрос уже был дан ответ здесь: Styling twitter bootstrap buttons
я бы рекомендовал после выше рекомендаций; обычной практикой является переопределение таблицы стилей по умолчанию/boostrap с вашими собственными стилями, а не редактирование по умолчанию/bootstrap напрямую или добавление новых классов стилей. Фонд работает одинаково.
0
Используйте (class = "btn btn-primary navbar-inverse") в своем классе кнопок. Не нужно писать какие-либо CSS.
0
простой и быстрый способ с
.btn-black{background-color:#000;color: #FFF;}
.btn-black:hover{color: #FFF;}
и
<button type="button" class="btn btn-black" ...
Вы можете нацелить 'БТН-primary' класс и переписать его в CSS [как это] (http://jsfiddle.net/ezLtkk92 /). – anpsmn
Лучше переопределить эффекты с помощью специального класса, а не переопределять класс по умолчанию в этом случае – Zac