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

Question

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

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

Answer 1

В bootstrap 3 documentation списки это под вспомогательные классы: Muted, Primary, Success, Info, Warning, Danger.

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

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

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

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

Это не огромное количество вариантов, но это некоторые.

Answer 2

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

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

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

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

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

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

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

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

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