Самое необходимое - Прохоренок Н. А. - Bootstrap и CSS-препроцессор Sass. Самое необходимое [2021, PDF, RUS]

Введение.......................................................................................................................... 11
Глава 1. Форматирование веб-страницы с помощью стилей .............................. 13
1.1. Первые шаги........................................................................................................................... 13
1.1.1. Установка библиотек Bootstrap и jQuery ................................................................. 14
1.1.2. Шаблон HTML-документа ........................................................................................ 18
1.1.3. Инструменты разработчика и консоль в веб-браузере Firefox............................... 22
1.1.4. Адаптивный дизайн ................................................................................................... 26
1.1.5. Базовые контейнеры.................................................................................................. 28
1.1.6. Цвет фона ................................................................................................................... 29
1.2. Форматирование шрифта ...................................................................................................... 32
1.2.1. Имя шрифта................................................................................................................ 33
1.2.2. Стиль шрифта............................................................................................................. 34
1.2.3. Размер шрифта ........................................................................................................... 34
1.2.4. Цвет текста ................................................................................................................. 35
1.2.5. Жирность шрифта...................................................................................................... 36
1.2.6. Вертикальное расстояние между строками ............................................................. 37
1.3. Форматирование текста......................................................................................................... 37
1.3.1. Горизонтальное выравнивание текста ..................................................................... 37
1.3.2. Вертикальное выравнивание текста ......................................................................... 38
1.3.3. Подчеркивание и зачеркивание текста .................................................................... 39
1.3.4. Изменение регистра символов.................................................................................. 39
1.3.5. Обработка переноса строк ........................................................................................ 40
1.3.6. Создание нижних и верхних индексов..................................................................... 41
1.3.7. Выделение фрагментов кода..................................................................................... 42
1.3.8. Выделение важного фрагмента текста и аббревиатуры ......................................... 44
1.3.9. Выделение цитат........................................................................................................ 45
1.3.10. Заголовки.................................................................................................................. 46
1.3.11. Разделение на абзацы .............................................................................................. 46
1.3.12. Тег <details> ............................................................................................................ 47
1.3.13. Горизонтальная линия ............................................................................................. 47
1.3.14. Гиперссылки............................................................................................................. 48
1.4. Отступы .................................................................................................................................. 51
1.4.1. Внешние отступы....................................................................................................... 52
1.4.2. Внутренние отступы.................................................................................................. 59
1.5. Рамки....................................................................................................................................... 64
1.5.1. Отображение рамки................................................................................................... 64
1.5.2. Сокрытие рамки......................................................................................................... 65
1.5.3. Цвет линии рамки ...................................................................................................... 65
1.5.4. Рамки со скругленными углами................................................................................ 66
1.6. Списки..................................................................................................................................... 67
1.6.1. Нумерованные списки............................................................................................... 67
1.6.2. Маркированные списки............................................................................................. 67
1.6.3. Вложенные списки..................................................................................................... 68
1.6.4. Списки без маркеров ................................................................................................. 68
1.6.5. Компонент list-group: список (введение)................................................................. 69
1.6.6. Списки определений.................................................................................................. 70
1.7. Таблицы.................................................................................................................................. 71
1.7.1. Рамки таблицы и ячеек.............................................................................................. 72
1.7.2. Компактное отображение содержимого таблицы................................................... 73
1.7.3. Зебра............................................................................................................................ 73
1.7.4. Выделение строки при наведении указателя мыши................................................ 74
1.7.5. Изменение цвета фона для таблицы, строки и ячеек .............................................. 74
1.7.6. Местоположение и выравнивание заголовка таблицы........................................... 75
1.8. Графика и видео..................................................................................................................... 75
1.8.1. Работа с изображениями ........................................................................................... 76
1.8.2. Готовые значки .......................................................................................................... 78
1.8.3. Добавление описания к изображению ..................................................................... 79
1.8.4. Вставка видео............................................................................................................. 82
1.9. Форматирование блоков........................................................................................................ 82
1.9.1. Указание типа блока .................................................................................................. 83
1.9.2. Указание размеров..................................................................................................... 85
1.9.3. Атрибут overflow........................................................................................................ 86
1.9.4. Управление обтеканием ............................................................................................ 88
1.9.5. Позиционирование блока.......................................................................................... 88
1.9.6. Управление отображением элемента ....................................................................... 92
1.9.7. Создание тени для блока ........................................................................................... 92
1.10. Управление выделением текста.......................................................................................... 93
1.11. Атрибут pointer-events ......................................................................................................... 93
Глава 2. Размещение элементов внутри окна ......................................................... 94
2.1. Flex-контейнеры..................................................................................................................... 94
2.1.1. Направление выравнивания элементов внутри контейнера................................... 94
2.1.2. Перенос на новую строку.......................................................................................... 99
2.1.3. Размеры элемента .................................................................................................... 100
2.1.4. Растяжение элементов............................................................................................. 100
2.1.5. Сжатие элементов.................................................................................................... 101
2.1.6. Одновременное указание характеристик элементов............................................. 102
2.1.7. Выравнивание элементов внутри контейнера ....................................................... 103
2.1.8. Выравнивание элементов внутри строки............................................................... 107
2.1.9. Порядок следования элементов внутри контейнера ............................................. 110
2.2. Система сеток в библиотеке Bootstrap ............................................................................... 110
2.2.1. Создание контейнера для строки............................................................................ 111
2.2.2. Колонки одинаковой ширины................................................................................. 113
2.2.3. Перенос колонок на новую строку......................................................................... 115
2.2.4. Указание количества колонок в строке.................................................................. 116
2.2.5. Колонки автоматической ширины ......................................................................... 118
2.2.6. Колонки относительной ширины ........................................................................... 119
2.2.7. Смещение колонки .................................................................................................. 123
2.2.8. Горизонтальное выравнивание колонок внутри строки....................................... 125
2.2.9. Вертикальное выравнивание всех колонок внутри строки .................................. 126
2.2.10. Вертикальное выравнивание одной колонки внутри строки ............................. 127
2.2.11. Порядок следования колонок внутри контейнера............................................... 127
2.2.12. Вложенные сетки ................................................................................................... 129
Глава 3. Формы и элементы управления............................................................... 131
3.1. Элементы управления.......................................................................................................... 131
3.1.1. Командные кнопки .................................................................................................. 131
3.1.2. Поля для ввода данных............................................................................................ 135
3.1.3. Поле, доступное только для чтения........................................................................ 138
3.1.4. Вывод пояснительной надписи............................................................................... 138
3.1.5. Списки автодополнения .......................................................................................... 144
3.1.6. Списки со значениями............................................................................................. 144
3.1.7. Флажки ..................................................................................................................... 152
3.1.8. Выключатели............................................................................................................ 157
3.1.9. Переключатели......................................................................................................... 159
3.1.10. Поле выбора файла ................................................................................................ 161
3.1.11. Шкала с ползунком................................................................................................ 167
3.1.12. Элемент для выбора цвета .................................................................................... 168
3.2. Выравнивание и группировка элементов формы.............................................................. 168
3.2.1. Выравнивание элементов по вертикали................................................................. 169
3.2.2. Выравнивание элементов по горизонтали............................................................. 170
3.2.3. Выравнивание элементов по сетке......................................................................... 172
3.2.4. Группировка элементов формы.............................................................................. 179
3.2.5. Выравнивание кнопок ............................................................................................. 180
3.2.6. Группа с кнопками................................................................................................... 182
3.2.7. Группа с кнопками-переключателями ................................................................... 183
3.3. Проверка данных формы..................................................................................................... 190
3.4. Установка фокуса ввода ...................................................................................................... 198
3.5. Порядок обхода элементов формы..................................................................................... 198
3.6. Индикатор хода процесса.................................................................................................... 198
3.7. Компонент spinner: индикатор состояния загрузки .......................................................... 201
3.7.1. Класс spinner-border ................................................................................................ 201
3.7.2. Класс spinner-grow................................................................................................... 202
3.7.3. Выравнивание компонента по центру или по правой стороне ............................ 203
3.7.4. Кнопка с компонентом spinner ............................................................................... 203
3.8. Компонент dropdown: кнопка с выпадающим меню ........................................................ 204
3.8.1. Класс dropdown-toggle: кнопка или ссылка с меню.............................................. 204
3.8.2. Класс dropdown-toggle-split: кнопка с двумя зонами и меню .............................. 205
3.8.3. Выпадающее меню с отдельными пунктами......................................................... 207
3.8.4. Активные и недоступные пункты меню ................................................................ 208
3.8.5. Выпадающее меню с произвольным содержимым............................................... 209
3.8.6. Направление выпадения меню................................................................................ 209
3.8.7. Положение меню ..................................................................................................... 210
3.8.8. Управление компонентом из программы .............................................................. 212
3.8.9. Обработка событий.................................................................................................. 213
Глава 4. Готовые компоненты................................................................................. 217
4.1. Компонент jumbotron: выделение важного содержимого ................................................ 217
4.2. Компонент alert: уведомления............................................................................................ 218
4.2.1. Создание уведомления ............................................................................................ 218
4.2.2. Закрытие уведомления ............................................................................................ 219
4.2.3. Обработка событий.................................................................................................. 221
4.3. Компонент badge: выделение фрагментов текста............................................................. 223
4.4. Компонент card: карточки .................................................................................................. 225
4.4.1. Разделы карточки..................................................................................................... 225
4.4.2. Тело карточки .......................................................................................................... 227
4.4.3. Ширина и высота карточки..................................................................................... 229
4.4.4. Изменение цветовой схемы карточки .................................................................... 230
4.4.5. Изображение внутри карточки ............................................................................... 231
4.4.6. Группа из карточек без отступов............................................................................ 233
4.4.7. Группа из карточек с отступами............................................................................. 235
4.4.8. Выравнивание карточек по сетке ........................................................................... 236
4.4.9. Размещение карточек в трех колонках................................................................... 238
4.5. Компонент collapse: сворачивание и разворачивание области с содержимым.............. 240
4.5.1. Переключение состояния с помощью кнопки....................................................... 241
4.5.2. Переключение состояния с помощью ссылки....................................................... 241
4.5.3. Переключение состояния сразу нескольких областей.......................................... 242
4.5.4. Панель «Аккордеон»................................................................................................ 243
4.5.5. Управление компонентом из программы .............................................................. 246
4.5.6. Обработка событий.................................................................................................. 247
4.6. Компонент nav: контейнер со ссылками или ярлыками вкладок..................................... 249
4.6.1. Горизонтальное размещение ссылок ..................................................................... 249
4.6.2. Выравнивание ссылок внутри контейнера ............................................................ 250
4.6.3. Вертикальное размещение ссылок ......................................................................... 251
4.6.4. Активное состояние ссылки.................................................................................... 252
4.6.5. Контейнер с ярлыками вкладок .............................................................................. 253
4.6.6. Ссылка или ярлык вкладки с выпадающим меню................................................. 254
4.7. Компонент tab: панель с вкладками................................................................................... 255
4.7.1. Создание компонента .............................................................................................. 256
4.7.2. Вертикальное размещение ярлыков вкладок......................................................... 258
4.7.3. Компонент list-group в качестве ярлыков вкладок................................................ 259
4.7.4. Карточки с панелью вкладок .................................................................................. 260
4.7.5. Управление компонентом из программы .............................................................. 262
4.7.6. Обработка событий.................................................................................................. 263
4.8. Компонент list-group: список с пунктами, ссылками или кнопками............................... 267
4.8.1. Список с пунктами, содержащими текст ............................................................... 267
4.8.2. Размещение пунктов по горизонтали..................................................................... 268
4.8.3. Список со ссылками или кнопками........................................................................ 269
4.8.4. Изменение цветовой схемы .................................................................................... 270
4.8.5. Список с пунктами, содержащими произвольные элементы............................... 271
4.9. Компонент breadcrumb: «хлебные крошки»...................................................................... 272
4.10. Компонент pagination: постраничная навигация ............................................................ 273
4.11. Компонент navbar: панель навигации.............................................................................. 276
4.11.1. Создание панели и вывод простого текста .......................................................... 277
4.11.2. Вывод названия фирмы или проекта.................................................................... 278
4.11.3. Добавление блока со ссылками ............................................................................ 279
4.11.4. Добавление ссылки с выпадающим меню........................................................... 280
4.11.5. Сворачивание и разворачивание блока со ссылками.......................................... 281
4.11.6. Добавление формы ................................................................................................ 282
4.11.7. Позиционирование панели навигации ................................................................. 283
4.12. Компонент carousel: циклическое повторение слайдов ................................................. 285
4.12.1. Создание компонента ............................................................................................ 286
4.12.2. Управление компонентом пользователем ........................................................... 287
4.12.3. Добавление надписей ............................................................................................ 289
4.12.4. Способы смены слайдов и указание интервала................................................... 290
4.12.5. Управление компонентом из программы ............................................................ 291
4.12.6. Обработка событий................................................................................................ 293
4.13. Компонент scrollspy: отслеживание прокрутки............................................................... 297
4.13.1. Создание компонента ............................................................................................ 297
4.13.2. Управление компонентом из программы ............................................................ 299
4.13.3. Обработка событий................................................................................................ 300
4.14. Компонент tooltip: всплывающие подсказки................................................................... 302
4.14.1. Добавление всплывающей подсказки к элементу............................................... 302
4.14.2. Местоположение всплывающей подсказки......................................................... 304
4.14.3. Управление компонентом из программы ............................................................ 305
4.14.4. Обработка событий................................................................................................ 308
4.15. Компонент popover: всплывающие информеры.............................................................. 312
4.15.1. Добавление всплывающего информера к элементу............................................ 312
4.15.2. Местоположение всплывающего информера...................................................... 315
4.15.3. Управление компонентом из программы ............................................................ 315
4.15.4. Обработка событий................................................................................................ 318
4.16. Компонент toast: всплывающие уведомления................................................................. 323
4.16.1. Создание и отображение уведомления ................................................................ 323
4.16.2. Управление компонентом из программы ............................................................ 325
4.16.3. Обработка событий................................................................................................ 326
4.17. Компонент modal: модальные диалоговые окна ............................................................. 330
4.17.1. Создание окна ........................................................................................................ 331
4.17.2. Отображение и закрытие окна.............................................................................. 332
4.17.3. Изменение размеров окна ..................................................................................... 333
4.17.4. Размещение содержимого внутри окна................................................................ 334
4.17.5. Вертикальное выравнивание окна по центру ...................................................... 336
4.17.6. Полноэкранный режим.......................................................................................... 336
4.17.7. Управление компонентом из программы ............................................................ 338
4.17.8. Обработка событий................................................................................................ 339
Глава 5. CSS-препроцессор Sass............................................................................... 344
5.1. Первые шаги......................................................................................................................... 344
5.1.1. Установка Node.js .................................................................................................... 344
5.1.2. Работа с командной строкой................................................................................... 348
5.1.3. Установка Sass с помощью NPM............................................................................ 351
5.1.4. Создание пакета и добавление файла package.json ............................................... 351
5.1.5. Создание CSS-файла из SCSS-файла ..................................................................... 354
5.1.6. Отслеживание изменений SCSS-файлов................................................................ 357
5.1.7. Интерактивный режим ............................................................................................ 358
5.1.8. Комментарии............................................................................................................ 358
5.1.9. Директивы @debug, @warn и @error .................................................................... 359
5.2. Переменные и типы данных................................................................................................ 360
5.2.1. Именование переменных в Sass.............................................................................. 360
5.2.2. Области видимости переменных ............................................................................ 361
5.2.3. Инструкция !global .................................................................................................. 362
5.2.4. Инструкция !default ................................................................................................. 362
5.2.5. Типы данных ............................................................................................................ 363
5.2.6. Подстановка значений переменных ....................................................................... 365
5.2.7. Проверка существования переменной ................................................................... 367
5.3. Операторы и циклы ............................................................................................................. 368
5.3.1. Математические операторы.................................................................................... 368
5.3.2. Приоритет выполнения операторов ....................................................................... 370
5.3.3. Операторы для работы со строками....................................................................... 371
5.3.4. Операторы сравнения.............................................................................................. 372
5.3.5. Оператор ветвления @if и функция if().................................................................. 375
5.3.6. Цикл @for ................................................................................................................. 376
5.3.7. Цикл @while ............................................................................................................. 377
5.3.8. Цикл @each: перебор элементов списка или ассоциативного массива .............. 378
5.4. Числа ..................................................................................................................................... 380
5.4.1. Математические константы .................................................................................... 381
5.4.2. Основные функции для работы с числами ............................................................ 381
5.4.3. Округление чисел..................................................................................................... 383
5.4.4. Тригонометрические функции................................................................................ 384
5.4.5. Работа с единицами измерения............................................................................... 385
5.4.6. Преобразование числа в строку.............................................................................. 386
5.4.7. Генерация псевдослучайных чисел ........................................................................ 386
5.5. Списки................................................................................................................................... 387
5.5.1. Создание списка....................................................................................................... 387
5.5.2. Определение количества элементов....................................................................... 389
5.5.3. Получение и изменение значения элемента .......................................................... 389
5.5.4. Перебор элементов списка...................................................................................... 390
5.5.5. Добавление элемента в конец списка..................................................................... 391
5.5.6. Объединение списков.............................................................................................. 392
5.5.7. Поиск значения в списке......................................................................................... 394
5.5.8. Сравнение списков................................................................................................... 395
5.6. Ассоциативные массивы ..................................................................................................... 395
5.6.1. Создание ассоциативного массива......................................................................... 396
5.6.2. Определение количества элементов....................................................................... 397
5.6.3. Получение значения по ключу................................................................................ 397
5.6.4. Проверка существования ключа............................................................................. 397
5.6.5. Добавление элементов и изменение значения....................................................... 398
5.6.6. Удаление элементов ................................................................................................ 399
5.6.7. Перебор элементов .................................................................................................. 399
5.6.8. Преобразование ассоциативного массива в список.............................................. 400
5.6.9. Сравнение ассоциативных массивов...................................................................... 400
5.7. Строки................................................................................................................................... 401
5.7.1. Создание строки....................................................................................................... 401
5.7.2. Кодировка файлов.................................................................................................... 403
5.7.3. Определение количества символов в строке ......................................................... 403
5.7.4. Изменение регистра символов................................................................................ 404
5.7.5. Получение фрагмента строки ................................................................................. 404
5.7.6. Вставка фрагмента в строку.................................................................................... 405
5.7.7. Поиск в строке ......................................................................................................... 405
5.7.8. Сравнение строк....................................................................................................... 406
5.7.9. Создание уникального идентификатора ................................................................ 406
5.8. Работа с цветом.................................................................................................................... 406
5.8.1. Способы указания значения.................................................................................... 407
5.8.2. Получение значений компонентов цвета............................................................... 410
5.8.3. Изменение значений компонентов цвета............................................................... 412
5.8.4. Изменение насыщенности цвета ............................................................................ 415
5.8.5. Изменение яркости цвета ........................................................................................ 416
5.8.6. Изменение прозрачности цвета .............................................................................. 417
5.8.7. Преобразование цвета в оттенки серого ................................................................ 419
5.8.8. Смешивание цветов ................................................................................................. 419
5.8.9. Инвертирование цвета............................................................................................. 420
5.8.10. Получение значения в формате #AARRGGBB..................................................... 420
5.9. Пользовательские функции................................................................................................. 420
5.9.1. Создание функции и ее вызов................................................................................. 421
5.9.2. Расположение определений функций .................................................................... 423
5.9.3. Способы передачи значений в функцию ............................................................... 423
5.9.4. Необязательные параметры .................................................................................... 425
5.9.5. Передача произвольного количества значений..................................................... 426
5.9.6. Передача ссылки на функцию и обратный вызов ................................................. 426
5.9.7. Проверка существования функции......................................................................... 428
5.10. Модули................................................................................................................................ 428
5.10.1. Директива @import................................................................................................ 429
5.10.2. Вложенные директивы @import ........................................................................... 430
5.10.3. Пути поиска модулей............................................................................................. 430
5.10.4. Индексные файлы .................................................................................................. 432
5.10.5. Директива @use ..................................................................................................... 432
5.10.6. Изменение названия пространства имен ............................................................. 433
5.10.7. Импорт всех идентификаторов из модуля ........................................................... 434
5.10.8. Частные идентификаторы внутри модуля ........................................................... 434
5.10.9. Переопределение значений переменных из модуля ........................................... 435
5.10.10. Директива @forward............................................................................................ 436
5.10.11. Миксин meta.load-css() ........................................................................................ 43
5.10.12. Подключение CSS-файлов .................................................................................. 441
5.10.13. Получение всех переменных внутри модуля..................................................... 442
5.10.14. Получение всех функций внутри модуля........................................................... 442
5.11. Работа с селекторами и атрибутами стилей..................................................................... 443
5.11.1. Основные селекторы ............................................................................................. 444
5.11.2. Привязка к элементам и вложенные правила...................................................... 445
5.11.3. Директива @at-root ............................................................................................... 448
5.11.4. Оператор &: список с родительскими селекторами............................................ 451
5.11.5. Вложенные атрибуты ............................................................................................ 452
5.11.6. Генерация названий селекторов и атрибутов ...................................................... 453
5.11.7. Вставка атрибута в зависимости от условия ....................................................... 454
5.11.8. Функции для работы с селекторами..................................................................... 455
5.12. Шаблоны и миксины ......................................................................................................... 457
5.12.1. Директива @extend и шаблонные селекторы...................................................... 457
5.12.2. Директива @extend и простые селекторы............................................................ 459
5.12.3. Инструкция !optional ............................................................................................. 460
5.12.4. Миксины (примеси)............................................................................................... 460
5.12.5. Расположение определений миксинов................................................................. 463
5.12.6. Способы передачи значений................................................................................. 464
5.12.7. Необязательные параметры .................................................................................. 465
5.12.8. Передача произвольного количества значений................................................... 466
5.12.9. Директива @content и блоки содержимого ......................................................... 466
5.12.10. Проверка существования миксина ..................................................................... 468
5.13. Отличия SASS-файлов от SCSS-файлов .......................................................................... 468
5.14. Программа node-sass (LibSass).......................................................................................... 470
5.14.1. Установка node-sass ............................................................................................... 470
5.14.2. Создание CSS-файла из SCSS-файла ................................................................... 471
5.14.3. Отслеживание изменений SCSS-файлов.............................................................. 475
5.14.4. Различия между node-sass и Sass .......................................................................... 475
5.15. Сборка SCSS-файлов библиотеки Bootstrap под свой проект........................................ 477
Заключение .................................................................................................................. 482
Приложение. Описание электронного архива ...................................................... 483
Предметный указатель .............................................................................................. 484