Как правило, когда мы с вами начинаем создавать макет любой веб-страницы, мы начинаем делать это с шапки сайта.
Как правило, на всех веб-страницах сайта - эта шапка сайта есть.
В фреймворке Bulma за шапку сайта отвечает специальный раздел документации, который называется Layout - Hero.
Пример кода для создания самой простой шапки сайта следующий:
<section class="hero"> <div class="hero-body"> <div class="container"> <h1 class="title"> Hero title </h1> <h2 class="subtitle"> Hero subtitle </h2> </div> </div> </section>
Код для шапки сайта, как правило размещается сразу после открывающего элемента <body>.
По сути, шапка сайта создается с помощью класса hero и hero-body.
Чтобы изменить фоновый цвет, можно добавить какой-либо модификатор цвета для элемента с классом hero.
Например,
<section class="hero is-success"> ... </section>
Т.е. просто скопировав заготовку кода из документации Bulma - мы с вами создали полноценную шапку сайта.
Если нам нужно в качестве фонового цвета использовать градиент, можно добавить модификатор is-bold.
<section class="hero is-success is-bold"> …
Есть также модификаторы, который отвечают за размер. Есть 3 основных значения:
medium
large
fullheight
Например,
<section class="hero is-success is-bold is-medium"> …
Сделает размер шапки "средним" размером.
Это основы работы с шапкой (hero) в фреймворке Bulma. Все очень просто, копируем заготовку и применяем к ней различные модификаторы: для цвета, градиента или размера.
Вот общий алгоритм, как это делается.
Здесь есть много особенностей, которые могут возникнуть при решении каких-то конкретных практических задач верстки. Но, в целом - это самые главные основы, которые мы с вами должны знать.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти