Bootstrap 4 - Guía rápida
¿Qué es Bootstrap 4?
Bootstrap 4 es un marco de interfaz de usuario móvil potente y popular para crear primeros sitios móviles receptivos en la web. Es una última versión de Bootstrap , que utiliza HTML, CSS y JavaScript.
Historia
La última versión estable de Bootstrap v3.3.7 fue en julio de 2016 y en agosto de 2017, se lanzó la versión beta de Bootstrap 4.0.0.
¿Por qué utilizar Bootstrap?
Contiene estilos móviles primero en toda la biblioteca, en lugar de usarlos en archivos separados.
Con solo el conocimiento de HTML y CSS, cualquiera puede comenzar con Bootstrap. Además, el sitio oficial de Bootstrap tiene una buena documentación.
Es compatible con todos los navegadores populares y su CSS sensible se ajusta a computadoras de escritorio, tabletas y móviles.
Proporciona una solución limpia y uniforme para crear una interfaz para desarrolladores.
Contiene componentes incorporados hermosos y funcionales que son fáciles de personalizar.
Es un código abierto y proporciona personalización basada en web.
Bootstrap 3 v / s Bootstrap 4
Bootstrap 4 es la última versión de Bootstrap 3, cuyos archivos CSS de origen se convierten en SCSS. Utiliza el modal flexible para el sistema de cuadrícula y es compatible con todos los navegadores más recientes. Sin embargo, es compatible con Internet Explorer 9+ e iOS 7+ y dejó de ser compatible con IE 8 y versiones inferiores, iOS 6 y versiones inferiores. Para obtener más información sobre la diferencia entre Bootstrap 3 y Bootstrap 4, consulte este capítulo .
Puede comenzar a usar Bootstrap 4 en su sitio web incluyéndolo desde CDN (Content Delivery Network) o descargándolo de getbootstrap.com .
Usando CDN
Bootstrap 4 se puede utilizar en el sitio web incluyéndolo desde Content Delivery Network .
Utilice el CDN de CSS y JS de Bootstrap compilado a continuación en su proyecto.
<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
Incluya las versiones CDN de jQuery y Popper.js (Bootstrap 4 usa jQuery y Popper.js para hacer uso de componentes de JavaScript como modales, información sobre herramientas, popovers, etc.) antes del JavaScript minificado de Bootstrap , si está utilizando la versión compilada de JavaScript.
A continuación se muestran algunos componentes, que requieren jQuery:
Utilizado para alertas que se pueden cerrar
Cambie los estados usando botones y casillas de verificación / botones de radio y contraiga para alternar el contenido
Carrusel para diapositivas, controles e indicadores
Desplegables (utiliza Popper.js para un posicionamiento perfecto)
Abrir y cerrar Modals
Para colapsar la barra de navegación
Información sobre herramientas y ventanas emergentes (utiliza Popper.js para un posicionamiento perfecto)
Descargando Bootstrap 4
Puede descargar Bootstrap 4 desde https://getbootstrap.com/docs/4.1/getting-started/download/. Cuando haga clic en este enlace, verá una pantalla como se muestra a continuación:
Aquí puede ver dos botones:
Download- Al hacer clic aquí, puede descargar las versiones precompiladas y minimizadas de CSS y JavaScript de Bootstrap. No se incluye documentación ni archivos de código fuente original.
Download Source - Al hacer clic aquí, puede obtener los archivos de documentación y código fuente JavaScript más recientes de Bootstrap SCSS.
Para una mejor comprensión y facilidad de uso, usaremos la versión precompilada de Bootstrap a lo largo del tutorial. A medida que los archivos se compilan y minimizan, no tiene que preocuparse cada vez de incluir archivos separados para la funcionalidad individual.
Estructura de archivo
Bootstrap 4 precompilado
Una vez que se descargue la versión compilada de Bootstrap 4, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:
Como puede ver, hay CSS y JS compilados (bootstrap. *), Así como CSS y JS compilados y minificados (bootstrap.min. *).
Código fuente de Bootstrap 4
Si ha descargado el código fuente de Bootstrap 4, la estructura del archivo sería la siguiente:
Los archivos bajo js / y scss / son el código fuente de Bootstrap CSS y JavaScript.
La carpeta dist / incluye todo lo que se enumera en la sección de descarga precompilada anterior.
El docs / examples / , incluye código fuente para la documentación de Bootstrap y ejemplos de uso de Bootstrap.
Creación de la primera página web con Bootstrap 4
El siguiente ejemplo especifica una página web simple de Bootstrap 4:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Bootstrap 4 usa clases de contenedor para envolver el contenido de la página. Contiene dos clases de contenedores:
.container - Representa un contenedor de ancho fijo.
.container-fluid - Representa un contenedor de ancho completo.
Envase
La clase .container se usa para envolver el contenido de la página con un ancho fijo y el contenido se puede colocar en el centro fácilmente usando la clase .container como se muestra a continuación.
<div class = "container">
...
</div>
Ejemplo
El siguiente ejemplo especifica una página web simple con un contenedor de ancho fijo:
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container">
<h2>Fixed Width Container</h2>
This is a simple web page with fixed width container by using
<code>.container</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Recipiente de fluido
Puede crear un contenedor de ancho completo utilizando la clase .container-fluid como se muestra a continuación.
<div class = "container-fluid">
...
</div>
El siguiente ejemplo especifica una página web simple con un contenedor de ancho completo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
<style>
.container-fluid {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<h2>Full Width Container</h2>
This is a simple web page with full width container by using
<code>.container-fluid</code> class.
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Descripción
Sistema de cuadrícula Bootstrap 4 construido con flexbox que es totalmente sensible y escala hasta 12 columnas (de acuerdo con el tamaño del dispositivo) al crear un diseño con filas y columnas en la página. Proporciona un primer sistema de cuadrícula de fluido móvil y receptivo que escala las columnas a medida que aumenta el tamaño del dispositivo o la ventana gráfica.
Funcionamiento del sistema de cuadrícula
Las filas deben colocarse dentro de una clase .container para lograr una alineación y un relleno adecuados.
Para un ancho receptivo, use la clase .container y para un ancho fijo en todas las ventanas, use la clase .container-fluid .
Utilice filas para crear grupos horizontales de columnas.
El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.
Las columnas contienen relleno para controlar el espacio entre ellas.
Si coloca más de 12 columnas en una fila, las columnas se colocarán en una nueva línea.
Las columnas crean espacios entre el contenido de la columna mediante el relleno. Por lo tanto, puede eliminar el margen de las filas y el relleno de las columnas con la clase .no-gutters en la fila.
Puede hacer que el sistema de cuadrícula responda utilizando cinco puntos de interrupción de la cuadrícula, como extra pequeño, pequeño, mediano, grande y extra grande.
Las clases de cuadrícula predefinidas como .col-4 están disponibles para crear rápidamente diseños de cuadrícula. LESS mixins también se pueden utilizar para diseños más semánticos.
Opciones de cuadrícula
La siguiente tabla resume aspectos de cómo funciona el sistema de cuadrícula Bootstrap 4 en múltiples dispositivos:
Dispositivos extra pequeños (<576px) | Dispositivos pequeños (≥576px) | Dispositivos medianos (≥768px) | Dispositivos grandes (≥992px) | Dispositivos extra grandes (≥1200px) | |
---|---|---|---|---|---|
Comportamiento de la cuadrícula | Horizontal en todo momento | Contraído al inicio, horizontal sobre los puntos de interrupción | Contraído al inicio, horizontal sobre los puntos de interrupción | Contraído al inicio, horizontal sobre los puntos de interrupción | Contraído al inicio, horizontal sobre los puntos de interrupción |
Ancho máximo del contenedor | Ninguno (automático) | 540 px | 720px | 960 px | 1140px |
Clases de clase | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
# de columnas | 12 | 12 | 12 | 12 | 12 |
Ancho de canal |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
Encajable | si | si | si | si | si |
Orden de columnas | si | si | si | si | si |
Estructura de cuadrícula básica
A continuación se muestra la estructura básica de la cuadrícula Bootstrap 4:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
Ejemplo de sistema de cuadrícula
A continuación se muestra un ejemplo del sistema de cuadrícula Bootstrap 4:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Crear diseños de dos columnas
El siguiente ejemplo describe la creación de diseños de dos columnas para dispositivos pequeños, medianos y grandes. En dispositivos pequeños, como teléfonos móviles, las columnas se convertirán automáticamente en horizontales de forma predeterminada.
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Creación de diseños de tres columnas
El siguiente ejemplo describe la creación de diseños de tres columnas para dispositivos medianos y grandes. Si la resolución de la pantalla es mayor o igual a 992 píxeles, se mostrará en modo horizontal en tabletas y, como es habitual, se mostrará en modo vertical.
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
Producirá el siguiente resultado:
Salida
Descripción
Bootstrap 4 utiliza una colección de métodos de contenido para mostrar el texto, bloques de código, imágenes receptivas, datos en formato tabular, etc. en la página web.
La siguiente tabla enumera los métodos de contenido que puede utilizar para manipular Bootstrap 4:
S.No. | Métodos y descripción |
---|---|
1 |
La función de tipografía crea títulos, párrafos, listas y otros elementos en línea. |
2 |
Se utiliza para mostrar bloques de código en línea y de varias líneas en el documento. |
3 |
Bootstrap 4 proporciona soporte para imágenes mediante la etiqueta <img>. |
4 |
Las tablas se utilizan para mostrar los datos en formato tabular. |
5 |
El elemento de figura especifica el contenido junto con imágenes relacionadas con un título opcional. |
Descripción
Bootstrap 4 utiliza una colección de métodos de contenido para mostrar el texto, bloques de código, imágenes receptivas, datos en formato tabular, etc. en la página web.
La siguiente tabla enumera los métodos de contenido que puede utilizar para manipular Bootstrap 4:
S.No. | Métodos y descripción |
---|---|
1 |
El componente de alerta especifica el mensaje predefinido para las acciones del usuario. |
2 |
Las insignias se utilizan para resaltar la información adicional al contenido. |
3 |
Se utiliza para mostrar información basada en jerarquías de un sitio. |
4 |
Bootstrap proporciona un botón en el que se puede hacer clic para colocar contenido como texto e imágenes. |
5 |
Los grupos de botones permiten apilar varios botones en una sola línea. |
6 |
La tarjeta es un contenedor de contenido que muestra un cuadro bordeado con algo de relleno alrededor. |
7 |
Carrusel es una forma flexible y receptiva de agregar un control deslizante a su sitio. |
8 |
Se utiliza para mostrar u ocultar el contenido. |
9 |
Los menús desplegables se pueden utilizar para mostrar enlaces en formato de lista. |
10 |
El elemento de formulario se utiliza para recopilar información del usuario. |
11 |
Con los grupos de entrada, puede anteponer y agregar fácilmente texto o botones a las entradas basadas en texto. |
12 |
Aumenta el tamaño de los encabezados y agrega mucho margen para el contenido de la página de destino. |
13 |
Modal es una ventana secundaria que se coloca en capas sobre su ventana principal. |
14 |
Bootstrap proporciona elementos de navegación para su sitio en un menú horizontal. |
15 |
Navbar proporciona encabezados de navegación para su aplicación o sitio. |
dieciséis |
La paginación se utiliza para dividir el contenido relacionado en varias páginas. |
17 |
Popover es similar a la información sobre herramientas, que ofrece una vista ampliada completa con un encabezado. |
18 |
La barra de progreso muestra el progreso de un proceso con barras apiladas, fondos animados y etiquetas de texto. |
19 |
Scrollspy se utiliza para indicar el enlace actualmente activo en el menú según la posición de desplazamiento. |
20 | Información sobre herramientas La información sobre herramientas es útil cuando necesita describir un enlace. |
Descripción
Bootstrap 4 utiliza una colección de utilidades para mostrar bordes, color de texto, incrustar video, etc.en la página web.
La siguiente tabla enumera los tipos de utilidades que puede utilizar para manipular Bootstrap 4:
S.No. | Métodos y descripción |
---|---|
1 |
La utilidad Borde proporciona estilo, color y radio del borde de un elemento. |
2 |
Clearfix se utiliza para borrar el contenido flotante y cerrar el icono para descartar el contenido. |
3 |
Utilice las clases contextuales para cambiar el color del texto, el enlace y el color de fondo de un elemento. |
4 |
Se usa para incrustar el video en una página usando el elemento <iframe>. |
5 |
Se utiliza para hacer flotar un elemento hacia el lado izquierdo o derecho. |
6 |
La utilidad Sombra agrega sombra a los elementos y la utilidad de espaciado proporciona valores de margen o relleno a un elemento. |
7 |
Puede hacer que el tamaño de un elemento sea ancho o alto utilizando las utilidades de ancho y alto. |
8 |
Bootstrap proporciona utilidades de texto para controlar la alineación, transformación, peso y más del texto. |
9 |
La utilidad Flex se puede utilizar para administrar el diseño, la alineación, las columnas de la cuadrícula, la navegación y otros componentes de la página. |
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 |