Bootstrap 4. Цвета

Цвет текста

Классы, чтобы сделать текст цветным.

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

text-muted Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.

text-secondary Nullam id dolor id nibh ultricies vehicula ut id elit.

text-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

text-info Maecenas sed diam eget risus varius blandit sit amet non magna.

text-warning Etiam porta sem malesuada magna mollis euismod.

text-danger Donec ullamcorper nulla non metus auctor fringilla.

text-white Etiam porta sem malesuada ultricies vehicula.

При использовании белого цвета text-white не забывайте изменить фон, чтобы увидеть текст.


<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>

Эти классы можно использовать и для ссылок. Обратите внимание, что белый цвет использовать нельзя.

Muted link Primary link Success link Info link Warning link Danger link 

<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>

Фон

Для заливки фона можно использовать классы:

  • bg-primary
  • bg-secondary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger
  • bg-light
  • bg-dark
  • bg-white
bg-primary Nullam id dolor id nibh ultricies vehicula ut id elit.
bg-secondary Nullam id dolor id nibh ultricies vehicula ut id elit.
bg-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
bg-info Maecenas sed diam eget risus varius blandit sit amet non magna.
bg-warning Etiam porta sem malesuada magna mollis euismod.
bg-danger Donec ullamcorper nulla non metus auctor fringilla.

Другие цвета

Также встречаются другие классы для работы со цветом.

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

<div class="alert alert-success" role="alert">  <b>alert-success</b> - использует цвет для успешных операций</div>
<div class="alert alert-info" role="alert"><b>alert-info</b> - использует цвет для информации</div>
<div class="alert alert-warning" role="alert"><strong>alert-warning</strong> - использует цвет для предупреждения</div>
<div class="alert alert-danger" role="alert"><b>alert-danger</b> Цвет для опасности!</div>

Если в подобных блоках используются ссылки, то их тоже можно подсветить аналогичными цветами через класс .alert-link. Показан один пример.


<div class="alert alert-danger" role="alert">
  <strong>Жирный текст</strong> <a href="#" class="alert-link">Это ссылка</a> А это текст.
</div>

Вернуться к началу раздела Bootstrap

Реклама