Булма — Введение

Bulma — это простой и современный CSS-фреймворк с открытым исходным кодом, который зависит от модуля flexbox (он используется для разработки адаптивной структуры макета).

история

Bulma была опубликована в 2016 году и распространяется под лицензией MIT. Текущая версия Bulma — 0.7.1, выпущенная 18 апреля 2018 года.

Зачем использовать булму?

Булма очень проста в освоении и настройке. Он построен с использованием SASS и разделен на 39 файлов .sass . Код можно легко настроить, разделив его на отдельные файлы, что позволяет настроить часть приложения для получения ожидаемого результата.

Характеристики

• Это легкий, современный CSS-фреймворк, использующий Flexbox.

• Он содержит мобильные первые стили в одном файле, а не в отдельных файлах.

• Это настраиваемый и модульный.

Это легкий, современный CSS-фреймворк, использующий Flexbox.

Он содержит мобильные первые стили в одном файле, а не в отдельных файлах.

Это настраиваемый и модульный.

преимущества

• Он обеспечивает адаптивный дизайн для настольных компьютеров, планшетов и мобильных телефонов.

• Это чистый CSS-фреймворк, так что вы можете комбинировать его с любым фреймворком JavaScript, таким как AngularJS, ReactJS и т. Д.

• Он использует минимальный HTML-код, что позволяет легко читать и писать код.

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

Это чистый CSS-фреймворк, так что вы можете комбинировать его с любым фреймворком JavaScript, таким как AngularJS, ReactJS и т. Д.

Он использует минимальный HTML-код, что позволяет легко читать и писать код.

Недостатки

• Это новая структура, которая не так велика для сообщества.

• В нем меньше документации и требуется небольшое улучшение.

• Эта структура все еще находится в стадии разработки.

Это новая структура, которая не так велика для сообщества.

В нем меньше документации и требуется небольшое улучшение.

Эта структура все еще находится в стадии разработки.

Булма — Обзор

Описание

Bulma — это легкий, современный CSS-фреймворк, который зависит от модуля flexbox (он используется для разработки адаптивной структуры макета и модного дизайна).

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

В следующей таблице перечислены различные типы утилит, которые вы можете использовать для использования Bulma CSS.

S.No.	Полезность и описание
1	Начало работы с Bulma Вы можете начать с Bulma, используя один файл CSS.
2	Отзывчивость и Цвета Это дружественная для мобильных устройств разработка, которая может сочетаться с большими, маленькими и средними устройствами.
3	Функции и миксины Bulma использует некоторые функции и миксины для определения значений и элементов соответственно.

Вы можете начать с Bulma, используя один файл CSS.

Это дружественная для мобильных устройств разработка, которая может сочетаться с большими, маленькими и средними устройствами.

Bulma использует некоторые функции и миксины для определения значений и элементов соответственно.

Булма — Модификаторы

Описание

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

В следующей таблице перечислены различные типы модификаторов, которые вы можете использовать для использования Bulma CSS —

S.No.	Модификаторы и описание
1	Модификаторы синтаксиса и отзывчивые помощники Вы можете создавать альтернативные стили для элементов, используя классы модификаторов.
2	Помощники по цвету и типографии Вы можете использовать цветовые помощники для изменения цвета текста или фона.

Вы можете создавать альтернативные стили для элементов, используя классы модификаторов.

Вы можете использовать цветовые помощники для изменения цвета текста или фона.

Булма — Колонны

Описание

Bulma предоставляет адаптивную сеточную систему (создающую макет страницы через ряд строк и столбцов), которая масштабируется до 12 столбцов в контейнере. Столбцы будут переупорядочены по мере увеличения размера устройства или области просмотра.

В следующей таблице перечислены варианты столбцов, которые можно использовать для использования Bulma CSS.

S.No.	Типы столбцов и описание
1	Расположение колонок и размеры Bulma позволяет очень легко построить макет столбца, добавив класс столбцов в контейнер.
2	Отзывчивость колонок и вложенность Bulma предоставляет отзывчивые столбцы на экранах различных типов, таких как мобильные устройства, планшеты и настольные компьютеры.
3	Разрыв столбцов и параметры Столбцы создают одинаковый разрыв между содержимым столбцов.

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

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

Столбцы создают одинаковый разрыв между содержимым столбцов.

Булма — Макет

Описание

Макет Bulma описывает структуру веб-страницы, которая разработана с использованием ее классов CSS.

В следующей таблице перечислены варианты компоновки, которые вы можете использовать для использования Bulma CSS.

S.No.	Типы макетов и описание
1	Контейнер и уровни Bulma использует контейнеры для представления основного макета и переноса содержимого сайта.
2	Медиа Объект Медиа-объект используется для указания стилей абстрактных объектов для создания различных типов компонентов.
3	Баннер героя Bulma предоставляет баннер героя для указания баннера полной ширины на веб-странице.
4	плитки Bulma создает 2-мерное расположение, используя единственный класс элемента.

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

Медиа-объект используется для указания стилей абстрактных объектов для создания различных типов компонентов.

Bulma предоставляет баннер героя для указания баннера полной ширины на веб-странице.

Bulma создает 2-мерное расположение, используя единственный класс элемента.

Булма — Форма

Описание

Элемент формы Bulma определяет пользовательские вводимые данные с помощью элементов ввода (таких как текстовые поля, флажки, переключатели и т. Д.) И отправляет их на сервер для обработки данных.

В следующей таблице перечислены варианты форм, которые можно использовать для использования Bulma CSS.

S.No.	Типы форм и описание
1	Элементы управления формой Bulma содержит различные типы классов управления формами для создания разнообразных форм.
2	вход Bulma предоставляет поле ввода для ввода пользовательских данных вместе с различными типами вариаций.
3	Textarea Bulma textarea используется, когда вам нужно несколько строк ввода.
4	Выбрать Bulma select используется, когда вы хотите разрешить пользователю выбирать из нескольких вариантов.
5	Флажок и Радио Флажки и переключатели можно использовать, когда вы хотите, чтобы пользователи выбирали из списка предустановленных параметров.
6	файл Используется для загрузки файлов из пользовательских данных.

Bulma содержит различные типы классов управления формами для создания разнообразных форм.

Bulma предоставляет поле ввода для ввода пользовательских данных вместе с различными типами вариаций.

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

Bulma select используется, когда вы хотите разрешить пользователю выбирать из нескольких вариантов.

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

Используется для загрузки файлов из пользовательских данных.

Булма — Элементы

Описание

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

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

S.No.	Типы форм и описание
1	кнопка Элемент кнопки обеспечивает взаимодействие пользователя с пользовательскими стилями кнопок.
2	содержание Bulma предоставляет класс контента для непосредственного использования HTML-тегов.
3	Коробка и значок Класс .box определяет контейнер, включающий границу, радиус и отступ.
4	Образ Bulma использует класс .image для отображения изображений на странице.
5	Индикаторы и индикаторы выполнения Bulma определяет предопределенные предупреждающие сообщения для отображения уведомления.
6	Таблица Bulma оборачивает элементы для отображения данных в табличном формате.
7	Тег и заголовок Bulma предоставляет небольшие ярлыки, называемые тегами, для отображения дополнительной информации.

Элемент кнопки обеспечивает взаимодействие пользователя с пользовательскими стилями кнопок.

Bulma предоставляет класс контента для непосредственного использования HTML-тегов.

Класс .box определяет контейнер, включающий границу, радиус и отступ.

Bulma использует класс .image для отображения изображений на странице.

Bulma определяет предопределенные предупреждающие сообщения для отображения уведомления.

Bulma оборачивает элементы для отображения данных в табличном формате.

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

Булма — Компоненты

Описание

Bulma поставляется с предварительно стилизованными компонентами, которые предоставляют выпадающие меню, модальные, нумерацию страниц, панель навигации, вкладки и т. Д., Чтобы облегчить работу пользователя на странице.

В следующей таблице перечислены варианты компонентов, которые вы можете использовать для использования Bulma CSS.

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

Компонент карты отображает содержимое в поле для лучшего внешнего вида.

Bulma предоставляет переключаемые выпадающие меню для отображения связанных ссылок в виде списка.

Bulma предоставляет блоки сообщений для улучшения внешнего вида вашей страницы.

Модальное — это дочернее окно, которое находится над родительским окном.

Навбары служат заголовками навигации для вашего сайта.

Компонент Pagination предоставляет ряд связанных ссылок на нескольких страницах.

Bulma предоставляет меню навигации с вкладками с различными стилями для отображения содержимого.