0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В прошлых уроках мы научились использовать классы Bootstrap для оформления текста, создания таблиц и сеток, внутри которых располагаются элементы.</p>
1
<p>В прошлых уроках мы научились использовать классы Bootstrap для оформления текста, создания таблиц и сеток, внутри которых располагаются элементы.</p>
2
<p>Эти небольшие классы уже позволяют создавать полноценные страницы, например блоги. Но в больших проектах требуется больший функционал, например, шапка страницы или боковое меню.</p>
2
<p>Эти небольшие классы уже позволяют создавать полноценные страницы, например блоги. Но в больших проектах требуется больший функционал, например, шапка страницы или боковое меню.</p>
3
<p>Для создания таких элементов используются компоненты - готовые классы для создания блоков на странице.</p>
3
<p>Для создания таких элементов используются компоненты - готовые классы для создания блоков на странице.</p>
4
<p>В этом уроке разберем особенности компонентов и на примере компонента кнопки рассмотрим сценарии использования.</p>
4
<p>В этом уроке разберем особенности компонентов и на примере компонента кнопки рассмотрим сценарии использования.</p>
5
<p>Компоненты - это готовые блоки, которые содержат частоиспользуемые элементы страницы. Например: карточки товара, формы, кнопки.</p>
5
<p>Компоненты - это готовые блоки, которые содержат частоиспользуемые элементы страницы. Например: карточки товара, формы, кнопки.</p>
6
<p>Так как компоненты являются частью Bootstrap, то они хорошо оптимизированы и имеют разные варианты использования.</p>
6
<p>Так как компоненты являются частью Bootstrap, то они хорошо оптимизированы и имеют разные варианты использования.</p>
7
<p>Основные особенности готовых компонентов в Bootstrap:</p>
7
<p>Основные особенности готовых компонентов в Bootstrap:</p>
8
<ul><li>Адаптивность. Компоненты адаптированы для разных разрешений экрана в рамках сетки Bootstrap</li>
8
<ul><li>Адаптивность. Компоненты адаптированы для разных разрешений экрана в рамках сетки Bootstrap</li>
9
<li>Модульность. Компоненты независимы и могут комбинироваться друг с другом в разных последовательностях. Их часто можно использовать внутри друг друга. Например, внутри компонента шапки могут использоваться компоненты кнопок</li>
9
<li>Модульность. Компоненты независимы и могут комбинироваться друг с другом в разных последовательностях. Их часто можно использовать внутри друг друга. Например, внутри компонента шапки могут использоваться компоненты кнопок</li>
10
<li>Настройка. Для многих компонентов существует несколько вариантов использований и дизайна. Для этого используются дополнительные классы, которые описаны в документации</li>
10
<li>Настройка. Для многих компонентов существует несколько вариантов использований и дизайна. Для этого используются дополнительные классы, которые описаны в документации</li>
11
</ul><p>Рассмотрим использование компонентов на примере кнопок.</p>
11
</ul><p>Рассмотрим использование компонентов на примере кнопок.</p>
12
<h3>Компонент "Кнопка"</h3>
12
<h3>Компонент "Кнопка"</h3>
13
<p>Кнопки - одни из самых распространенных компонентов в Bootstrap. Они используются по всему сайту: от шапки до самого футера.</p>
13
<p>Кнопки - одни из самых распространенных компонентов в Bootstrap. Они используются по всему сайту: от шапки до самого футера.</p>
14
<p>Как и большинство компонентов, кнопки создаются с помощью нескольких типов классов:</p>
14
<p>Как и большинство компонентов, кнопки создаются с помощью нескольких типов классов:</p>
15
<ul><li>Базовый или структурный класс компонента</li>
15
<ul><li>Базовый или структурный класс компонента</li>
16
<li>Класс варианта компонента</li>
16
<li>Класс варианта компонента</li>
17
</ul><p>Так достигается отделение структуры компонента от его оформления. Такой подход в способах организации стилей называется<strong>OOCSS</strong>или<strong>Объектно-ориентированный CSS</strong>. Подробнее о подходе вы можете прочитать в нашем блоге, ссылка на статью будет в конце урока.</p>
17
</ul><p>Так достигается отделение структуры компонента от его оформления. Такой подход в способах организации стилей называется<strong>OOCSS</strong>или<strong>Объектно-ориентированный CSS</strong>. Подробнее о подходе вы можете прочитать в нашем блоге, ссылка на статью будет в конце урока.</p>
18
<p>Структурный класс для кнопок - btn. Применив его на любой участок верстки, вы добавите стили, которые характерны для кнопок в Bootstrap: отступы, стили при наведении и нажатии, размер шрифта, выравнивание:</p>
18
<p>Структурный класс для кнопок - btn. Применив его на любой участок верстки, вы добавите стили, которые характерны для кнопок в Bootstrap: отступы, стили при наведении и нажатии, размер шрифта, выравнивание:</p>
19
<p><a>Codepen</a></p>
19
<p><a>Codepen</a></p>
20
<p>Нажмите на кнопку, чтобы увидеть стили, которые применяются при активном псевдоклассе :active.</p>
20
<p>Нажмите на кнопку, чтобы увидеть стили, которые применяются при активном псевдоклассе :active.</p>
21
<p>Такая кнопка вряд ли будет использоваться на странице, хотя дизайнерская жилка может выдать что угодно. Для оформления кнопок используются специальные классы, которые отвечают только за оформление.</p>
21
<p>Такая кнопка вряд ли будет использоваться на странице, хотя дизайнерская жилка может выдать что угодно. Для оформления кнопок используются специальные классы, которые отвечают только за оформление.</p>
22
<p>Например, чтобы покрасить кнопку, используется дополнительный класс btn-цвет. В Bootstrap используется несколько основных цветов, которые названы по их смыслу:</p>
22
<p>Например, чтобы покрасить кнопку, используется дополнительный класс btn-цвет. В Bootstrap используется несколько основных цветов, которые названы по их смыслу:</p>
23
<ul><li>primary</li>
23
<ul><li>primary</li>
24
<li>secondary</li>
24
<li>secondary</li>
25
<li>success</li>
25
<li>success</li>
26
<li>danger</li>
26
<li>danger</li>
27
<li>warning</li>
27
<li>warning</li>
28
<li>info</li>
28
<li>info</li>
29
<li>light</li>
29
<li>light</li>
30
<li>dark</li>
30
<li>dark</li>
31
</ul><p>Подставим разные классы и посмотрим, как изменится внешний вид кнопок:</p>
31
</ul><p>Подставим разные классы и посмотрим, как изменится внешний вид кнопок:</p>
32
<p><a>Codepen</a></p>
32
<p><a>Codepen</a></p>
33
<p>Второстепенные классы могут менять не только расцветку компонента, но и изменять его общую структуру. Для кнопок одни из таких классов - это btn-lg и btn-sm. Они изменяют отступы, размер шрифта и их базовый размер:</p>
33
<p>Второстепенные классы могут менять не только расцветку компонента, но и изменять его общую структуру. Для кнопок одни из таких классов - это btn-lg и btn-sm. Они изменяют отступы, размер шрифта и их базовый размер:</p>
34
<p><a>Codepen</a></p>
34
<p><a>Codepen</a></p>
35
<p>На примере выше видно, что классы можно комбинировать. Это позволяет придавать разную стилистику компонентам как в расцветке, так и в размерах.</p>
35
<p>На примере выше видно, что классы можно комбинировать. Это позволяет придавать разную стилистику компонентам как в расцветке, так и в размерах.</p>
36
<h2>Выводы</h2>
36
<h2>Выводы</h2>
37
<p>В этом уроке мы разобрали, что такое компоненты в Bootstrap и их особенности:</p>
37
<p>В этом уроке мы разобрали, что такое компоненты в Bootstrap и их особенности:</p>
38
<ul><li>Адаптивность</li>
38
<ul><li>Адаптивность</li>
39
<li>Модульность</li>
39
<li>Модульность</li>
40
<li>Настраиваемость</li>
40
<li>Настраиваемость</li>
41
</ul><p>Эти три аспекта позволяют использовать компоненты в любом месте макета в рамках Bootstrap и не бояться плохого результата.</p>
41
</ul><p>Эти три аспекта позволяют использовать компоненты в любом месте макета в рамках Bootstrap и не бояться плохого результата.</p>
42
<p>На примере компонента кнопок мы узнали, что компоненты состоят из нескольких основных частей:</p>
42
<p>На примере компонента кнопок мы узнали, что компоненты состоят из нескольких основных частей:</p>
43
<ul><li>Главный структурный класс, который указывает на сам компонент</li>
43
<ul><li>Главный структурный класс, который указывает на сам компонент</li>
44
<li>Классы оформления, которые позволяют добавить стили компонентам и изменять их в разных частях макета</li>
44
<li>Классы оформления, которые позволяют добавить стили компонентам и изменять их в разных частях макета</li>
45
</ul>
45
</ul>