Как использовать классы Bootstrap для изменения внешнего вида текста и изображений?

Пользователь

от willis.streich , в категории: HTML/CSS , 6 месяцев назад

Как использовать классы Bootstrap для изменения внешнего вида текста и изображений?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от lamar , 6 месяцев назад

@willis.streich 

Bootstrap предоставляет множество классов для изменения внешнего вида текста и изображений. Ниже приведены примеры некоторых из них:

  1. Классы для изменения цвета текста:
  • .text-primary: устанавливает цвет текста в первичный цвет Bootstrap
  • .text-secondary: устанавливает цвет текста во вторичный цвет Bootstrap
  • .text-success: устанавливает цвет текста в цвет успеха
  • .text-danger: устанавливает цвет текста в цвет опасности
  • .text-warning: устанавливает цвет текста в цвет предупреждения
  • .text-info: устанавливает цвет текста в цвет информации
  • .text-light: устанавливает цвет текста в светлый цвет (используется на темном фоне)
  • .text-dark: устанавливает цвет текста в темный цвет (используется на светлом фоне)
  1. Классы для изменения размера текста:
  • .h1: устанавливает размер текста на 2.5rem
  • .h2: устанавливает размер текста на 2rem
  • .h3: устанавливает размер текста на 1.75rem
  • .h4: устанавливает размер текста на 1.5rem
  • .h5: устанавливает размер текста на 1.25rem
  • .h6: устанавливает размер текста на 1rem
  1. Классы для изменения выравнивания текста:
  • .text-left: устанавливает выравнивание текста по левому краю
  • .text-center: устанавливает выравнивание текста по центру
  • .text-right: устанавливает выравнивание текста по правому краю
  • .text-justify: устанавливает выравнивание текста по ширине блока
  1. Классы для изменения размера изображений:
  • .img-fluid: устанавливает максимальную ширину изображения на 100% и высоту на автоматический режим, что позволяет изображению масштабироваться пропорционально
  • .img-thumbnail: добавляет рамку и скругляет углы изображения


Примеры использования этих классов выглядят так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- Пример изменения цвета текста -->
<p class="text-primary">Это текст первичного цвета Bootstrap</p>
<p class="text-danger">Это текст цвета опасности</p>

<!-- Пример изменения размера текста -->
<h1 class="h1">Заголовок первого уровня</h1>
<h2 class="h2">Заголовок второго уровня</h2>

<!-- Пример изменения выравнивания текста -->
<p class="