TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Plantilla de inicio Bootstrap 5

12

Bootstrap 5 se lanzó como versión pública final. Básicamente, esto significa que debe preparar la migración desde la versión anterior y usar la nueva versión para crear nuevos sitios web. Ya sea que esté migrando o iniciando un nuevo sitio, primero debe aprender el mínimo básico o la plantilla de inicio. En este tutorial explicaremos cómo crear una plantilla de inicio de Bootstrap 5 base para comenzar sus proyectos con ejemplos simples.

Uso de la plantilla de inicio Bootstrap 5

  1. Descarga de archivos fuente de Bootstrap
  2. Alojamiento de archivos Bootstrap 5 en su servidor
  3. Uso de la plantilla de inicio Bootstrap 5 con enlaces CDN
  4. Personalización de componentes de Bootstrap 5
  5. Llevando la plantilla de inicio más lejos
  6. Usando el archivo de secuencia de comandos incluido en la versión 5
  7. Incluyendo iconos de Bootstrap
  8. Usar generadores de sitios estáticos

1 Descarga de archivos fuente de Bootstrap 5

Como usuario final, hay dos formas de utilizar archivos Bootstrap CSS y JavaScript. Uno es descargar los archivos precompilados e incluirlos en sus proyectos y el segundo es hacer uso de los enlaces CDN.

Puede obtener más información sobre cómo obtener archivos Bootstrap en el artículo de introducción a Bootstrap.

2 Uso de archivos Bootstrap en su propio servidor

Puede descargar los archivos CSS y JavaScript precompilados del repositorio de GitHub. El archivo zip debe tener carpetas CSS y JS. A continuación se muestran los archivos disponibles dentro de las carpetas CSS:

Plantilla de inicio Bootstrap 5

Archivos Bootstrap 5

Hay varias versiones de CSS disponibles en el archivo fuente descargado:

  • Archivos CSS predeterminados y minimizados que puede usar con cualquier proyecto
  • Archivo de utilidades
  • Versión de solo cuadrícula
  • Reiniciar solo versión

En un servidor de producción, puede utilizar la versión minificada "bootstrap.min.css" para todas sus necesidades. Los archivos de mapa de origen ayudan a mapear entre la fuente y las versiones minificadas precompiladas. No es necesario utilizar reinicio, cuadrícula y archivos de mapas para su uso regular en los sitios.

Nota: Cuando solo usa el archivo "bootstrap.min.css" en su sitio, algunos navegadores como Safari mostrarán un error o una advertencia en la consola del desarrollador de que falta el archivo de mapa de origen. Para corregir el error, abra el archivo CSS Bootstrap y elimine la última línea “/ # sourceMappingURL = bootstrap.min.css.map /".

Similar a los archivos CSS, la carpeta JS tendrá "bootstrap.js" y "bootstrap.bundle.js". El archivo "bootstrap.js" no incluye el script Popper, pero la versión del paquete incluye el script Popper. Con la versión anterior de Bootstrap 4, debe incluir jQuery por separado para que los componentes de JavaScript funcionen correctamente. Sin embargo, Bootstrap 5 no necesita jQuery como parte del marco y está diseñado para funcionar sin jQuery.

Plantilla de inicio Bootstrap 5

Bootstrap 5 archivos JS

Con la comprensión anterior, los archivos fuente tendrán la siguiente estructura que contiene muchos archivos CSS y JS.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

La plantilla de inicio básica debería verse como a continuación cuando aloja los archivos anteriores en su servidor:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Recuerde, si no está utilizando el archivo JS incluido, debe incluir archivos de script JS y popper separados. Si lo ha notado correctamente, hay muchas etiquetas y scripts adicionales en la plantilla de inicio.

  • Bootstrap usa HTML5 DOCTYPE para las plantillas. Por lo tanto, asegúrese de incluir <! DOCTYPE HTML> al comienzo de su plantilla HTML para evitar comportamientos inesperados.
  • Debe utilizar la metaetiqueta de la ventana gráfica para garantizar la capacidad de respuesta de la plantilla en función del dispositivo de renderizado.
  • En caso de que agregue jQuery, asegúrese de hacerlo antes de los scripts "popper.min.js" y "bootstrap.min.js".
  • También puede descargar el script de Popper del sitio de Popper y cargarlo en la carpeta "assets / js /" de su sitio.
  • Recuerde que el script Popper es esencial para que los complementos de Bootstrap funcionen correctamente. Popper es una biblioteca de JavaScript que se utiliza principalmente para colocar elementos flotantes como el componente de información sobre herramientas en Bootstrap.

Tenga en cuenta que hemos utilizado "assets / css / bootstrap.min.css" y "assets / js / bootstrap.bundle.min.js" como rutas de archivo. Es un buen hábito mantener todos los archivos CSS y JS en carpetas separadas para que sea fácil de administrar. Básicamente, esto significa que debe crear las carpetas correspondientes en su servidor y cargar los archivos Bootstrap CSS y JS manualmente. También guarde las imágenes en carpetas separadas de "imágenes" y archivos HTML en la raíz de su sitio. Entonces, toda la estructura debería verse como a continuación en su servidor:

Plantilla de inicio Bootstrap 5

Estructura del archivo del tema Bootstrap 5

La "Carpeta del tema" en el ejemplo anterior es la carpeta raíz de su sitio, que debería ser su dominio o subdominio o subdirectorio.

3 Uso de la plantilla de inicio con CDN

Alojar todos los archivos necesarios en su servidor es la forma correcta, pero afectará la velocidad de carga y la capacidad de alojamiento. Por lo tanto, recomendamos utilizar enlaces CDN para archivos CSS y JS en lugar de alojarlos en su propio servidor. Esto asegurará la entrega rápida de esos archivos estáticos y mejorará la velocidad de carga de la página. A continuación se muestra una plantilla de inicio de Bootstrap 5 con enlaces CDN para CSS y scripts. Simplemente puede agregar contenido en la sección del cuerpo para comenzar a construir su sitio o tema. Anteriormente, la versión de Bootstrap 4 era de la red Bootstrap CDN y la última versión 5 es de jsDelivr.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Personalización de archivos fuente de Bootstrap

El uso de los archivos de plantilla completos no es necesario en todos los casos. Por ejemplo, cuando desee usar solo botones de Bootstrap, solo puede usar los estilos apropiados para los botones. Bootstrap ofrece un personalizador para la versión 3.4 anterior donde puede elegir qué componentes son necesarios y generar los archivos precompilados.

Plantilla de inicio Bootstrap 5

Personalización de archivos Bootstrap

En este momento no hay un personalizador detallado disponible para la versión Bootstrap 5. Sin embargo, puede consultar el sitio de documentación oficial para obtener más detalles sobre cómo personalizar Bootstrap 5.

5 Llevando la plantilla de inicio más lejos

Ahora que tiene su plantilla de inicio final alojada en su servidor o usando enlaces CDN. El siguiente paso es agregar contenido y comenzar a construir su sitio. A continuación se muestra un ejemplo simple en el que hemos creado diferentes botones contextuales utilizando clases de botones de Bootstrap predeterminadas.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

La salida debería verse como a continuación en el navegador:

Plantilla de inicio Bootstrap 5

Idealmente, no hay necesidad de usar archivos de script jQuery, popper y Bootstrap para crear botones simples que se controlan a través de CSS. Hemos mostrado el ejemplo para que la plantilla de inicio esté completa. Además, cuando agrega más componentes, debe incluirse el archivo de secuencia de comandos incluido.

6 Uso de Bootstrap Bundled Script Version

Como se explicó anteriormente, Bootstrap 5 tiene un archivo de script incluido que combina “bootstrap.min.js” y “popper.min.js”. Entonces, si desea utilizar la versión incluida, modifique la plantilla de inicio como se muestra a continuación mediante el archivo "bootstrap.bundle.min.js".

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Incluyendo iconos de Bootstrap en la plantilla

La versión 5 de Bootstrap viene con más de 1300 iconos SVG gratuitos que puede incluir fácilmente en sus sitios web. Ayuda a eliminar la dependencia de iconos externos como los iconos de Font Awesome. Hay varias formas de incluir los iconos en su plantilla de inicio y la mejor opción es usar CDN CSS como se muestra a continuación. Hemos mostrado un icono de ejemplo en la sección del cuerpo con el componente de alerta. Puede obtener la lista completa de clases CSS para los iconos aquí.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Uso de generadores de sitios estáticos

Es fácil crear un sitio web estático usando la plantilla de inicio Bootstrap, pero la modificación de varios archivos estáticos en un sitio más grande consumirá mucho tiempo. Una sola página web contiene diferentes secciones como encabezado, contenido principal, pie de página y barra lateral. Todas las secciones que no sean el contenido principal se utilizan en todo el sitio con la misma información. Los generadores estáticos utilizan el concepto de parciales al tener las plantillas base para cada una de las secciones como encabezado, pie de página y barra lateral. Finalmente, todas estas plantillas base se ensamblan con el contenido del cuerpo principal en cada página por separado.

Siempre que se requiera un cambio en el encabezado, pie de página y barra lateral, puede modificar las plantillas base en lugar de modificar todas y cada una de las páginas individualmente. Cuando el sitio esté listo, puede generar los archivos HTML, CSS y JavaScript para cargarlos en su servidor. Uno de los generadores de sitios estáticos más populares es Harp.js, que puede instalar en su máquina local para un mayor desarrollo de la plantilla de inicio. Recuerde que Harp.js necesita Node.js / NPM como dependencia, por lo que debería haber instalado estos componentes de antemano. Alternativamente, puede usar aplicaciones generadoras como Mobirise para hacer uso del marco Bootstrap sin la necesidad de comprender la codificación.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More