Разработка стилей веб-страниц требует много времени, и самый простой способ сделать это — использовать фреймворки CSS.
Bootstrap— самый известный фреймворк CSS, но сегодня я хотел бы порекомендовать другой фреймворк, который легче и проще в использовании ----Bulma. С ним, даже если вы совсем не знаете CSS, вы легко сможете делать красивые веб-страницы.
я хочу поблагодарить100offerСпонсируйте меня.100offerЭто первоклассный веб-сайт отдела кадров в Китае.В конце этой статьи приведены ихВведение, друзья, которые недавно хотели сменить работу, могут взглянуть.
1. Введение
Самой большой особенностью фреймворка Bulma является его простота и удобство использования. Все стили основаны наclass, просто укажите для элемента HTMLclass, стиль вступает в силу немедленно.
<a class="button is-primary is-large">Login</a>
В приведенном выше коде элементу нужно всего лишь добавить несколькоclass, появляется доминирующий цвет (is-primary) больше (is-large) кнопка.
Bulma — это фреймворк для мобильных устройств, который обеспечивает пять точек останова по ширине и имеет хорошие адаптивные функции, позволяющие вам устанавливать разные стили для разных устройств по своему усмотрению.
- мобильный: меньше или равно 768 пикселей
- планшет: больше или равно 769px
- рабочий стол: больше или равно 1024px
- широкоэкранный: больше или равно 1216 пикселей
- fullhd: больше или равно 1408px
Он предоставляет более двадцати общих компонентов, таких какформа,лист,значок,Панировочные сухари,меню,навигация,Модальное окнои т.п. Простой веб-сайт без написания кода CSS.
2. Основное использование
Установка Bulma — это всего лишь один шаг, поставьтетаблица стилейПросто вставьте его на веб-страницу.
<link rel="stylesheet" href="css/bulma.min.css"/>
Это проще в использовании, просто добавьте элемент HTMLclass.
<a class="button">Button</a>
Приведенный выше код добавляет элемент abuttonclass ссылка будет отображаться как кнопка.
Bulma предоставляет большое количество классов-модификаторов для изменения стиля базового класса. Они все сis-илиhas-начало. Например, чтобы изменить размер кнопки, вы можете использовать следующий класс декоратора.
<a class="button is-small">Small</a> <a class="button">Normal</a> <a class="button is-medium">Medium</a> <a class="button is-large">Large</a>
Bulma по умолчанию предоставляет 6 цветов.
- is-primary
- is-link
- is-info
- is-success
- is-warning
- is-danger
Класс модификатора для состояния кнопки выглядит следующим образом.
- is-hovered
- is-focused
- is-active
- is-loading
Полный список курсов по уходу см.официальная документация.
3. Сеточная система
Система сетки Bulma основана наГибкая компоновка, который очень легко написать. Самое простое использование - использоватьcolumnsЧтобы указать контейнер, используйтеcolumnУточните предмет.
<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</div> </div>
Когда ширина экрана больше 768 пикселей, все элементы располагаются плиткой, равномерно разделяя ширину контейнера; когда ширина меньше или равна 768 пикселей, все элементы располагаются вертикально.
Следующие классы модификаторов используются для указания ширины элемента.
- Три четверти: это три четверти
- Четверть: одна четверть
- Две трети: две трети
- Одна треть: это одна треть
- Половина: половина
- Четыре пятых: это четыре пятых
- Три пятых: это три пятых
- Две пятых: две пятых
- Одна пятая: это одна пятая
Кроме того, есть несколько классов декораторов, которые также очень полезны.
- is-narrow: ширина сетки определяется шириной содержимого
- is-centered: содержимое сетки центрировано
- is-gapless: нет зазора между сетками
Bulma также поддерживает систему с 12 сетками.
- is-2
- is-3
- is-4
- is-5
- is-6
- is-7
- is-8
- is-9
- is-10
- is-11
Если вы хотите указать смещение сетки, вы можете использоватьis-offset-Модифицированный класс.
- is-offset-one-quarter
- is-offset-one-fifth
- is-offset-8
- is-offset-1
4. Адаптивный макет
Как упоминалось ранее, у Bulma есть пять точек останова по ширине, а именно: мобильный (мобильный телефон), планшет (планшет), рабочий стол (рабочий стол), широкоэкранный (широкоэкранный) и fullHD (высокая четкость).
columnsМакет по умолчанию имеет вертикальную укладку на мобильных устройствах, другие ширины располагаются плиткой. Если вы хотите, чтобы телефон оставался мозаичным, вы можете добавитьis-mobileМодифицированный класс.
<div class="columns is-mobile"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>
Если вы хотите, чтобы телефон и планшет располагались вертикально и располагались плитками другой ширины, вы можете использоватьis-desktopМодифицированный класс.
<div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>
Если вы хотите, чтобы сетка занимала разную ширину на разных устройствах, вы можете написать это следующим образом.
<div class=" column is-half-mobile is-one-third-tablet is-one-quarter-desktop "> </div>
В приведенном выше коде сетка имеет половину ширины на мобильных устройствах, одну треть на планшетах, одну четверть на настольных компьютерах и мозаично на широкоэкранных устройствах и экранах с высоким разрешением.
Bulma позволяет указывать разные макеты для разных устройств.
<div class=" column is-flex-mobile is-inline-tablet is-block-desktop "> </div>
В приведенном выше коде мобильный телефон представляет собой гибкий макет, планшет — встроенный макет, а остальные значения ширины — блочный макет.
Ниже представлен класс декоратора, который скрывает элемент.
- is-hidden-mobile: скрыто только на мобильных устройствах
- Is-hidden-Tablet-Only: скрыто только на планшете
- is-hidden-desktop-only : скрыть только на рабочем столе
- is-hidden-touch: скрыт на мобильных телефонах и планшетах, отображается с другой шириной
Посмотреть полный списокофициальная документация.
5. Текст
Bulma предоставляет 7 модификаторов для указания размера текста.
- is-size-1: 3rem
- is-size-2: 2,5 бэр
- is-size-3: 2rem
- is-size-4: 1,5 бэр
- is-size-5: 1,25 бэр
- is-size-6: 1rem
- is-size-7: 0,75 бэр
Для разных устройств можно указать разные размеры текста.
- is-size-1-mobile: телефон размера 1
- is-size-1-tablet: Планшет размера 1
- is-size-1-touch: мобильные телефоны и планшеты имеют размер 1
- is-size-1-desktop: рабочий стол, широкоэкранный формат и высокое разрешение имеют размер 1.
- is-size-1-widescreen: Широкоэкранный и HD имеют размер 1
- Is-size-1-fullHD: HD SIZE-1
Кроме того, есть шрифтыцвет,выровнять,легкий и тяжелыйкласс модификатора.
6. Настройка
Последняя часть представляет собой расширенный контент, объясняющий, как настроить Bulma, то есть изменить стиль по умолчанию. Bulma использует синтаксис Sass (обратите внимание, а не синтаксис Scss), поэтому также необходимо использовать пользовательские стили.SASS.
Сначала клонируйте илискачатьисходный код.
$ git clone https://github.com/jgthms/bulma.git
Затем установите зависимости.
$ cd bulma $ npm install
Далее в корневом каталоге исходников создаем новыйapp.sassфайл, пользовательский код записывается в этот файл. В нем сначала представим Булмубазовая переменная. При необходимости можно изменить.
@import "./sass/utilities/initial-variables" $blue: #72d0eb $pink: #ffb3b3 $family-serif: "Merriweather", "Georgia", serif
В приведенном выше коде по умолчаниюblue,pinkа такжеfamily-serifпеременная изменена.
Некоторые переменные Bulma являются производными от базовых переменных и при необходимости могут быть изменены.
$primary: $pink
В приведенном выше коде основной цвет изменен наpinkПеременная.
Затем загрузите Bulma'sсценарий входа.
@import "./bulma"
Ниже этой строки вы можете написать свои собственные стили, например добавить подчеркивание ко всем заголовкам.
.title { text-decoration: underline; }
Наконец, откройтеpackage.json, найдите строку ниже.
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
положить внутрьbulma.sassизменить наapp.sass.
"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",
После каждой модификации стиля запускайте егоnpm run build, он создаст собственную таблицу стилейcss/bulma.css.
(Конец полного текста)
================================
Для выдающихся талантов нет недостатка в возможностях трудоустройства, для них есть только хорошие возможности. Но у них часто нет энергии, чтобы найти наилучший вариант среди огромного множества возможностей.
100offerПозволяет анонимно представить свое резюме и карьерные ожидания сотням интернет-компаний, экономя ваше время при поиске работы и подаче резюме. Таким образом, заинтересованные в вас компании возьмут на себя инициативу пригласить вас на собеседование.
100offerСреди пользователей есть как бывшие сотрудники БАТ, которые устали от винтовой монотонной работы крупных компаний и переходят в стартапы, так и интернет-люди, проработавшие много лет в небольших компаниях и желающие войти в крупные компании; инженер, который преуспел в жизни и успешно преодолел стену в Сингапуре.
Готовы ли вы воспользоваться лучшими карьерными возможностями по-другому? немедленноподать заявкуБар!
Также 24 октября отмечается День программиста. Как программиста, который зарабатывает на жизнь набором кода, не слишком ли часто на вас навешивают ярлыки, которые вам не принадлежат, — жесткие, милые, занудные и непонятные?
100offerДайте вам шанс сорвать этикетку: обратите внимание на учетную запись WeChat 100offer, отправьте абзац/изображение/видео/голос... Покажите свои божественные навыки, кроме кодирования, и «программист» стоимостью до 1024 юаней. Процентный фонд «Ждем вас, чтобы получить его!
(над)