Bootstrap 4: новые и интересные функции, которые вам понравятся

Следующая основная версия фреймворка Bootstrap не за горами. альфа версия уже можно скачать с Bootstrap разработка сайтаи исходный код также доступен на Github,

Twitter Bootstrap в настоящее время является самым популярным фреймворком. Это позволяет разработчикам быстро создавать мобильные и адаптивные веб-сайты. Bootstrap позволяет разумно использовать стандартное трио внешнего интерфейса HTML5, CSS3 и Javascript. В настоящее время он используется более 6 миллионов сайты в сети.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Хотя Bootstrap 4 все еще находится в стадии разработки (поэтому пока не используйте его на живом сайте), разработчики проделали невероятную работу. В этой статье мы рассмотрим новую версию, которая включает в себя множество замечательных функций, которые, несомненно, упростят и улучшат рабочий процесс разработки внешнего интерфейса.
1. Нахальство вместо МЕНЬШЕ
До сих пор Bootstrap использовал LESS в качестве своего основного препроцессора CSS, но в новом основном выпуске правила стиля будут реорганизованы в Sass, который гораздо более популярен среди разработчиков веб-интерфейса, имеет огромную базу участников, как правило, проще в использовании и предлагает больше возможности. Благодаря мощному Libsass Sass Complier написанный на C / C ++ Bootstrap 4 будет компилироваться намного быстрее, чем раньше.
Нахальство против меньшегоИЗОБРАЖЕНИЕ: Google Trends2. Новый уровень сетки для экранов меньшего размера
Bootstrap имеет сложную адаптивную сеточную систему, которая позволяет разработчикам ориентироваться на устройства с различными областями просмотра. Bootstrap 3 в настоящее время имеет 4 класса сетки для столбцов.Col-хз-XX для мобильных телефонов.Col-см-XX для планшетов.Col-мкр-XX для настольных компьютеров, и.Col-LG-XX для больших рабочих столов. Bootstrap 4 улучшит систему сетки с пятой, которая поможет разработчикам ориентироваться на меньшие устройства с шириной области просмотра 480px.

Новый класс сетки взял имя предыдущего наименьшего и выдвинул текущие имена уровней сетки на одну ступеньку вверх. В Bootstrap 4 большие рабочие столы будут использовать .col-х-XX селектор классов. Важно знать, что, несмотря на новое имя, они добавили не новый класс для очень больших экранов, а для очень маленьких.
Грид-система ИЗОБРАЖЕНИЕ: W3C Schools3. Представляет относительные единицы CSS
В Bootstrap 4 наконец-то прекращается поддержка Internet Explorer 8. Это действительно умный шаг, поскольку он позволяет им избавиться от надоедливых многопоточностей и преобразовать их в относительные единицы CSS. Вместо пикселей в новом основном выпуске будут использоваться REM и EM, которые позволяют реализовать адаптивную типографику на сайтах Bootstrap. Это также повысит удобочитаемость и сделает сайты более доступными для пользователей с ограниченными возможностями.

Если вы хотите попробовать, как относительные единицы работают с новой Bootstrap 4, посмотрите это демо на Codepen.
Относительные единицы ИЗОБРАЖЕНИЕ: барссала на CodePen4. Совершенно новые карточки Bootstrap
Команда разработчиков решила объединить некоторые предыдущие элементы пользовательского интерфейса Bootstrap, поэтому они решили представить новый компонент пользовательского интерфейса под названием Cards. Карты заменят прежние лунки, эскизы и панели и предоставят пользователям более упорядоченный рабочий процесс. Не волнуйтесь, карточки будут содержать знакомые элементы, такие как заголовки, верхние и нижние колонтитулы, миниатюры и панели.

Поскольку карты будут более гибкими, чем текущие компоненты пользовательского интерфейса, они предоставят больше места для творческой реализации. Есть некоторые пионеры, которые уже провели эксперименты на Codepen с картами начальной загрузки. Вы можете проверить их или создать свои собственные карты.
Карты начальной загрузки ИЗОБРАЖЕНИЕ: Томас Ингалл в CodePen5. Новый модуль перезагрузки
Новый модуль перезагрузки заменяет предыдущий файл сброса normalize.css. Это не бросает это; напротив, он строит на нем больше правил. Цель этого шага состояла в том, чтобы включить все общие селекторы CSS и сбросить стили в одном простом в использовании файле SCSS. Вы можете взглянуть на исходный код Вот если вы хотите лучше понять, как работает новый модуль.

Приятно знать, что новые стили сброса разумно устанавливают CSS-свойство box-sizing в border-box на элемент, который поэтому наследуется каждым дочерним элементом на странице. Новое правило стиля делает адаптивные макеты более управляемыми. Если вы хотите почувствовать разницу между типами макетов контента и рамок, взгляните на это удобная демонстрация предоставлено CSS-Tricks.com (он не был создан для Bootstrap 4, он просто показывает, как обычно работает изменение размера ящика).
Как работает определение размера коробки ИЗОБРАЖЕНИЕ: Github.IO от tsmith5126. Отказаться от поддержки Flexbox
Bootstrap 4 позволяет использовать возможности CSS3 Flexbox Layoutоднако – поскольку Internet Explorer 9 не поддерживает модуль flexbox – версия Bootstrap 4 по умолчанию, скорее, использует свойства float и display для реализации гибкого макета.

Flexbox имеет простую в использовании компоновку, которую можно превосходно использовать в адаптивном дизайне, поскольку он обеспечивает гибкий контейнер, который либо расширяется, либо сжимается, чтобы наилучшим образом заполнить доступное пространство. Используйте функцию «только что включенную», если вы не необходимо обеспечить поддержку IE9.
Flexbox 7. Оптимизированная настройка переменных
Все переменные Sass, используемые в новой версии Bootstrap, включены в один файл с именем _variables.scss, что значительно упростит процесс разработки. Вам не нужно ничего делать, кроме копирования настроек из этого файла в другой файл с именем _custom.scss, чтобы изменить значения по умолчанию.

Вы можете настроить многие вещи, такие как цвета, интервалы, стили ссылок, типографика, таблицы, точки останова и контейнеры сетки, номер столбца и ширина желоба, и многие другие.
Настроить переменныеИЗОБРАЖЕНИЕ: сайт разработки Bootstrap 48. Новые служебные классы для интервалов
Bootstrap 3 уже имеет множество практических служебных классов, таких как те, которые изменяют плавающий или clearfix, но Bootstrap 4 добавляет еще больше. Новые классы интервалов позволяют разработчикам быстро менять отступы и поля на своих сайтах.

Синтаксис для новых классов довольно прост, например, добавление.класс м-а-0 связывает правило стиля, которое устанавливает поля в 0 со всех сторон данного элемента (margin-all-0). В то время как поля используют м- префикс, отступы оформлены с п- приставка. в разработка документов Вы можете взглянуть на все новые служебные классы.
Классы служебных программ Spacing 9. Всплывающие подсказки и всплывающие подсказки
В Bootstrap 4 всплывающих подсказок и всплывающих окон используется суперохлаждение Библиотека Tetherмеханизм позиционирования, позволяющий хранить абсолютно позиционированный элемент рядом с другим элементом на той же странице. Это означает, что всплывающие подсказки и всплывающие окна будут автоматически размещаться на веб-сайтах Bootstrap 4.

Не забывайте, что, поскольку Tether является сторонней библиотекой JavaScript, вам необходимо отдельно включить ее в HTML-код перед файлом bootstrap.js.
JavaScript-библиотека Tether ИЗОБРАЖЕНИЕ: Github Hubspot10. Рефакторинг JavaScript плагинов
Команда разработчиков реорганизовала каждый плагин JavaScript для новой версии, используя EcmaScript 6, С умным использованием последних спецификаций и новейших улучшений они намерены улучшить интерфейс внешнего интерфейса.

Новый Bootstrap 4 также претерпел другие усовершенствования JavaScript, такие как проверка типов опций, универсальные методы разрыва и поддержка UMD, которые будут работать вместе, чтобы сделать наиболее популярную инфраструктуру внешнего интерфейса более гладкой, чем когда-либо прежде.
Улучшения Прочитайте: 10 легких альтернатив Bootstrap & Foundation

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *