El documento describe los principales componentes de Bootstrap para crear interfaz de usuario como menús desplegables, barras de navegación, formularios, cuadrículas, modales, carruseles, colapsos y tarjetas. Explica cómo utilizar las clases de Bootstrap para agregar esta funcionalidad a una página web.
2. Es una lista desplegable que permite al usuario elegir un valor
de una lista predefinida.
Más información: Dropdowns · Bootstrap v5.0
Bootstrap 4 Dropdowns
Dropdowns (Lista Desplegable)
3. Permite crear un menú de navegación simple.
Para crear un menú horizontal, agregar la clase .nav a un <ul>,
seguido de .nav-item para cada item.
Y para convertir en pestañas, utilizar .nav-tabs
Más información: Navs and tabs · Bootstrap v5.0
Bootstrap 4 Navs
Navs (Menú de navegación)
4. Permite crear una barra de navegación.
Es un encabezado de navegación que se coloca en la parte
superior de la página:
Más información: Navbar · Bootstrap v5.0
Bootstrap 4 Navigation Bar
Navigation Bar (Barra de Navegación)
5. Permite crear y validas formularios.
Es un elemento muy utilizado en aplicaciones.
Forms · Bootstrap v5.0
Bootstrap 4 Forms
Form controls
7. Son filas y columnas para diseñar y alinear el contenido.
Se permiten hasta 12 columnas en una página.
<div class="row"> Permite crear Filas
<div class="col"> Permite crear columnas
Más información: Bootstrap 5 Grid Basic
Grid system · Bootstrap v5.0
Grid (Cuadrículas)
9. Es un cuadro de diálogo / ventana emergente que se muestra
en la parte superior de la página.
Más información: Bootstrap 4 Modals
Modal · Bootstrap v5.0
Modal
11. Es un componente de presentación de diapositivas para
recorrer elementos (imágenes) como un carrusel.
Más información:
Carousel · Bootstrap v5.0
Carousel
12. Permite cambiar la visibilidad del contenido.
Más información:
Collapse · Bootstrap v5.0
Collapse (Colapso)
13. Proporcionan un contenedor de contenido flexible y
extensible con múltiples variantes y opciones.
Más información: Cards · Bootstrap v5.0
Cards (Tarjetas)
14. <div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<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-primary">Go
somewhere</a>
</div>
</div>