Bootstrap 4 Новые и интересные функции, которые вам понравятся
Следующая основная версия фреймворка Bootstrap не за горами. Альфа-версию уже можно скачать с сайта разработчика Bootstrap, а исходный код также доступен на Github..
Twitter Bootstrap в настоящее время является самым популярным фреймворком. Это позволяет разработчикам Создавайте мобильные и быстро реагирующие сайты, быстро. Bootstrap позволяет разумно использовать стандартное трио внешнего интерфейса HTML5, CSS3 и Javascript. В настоящее время его используют более 6 миллионов сайтов в Интернете..
Хотя Bootstrap 4 все еще находится в стадии разработки (поэтому пока не используйте его на живом сайте), разработчики проделали потрясающую работу. В этом посте мы рассмотрим новую версию, которая включает в себя множество замечательных функций, которые наверняка оптимизировать и улучшить рабочий процесс разработки веб-интерфейса.
1. Нахальство вместо МЕНЬШЕ
До сих пор Bootstrap использовал LESS в качестве своего основного препроцессора CSS, но для нового основного выпуска правила стиля будут реорганизованы в Sass, который гораздо более популярен среди разработчиков веб-интерфейса, имеет огромную базу участников, в целом более простую в использовании и предлагает больше возможности. Благодаря мощному Libsass Sass Complier, написанному на C / C++ Bootstrap 4 будет компилироваться намного быстрее чем раньше.
2. Новый уровень сетки для экранов меньшего размера
Bootstrap имеет сложную адаптивную сеточную систему, которая позволяет разработчикам ориентироваться на устройства с различными областями просмотра. Bootstrap 3 в настоящее время имеет 4 класса сетки для столбцов, .Col-хз-XX для мобильных телефонов, .Col-см-XX для планшетов, .Col-мкр-XX для настольных компьютеров и .Col-LG-XX для больших рабочих столов. Bootstrap 4 улучшит систему сетки с пятой, которая облегчит разработчикам нацеливаться на устройства меньшего размера с шириной области просмотра 480px.
Новый класс сетки взял имя предыдущего наименьшего и выдвинул текущие имена уровней сетки на одну ступеньку вверх. В Bootstrap 4 большие рабочие столы будут использовать .Col-х-XX селектор классов. Важно знать, что, несмотря на новое название, они добавили не новый класс для очень больших экранов, а для очень маленьких..
3. Вводит относительные единицы CSS
В Bootstrap 4 наконец-то прекращена поддержка Internet Explorer 8. Это действительно умный шаг, поскольку он позволяет им избавиться от надоедливых многогранников и преобразовать их в относительные единицы CSS. Вместо пикселей новый основной релиз будет использовать REM и EM которые позволяют реализовать адаптивную типографику на сайтах Bootstrap. Это также повысит читабельность и сделает сайты более доступными для пользователей с ограниченными возможностями..
Если вы хотите попробовать, как относительные единицы работают с новой Bootstrap 4, посмотрите эту демонстрацию на Codepen.
4. Совершенно новые карточки Bootstrap
Команда разработчиков решила объединить некоторые предыдущие элементы пользовательского интерфейса Bootstrap, поэтому они решили представить новый компонент пользовательского интерфейса под названием карты. Карты заменят прежние лунки, эскизы и панели и предоставят пользователям более упорядоченный рабочий процесс. Не волнуйтесь, карточки будут содержать знакомые элементы, такие как заголовки, верхние и нижние колонтитулы, миниатюры и панели.
Поскольку карты будут более гибкими, чем текущие компоненты пользовательского интерфейса, они предоставят больше места для творческой реализации. Есть некоторые пионеры, которые уже проводили эксперименты на Codepen с картами Bootstrap. Вы можете проверить их или создать свои собственные карты.
5. Новый модуль перезагрузки
Новый модуль перезагрузки заменяет предыдущий normalize.css сбросить файл Это не угробило это; напротив, он строит на нем больше правил. Цель этого шага состояла в том, чтобы включить все общие селекторы CSS и сбросить стили в один простой в использовании файл SCSS. Вы можете взглянуть на исходный код здесь, если хотите лучше понять, как работает новый модуль.
Полезно знать, что новые стили сброса разумно устанавливают CSS-свойство box-sizing в граница-бокс на элемент, который поэтому наследуется каждым дочерним элементом на странице. Новое правило стиля делает адаптивные макеты более управляемыми. Если вы хотите почувствовать разницу между типами макетов content-box и border-box, взгляните на эту удобную демонстрацию, предоставляемую CSS-Tricks.com (она не была создана для Bootstrap 4, она просто показывает, как изменяются размеры ящиков) в общем работает).
6. Отказаться от поддержки Flexbox
Bootstrap 4 позволяет использовать возможности CSS3 Flexbox Layout, так как Internet Explorer 9 не поддерживает модуль flexbox, а по умолчанию версия Bootstrap 4. использует свойства float и display CSS для реализации динамического макета.
Flexbox имеет простую в использовании компоновку, которую можно превосходно использовать в адаптивном дизайне, поскольку он обеспечивает гибкий контейнер, который либо расширяется, либо сжимается, чтобы наилучшим образом заполнить доступное пространство. Используйте функцию «только что включенную», если вы не необходимо обеспечить поддержку IE9.
7. Оптимизированная настройка переменных
Все переменные Sass, используемые в новом выпуске Bootstrap, включены в один файл с именем _variables.scss, который значительно упростит процесс разработки. Вам не нужно ничего делать, кроме копирования настроек из этого файла в другой файл под названием _custom.scss изменить значения по умолчанию.
Вы можете настроить много вещей такие как цвета, интервалы, стили ссылок, типографика, таблицы, точки останова и контейнеры сетки, номер столбца и ширина желоба и многие другие.
8. Новые служебные классы для интервалов
Bootstrap 3 уже имеет много практических служебных классов, таких как те, которые изменяют плавающий или clearfix, но Bootstrap 4 добавляет еще больше. новые дистанционные классы позволяют разработчикам быстро менять отступы и поля на своих сайтах.
Синтаксис для новых классов довольно прост, например, добавление .класс м-а-0 связывает правило стиля, которое устанавливает поля в 0 со всех сторон данного элемента (margin-all-0). В то время как поля используют м- префикс, отступы оформлены с п- префикс. В документации по разработке вы можете взглянуть на все новые служебные классы.
9. Всплывающие подсказки и всплывающие подсказки
В Bootstrap 4 всплывающие подсказки и всплывающие окна использует библиотеку supercool Tether, механизм позиционирования, который позволяет сохранять абсолютно позиционированный элемент рядом с другим элементом на той же странице. Это означает всплывающие подсказки и всплывающие окна будет автоматически размещен правильно на сайтах Bootstrap 4.
Не забывайте, что, поскольку Tether является сторонней библиотекой JavaScript, вам необходимо отдельно включить ее в HTML-код перед файлом bootstrap.js..
10. Рефакторинг JavaScript плагинов
Команда разработчиков провела рефакторинг каждого плагина JavaScript для новой версии с использованием EcmaScript 6. Благодаря интеллектуальному использованию последних спецификаций и новейших улучшений они намерены улучшить интерфейс внешнего интерфейса..
Новый Bootstrap 4 также подвергся другим улучшениям JavaScript, таким как проверка типа опции, общие методы демонтажа, а также Поддержка UMD, все это будет работать вместе, чтобы самая популярная среда интерфейса работала более гладко, чем когда-либо прежде.
Прочитайте: 10 легких альтернатив Bootstrap & Foundation
