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

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

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

Ответ 1

В документации по начальной загрузке это перечислено в разделе "Вспомогательные классы": 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

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

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

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

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

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

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

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

Ответ 3

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

.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>

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

Ответ 4

В 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="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;">

<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>