Различия между Bootstrap 3 и 4

Описание

Bootstrap - это мощный и популярный интерфейсный фреймворк для мобильных устройств, предназначенный для создания адаптивных мобильных сайтов в Интернете с помощью HTML, CSS и JS.

В следующей таблице показаны различия в Bootstrap 3 и Bootstrap 4.

S.No. Составная часть Бутстрап 3 Бутстрап 4
1 Исходные файлы CSS МЕНЬШЕ SCSS
2 Сетка 4-х уровневая сеточная система (xs, sm, md, lg) 5-ти уровневая сеточная система (xs, sm, md, lg, xl)
3 CSS Unit px rem
4 Размер шрифта 14 пикселей 16 пикселей
5 Раскрывающаяся структура Создано с помощью <ul> и <li> Создано с помощью <ul> или <div>
6 Смещение колонн col-md-offset-4 офсет-мд-4
7 Картинки .img-адаптивный класс .img-fluid класс
8 Столы Добавить класс .table-responseive в родительский элемент <div> Добавить класс .table-responseive в элемент <table>
9 Глификоны Поддерживается Не поддерживается
10 Медиа объекты Использует классы для медиа-объектов, таких как .media , .media-body , .media-object , .media-heading , .media-right , .media-left , .media-list и .media-body. Использует только класс .media для медиа-объектов.
11 Темные / обратные столы Не поддерживается Использует класс .table-dark для создания темных / обратных таблиц
12 Флажки и радиокнопки Отображает флажки и радиокнопки с помощью .radio , .radio-инлайн , .checkbox или .checkbox-рядный классы Отображает флажки и радиокнопки с помощью .FORM-чек , .FORM-регистрация этикетки , .FORM-регистрация вход или .FORM-чек-инлайн классы
13 Размер элемента управления формой Увеличение или уменьшение размера элемент управления вводом с помощью .Входного-Lg и .Входного-SM классов Увеличение или уменьшение размера элемента управления вводом с помощью .form-контрольно-Lg и .form-контроль-SM классы
14 Текст справки Отображение текста справки с помощью класса .help-block Отобразите текст справки с помощью класса .form-text
15 Стили Использует классы .btn-default и .btn-info для кнопок Использует классы .btn-secondary , .btn-light и .btn-dark для кнопок и отбрасывает класс .btn-default .
16 Кнопки контура Не поддерживается Стиль кнопка с контурным цветом с помощью .btn-* Контура класса
17 Размеры кнопок .Btn-хз класс доступен Доступно только .btn-см и .btn-Л.Г. классы и уронил .btn-хз класс
18 Заголовки меню Используйте класс .dropdown-header для тега li Используйте класс .dropdown-header для тегов h1 - h2
19 Разделители Используйте класс .divider в элементе li Используйте класс .dropdown-divider в элементе div
20 Фиксированные панели навигации Закрепить Navbar к верхним или нижней части с помощью .navbar фиксированного верхних и .navbar фиксированного нижних классов Закрепить Navbar к верхней или нижней части с помощью .fixed верхом и .fixed-нижние классы
21 год Пейджеры Выравнивание страниц с помощью .previous и .next классов Не поддерживается
22 Jumbotron Полная ширина Он не использует класс .jumbotron-fluid на полноширинных jumbotron. Он использует класс .jumbotron-fluid для полноширинных jumbotron.
23 Карусель Использует класс .item для элементов карусели. Использует класс .carousel-item для элементов карусели.
24 Колодцы, панели и эскизы Поддерживается Не поддерживается. Вместо этого используйте карты
25 Встроенная навигация Она не включает в себя .nav-рядный класс Отобразите навигацию как встроенную с помощью класса .nav-inline