Bulma - Краткое руководство

Что такое Бульма?

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

История

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

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

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

Особенности

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

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

• Он настраивается и модулируется.

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

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

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

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

Недостатки

• Это новый фреймворк, который не так велик для сообщества.

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

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

Описание

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

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

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

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

Описание

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

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

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

Описание

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

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

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

Описание

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

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

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

Описание

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

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

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

Описание

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

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

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

Описание

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

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

S.No.	Компонент и описание
1	Панировочные сухари Bulma использует компонент хлебных крошек в качестве метода навигации, чтобы указать пользователю в приложении расположение текущей страницы.
2	Карта Компонент карты отображает содержимое в поле для лучшего вида.
3	Падать Bulma предоставляет переключаемые раскрывающиеся меню для отображения связанных ссылок в формате списка.
4	Сообщение Bulma предоставляет блоки сообщений для улучшения внешнего вида вашей страницы.
5	Модальный Модальное окно - это дочернее окно, которое накладывается на свое родительское окно.
6	Навбар Панели навигации служат заголовками навигации для вашего сайта.
7	Пагинация Компонент пагинации предоставляет серию связанных ссылок на нескольких страницах.
8	Вкладки Bulma предоставляет меню навигации с вкладками с различными стилями для отображения содержимого.