Bulma

Сегодня мы поговорим про открытый и бесплатный CSS-фреймворк-Bulma.

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

Вложенные колонки

Bulma позволяет вкладывать колонки внутрь друг друга, создавая более сложные макеты. Вот пример:

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

Макет с боковой панелью

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

Макет с несколькими панелями

Вы также можете использовать ВК для создания макетов с несколькими панелями или секциями на одной странице:

Макет с разделенными секциями

ВК также позволяют формировать макеты, где секции визуально разделены, но при этом сохраняют гибкость:

Вы можете комбинировать вложенные колонки с другими классами и компонентами Bulma, такими как box, tile, hero, чтобы создавать более сложные и стильные макеты.

Важно помнить, что при использовании ВК необходимо следить за вложенностью и правильно закрывать теги, чтобы избежать ошибок в структуре HTML.

Читайте больше разборов на канале Carbonfay!

2
DELETED
Автор поста оценил этот комментарий

Сетка такая ж как у Bootstrap (12) в чем фича этого Bulma то?

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Основное преимущество Bulma по сравнению с Bootstrap заключается в том, что Bulma представляет собой CSS-фреймворк без какой-либо зависимости от JavaScript. Это делает его более легковесным и быстрым, поскольку он не требует загрузки дополнительных JavaScript-файлов.

Несмотря на то, что сетка в Bulma также основана на 12 колонках, как и в Bootstrap, она имеет несколько отличительных особенностей:

Более простой и минималистичный синтаксис классов, что облегчает чтение и написание кода.

Встроенная поддержка гибких (responsive) колонок без необходимости использовать специальные классы для разных размеров экрана.

Возможность вкладывать колонки внутрь друг друга (вложенные колонки), что обеспечивает большую гибкость в создании макетов.

Более легкий вес и меньший объем CSS-кода по сравнению с Bootstrap.

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

В целом, Bulma позиционируется как более легковесная и простая в использовании альтернатива Bootstrap, особенно для проектов, где не требуется использование всех возможностей Bootstrap или где важна производительность и скорость загрузки.

показать ответы

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества