Diferencias entre Bootstrap 3 y 4
Descripción
Bootstrap es un marco de interfaz de usuario móvil potente y popular para crear sitios web móviles con capacidad de respuesta en la web mediante el uso de marcos HTML, CSS y JS.
La siguiente tabla muestra las diferencias en Bootstrap 3 y Bootstrap 4 -
| S.No. | Componente | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1 | Archivos fuente CSS | MENOS | SCSS |
| 2 | Sistema de red | Sistema de cuadrícula de 4 niveles (xs, sm, md, lg) | Sistema de cuadrícula de 5 niveles (xs, sm, md, lg, xl) |
| 3 | Unidad CSS | px | movimiento rápido del ojo |
| 4 | Tamaño de fuente | 14px | 16px |
| 5 | Estructura desplegable | Creado con <ul> y <li> | Creado con <ul> o <div> |
| 6 | Desplazamiento de columnas | col-md-offset-4 | offset-md-4 |
| 7 | Imagenes | .img-responsive class | clase .img-fluid |
| 8 | Mesas | Agregue la clase .table-responsive al elemento <div> principal | Agregue la clase .table-responsive al elemento <table> |
| 9 | Glifos | Soportado | No soportado |
| 10 | Objetos multimedia | Utiliza clases para objetos de medios, como .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list y .media-body | Utiliza solo la clase .media para objetos multimedia. |
| 11 | Tablas oscuras / inversas | No soportado | Usa la clase .table-dark para hacer tablas oscuras / inversas |
| 12 | Casillas de verificación y botones de opción | Muestra las casillas de verificación y botones de radio mediante .Radio , .Radio-inline , .checkbox o .checkbox-inline clases | Muestra las casillas de verificación y botones de radio mediante el uso de .Form-check , .Form-check-etiqueta , .Form-check-entrada , o .Form-check-inline clases |
| 13 | Tamaño de control de formulario | Aumentar o disminuir el tamaño de de un control de entrada mediante el uso de .input-LG y .input-SM clases | Aumentar o disminuir el tamaño de un control de entrada mediante el uso de .Form-control-lg y .Form-control-sm clases |
| 14 | texto de ayuda | Muestra el texto de ayuda usando la clase .help-block | Muestra el texto de ayuda usando la clase .form-text |
| 15 | Estilos | Utiliza las clases .btn-default y .btn-info en los botones | Utiliza las clases .btn-secundaria , .btn-light y .btn-dark en los botones y eliminó la clase .btn-default . |
| dieciséis | Botones de contorno | No soportado | Diseñe los botones con el color del contorno usando .btn-outline- * class |
| 17 | Tamaños de botones | La clase .btn-xs está disponible | Disponible solo en las clases .btn-sm y .btn-lg y se eliminó la clase .btn-xs |
| 18 | Encabezados de menú | Use la clase .dropdown-header para la etiqueta li | Utilice la clase .dropdown-header para las etiquetas h1 - h2 |
| 19 | Divisores | Utilice la clase .divider en el elemento li | Use la clase .dropdown-divider en el elemento div |
| 20 | Barras de navegación fijas | Fijar la barra de navegación a la parte superior o inferior mediante el uso de .navbar-fija-top y de fondo .navbar-fijo clases | Fijar la barra de navegación a la parte superior o inferior mediante el uso de .fixed-top y .fixed de fondo clases |
| 21 | Buscapersonas | Alinear las páginas usando las clases .previous y .next | No soportado |
| 22 | Jumbotron de ancho completo | No usa la clase .jumbotron-fluid en jumbotrons de ancho completo | Utiliza la clase .jumbotron-fluid para jumbotrons de ancho completo |
| 23 | Elemento de carrusel | Utiliza la clase .item para elementos de carrusel. | Utiliza la clase .carousel-item para elementos de carrusel. |
| 24 | Pozos, paneles y miniaturas | Soportado | No soportado. Utilice tarjetas en su lugar |
| 25 | Navs en línea | No incluye la clase .nav-inline | Muestre las navegaciones como en línea usando la clase .nav-inline |