Contiene plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones y otros componentes de la interfaz, así como extensiones de JavaScript opcionales. Un sitio web tiene muchos elementos diferentes, como encabezados, listas, tablas, imágenes, botones, formularios, etc. Todos estos elementos HTML fundamentales se han diseñado y mejorado con clases extensibles.
El paquete de arranque que cree debe incluir las carpetas /config, /license, /software y /content.
El paquete Bootstrap incluye:
- Scaffolding: Bootstrap ofrece una estructura básica con Grid System, diseño de medios, fondo y estilos de enlace.
- Componentes: Bootstrap consta de varios componentes reutilizables creados para proporcionar menús desplegables, iconografía, ventanas emergentes, navegación, alertas, carrusel, ruta de navegación y mucho más.
- Personalizar: para obtener su versión, personaliza los componentes de Bootstrap, menos variables, importa archivos Sass y complementos jQuery.
- CSS: En Bootstrap se proporcionan funciones como la configuración global de CSS, elementos HTML con estilo y mejorados con clases extensibles y un sistema de cuadrícula avanzado.
- Complementos de JavaScript: Bootstrap proporciona varios complementos de jQuery personalizados. Los usuarios pueden obtenerlos todos fácilmente de la documentación de arranque.
Estos son los elementos HTML para los que se proporcionan estilos: tipografía, código, tablas, formularios, botones y muchos más. Ya sea que necesite agregar menús desplegables, paginación, información sobre herramientas o cuadros de alerta, Bootstrap lo tiene cubierto.
Los componentes prediseñados son:
- Listas deplegables
- Grupos de botones
- Barra de navegación
- Migas de pan
- Etiquetas y distintivos
- Alertas
- Barra de progreso
- Tarjetas
- Carrusel
- Modal
- Y muchos otros.
Cómo incluir el paquete de arranque: puede incluir el paquete de arranque de muchas maneras:
1. Mediante el uso de CDN: puede utilizar los siguientes enlaces de CDN en el archivo HTML principal para comenzar con el arranque. Para obtener el enlace CND más reciente, vaya al sitio web de Bootstrap y haga clic en Comenzar.
- CSS:
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ origen cruzado=”anónimo >
- JS:
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integridad=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anónimo”></script>
2. Mediante el uso de administradores de paquetes: puede incluir el paquete de arranque en su proyecto utilizando los administradores de paquetes:
- npm
- hilo
- RubyGems
- compositor
3. Descarga los archivos fuente:
Puede incluir el paquete bootstrap descargando los archivos fuente de bootstrap. He agregado el enlace para descargar los archivos fuente en la sección de referencias. Puedes registrarte allí.
Ejemplo: en este ejemplo, he creado una tarjeta que es uno de los componentes más populares en Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap links</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <!--Creating cards--> <div class="card" style="width: 18rem"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-info">Click this button</a> </div> </div> <br /> </body> <!--Popper.js and Jquery--> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> </html>
Producción:
La salida del código anterior (tarjeta Bootstrap)
Publicación traducida automáticamente
Artículo escrito por deekshashukla03102001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA