Bootstrap

Изучение технологии Bootstrap (верстка сайта)

16 уроков 20 заданий Справочник Компилятор

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

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


BootstrapHTML5

Система сеток это ключевое понятие в 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 месяца!


BootstrapHTML5

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