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

119

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

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

— фидель кастро
источник

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>

Развернуть фрагмент

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