- Оглавление
- Bootstrap Reboot
- _variables.scss
- _reset.scss
- Bootstrap Grid
- Bootstrap Utilities
- Spacing Utilities
- Flexblox Утилиты
- Резюме
Bootstrap - одна из самых популярных платформ для создания адаптивных и мобильных веб-сайтов. Он работает на веб-сайтах с августа 2011 года. 18 января 2018 года была выпущена первая стабильная версия Bootstrap v4. Он ввел много функций; и архитектурные изменения:
- Модуль Flexbox CSS теперь используется по умолчанию в Bootstrap. Он используется для большинства компонентов, например, для системы сетки.
- Кодовая база была перенесена из Less в Sass.
- Был представлен новый сброс CSS, перезагрузка Bootstrap.
С другой стороны, Angular Material - это набор высококачественных компонентов пользовательского интерфейса, который реализует Google Material Design. Он построен с и для Angular. Библиотека отличная, и со временем становится все лучше. Но, по моему скромному мнению, в нем отсутствуют некоторые важные функции, такие как приличная система компоновки (сетки), сброс CSS и некоторые утилиты CSS, которые облегчают нашу жизнь как разработчиков.
Пытаясь заполнить эти пробелы, я задал себе вопрос: «Почему бы не использовать некоторые из лучших частей Bootstrap 4 в моих проектах Angular Material Project?» И я сделал.
В этой статье мы увидим, какие части Bootstrap 4 стоит добавить в наши проекты Angular Material и как. Без лишних слов, давайте начнем!
Оглавление
- Bootstrap Reboot
- Bootstrap Grid
- Bootstrap Утилиты
Bootstrap Reboot
В Bootstrap 3 Normalize.css использовался для сброса CSS.
Normalize.css заставляет браузеры отображать все элементы более последовательно и в соответствии с современными стандартами. Он точно нацелен только на стили, которые нужно нормализовать.
С v4 команда Bootstrap разветвила Normalize.css и сделала его лучше: это называется Bootstrap Reboot .
Reboot, набор CSS-изменений для отдельных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, согласованную и простую основу для построения.
Я не буду вдаваться в подробности того, что входит в Bootstrap Reset. Но вот некоторые из улучшений, которые он принес:
- использование box-sizing: border-box для всех элементов,
- использование rems вместо ems для некоторых настроек браузера по умолчанию,
- удаление элементов margin-top для предотвращения рушится поля ,
Вы можете найти больше информации о перезагрузке на Bootstrap документация ,
Потому что Bootsrap 4 является модульным и построен с использованием Sass; мы можем очень легко добавить Reboot в наш проект Angular Material без добавления всей библиотеки Bootstrap.
Но сначала давайте добавим Bootstrap к нашим зависимостям.
npm установить загрузчик --save
Затем мы импортируем файл Reboot Sass в нашу глобальную таблицу стилей (src / styles.scss, если вы используете Angular CLI. И я надеюсь, что вы это сделаете).
// Импортирует функции, переменные и миксины, которые нужны другим файлам Bootstrap @import "~ bootstrap / scss / functions"; @import "~ bootstrap / scss / variable"; @import "~ bootstrap / scss / mixins"; // Импорт Roboot @import "~ bootstrap / scss / reboot";
Слева наш пример перед добавлением перезагрузки; и справа, после добавления перезагрузки. Как вы можете видеть, Reboot удалил поля для элемента <html>, и это здорово ... К сожалению, он ввел некоторые стили, которые нам не нужны:
- контур, когда фокус установлен на кнопках,
- синего цвета и подчеркнутых кнопочных ссылок при наведении курсора,
- синие ссылки (синий - основной цвет в Bootstrap)
Чтобы устранить эти проблемы, мы создаем две части Sass, которые мы импортируем в styles.scss:
- src / _variables.scss: мы импортируем его перед любым импортом Bootstrap.
- src / _reset.scss: мы импортируем его после всех импортов Bootsrap
... @import "variable"; @import "~ bootstrap / scss / functions"; @import "~ bootstrap / scss / variable"; @import "~ bootstrap / scss / mixins"; @import "~ bootstrap / scss / reboot"; @import "сброс"; ...
_variables.scss
Частично _variables.scss Sass позволяет нам настроить Bootstrap - точнее, те части Bootstrap, которые мы будем использовать. Вот почему мы добавили его перед импортом Bootstrap. Это заставляет Bootstrap использовать наши значения вместо значений по умолчанию. Эти значения по умолчанию определены в ~ bootstrap / scss / variable. Например, $ link-color: theme-color ("primary")! Default ;.
Вот содержимое части _variables.scss:
$ link-color: # 3f51b5; $ link-hover-color: currentColor; $ link-hover-ornament: нет; $ label-margin-bottom: 0;
Мы устанавливаем цвет наших ссылок на наш основной цвет (# 3f51b5) (мы могли бы использовать наш вторичный цвет, если бы мы хотели) согласно Спецификация дизайна материала , Мы также устанавливаем текстовое оформление: нет; для зависших ссылок.
Мы устанавливаем $ label-margin-bottom в 0, чтобы удалить margin-bottom из HTML-элемента <label>.
_reset.scss
Частично _reset.scss Sass позволяет нам переопределить некоторые стили Bootstrap, которые нам не нужны. Вот почему мы добавили его после импорта Bootstrap.
* {&: активный,: focus {контур: нет! важный; // 1}} a: not (.mat-button): not (.mat-поднял-button): not (.mat-fab): not (.mat-mini-fab): not ([mat-list- item]) {color: # 3f51b5; // 2}
- Удалите синий контур на ссылках и кнопки, когда они активны; или фокус на них.
- Используйте наш основной цвет для всех ссылок, которые не являются элементами углового материала. У них есть один из следующих классов: .mat-button, mat-поднял-button, mat-fab-button, mat-list-item и т. Д.
Bootstrap Grid
Система сетки Bootstrap использует ряд контейнеров, строк и столбцов для размещения и выравнивания содержимого. Он построен с Flexbox и полностью отзывчивый.
Добавить систему сетки Bootstrap в наше приложение Angular Material просто, как добавить импорт Sass в наш файл styles.scss.
.... @import "variable"; @import "~ bootstrap / scss / functions"; @import "~ bootstrap / scss / variable"; @import "~ bootstrap / scss / mixins"; @import "~ bootstrap / scss / reboot"; @import "~ bootstrap / scss / grid"; // добавляем сетку @import "reset"; ...
Теперь мы можем использовать сетку в наших компонентах:
<div class = "container"> <div class = "row"> <div class = "col"> Один из трех столбцов </ div> <div class = "col"> Один из трех столбцов </ div> <div class = "col"> Один из трех столбцов </ div> </ div> </ div>
Сетка Boostrap полностью отзывчива. Например, если мы хотим, чтобы столбец занимал 4 единицы на большом устройстве, 8 единиц на среднем и 12 единиц или небольших устройств, мы добавляем в него следующие три класса:
- .col-LG-4
- .col-мкр-8
- .col-см-12
Это также полностью настраиваемый. Мы можем изменить:
количество ярусов сетки ($ grid-breakpoints),
количество столбцов ($ grid-columns, по умолчанию 12),
ширина желоба столбца ($ grid-gutter-width, по умолчанию 30px).
Например, чтобы использовать точки останова Material Design, вы можете добавить этот кусок кода в _variables.scss:
$ grid-breakpoints: (xs: 0, // портрет трубки (маленький, средний, большой) | ландшафт телефона (маленький) см: 600px, // ландшафт трубки (средний, большой) | портрет планшета (маленький, большой) md: 960px, // планшетный пейзаж (маленький, большой) lg: 1280px, // ноутбуки и десктопы xl: 1600px // большие десктопы); $ container-max-widths: (см: 600px, md: 960px, lg: 1280px, xl: 1600px);
Если вы хотите узнать больше о сеточной системе Bootstrap, проверьте документация ,
Bootstrap Utilities
Служебный класс, как правило, представляет собой единую неизменную пару свойство-значение, выраженную в виде класса (например, .d-block представляет display: block;). Их основная привлекательность - скорость использования при написании HTML и ограничение количества пользовательских CSS, которые вы должны написать.
Bootstrap включает в себя сотни классов CSS для работы с интервалами, позиционированием, изменением размеров, выравниванием, весом шрифта, гибкими контейнерами, гибкими элементами и т. Д. документация действительно опрятный, и охватывает все замечательные вещи, которые вы можете сделать. В этой статье я просто покажу вам суть этого.
Spacing Utilities
Чтобы назначить поле / отступ для элемента, мы добавляем класс в следующем формате:
{свойство} {стороны} - {размер} для xs и {свойство} {стороны} - {точка останова} - {размер} для sm, md, lg и xl.
свойство является одним из:
- m - для классов, которые устанавливают запас,
- p - для классов, которые устанавливают отступы.
стороны является одним из:
- т - верх,
- б - дно,
- л - слева,
- г - верно,
- х - влево и вправо,
- у - верх и низ,
- пусто - сверху, справа, снизу и слева.
Размер один из:
- 0 - $ spacer * 0
- 1 - $ spacer * .25
- 2 - $ spacer * .5
- 3 - $ spacer * 1
- 4 - $ spacer * 1,5
- 5 - $ spacer * 3
- авто - авто
Значение по умолчанию $ spacer равно 1rem, т.е. 16 пикселей в большинстве настроек браузера по умолчанию. Как вы уже догадались, это можно настроить в соответствии с вашими потребностями, установив нужное значение в _variables.scss.
Flexblox Утилиты
Bootstrap Flexbox - это набор классов, которые помогают нам изменять свойства flex-контейнеров и flex-элементов.
- display: сделать элемент гибким контейнером
- .d-flex для установки отображения: flex ;.
- .d-inline-flex для установки отображения: inline-flex ;.
- flex-direction: указать направление главной оси
- .flex-row для установки flex-direction: row ;.
- .flex-row-reverse для установки направления flex: обратный ряд ;.
- .flex-столбец для установки flex-direction: column ;.
- .flex-column-reverse для установки направления flex-: column-reverse ;.
- flex-wrap: указать, будет ли flex-элемент переноситься на новую строку или нет.
- flex-wrap для установки flex-wrap: wrap ;.
- flex-nowrap для установки flex-wrap: nowrap ;.
- justify-content: контролировать, как элементы располагаются вдоль главной оси .
- .justify-content-start для установки justify-content: flex-start ;.
- .justify-content-end для установки justify-content: flex-end ;.
- .justify-content-center для установки justify-content: center ;.
- .justify-content-space -ween для установки justify-content: space -ween ;.
- .justify-content-space-around для установки justify-content: space-around ;.
- align-items: чтобы контролировать расположение элементов вдоль поперечной оси .
- .align-items-start для установки align-items: flex-start ;.
- .align-items-end для установки align-items: flex-end ;.
- .align-items-center для установки align-items: center ;.
- .align-items-baseline для установки align-items: baseline ;.
- .align-items-stretch для установки align-items: stretch ;.
- и т.п.
Все эти классы имеют свои адаптивные варианты. Например:
- .d-см-флекс.
- .justify-контент LG-центр.
- .align-элементы-LG-базовый уровень.
- и т.п.
Чтобы использовать эти утилиты Bootstrap, мы должны добавить соответствующий импорт в ваш основной файл Sass.
.... @import "variable"; @import "~ bootstrap / scss / functions"; @import "~ bootstrap / scss / variable"; @import "~ bootstrap / scss / mixins"; @import "~ bootstrap / scss / reboot"; @import "~ bootstrap / scss / grid"; @import "~ bootstrap / scss / utilities"; // добавить утилиты css @import "reset"; ...
Резюме
Angular Material - отличная библиотека компонентов пользовательского интерфейса. Но в нем отсутствуют некоторые важные функции, такие как система макетов, сброс CSS и некоторые утилиты CSS. К счастью, мы можем очень легко «украсть» эти функции из Bootstrap 4; модульная и хорошо спроектированная библиотека переднего плана. Это может быть очень хорошей отправной точкой для создания высококачественных приложений Angular.
Если вам понравилась эта статья, следуйте @ahasall в Твиттере для большего количества содержания как это.
Пытаясь заполнить эти пробелы, я задал себе вопрос: «Почему бы не использовать некоторые из лучших частей Bootstrap 4 в моих проектах Angular Material Project?
