УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки по фреймворку Bootstrap 4

Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.

Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)



Урок 1. Сетка

Предварительно изучите теорию 1. Введение и подключение сетки

В данном уроке и в последующих  мы будем использовать 4-ую версию Bootstrap.

Подключение

1. Подготовим файлы для нашей работы.

2. Создадим папку на рабочем столе под названием Bootstrap, а в этой папке создадим файл под названием index.html и 2 папки css и js, и в этих папках создадим style.css и main.js (рисунок 1).

Рисунок 1 — Подготовка папок и файлов

3. Откроем файл с помощью любого редактора кода, например, Sublime Text, и напишем базовую структуру HTML web-страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Лабораторная работа 1. Сетка</title>
</head>
<body>
  
</body>
</html>

4. Теперь давайте подключим к нашему сайту библиотеку Bootstrap.

Существует два способа подключения библиотеки Bootstrap:

  1. Подключить Bootstrap через CDN.
  2. Скачать библиотеку Bootstrap и подключить его локально.

Рассмотрим первый вариант подключения Bootstrap.

Для начала рассмотрим, что такое CDN.

CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав CDN cерверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным.

1. Зайдите на официальный сайт BootstrapCDN (рисунок 2)

Рисунок 2 — Официальный сайт BootstrapCDN

2. Нажмем на выпадающий треугольник в CSS и скопируем готовый HTML тег для версии 4.6.0 (рисунок 3)

Рисунок 3 — Стиль bootstrap.min.css

3. Вставляем наш скопированный тег перед title

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

4. Теперь наш стиль от фреймворка Bootstrap подключен.

5. Чтобы проверить правильно ли подключен наш CSS файл, создадим кнопку с классом btn btn-primary

<button type="button" class="btn btn-primary">Кнопка</button>

6. Запустим файл index.html в любом браузере.

7. Видим, что кнопка применила стиль от библиотеки Bootstrap (рисунок 4).

Рисунок 4 — Результат

8. Теперь подключим стили через пути к нашему файлу.

9. Заходим на официальный сайт Bootstrap и нажимаем на кнопку Download (рисунок 5)

Рисунок 5 — Официальный сайт Bootstrap

10. Нам нужна версия Bootstrap v4.6, нажимаем на неё (рисунок 6).

Рисунок 6 — Bootstrap v4.6

11. После этого нажимаем на вкладку Download и затем на кнопку скачивания (рисунок 7).

Рисунок 7 — Скачивание библиотеки Bootstrap

12. Распаковываем скачанный архив и переходим в папку css, и копируем файл bootstrap.min.css (рисунок 8).

Рисунок 8 — Файлы CSS Bootstrap

13. Вставляем наш копируемый файл в нашу папку css (рисунок 9).

Рисунок 9 — bootstrap.min.css

14. Открываем наш файл index.html через редактора кода Sublime Text, удаляем тег link, который мы прописали,  и добавляем вместо него следующий тег для подключения нашего стиля перед тегом title.

<link rel="stylesheet" href="css/bootstrap.min.css">

15. После синей кнопки добавим зеленую. Для этого добавьте в html-код запись:

<button type="button" class="btn btn-success">Кнопка</button>

Проверим правильность подключения стиля (рисунок 10).

Рисунок 10 — Результат

Сетка

В Bootstrap используется три разных типа контейнеров:

  • .container, который устанавливает в каждой отзывчивой контрольной точке;
  • .container-fluid, ширина которого width: 100% на всех контрольных точках;
  • .container-{breakpoint}, то есть ширина width: 100% до указанной контрольной точки.

1. Подключите стиль style.css после подключенного стиля bootstrap.min.css

<link rel="stylesheet" href="css/style.css">

2. Пропишите базовую структуру Bootstrap сетки (коды с кнопками можно удалить):

<div class="container">
  <div class="row">
    <div class="col box box-1">Контейнер</div>
  </div>
</div>

Классы box и box-1 это наши с Вами классы, эти классы никак не относятся к Bootstrap’у. В дальнейшем мы будем прописывать другие классы box-2, box-3 и т. д. Для этих классов мы зададим стили, чтобы было наглядно видно, как устроена сетка.

3. Откройте ранее созданный файл style.css и пропишите следующий код:

.box {
  color: #fff;
  height: 50px;
  text-align: center;
}

.box-1 {
  background-color: green;
}

4. Перейдите в браузер и обновите страницу, видим, что у нас применились стили Bootstrap и наши стили (рисунок 11).

Рисунок 11 — Результат

Класс .col занимает всю ширину экрана и до ширины 576px у него имеются отступы и выступы (margin и padding).

5. Напишите код, который будет состоять из двух колонок:

<div class="container">
  <div class="row">
    <div class="col box box-1">Левая колонка</div>
    <div class="col box box-2">Правая колонка</div>
  </div>
</div>

6. Пропишите стиль для класса .box-2:

.box-2 {
  background-color: orange;
}

7. Обновите страницу и увидите, что у нас появились две колонки одинакового размера, которую занимают максимальную ею ширину (рисунок 12).

Рисунок 12 — Результат

8. Теперь создайте три колонки:

<div class="container">
  <div class="row">
    <div class="col box box-1">Левая колонка</div>
    <div class="col box box-2">Центральная колонка</div>
    <div class="col box box-3">Правая колонка</div>
  </div>
</div>

9. Также пропишите стиль для класса .box-3:

.box-3 {
  background-color: brown;
}

10. Обновите страницу и вы увидите, что контейнер состоит из трех частей (рисунок 13).

Рисунок 13 — Результат

До этого мы создавали колонки, которые по умолчанию занимали одинаковую ширину. Теперь мы создадим 3 колонки разных размеров.

<div class="container">
  <div class="row">
    <div class="col-6 box box-1">
      .col-6
    </div>
    <div class="col-4 box box-2">
      .col-4
    </div>
    <div class="col-2 box box-3">
      .col-2
    </div>
  </div>
</div>

11. Теперь откройте страницу и увидите, что у нас 3 колонки, которые состоят из 6, 4 и 2 колонок. Не забывайте, что сетка Bootstrap состоит из 12 колонок (рисунок 14).

Рисунок 14 — Результат

Адаптивная сетка

Создадим адаптивную разметку веб-страницы с помощью сетки Bootstrap (рисунок 15).

Рисунок 15 — Адаптивная сетка

1. Создайте разметку блока для мобильных устройств (xs).

<div class="row">
  <div class="box box-1 col-12">1</div>
  <div class="box box-2 col-12">2</div>
  <div class="box box-3 col-12">3</div>
  <div class="box box-4 col-12">4</div>
  <div class="box box-5 col-12">5</div>
</div>

Классы box, box-1, box-2, box-3, box-4, box-5 будем использовать для стилизации блоков

2. Напишите следующий CSS код для стилизации блоков:

.box {
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 900;
}

.box-1 {
  background-color: #C00000;
}

.box-2 {
  background-color: #E36C0A;
}

.box-3 {
  background-color: #FFC000;
}

.box-4 {
  background-color: #00B050;
}

.box-5 {
  background-color: #00B0F0;
}

3. Для контрольной точки sm напишите первым четырем блокам класс col-sm-6, а для последнего блока напишите col-sm-12.

4. Для контрольных точек md и lg напишите первым трем блокам класс col-md-4, а для последних двух блоках напишите класс col-md-6.

5. Для контрольной точки xl напишите всем блокам класс col-xl.

Окончательный результат кода:

<div class="container">
  <div class="row">
    <div class="box box-1 col-12 col-sm-6 col-md-4 col-xl">1</div>
    <div class="box box-2 col-12 col-sm-6 col-md-4 col-xl">2</div>
    <div class="box box-3 col-12 col-sm-6 col-md-4 col-xl">3</div>
    <div class="box box-4 col-12 col-sm-6 col-md-6 col-xl">4</div>
    <div class="box box-5 col-12 col-sm-12 col-md-6 col-xl">5</div>
  </div>
</div>

Для того, чтобы проверить поведение сетки, в браузере Google Chrome в правом верхнем углу нажмите три вертикальные точки и выберите Дополнительные инструменты – Инструменты разработчика. Изменяйте размеры окна и проверьте, как ведут себя блоки сетки.

Контрольное задание

  1. Создайте простую сетку из трех колонок, размеры колонок 4 | 6 | 2. Укажите им высоту в 200 пикселей и задайте для каждой колонки фон.
  2. Создайте сложную адаптивную сетку из 4 колонок. При XL 4 колонки идут рядом, при LG и MD 3 колонки рядом, а последняя под этими колонками, при SM по 2 колонки и при XS все колонки идут в ряд. Укажите высоту в 150 пикселей и задайте фоновый цвет для каждого блока.


Уроки по фреймворку Bootstrap 4