Bootstrap 4: компоненты

Содержание

Слайд 2

Компонент Bootstrap Компонент – это набор инструментов применяемых в дизайне сайтов.

Компонент Bootstrap

Компонент – это набор инструментов применяемых в дизайне сайтов.
Каждый

компонент, как правило, включает в себя:
набор нескольких элементов HTML,
стили для них,
скрипты, обеспечивающие взаимодействие с пользователем (при необходимости).
Слайд 3

Основное меню сайта - navbar

Основное меню сайта - navbar

Слайд 4

Основное меню сайта - navbar Основной контейнер для компонента – тег

Основное меню сайта - navbar

Основной контейнер для компонента – тег nav

c классами .navbar и .navbar-expand{-sm|-md|-lg|-xl}.
.navbar-expand - определяет с какой контрольной точки показывать меню полностью.
По умолчанию navbar занимает всю ширину экрана. Если нужно сделать иначе нужно разместить navbar в контейнер с фиксированной шириной.
Navbar скрыты по умолчанию при печати. Сделать их печатаемыми можно добавив класс .d-print.
Слайд 5

Типы блоков внутри navbar .navbar-brand – название сайта .navbar-nav - навигация

Типы блоков внутри navbar

.navbar-brand – название сайта
.navbar-nav - навигация полной высоты

(включая выпадающие элементы)
.navbar-toggler для использования JS-«плагина свертывания» и других изменяющихся состояний навигации.
.form-inline - формы и действий с ними.
.navbar-text - для добавления вертикально центрированных строк текста.
.collapse .navbar-collapse для группирования и скрытия содержимого Navbar на определенном брейкпойнте родителя.
Слайд 6

Основное меню сайта - navbar Примеры с кодом можно взять здесь - https://bootstrap-4.ru/docs/4.5/components/navbar/

Основное меню сайта - navbar

Примеры с кодом можно взять здесь -

https://bootstrap-4.ru/docs/4.5/components/navbar/
Слайд 7

Карточка - card Карточка – это гибкий и расширяемый контейнер содержимого.

Карточка - card

Карточка – это гибкий и расширяемый контейнер содержимого. Она включает

опции заголовков и футеров, различный контент (картинки, заголовки, текст, списки, кнопки и т.д.).
С помощью карточек можно задавать:
Карточки товаров
Превью новостей
Блоки отзывов
Элементы галереи 
и многое другое
Слайд 8

Элементы карточки Cтили начинаются с card -

Элементы карточки

Cтили начинаются с card -

Слайд 9

Элементы карточки

Элементы карточки

Слайд 10

Свойства карточек Ширина карточек по умолчанию задана – 100%, но можно

Свойства карточек

Ширина карточек по умолчанию задана – 100%, но можно применять

стандартные классы ширина w-25, w-50 и т.д., либо используйте собственные css-правила.
Выравнивать содержимое карточки, ее футера и подвала можно с помощью классов text-left, text-center, text-right и т.д.
Цвет текста, фона и рамки карточек также можно менять с помощью стандартных классов bootstrap.
Слайд 11

Специфичность Если к одному элементу одновременно применяются противоречивые стилевые правила, то

Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более

высокий приоритет имеет правило, у которого значение специфичности селектора больше.
Специфичность это некоторая условная величина, вычисляемая следующим образом:
за каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100,
за каждый класс и псевдокласс (b) начисляется 10,
за каждый селектор тега и псевдоэлемент (c) начисляется 1.
Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.
Слайд 12

Специфичность - примеры

Специфичность - примеры

Слайд 13

Изображения в карточке

Изображения в карточке

Слайд 14

Расположение карточек В Bootstrap4 – параметры связанные с группами карточек не

Расположение карточек

В Bootstrap4 – параметры связанные с группами карточек не являются

отзывчивыми.
Группы карточек – group-card
Слайд 15

Расположение карточек Карточный стол – group-desk

Расположение карточек

Карточный стол – group-desk

Слайд 16

Расположение карточек Сеточные карты– стандартные классы row-cols-

Расположение карточек

Сеточные карты– стандартные классы row-cols-

Слайд 17

Расположение карточек Колонки карточек – card-columns

Расположение карточек

Колонки карточек – card-columns

Слайд 18

Формы Веб-форма является специально ограниченной областью на странице сайта. В эти

Формы

Веб-форма является специально ограниченной областью на странице сайта. В эти области

посетитель сайта может внести ту или иную информацию, а также выбрать конкретные действия из предложенных.

…

Слайд 19

Формы … …

Формы


…


< form id="form1">
…
< input

type ="button" value="Отправить onClick="btnClick();">

Слайд 20

Стили формы без границ, паддингов и марджинов как сортируемый заголовок получил

Стили формы

без границ, паддингов и марджинов
как сортируемый заголовок

значение display: inline-block для возможности применения марджина margin.
,