Изучите Bulma CSS за 5 минут

1656643931 izuchite bulma css za 5 minut

Bulma – это простой, элегантный и современный фреймворк CSS, который многие разработчики предпочитают Bootstrap. Лично я считаю, что Bulma по умолчанию имеет лучший дизайн, а также кажется более легким.

В этом учебнике я дам вам очень короткое поступление в библиотеку.

Мы также создали бесплатный курс Bulma. Щелкните здесь, чтобы проверить!

Вы можете нажать на изображение, чтобы перейти к курсу
Ты можешь здесь чтобы попасть на курс.

Настройка

Настроить Bulma чрезвычайно просто, и вы можете сделать это несколькими разными способами, независимо от того, предпочитаете NPM, загружаете его непосредственно из документов или используете CDN. Мы просто создадим ссылку на CDN из нашего файла HTML, вот так:

<link rel="stylesheet" href="

Это даст нам доступ к классам Bulma. И это собственно и все, что Bulma – сборник классов.

Модификаторы

Первое, что вам следует узнать о Bulma, это классы-модификаторы. Они позволяют установить альтернативные стили почти всем элементам Bulma. Все они начинаются с is-* или has-*а затем замените * с нужным стилем.

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

Кнопки

Чтобы превратить обычную кнопку в кнопку Bulma, мы просто предоставим ей класс. button.

<button class="button">Click here</button>

Что приводит к такому стилю:

1*03TOy6dVBDCPvrlardUBHw

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

<button class="button **is-large is-success is-rounded**">Click here</button>

Результатом является приятная на вид кнопка:

1*3p5bTMdQbPYx_DeNQo7sgA

Вы также можете использовать модификаторы для управления состоянием кнопок. Давайте, например, добавим класс is-focusedкоторый добавляет рамку вокруг него:

1*mk04rubImZHTpMNPhsn-TQ

Наконец, давайте также используем один из has-* модификаторы. Они обычно контролируют находящееся внутри элемента. В нашем случае текст. Добавим has-text-weight-bold.

Вот результат:

1*H30F0Q92eL_IGipfEE3lWg

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

Колонки

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

<div class="columns">  
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

Сначала мы создаем контейнер <div> с классом columnsа затем мы даем каждому из детей класс column. Это приводит к следующему:

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

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

Обратите внимание, что вы можете добавить сколько угодно столбцов. Flexbox заботится о равномерном распределении пространства между ними.

Чтобы придать столбцам цвета, мы можем заменить текст у них на a <p> и дайте ему тег notification класс и ан is-* модификатор. Вот как например:

Первая колонка

Давайте сделаем это с помощью is-info, is-success, is-warning и is-danger модификаторов, что приводит к следующему:

1*7c9Ygeq5NbrBYQfnVUFDwA

The notification Класс действительно предназначен для уведомления пользователей о чем-то, поскольку он позволяет вам заполнить фон цветом с помощью is-* модификаторы. Здесь он хорошо работает для разделения столбцов.

Мы также можем легко контролировать ширину столбца. Добавим is-half модификатор для зеленого столбца.

<div class="column is-half">    

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

1*2oogxdeNyRZ7Y9oxLXNqBg

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

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Герой

Наконец, давайте также научимся создавать героя в Bulma. Мы будем использовать семантику <section>и придайте ему класс hero и is-info чтобы придать ему немного цвета. Нам также нужно добавить a <div> ребенок с классом hero-body.

<section class="hero is-success">  
1*mRUKo5nMrlRmNRlFhFxXqA

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

<div class="container">
  <h1 class="title">Primary title</h1>
  <h2 class="subtitle">Primary subtitle</h2>
</div>
1*zgiaCn1QmbMn-r4d-p9exA

Теперь это начинает выглядеть хорошо! Если мы хотим, чтобы он был больше, мы можем просто добавить is-medium на <section> сам тэг.

<section class="hero is-info is-medium">  ...</section>
1*7jJFSeUFbzSuavVUpVV7Zw

И все это!

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

Обязательно посмотрите бесплатный курс Bulma на Scrimba, если хотите узнать больше!

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован.