Основы работы с колонками Bulma.

Располагать элементы на веб-страницах в несколько колонок приходится очень и очень часто. В фреймворке Bulma есть мощная возможность, как вы можете располагать колонки на веб-странице и эта возможность основывается на технологии CSS Flexbox. 

Верстка с помощью этой технологии получается адаптированной под мобильные устройства. Колонки будут автоматически подстраиваться под мобильные устройства.

Давайте рассмотрим основы создания колонок с помощью фреймворка Bulma и создаются они очень и очень просто.

<div class="columns">
  <div class="column">
    Содержимое колонки 1
  </div>
  <div class="column">
    Содержимое колонки 2
  </div>
  <div class="column">
   Содержимое колонки 3
  </div>
  <div class="column">
    Содержимое колонки 4
  </div>
</div>

Колонки обязательно должны находиться в родительском блоке, который имеет класс columns (т.е. колонки).

И в этот родительский класс мы должны размещать колонки: блоки с классом column (т.е. колонка).   

Если какие-то колонки нам не нужны, мы их можем просто убрать.

В итоге, у нас получился вот такой трехколоночный макет сайта:

<div class="columns">
  <div class="column">
    Содержимое колонки 1
  </div>
  <div class="column">
    Содержимое колонки 2
  </div>
  <div class="column">
   Содержимое колонки 3
  </div>
</div>

Этот макет мы уже сможем наполнять содержимым. Это самые основы, как создаются колонки в Bulma.

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

Обратите внимание, чтобы у вас на веб-странице был добавлен элемент meta со следующим содержимым:

<head>
    ...
        <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
</head>

Этот элемент важен для адаптации колонок под мобильные устройства. Это очень важно. 

Пока на этом все по поводу работы с колонками на фреймворке Bulma. Переходим к следующему видео.

Комментарии: