Располагать элементы на веб-страницах в несколько колонок приходится очень и очень часто. В фреймворке 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. Переходим к следующему видео.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти