Bootstrap предоставляет вам ряд предопределенных классов для ускорения выполнения определенных задач по макетированию. Подробно рассказываю о самых важных.
Цвета в Bootstrap
В Bootstrap есть ряд суффиксов, которые можно использовать в некоторых классах и которые используются для применения контекстных цветов , которые фреймворк предоставляет по умолчанию. Некоторые из них: первичный, вторичный, успех, опасность, предупреждение, информация, звук отключен и т. д.
Таким образом, вы можете применить цвет к тексту с классом «text-[суффикс]» или цвет фона к элементу с классом «bg-[суффикс]». Вы также можете использовать их с кнопками, используя класс «btn-[suffix]».
Вы лучше поймете это на этом примере:
< div class = "bg-success text-white" > Пример цветов фона и текста в Bootstrap </ div >
Bootstrap предлагает ряд контекстных цветов.
Размеры и расстояние
В некоторых классах есть суффиксы, которые можно использовать для изменения некоторых элементов. С помощью суффиксов lg, md или sm вы можете, например, изменить размер кнопок с база данных номеров whatsapp в нигерии помощью класса «btn-[суффикс]».
Чтобы изменить ширину и высоту элемента, вы можете использовать классы w-[suffix] и h-[suffix] со значениями 25, 50, 75, 100 (которые соответствуют процентам) или auto .
Изменение ширины и размера
Чтобы объяснить, как применить интервалы (поля и отступы) к элементу, я буду использовать следующий формат:
{property}{стороны}-{размер}
В «свойстве» вы можете использовать:
м: запас
п: дополнение
В «сторонах» вы можете использовать:
t: Верхняя сторона (сверху).
б: Нижняя сторона.
л: Левая сторона (левая).
р: Правая сторона.
x: левая и правая стороны (ось x).
y: вверх и вниз (ось Y).
«пусто»: примените его ко всем 4 сторонам.
По «размеру»:
0: удалить поля или отступы.
от 1 до 5: установите поля или отступы разных размеров (от самого маленького до самого большого).
auto: применить автоматическое поле (margin:auto;).
Значения размера от 1 до 5 соответствуют 0,25рем, 0,5рем, 1рем, 1,5рем и 3рем соответственно.
Вы даже можете использовать отрицательные поля (помните, что в CSS не существует такого понятия, как отрицательное заполнение), включив букву «n» перед номером размера.
Пример размера и интервала.