Bootstrap 3 против Bootstrap 4 — обзор

Bootstrap является самой надежной интерфейсной платформой с открытым исходным кодом для разработки адаптивных мобильных веб-сайтов. Bootstrap — известный фреймворк. Почему??? Потому что все, что для этого требуется, — это базовые знания HTML и CSS, и мы можем создать привлекательный и функциональный веб-сайт, используя предопределенные классы начальной загрузки, которые заботятся об отзывчивости на разных устройствах.

Bootstrap 3 был выпущен в 2013 году, а последняя стабильная версия Bootstrap 3.3.7 выпущена в июле 2016 года. В октябре 2014 года Twitter объявил, что Bootstrap 4 находится в разработке. Первая альфа-версия Bootstrap 4 была выпущена в августе 2015 года. И вот в августе 2017 года выпущена бета-версия Bootstrap 4.0.0. Вы можете ознакомиться с этим подробным руководством по Bootstrap, если хотите начать обучение с нуля.

В центре внимания этого поста будут ключевые отличия, дополнения и исключения из версии 3 по сравнению с недавно выпущенной бета-версией 4.0.0.

Что отличается в версии 4:

Теперь мы можем начать говорить о новых функциях Bootstrap 4. По мере быстрого развития технологий разрабатываются новые и более умные языки, которые значительно упрощают создание чистых и быстрых веб-сайтов. Так обстоит дело с новейшей версией Bootstrap. Команда говорит, что эта «версия 4 представляет собой серьезную переработку почти всего проекта». Мы суммируем некоторые ключевые изменения этого улучшения.

Глобальные изменения:

• Перешел с Less на Sass для исходных файлов CSS.
• Переключено с px rem в качестве основной единицы CSS Bootstrap, хотя пиксели по-прежнему используются для медиа-запросов и поведения сетки, поскольку размер шрифта не влияет на окна просмотра устройства.
• Глобальный размер шрифта увеличен с 14 до 16 пикселей .
• Добавлен новый уровень сетки для ~480px и ниже.

Сеточная система:

Важным шагом Bootstrap 4 на пути к улучшению является переход на Flexbox. В состав flexbox включена поддержка классов вертикального и горизонтального выравнивания. Bootstrap 4 уделяет большое внимание настройке. Новая система уровней сетки позволяет Bootstrap 4 иметь до 5 уровней сетки (пример 5 уровней: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Можно легко сказать, что Bootstrap 4 предоставляет доступ к улучшенной системе сетки.

• Добавлен новый уровень сетки sm ниже 768 пикселей для более детального контроля. Сейчас есть xs, sm, md, lg и xl. Это также означает, что каждый уровень был повышен на один уровень (поэтому .col-md-6 в версии 3 теперь равен .col-lg-6 в версии 4).
• Изменены контрольные точки медиа-запросов в системе сетки и ширина контейнера, чтобы учитывать новый уровень сетки и гарантировать, что столбцы без остатка делятся на 12 при максимальной ширине.
• Точки останова сетки и ширина контейнера теперь обрабатываются с помощью карт Sass ($grid-breakpoints и $container-max-widths) вместо нескольких отдельных переменных. Они полностью заменяют переменные @screen-* и позволяют полностью настраивать уровни сетки.
• Медиа-запросы также изменились. Вместо того, чтобы каждый раз повторять объявления медиазапросов с одним и тем же значением, теперь есть @include media-breakpoint-up/down/only. Теперь вместо @media (min-width: @screen-sm-min) { … } вы можете написать @include media-breakpoint-up(sm) { … }.

Поддержка браузера:

• Прекращена поддержка IE8 и iOS 6. v4 теперь только IE9+ и iOS 7+. Для сайтов, которым нужен любой из них, используйте v3.

Вспомогательные классы:

В Bootstrap 4 были включены новые служебные классы без ущерба для какой-либо существующей функциональности. К таким важным дополнениям относятся адаптивные классы выравнивания текста, адаптивные плавающие элементы и адаптивное встраивание. Помимо предложения множества ярлыков, они, соответственно, позволяют изменять выравнивание текста, плавание элементов и масштабирование соотношения сторон любого встроенного мультимедиа. (пример: .hidden-md-up скрывает элемент на средних, больших и очень больших экранах просмотра. Теперь вместо .hidden-md-up используйте .d-md-none ).

Картинки:

• Переименован .img-responsive в .img-fluid .
• Переименован .img-rounded rounded в .rounded
• Переименован .img-circle в .rounded-circle

Таблицы:

• Адаптивные таблицы больше не требуют элемента-обертки. Проще говоря, в Bootstrap 3 .table-responsive должен быть добавлен к родительскому <div>. Но в Bootstrap 4 .table-responsive должен быть добавлен к элементу <table> .
• Добавлен новый .table-inverse .
• Добавлены модификаторы заголовка таблицы: .thead-default и. .thead-inverse
• Переименованные контекстные классы имеют .table- -. Следовательно, .active .success , .warning , .danger и .table-info в .table-active , .table-success , .table-warning , .table-danger и .table-info.

Навигация:

В Bootstrap 4 компонент навигации был значительно упрощен. Требуется создать новый список элементов, используя последний базовый класс навигации. Есть несколько недавних дополнений, таких как класс nav-link, класс nav-item и стили панели навигации.

• Переписал компонент с помощью flexbox.
• .navbar-default теперь .navbar-light , хотя .navbar-dark остается прежним. Однако эти классы больше не устанавливают background-color s; вместо этого они по существу влияют только на color .
• .navbar-toggle теперь .navbar-toggler и имеет другие стили и внутреннюю разметку (не более трех <span> s).
• Полностью исключен класс .navbar-form . Это больше не нужно; вместо этого просто используйте .form-inline и при необходимости применяйте маржинальные утилиты.
• Навигационные панели больше не содержат по умолчанию margin-bottom или border-radius .

Сравнительная таблица Bootstrap версии 3 и версии 4

Как мы уже говорили, команда Bootstrap переписала фреймворк. Таким образом, вышеуказанные изменения — это только ключевые изменения, которые мы написали здесь. Чтобы узнать больше, перейдите по ссылке Bootstrap 4.

Должны ли мы перейти на Bootstrap 4 или остаться на Bootstrap 3

Мы говорили о функциях, которые предлагает Bootstrap 4. Мы видим, что было проделано много работы по оптимизации и очистке ненужных элементов и классов во всей структуре. Bootstrap 4 обещает быть намного быстрее и оптимизирован для еще большей гибкости и простоты при создании отличного мобильного веб-сайта.

Bootstrap 4, перенесен на flexbox. Это можно считать одним из самых больших и значимых достижений. Это обеспечит следующие преимущества:

• Сетка на основе Flexbox
• Новый уровень сетки XLl
• Последняя сетка автоматического макета
• Параметры настройки панели навигации
• Новые утилиты Spacing
• Конфигурация Sans Glyphicons (зона без раздувания)
• Адаптивный размер
• Отзывчивые поплавки
• Автоматические поля
• Вертикальное центрирование

Вывод

Bootstrap всегда облегчал жизнь разработчикам и благодаря обновлению версии, теперь в bootstrap есть много новых функций и опций, которые еще больше упрощают работу разработчиков, и именно поэтому люди переходят с Bootstrap 3 на Bootstrap. 4, так как он более удобен и доступен, чем его предыдущий аналог.