Доступні класи кольорів тексту у Bootstrap

119

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

Чи може хтось перелічити наявні кольорові класи в завантажувальному?

— Фідель Кастро
джерело

3

Bootstrap використовує один колір #333333для кольору тексту.

— Біндія Патолія

тільки він використовує лише це?

— fidel castro

Але ви можете використовувати різні для різних тегів.

— Біндія Патолія

Ви можете, будь ласка, поясніть це або розмістіть посилання, якщо можливо

— fidel castro

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зміни, то формально синій текст також зміниться. Якщо ви хочете, щоб у вас завжди був синій текст, слід встановити текст у будь-якому відтінку синього, який ви хочете.

— якро

7

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

По-перше, у випадку використання панелі навігації за замовчуванням (сіра) .navbar-defaultбуде використаний клас, а текст пофарбований у темно-сірий колір .

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

Інший - у разі використання зворотної смуги навігації (чорної), текст пофарбований у сірий колір60 .

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

Отже, ви можете змінити його колір, як хочете. Однак я б рекомендував вам використовувати окремий файл css, щоб змінити його.

ПРИМІТКА. Ви також можете скористатися налаштованим користувачем, наданим Twitter Bootstrapу Navbarрозділі.

— лварають
джерело

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>

Розгорніть фрагмент

— Якуб Муда
джерело