Различия между 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 |