= CSS =
opacity - просто задаёт прозрачность
transparent - прозрачный
currentColor - текущий цвет элемента, заданный в color
.element {
color: #6e4aff;
border: 1px solid currentColor;
}
= размеры(sizes)=
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
= отступы(spacing) =
Example: p-2
{property}{sides}-{size} для xs
{property}{sides}-{breakpoint}-{size} для sm, md, lg, xl и xxl
== {property} ==
m - margin (поле - внешний)
p - padding (отступ - внутренний)
== {sides} ==
t - top
b - bottom
s - (start) left
e - (end) right
x - both *-left and *-right
y - both *-top and *-bottom
blank - all 4 sides
== {size} ==
$spacer = 1rem
0 - 0
1 - $spacer * .25
2 - $spacer * .5
3 - $spacer
4 - $spacer * 1.5
5 - $spacer * 3
auto - set the margin to auto
= разрыв(gap) =
ТОЛЬКО для: display: grid или display: flex
gap-3, row-gap, column-gap
---
<div class="grid gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
</div>
---
= выравнивание =
== перемещение двух элементов ==
.me-auto - вправо (margin end - auto)
.ms-auto - влево (margin start - auto)
= Navbar =
.navbar - панель навигации в целом, может сворачиваться, фиксироваться вверху и т.п.
.nav - кнопки/ссылки навигации, могут по разному быть оформлены(кнопки, табы и т.п.)
.flex-sm-row - на размере больше -sm - строкой
.flex-column - колонкой
.nav-fill - заполнить всё, доступное пространство
.nav-justified - тоже, но колонки одинаковой ширины
.nav-item - не обязателен
role - не нужен, если используется nav
aria-current - не нужен, если формируется динамически, используя JavaScript Bootstrap
---
<div class="navbar"
<nav class="nav nav-justified flex-column flex-sm-row">
<a class="nav-link active" aria-current="page" href="#">Активная</a>
<a class="nav-link" href="#">Ссылка</a>
</nav>
---
== классические структура ==
---
<header class="header">
<!-- = обёртка = -->
<div class="itr-header-0">
<!-- = обозначение навигации = -->
<nav class="nav navbar d-flex flex-nowrap p-0 mx-1 mx-sm-2 mx-md-3 mx-lg-4 mx-xl-4 mx-xxl-5">
= размеры (sizing) =
w-25 - 25% ширины
h-25 - 25% высоты
mw-100 - max-width
w-auto - авто
= размеры =
1px – пикселы, абсолютные, чёткие, понятные, не зависящие ни от чего
1em – размер относительно родителя
1rem – размер относительно размера элемента
---
<div style="font-size:1.5em">
Страусы
<div style="font-size:1.5em">Живут также в Африке</div>
</div>
# "Страусы" - будут одного размера
# "Живут также в Африке" - будут 1.5 * относительно размера "Страусы"
---
изменён: 20 ноября 2023 г.