Bootstrap5 Tutorial

Bootstrap 教程

Bootstrap es la biblioteca de componentes front-end más popular del mundo, utilizada para desarrollar proyectos web con diseño responsivo y prioridad móvil.

Bootstrap5 es actualmente la última versión de Bootstrap, un conjunto de herramientas de código abierto para el desarrollo con HTML, CSS y JS. Admite variables y mixins de Sass, sistema de cuadrícula responsivo, una gran cantidad de componentes preconstruidos y potentes complementos de JavaScript, lo que le ayuda a diseñar y personalizar rápidamente sitios responsivos y con prioridad móvil.

¿Quién debería leer este tutorial?

Con solo conocimientos básicos de HTML y CSS, puede leer este tutorial y desarrollar su propio sitio web. Después de completar este tutorial, alcanzará un nivel intermedio en el uso de Bootstrap para desarrollar proyectos web.

Conocimientos que necesita antes de leer este tutorial:

Antes de comenzar a leer este tutorial, debe tener conocimientos básicos de HTML, CSS y JavaScript. Si aún no conoce estos conceptos, se recomienda que lea primero estos tutoriales:

¿Por qué usar Bootstrap?

  • Fácil de aprender:Cualquier persona con conocimientos básicos de HTML y CSS puede usar Bootstrap rápidamente.

  • Diseño responsivo:Bootstrap se puede adaptar a diferentes plataformas (teléfonos móviles, tabletas y computadoras de escritorio).

  • Prioridad móvil:En Bootstrap, la adaptación a dispositivos móviles es una parte central del framework.

  • Compatibilidad con navegadores:Bootstrap5 es compatible con todos los navegadores principales (Chrome, Firefox, Edge, Safari y Opera). Si necesita soporte para IE11 y versiones anteriores, use Bootstrap4 o Bootstrap3.

Ejemplos de Bootstrap5

A continuación se muestra un ejemplo sencillo de Bootstrap5:

Ejemplos de Bootstrap5

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Mi primera página con Bootstrap</h1> <p>Esta es una página responsiva. ¡Redimensione el navegador para ver el efecto!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Primera columna</h3> <p>Ejemplo</p> <p>¡No se aprende solo tecnología, sino también sueños!</p> </div> <div class="col-sm-4"> <h3>Segunda columna</h3> <p>Ejemplo</p> <p>¡No se aprende solo tecnología, sino también sueños!</p> </div> <div class="col-sm-4"> <h3>Tercera columna</h3> <p>Ejemplo</p> <p>¡No se aprende solo tecnología, sino también sueños!</p> </div> </div> </div>

Pruébalo »

Bootstrap5 frente a Bootstrap 3 y 4

Bootstrap5 es la última versión de Bootstrap, utiliza nuevos componentes, hojas de estilo más rápidas y posee una capacidad de respuesta más rápida.

Bootstrap5 es compatible con todos los navegadores principales en sus versiones estables más recientes, pero no es compatible con Internet Explorer 11 ni versiones anteriores.

La principal diferencia entre Bootstrap5 y Bootstrap 3 y 4 es que Bootstrap5 ya no depende de jQuery, utiliza JavaScript nativo,JavaScriptpor supuesto, si queremos usarlo, también podemos incluir jQueryjQuery。

Bootstrap5 no es compatible con navegadores IE11 o inferiores; Bootstrap4 abandonó el soporte para IE8 e iOS 6. Si necesita compatibilidad con navegadores antiguos, entonces use Bootstrap3Bootstrap3。

Nota:Actualmente, el equipo oficial sigue manteniendo Bootstrap 3 y Bootstrap 4; podemos continuar usándolos, pero no se añadirán nuevas funciones a Bootstrap 3 y 4.

Otras extensiones