En este artículo, veremos las diferencias en Bootstrap v3 y v4 y su implementación. Bootstrap es un marco front-end gratuito de código abierto para crear sitios web y aplicaciones web receptivos. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Proporciona clases de CSS predefinidas e identificación a los usuarios, lo que les ayuda en el proceso de desarrollo que ahorra tiempo y hace que el código sea limpio y mejora la legibilidad. La versión 3 de Bootstrap se lanzó en 2013, mientras que en agosto de 2017 se empezó a utilizar la versión 4 de Bootstrap. Puede obtener el enlace CDN de Bootstrap copiando el enlace CDN del sitio web oficial y en su documento HTML. También podemos descargar el programa de arranque del sitio y luego colocarlo en el directorio de trabajo. por favor refiérase aArtículo de tutoriales de Bootstrap para más detalles.
Diferentes versiones de Bootstrap:
- Versión 2.x: Admite diseño receptivo.
- Versión 3.x: Admite el diseño móvil primero.
- Versión 4.x: presenta la compatibilidad con SASS y Flexbox.
- Versión 5.x: Última actualización.
Comprenderemos tanto bootstrap v3 como v4 a través de los ejemplos.
Bootstrap v3: presenta un diseño móvil primero para desarrolladores al presentar el concepto del sistema de cuadrícula Bootstrap que se escala hasta 12 columnas para aumentar la ventana gráfica del dispositivo. Nos permite crear diseños complejos y adaptables con facilidad haciendo uso de los 4 niveles de clases de cuadrícula: la funcionalidad de control basada en texto HTML ya existente junto con agrega el nuevo control de texto para mejorar la forma de representar el texto. El archivo fuente CSS para bootstrap v3 es LESS .
Enlaces CDN Bootstrap v3
<!– Solo CSS –>
<!– Último CSS compilado y minificado –><enlace rel=”hoja de estilo”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”
integridad=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anónimo” ><!– Tema opcional –>
<enlace rel=”hoja de estilo”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”
integridad=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/ Sp” crossorigin=”anónimo”><!– Último JavaScript compilado y minificado –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”
integridad=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anónimo ”></guion>
Ejemplo 1: en este ejemplo, hemos utilizado el enlace CDN de Bootstrap v3
HTML
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <!-- Optional theme --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="container"> <h2>Welcome To GFG</h2> <div class="row"> <div class="col-sm">Data Structure</div> <div class="col-sm">Web Development</div> <div class="col-sm">Placement course</div> </div> </div> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"> </script> </body> </html>
Producción:
Bootstrap versión 4.0: incluye funciones de Bootstrap 3 y agregó algunas funciones nuevas, como archivos SASS y Flexbox. SASS es el archivo fuente CSS para bootstrap v4. Bootstrap v4 es compatible con los principales navegadores junto con la mejora en el diseño de la cuadrícula y los soportes de formularios. También introdujo el concepto del componente de tarjeta que proporciona un contenedor de contenido flexible y extensible con múltiples opciones.
Enlaces CDN Bootstrap v4
<!– Último CSS compilado y minificado –>
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”
integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” origen cruzado=”anónimo” ><!– Último JavaScript compilado y minificado –>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”
integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anónimo”>
</script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”
integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anónimo ”>
</script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”
integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anónimo”>
</script>
Ejemplo 2: En este ejemplo, hemos utilizado el enlace CDN de Bootstrap v4 para crear la tarjeta Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> </head> <body> <div class="container"> <div class="card"> <div class="card-header">Bootstrap Card</div> <div class="card-body"> <h5 class="card-title">GeekforGeeks</h5> <p class="card-text"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> <a href="#" class="btn btn-primary"> Know More </a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html>
Producción:
Diferencia entre Bootstrap v3 y Bootstrap v4:
Componente |
Bootstrap v3 |
Bootstrap v4 |
|---|---|---|
|
Archivo fuente CSS |
MENOS |
HABLAR CON DESCARO A |
|
Unidad de CSS |
píxeles |
movimiento rápido del ojo |
|
Tamaño de fuente |
14 píxeles |
16 píxeles |
|
Sistema de red |
Se basa en un sistema de cuadrícula de 4 niveles (xs, sm, md, lg) |
Se basa en un sistema de cuadrícula de 5 niveles (xs, sm, md, lg, xl) |
|
Estructura desplegable |
Creado usando <ul> y <li> |
Creado con <ul> o <div> |
|
Clase de imágenes |
.img-sensible |
.img-fluido |
|
Mesas |
use la clase .table-responsive en la etiqueta <div> |
use la clase .table-responsive en la etiqueta <table> |
|
Columnas de compensación |
col-md-offset-4 |
desplazamiento-md-4 |
|
Tamaño del control de formulario |
.input-lg aumenta el tamaño mientras que .input-sm disminuye el tamaño |
.form-control-lg aumenta el tamaño mientras que .form-control-sm lo reduce |
|
Tamaños de botones |
La clase .btn-xs está disponible |
Las clases .btn-sm y .btn-lg están ahí y la clase .btn-xs no está |
|
Jumbotron ancho completo |
La clase .jumbotron-fluid no se usa en jumbotrons de ancho completo |
La clase .jumbotron-fluid para jumbotrons de ancho completo se usa en este |
|
Artículo de carrusel |
los elementos del carrusel se organizan mediante .itemclass |
Utiliza la clase .carousel-item para organizar los elementos del carrusel. |
|
Navegadores en línea |
No tiene clase .nav-inline |
Las navegaciones en línea se muestran usando la clase .nav-inline |
|
Estilos |
Tiene clases .btn-default y .btn-infodisponible para botones |
Tenga diferentes clases para botones como: .btn-secundario, .btn-claro y .btn-oscuro. |
|
Casillas de verificación y botones de opción |
Las clases .radio, .radio-inline, .checkbox o .checkbox-inline están disponibles para radio y checkbox. |
.form-check, .form-check-label, .form-check-input o .form-check-inline son las clases utilizadas para mostrar la radio y la casilla de verificación. |
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA