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.

1. Bootstrap:
Menues, Contenedores y Formularios
Prof. Ramiro Estigarribia
Link a la presentación

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

6. <div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example
textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>

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)

8. <div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Cuadrilla de 1 Fila y 3 Columnas

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

10. <div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

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>