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

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

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

Урок 6. Утилиты

Предварительно изучите теорию 4. Утилиты

Управление margin и padding отступами

1. Создайте <div> контейнер с классом .container и поместите заголовок <h1> и два текста с тегом <p>.

2. У заголовка пропишите класс .text-center (выравнивает по центру текст для всех размеров экранов). У первого абзаца запишите классы .mt-5 и .pb-3, а второго абзаца оставьте без классов. Должно получится вот так (рисунок 1):

<div class="container">
  <h1 class="text-center">Заголовок</h1>
  <p class="mt-5 pb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. At quis delectus expedita adipisci eos doloremque ipsum maxime sint laboriosam possimus tempore, voluptates numquam consequatur debitis incidunt saepe recusandae voluptatem! Repudiandae?</p>
  <p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Quidem cumque assumenda fuga explicabo quia debitis quasi, voluptatum pariatur officiis voluptate consectetur exercitationem totam ut ipsam quaerat sint reiciendis provident vero.</p>
</div>

Результат выполнения кода:

3. Теперь расположим два блока по центру.

4. Создайте <div> с классом .container, а внутри этого блока расположите ешё один <div> с классами .row и .mt-5.

5. Внутри класса .row создайте два блока Текст.col-4 и Текст.box (для класса .box мы укажем свои стили)

6. Для первого блока допишите классы .ml-auto, .mr-3 и .bg-success, а для второго блока напишите класс .mr-auto, .ml-3 и .bg-danger.

7. Внутри этих двух блоков напишите левый и правый контейнер. Должно получится вот так:

<div class="container">
  <div class="row mt-3">
    <div class="col-4 ml-auto mr-3 bg-success box">Левый контейнер </div>
    <div class="col-4 mr-auto ml-3 bg-danger box">Правый контейнер </div>
  </div>
</div>

8. В css файле напишите для класса .box высоту в 200 пикселей, укажите display: flex по центру и шрифт в 20 пикселей, вот так:

.box {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

Результат выполнения кода (рисунок 2):

Видно, что классы .ml-auto и .mr-auto применили свои стили и варвнились по центру. Эту конструкцию можно было записть и в CSS файле, достаточно прописать margin: 0 auto.

Управление границами и скруглениями углов элементов

Для управления границами элемента предназначены классы border, border-0, border-top, border-right, border-bottom, border-left, border-top-0, border-right-0, border-bottom-0 и border-left-0.

Класс border устанавливает границы для всех сторон элемента. Классы border-top, border-right, border-bottom и border-left выполняет это действие только для одной из них.

Другая часть классов border-top-0, border-right-0, border-bottom-0 и border-left-0 выполняет обратное действие, а именно убирает одну из границ

1. Создайте <div> с классом .container, а внутри этого блока расположите ешё один <div> с классами .row и .mt-3.

2. Напишите два абзаца с тегом <p> с классами .col-5.

3. Для первого абзаца пропишите классы .ml-auto, .mr-3 и border.

4. Для второго абзаца нужно прописать следующие классы .mr-auto, .ml-3, .border-top и .border-bottom. Должно получится вот так:

<div class="container">
  <div class="row mt-3">
    <p class="ml-auto mr-3 col-5 border">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi velit aperiam quam ipsum corrupti reprehenderit consequatur minus! Minus, in illum magni, esse hic molestias voluptatum nulla ut optio, dicta labore.</p>
    <p class="mr-auto ml-3 col-5 border-top border-bottom">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Quia iste veritatis omnis esse, ipsa necessitatibus et asperiores minus earum corrupti iusto vel id odio saepe. Sunt maxime cumque ea corporis.</p>
  </div>
</div>

Результат выполнения кода (рисунок 3):

Видно, что первый абзац полностью обвелся в границы, это тоже самое если бы вы написали border: 1px solid #dee2e6. У второго абзаца границы только сверху и снизу, это конструкцию также могли бы прописать в CSS файле border-top: 1px solid #dee2e6 и border-bottom: 1px solid #dee2e6.

Что если нам нужно изменить цвет границ в какой-то другой цвет?

5. Для этого нужно зайти в CSS файл и прописать для класса .border нужный стиль.

6. Допустим сделаем наши границы желтым цветом и укажем пунктирный вид границ с размером 5 пикселей. Вот так:

.border {
  border: 5px dashed yellow !important;
}

Обязательно нужно записать !important, чтобы стили были переназначены.

Результат выполнения кода (рисунок 4):

Класс .border применил наши собственные стили.

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

Есть классы, которые убирают одну из границ.

7. Создайте контейнер с классом .container, а внутри него поместите класс .row и .mt-3

8. Внутри последнего блока добавьте абзац с классами .p-2 .border .border-top-0 .border-bottom-0. Должно получится вот так:

<div class="container">
  <div class="row mt-3">
    <p class="p-2 border border-top-0 border-bottom-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum fugit nulla autem accusantium beatae quae veritatis blanditiis esse quos debitis, nemo sint corporis a! Sequi repudiandae voluptatem magni perspiciatis natus.</p>
  </div>
</div>

Если вы не удалили стили с того кода, то должно получится вот так (рисунок 5):

Почему не убрались верхний и нижний границы? Потому что в том примере, мы переопределили стиль класса .border, из-за этого этот стиль применился ко всем классам. Классы .border-top-0 и .border-bottom-0 не смогут применится. Чтобы классы применились так надо, нужно также переопределить стили для этих двух классов.

9. Напишите следующий CSS код для наших границ:

.border-top-0 {
  border-top: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

После значения также нужно прописать !important.

Результат выполнения кода (рисунок 6):

Стили успешно применились к нашему абзацу

Самостоятельно добавьте абзац и поменяйте стиль границ для верхней и нижней границ.

Скругление углов элемента

1. Напишите ту же конструкцию, что мы писали ранее, класс .container и внутри этого класса блок с классами .row и .mt-3

2. Внутри этого блока напишем 3 блока с классами .box и .rounded

3. Для первого блока напишите ещё два класса .box-1 .mr-auto

4. Для второго блока класс .box-2

5. А для третьего блока классы .box-3 и .ml-auto, должно получится вот так:

<div class="container">
  <div class="row mt-3">
    <div class="box box-1 mr-auto rounded"></div>
    <div class="box box-2 rounded"></div>
    <div class="box box-3 ml-auto box rounded"></div>
  </div>
</div>

Если мы обновим страницу, то ничего не увидим, потому что мы написали только блоки, не указав ни ширину, ни высоту.

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

.box {
  width: 200px;
  height: 200px;
}

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

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

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

Результат выполнения кода (рисунок 7):

Блоки применили наши собственные стили, также класс . rounded, который скруглил углы блоков

7. Поменяйте класс .rounded во всех блоках на класс .rounded-circle

Управление отображением элементов

В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.

1. Создайте адаптивную разметку, состоящую из 3 секций (L, M и R). Секция L должна отображаться только на контрольной точке xl, а на остальных – скрыта. Примерно будет выглядеть так (рисунок 8):

2. Создайте блок с классом .container и внутри этого контейнера создайте ещё один блок с классами .row и .mt-3

3. Внутри блока .row создайте 3 блока с тегом <div>

4. Для первого блока напишете классы .box .box-left .col-xl-3 .d-none .d-xl-block (рисунок 9)

5. Для второго блока классы .box .box-middle .col-xl-6 .col-md-8 .col-sm-6 .col-12 (рисунок 10)

6. А для третьего блока классы .box .box-right .col-xl-3 .col-md-4 .col-sm-6 .col-12, должно получится вот так (рисунок 11):

<div class="container">
  <div class="row mt-3">
    <div class="box box-left col-xl-3 d-none d-xl-block">L</div>
    <div class="box box-middle col-xl-6 col-md-8 col-sm-6 col-12">M</div>
    <div class="box box-right col-xl-3 col-md-4 col-sm-6 col-12">R</div>
  </div>
</div>

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

.box {
  height: 200px;
  font-size: 40px;
  text-align: center;
  line-height: 200px;
}

.box-left {
  background-color: #FCD5B5;
  color: #E26803;
}

.box-middle {
  background-color: #DCE6F2;
  color: #257E95;
}

.box-right {
  background-color: #D7E4BD;
  color: #6F8C33;
}

Результат выполнения кода (рисунок 12):

Рисунок 10 — При размере ⩾ 768px и ⩽ 1199px

Рисунок 11 — При размере ⩾ 576px и ⩽ 767px

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

Создайте контейнер, а внутри контейнера поместите блок с классом .row. Внутри это блока напишете 4 блока с классом в 3 колонки. 1 и 3 блоки имеет ширину и высоту в 200 пикселей, а 2 и 4 блоки имеют ширину и высоту в 100 пикселей. 1 и 3 блоки имеет скруглые углы, а 2 и 4 блоки имеют круглую форму. Залить любым цветом все 4 блока.
Создайте блоки header, sidebar, content и footer. При размере ⩽ 991 пикселей скрывать sidebar. Самостоятельно задайте им ширину, высоту и цвет блоков.