Уроки Bootstrap

#2 - Grid система (система сеток)

#2 - Grid система (система сеток)

Система сеток это ключевое понятие в Bootstrap, поэтому мы изучим её в самом начале. Благодаря системе сеток мы можем создавать различные блоки на сайте, которые впоследствии будут изменятся и подстраиваться под различные размеры экранов.

Видеоурок

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Работа с сетками
Ваша задача заключается в создании нескольких блоков на сайте. Сделайте 3 ряда. В первом должно находится 2 блока, во втором - 6, а в третьем - два блока занимающие половину экрана и еще 3 блока на оставшуюся половину. Все блоки должны трансформироваться в зависимости от экрана.
Посмотреть ответ
Вот примерный код решения данной задачи:
<div class="container-fluid">
    <h1>Различные блоки</h1>
    <div class="row">
      <div class="col-md-6" style="background-color: #ff9999">Первый</div>
      <div class="col-md-6" style="background-color: #99CCFF">Второй</div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-2" style="background-color: #ff9999">Первый</div>
      <div class="col-md-2" style="background-color: #99CCFF">Второй</div>
      <div class="col-md-2" style="background-color: #00CC99">Третий</div>
      <div class="col-md-2" style="background-color: #00F999">Четвертый</div>
      <div class="col-md-2" style="background-color: #fafafa">Пятый</div>
      <div class="col-md-2" style="background-color: #cccccc">Шестой</div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-3" style="background-color: #ff9999">Первый</div>
      <div class="col-md-3" style="background-color: #99CCFF">Второй</div>
      <div class="col-md-2" style="background-color: #ff9999">Первый</div>
      <div class="col-md-2" style="background-color: #99CCFF">Второй</div>
      <div class="col-md-2" style="background-color: #00CC99">Третий</div>
    </div>
</div>

Большое задание по курсу

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

Также стоит посмотреть

Видеокурс по PHP, MySQL / Создание динамического сайта
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Уроки Python Django / Создание сайта
12 уроков
Современная вёрстка адаптивного веб-сайта
Создание блога на Ruby On Rails
8 уроков