Статьи

Что нового в Bootstrap 3

После нескольких месяцев кропотливой работы и совместной работы, наконец-то вышла новая версия Bootstrap , фреймворка, который предпочитают многие веб-дизайнеры / разработчики. Он содержит множество захватывающих изменений и новых функций, и был полностью переписан и переработан, чтобы соответствовать последним веб-тенденциям и потребностям пользователей. С более чем 56 000 звезд и более 19 000 вилок на GitHub Bootstrap по-прежнему остается самой популярной средой разработки для фронт-энда. Так что стоит проверить.

Давайте посмотрим, каковы основные изменения в этом выпуске.

  • На первый взгляд вы можете легко заметить, что Bootstrap теперь имеет новый плоский дизайн для всех элементов и компонентов. Здорово! Но, как мы знаем, не все являются поклонниками этой конкретной тенденции, поэтому по этой причине есть и дополнительная тема .
  • В этом выпуске Bootstrap следует подходу , ориентированному на мобильные устройства, и по умолчанию делает ваш сайт отзывчивым . Он переработан и перестроен для запуска с ваших портативных устройств и масштабирования. Отзывчивый CSS больше не является отдельным, и все отзывчивые функции теперь включены в основной файл. Это может быть хорошо для большинства людей, но не всем нужен адаптивный веб-сайт или приложение. Если вам не нужен адаптивный сайт, вы можете «отключить» эту функцию, добавив дополнительный CSS. Вы можете найти, как это сделать, в документации плюс пример, который отключает адаптивные или адаптивные функции.
  • Новая мощная сеточная система. Новая сетка значительно упрощена и объединена в одну единую сеточную систему: отдельная система жидкостной сетки, контейнер и компоновка удаляются, так как они находятся в одной сетке. Теперь это одна гибкая система с подвижной сеткой , ориентированная на мобильные устройства, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или области просмотра. А четыре уровня классов сетки — телефоны, планшеты, настольные компьютеры и большие настольные компьютеры — позволяют с легкостью создавать сложные и адаптивные макеты.
  • Более согласованные базовые и классификационные классы. Кнопки, таблицы, формы, оповещения и многое другое теперь обновляются, чтобы иметь более согласованные классы для упрощения настройки и расширяемости.
  • Новый шрифт Glyphicons icon! Иконки, которые были изображениями в версии 2.x, теперь имеют формат шрифта и включают 40 новых глифов. Всего получается 180 символов в формате шрифта из набора Glyphicon Halflings.
  • Плагины JavaScript переписаны, и все события теперь имеют пространство имен, чтобы предотвратить возможные конфликты.
  • Есть два новых компонента . Первый, list group , предназначен для создания простых и сложных серий компонентов. Идеально подходит для более сложных реализаций, таких как почтовые ящики, или простых, например, список опций. Группы списков являются гибким и мощным компонентом для отображения не только простых списков элементов, но и сложных списков с пользовательским содержимым. Второе, панель , предназначено для легкого размещения содержимого внутри поля с необязательным заголовком. Он может иметь верхний и нижний колонтитулы. Также есть контекстные классы состояния для успеха, предупреждения, опасности и информации.
  • Улучшенные компоненты. Navbar теперь всегда отзывчив и мобильн, и поставляется с некоторыми очень удобными и переставляемыми субкомпонентами. Модалы намного более отзывчивы на мобильных устройствах и прокручивают всю область просмотра вместо максимальной высоты. Также добавлена ​​поддержка адаптивных служебных классов для элементов таблицы.
  • Некоторые компоненты удалены . Это подменю, typeahead и аккордеон. Вместо typeahead вы можете использовать плагин Twittera typeahead.js, а аккордеон можно заменить компонентом панели, который можно расширить для обеспечения тех же функций.
  • Совершенно новый настройщик. Теперь настройщик может сохранить ваши настройки в анонимном Gist для легкого повторного использования, обмена и изменения. Он был переработан, теперь компилируется в браузере вместо Heroku, имеет лучшую поддержку зависимостей и даже имеет встроенную обработку ошибок.
  • Наименьший размер файла . Благодаря изменениям, внесенным в этот выпуск, в минимизированном файле CSS достигается сокращение более чем на 20%.
  • Отказались от поддержки Internet Explorer 7 и Firefox 3.6.
  • Расширенная документация. Добавлено много новой документации, не только для компонентов, но и для поддержки браузера (включая ошибки и ошибки), сторонней поддержки (и обходных путей), часто задаваемых вопросов по лицензии, доступности. Также вы можете найти раздел с рекомендациями по настройке Bootstrap. Плюс как перейти с версии 2.x на 3.0 и как отключить отзывчивость.
  • Обновлены и новые примеры. Добавлены новые примеры, а также один для дополнительной темы Bootstrap.
  • Новая витрина Bootstrap . Если вам интересно, что можно сделать с помощью Bootstrap, вы можете посетить новый веб-сайт Bootstrap Expo . Это веб-галерея, где вы можете найти коллекцию различных сайтов, созданных с помощью Bootstrap.

OK. Новая версия отличная, но как насчет Bootstrap 2.3.2? Нет проблем. Если вы используете эту версию, вы все равно можете перейти к старой документации. Просто зайдите на http://getbootstrap.com/2.3.2/, и вы найдете все, что вам нужно, включая старый настройщик.

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

Следите за подробным руководством по Bootstrap 3, которое скоро появится в SitePoint.