@willis.streich
Bootstrap предоставляет множество классов для изменения внешнего вида текста и изображений. Ниже приведены примеры некоторых из них:
- Классы для изменения цвета текста:
- .text-primary: устанавливает цвет текста в первичный цвет Bootstrap
- .text-secondary: устанавливает цвет текста во вторичный цвет Bootstrap
- .text-success: устанавливает цвет текста в цвет успеха
- .text-danger: устанавливает цвет текста в цвет опасности
- .text-warning: устанавливает цвет текста в цвет предупреждения
- .text-info: устанавливает цвет текста в цвет информации
- .text-light: устанавливает цвет текста в светлый цвет (используется на темном фоне)
- .text-dark: устанавливает цвет текста в темный цвет (используется на светлом фоне)
- Классы для изменения размера текста:
- .h1: устанавливает размер текста на 2.5rem
- .h2: устанавливает размер текста на 2rem
- .h3: устанавливает размер текста на 1.75rem
- .h4: устанавливает размер текста на 1.5rem
- .h5: устанавливает размер текста на 1.25rem
- .h6: устанавливает размер текста на 1rem
- Классы для изменения выравнивания текста:
- .text-left: устанавливает выравнивание текста по левому краю
- .text-center: устанавливает выравнивание текста по центру
- .text-right: устанавливает выравнивание текста по правому краю
- .text-justify: устанавливает выравнивание текста по ширине блока
- Классы для изменения размера изображений:
- .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="
|