Доступные классы цвета текста в Bootstrap

119

Я разрабатываю страницу регистрации, помещая текст в качестве заголовка на панели навигации. Я хочу дать этим текстам разные цвета. Для этой цели я использую отдельный файл CSS, но я хочу сделать это с помощью файла CSS начальной загрузки.

Может ли кто-нибудь перечислить доступные классы цветов в начальной загрузке?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 фидель кастро
источник
3
Bootstrap использует один цвет #333333для цвета текста.
Биндия Патолия 01
он один использует только это?
Фидель Кастро
Но вы можете использовать разные для разных тегов.
Биндия Патолия 01
не могли бы вы объяснить это или разместить ссылку, если возможно
Фидель Кастро

Ответы:

195

В начальной загрузки 3 документации перечислены это под вспомогательные классы: Muted, Primary, Success, Info, Warning, Danger.

В начальной загрузки 4 документации перечислены Пониженное утилиты -> цвет, и имеет больше возможностей: primary, secondary, success, danger, warning, info, light, dark, muted,white .

Для доступа к ним используется class text-[class-name]

Итак, если я хочу, например, синий текст, я бы сделал что-то вроде этого:

<p class="text-primary">This text is the blue primary color.</p>

Это не очень много вариантов, но их немного.

Тед Делезене
источник
2
Я не решусь сказать, хотите ли вы синий текст. Этот класс следует использовать, когда вы хотите применить основной цвет, который по умолчанию является синим. Но если $primaryизменится, то изменится и ваш формально синий текст. Если вы хотите, чтобы у вас всегда был синий текст, вы должны установить для текста любой оттенок синего, который вы хотите.
jacroe
7

Текст на панели навигации обычно окрашивается с помощью одного из двух следующих классов css в bootstrap.cssфайле.

Во-первых, в случае использования панели навигации по умолчанию (серая) .navbar-defaultбудет использоваться класс, а текст окрашен в темно-серый цвет .

.navbar-default .navbar-text {
  color: #777;
}

Другой - в случае использования обратной панели навигации (черной), текст окрашен в серый цвет60 .

.navbar-inverse .navbar-text {
  color: #999;
}

Так что вы можете изменить его цвет по своему желанию. Однако я бы порекомендовал вам использовать отдельный файл css для его изменения.

ПРИМЕЧАНИЕ: вы также можете использовать настройщик, предоставленный Twitter Bootstrapв Navbarразделе.

lvarayut
источник
6

Вы можете использовать текстовые классы:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

при необходимости используйте текстовые классы в любом теге.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Вы можете добавить свои собственные классы или изменить указанные выше классы по своему усмотрению.

Дипендра Гхатал
источник
0

В Bootstrap 4 есть еще несколько классов (добавленных в последних версиях) не упомянутых в других ответах.

.text-black-50и .text-white-50прозрачны на 50%.

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Развернуть фрагмент

Якуб Муда
источник