Начните с Bulma

Feb 2, 2026
Инструкции
Bulma
(Кредит на изображение: Bulma)

Хотите начать использовать Bulma? Ты в нужном месте. Bulma - популярный CSS-каркас с простой сеткой Flexbox Grid. Он отличается от других структур, принимая более легкий подход и не включающий какой-либо JavaScript - оставив это решение полностью до разработчика (для изучения других вариантов, см. Наш выбор Лучшие рамки CSS ).

В этом руководстве мы продемонстрируем, как установить Bulma и построить веб-сайт с различными классами. Чтобы доказать, насколько универсальные классы в Bulma, вся страница учебника была построена без написания одной строки CSS. Хотите другие варианты? Попробуйте отлично Строитель сайта Отказ И убедиться, что ваш сайт работает в лучшем виде, выберите правильное веб хостинг служба.

Generate flash sale

(Кредит на изображение: будущее)

Генерация CSS - самое горячее веб-мероприятие в городе. С 20-22 сентября вы можете забрать билет на полне цена, используя код Flashsale5. Нажмите на изображение, чтобы узнать больше.

01. Начните

Bulma: get started

(Кредит на изображение: Bulma)

Создайте новый каталог и внутри него создайте index.html. файл. Откройте этот файл в редакторе кода и создайте простой HTML-документ стартера, с HTML DOCTYPE и отзывчивым тегом ViewSort. 

 & lt; otectype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta name = "Viewport" Content =
«Ширина = ширина устройства, начальная шкала = 1» и GT;
& lt; title & gt; заголовок страницы & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Установите Bulma

Использование Bulma OUT в коробке так же быстро, как добавление одного файла CSS. Использование CDN Добавьте ссылку в HTML. Если необходимо изменить переменные и иметь больше контроля за рамки, NPM установить Bulma можно использовать (см. Полная документация ). Для полного опыта шрифт Awesome 5 также должен быть включен. 


& lt; Script Defer SRC = "https://use.fontawesome.com/relestest/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. Создайте страницу

Bulma: hello world

(Кредит на изображение: Bulma)

Внутри теги тела создайте элемент раздела и Div с классом контейнер Отказ В рамках контейнера создайте H1 с классом заглавие затем абзац с классом субтитры Отказ На данный момент введите «Hello World» в название и какой-то текст в абзац. Теперь у нас есть основной шаблон стартера для Bulma. 

 & lt; Раздел Class = "Раздел" & gt;
& lt; class = "контейнер" & gt;
& lt; h1 class = "title" & gt;
Привет, мир
& lt; / h1 & gt;
& lt; p class = "субтитры" и GT;
Это основной стартер
Шаблон для Булма
& lt; / p & gt;
& lt; / div & gt;
& lt; / раздел & gt;

04. Создайте лучший бар героя

Сделайте новый раздел выше предыдущего, а вместо класса раздел Дайте это класс герой Отказ Класс героя позволяет создавать полношидный баннер, с различными вариантами, контролирующими его высоту. В этом новом разделе создайте Div с классом герой-тело А потом а контейнер Это будет держать контент. 

 & lt; класс раздела = "Герой" и GT;
& lt; class = "Hero-Body" & gt;
& lt; class = "контейнер" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Добавить название и субтитры

Внутри контейнера Div добавьте тег H1 и H2 с классами заглавие и субтитры Отказ Это типографии классы, которые увеличит размер их содержания. Bulma умна, чтобы знать, когда заголовок и субтитры объединяются, и принесет их ближе.

06. Добавьте всплеск цвета

Bulma: colour

(Кредит на изображение: Bulma)

Добавьте класс является первичным к сечению героя. Это применит основной цвет на задний план и изменить текст на более легкий вариант. Вместо начальный , Информация , успех , предупреждение , Опасность , свет и тьма также можно выбрать 

 & lt; Раздел Class = "Герой - первичный" & gt;

07. Разделите содержимое в столбцы

Первая область содержимого сайта разделена на два столбца. Сделайте новый раздел с разделом класса и добавьте контейнер. Чтобы настроить столбцы, Div добавляется с колонны учебный класс. Каждый столбец добавляется в родительский контейнер. Столбцы одинаково помещают себя в доступном пространстве с небольшим зазором между отсутствием.

Если у вас много контента, убедитесь, что вы поддерживаете свои активы в надежном облачном хранилище. 

 & lt; Раздел Class = "Раздел" & gt;
& lt; class = "контейнер" & gt;
& lt; class = "столбцы - vcentered" & gt;
& lt; class = "колонна" & gt;
...
& lt; / div & gt;
& lt; class = "колонна" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / раздел & gt;

08. Создать отзывчивые изображения

Bulma: responsive images

(Кредит на изображение: Bulma)

Второй столбец будет содержать изображение. Оберните изображение в элементе рисунка, и, если это возможно, дайте фигуру класс соотношения аспекта изображения. В примере, 16Ба9 был использован (см. Полный список доступных соотношений ). 

 & lt; class = "колонна" & gt;
& lt; Рисунок Class = "Image IS-16BY9" & GT;
& lt; img src = "img / dog.jpg" & gt;
& lt; / fix & gt;
& lt; / div & gt;

09. Предлагайте действие с кнопками

Класс кнопки создает красочные кнопки и могут быть применены & lt; a & gt; элементы или & lt; кнопка & gt; Элементы в формах. Данные два кнопки в первый столбец и нанесите их модификаторы цвета. При использовании более одной кнопки, оберните их в Div с классом кнопки , который исправляет пробел и позволяет применять классы как группу. 

 & lt; Кнопки div = "кнопки" & gt;
кнопка & lt; класс = "- это информация" & gt;
Узнайте больше и LT; / A & GT;
& lt; Кнопка класса = "- это опасность, изложена" & gt;
Купить сейчас & lt; / a & gt;
& lt; / div & gt;

10. Создать контент в штучной упаковке

Bulma: boxed content

(Кредит на изображение: Bulma)

Добавьте новый раздел в нижней части страницы с тремя столбцами. В колоннах добавляется элемент коробки. Элементы коробки - это простые контейнеры с границей вокруг них, которые разделяют их с фона страницы. 

 & lt; class = "колонна" & gt;
& lt; class = "box" и GT;
Тест
& lt; / div & gt;
& lt; / div & gt;

11. Используйте знаковые коробки

Bulma интегрирует с шрифтом Awesome 5, но совместим со всеми библиотеками шрифтов и имеет классы для вызова большинство доступных значков. В каждой коробке добавьте контейнер контента, а затем элемент промежутка с классом значок Отказ Внутри диапазона используйте & lt; i & gt; элемент для вызова необходимых классов для нужного значка. Значки окрашены так же, как текст. 

 & lt; class = "Содержание" и GT;
& lt; Span Class = "icon" & gt;
& lt; i class = "fas fa-lg fa-home
имеет текст-успех »& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div class = "Название - размер-6" & gt; ... & lt; / div & gt;
& lt; class = "субтитры - размер-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Быть смелым

Bulma: Be bold

(Кредит на изображение: Bulma)

Создайте новый раздел героя для двух столбцов в нижней части страницы, давая Is-info. класс в раздел. Для интересного эффекта также примените это смелый Класс к этому разделу для тонкого градиента. Этот модификатор работает со всеми семи из основных цветов.

13. Измените уровни

Уровни - отличный способ обеспечить, чтобы элементы вертикально сосредоточены подряд. В новом разделе внизу страницы добавьте Div с классом уровня и гнездо внутри четырех уровней. Любой контент, добавленный в элементе уровня, будет выровнен вертикально. 

& lt; Class = «Уровень» и GT;
& lt; div class = "Пункт уровня имеет текстовый центр" & gt;
...
& lt; / div & gt;
& lt; div class = "Пункт уровня имеет текстовый центр" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Добавление и контрольные формы

Чтобы добавить форму в нижнюю часть страницы, сделайте новый раздел Hero Column Hero является первичным Отказ Разделить его на две колонны, а в правой колонне создайте поле учебный класс. Класс поля используется для группировки нескольких входов формы вместе, обеспечение того, чтобы они были расположены правильно. Каждый вход также должен быть завернутый в человека .контроль учебный класс. 

 & lt; class = "поле" & gt;
& lt; div class = "Управляемое у значков
есть-значки - правильные "& gt;
& lt; входной класс = "Ввод" Тип = "Email"
PlaceHolder = «Ваш электронная почта» и GT;
& lt; span class = "значок маленький
левый "& gt;
& lt; i class = "Fas fa-конверт" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Дайте пользователям отзывы

Bulma: feedback

(Кредит на изображение: Bulma)

Как только форма представлена, она должна вернуть сообщение пользователям, чтобы они узнали, что будет дальше. Хотя Bulma не может контролировать, когда будет отображаться это сообщение, передний конец может быть построен с классом сообщений. 


& lt; class = "заголовок сообщения" & gt;
& lt; p & gt; спасибо! & lt; / p & gt;
& lt; / div & gt;
& lt; class = "Body-body" & gt;
... & lt; / div & gt;
& lt; / ст. & gt;

16. Добавьте нижний колонтитул

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

 & lt; класс нижнего колонтитула = "нижний колонтитул" & gt;
& lt; class = "Содержание имеет текстовый центр" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Настроить переменные

Большинство проектов, кроме прототипов, будут иметь требование для работы с руководством и цветами бренда. Точно так же безопасно предполагать, что дизайнер должен будет изменить шрифты, цвета или другие аспекты Bulma. Основной частью Bulma заключается в том, что она настраивается и модульная. Модули могут быть не только могут быть избирательно импортированы, но в рамках в рамках в рамках можно изменить до 415 переменных SASS.

Использование переменных означает настройку нового цвета в качестве первичного изменит этот цвет по всей рамки Bulma для этого проекта. Установка этого в первую очередь может быть сложно, но руководства были предоставлены три разных метода в документации.

Эта статья была первоначально опубликована в номере 289 журнала Treative Web Design Веб-дизайнер Отказ Купить проблему 289. или же Подписаться здесь Отказ

Прочитайте больше:

  • 5 Вдохновляющие тематические исследования веб-дизайна
  • Лучшие инструменты дизайна пользовательского интерфейса
  • Главный минималистский дизайн сайта

Инструкции - Самые популярные статьи

Как настроить и оптимизировать вашу Smugmug Statefront

Инструкции Feb 2, 2026

(Кредит на изображение: Andre Furtado на Pexels) Простой строитель сайта, �..

Основное руководство по обращению в искусстве

Инструкции Feb 2, 2026

(Кредит на изображение: ROB LUNN) Если вам интересно, что предсказан�..

Используйте отрицательное пространство, чтобы рисовать лучшие руки

Инструкции Feb 2, 2026

Даже, казалось бы, сложный процесс, такой как рисунок рукой, может быть ..

Как сделать и использовать Mahlstick для покраски

Инструкции Feb 2, 2026

Mahlstick (или Maulstick, как это иногда известно) - стабилизирующий инструмент �..

Как имитировать взрывы в Maya

Инструкции Feb 2, 2026

Страница 1 из 2: Страница 1 Страница 1 ..

Как покрасить изогнутое стекло на космическом шлеме

Инструкции Feb 2, 2026

Системы - это весело рисовать, но часть шлема может быть сложной, чтобы ..

Как создать волосы в кино 4D

Инструкции Feb 2, 2026

Вдохновленный фантастическим характером искусства Carlos Ortega Elizalde и Lois Va..

Исследуйте творческий код с P5.JS

Инструкции Feb 2, 2026

Провести день с Брендан Доус в Генерир�..

Категории