Título: Semana 4

Subtítulo:
Subtítulo: Componentes
adicionales

Nombre:
Nombre: Adrián Alvarado
Ramírez
Introducción
En el video anterior trabajamos con el componente navbar. En este video continuaremos analizando
componentes de Bootstrap.
Alertas
Las alertas permiten mostrar mensajes con diferentes estilos que indican la severidad del mensaje.
Alertas
Una alerta se define con la combinación de la clase alert y la clase alert-<sufijo de serveridad>

<div class="alert alert-success" role="alert">
     La operación fue realizada con éxito.
</div>
Alertas
Las clases disponibles son:
Alertas
Las alertar pueden extender con funcionalidad para que el usuario pueda cerrarlas. Para esto se requiere que el
JavaScript requerido esté enlazado (JQuery, Popper y el JS de Bootstrap).

<div class="alert alert-danger" role="alert">
     Ocurrió un error al realizar la operación (Alerta cerrable).

     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
     </button>
</div>
Alertas
Modal
Los diálogos modales permiten mostrar contenido como mensajes, superpuestos al contenido principal de la
página.
Modal
<div class="modal" id="modal1">
    <div class="modal-dialog">
        <div class="modal-content">                        
              <div class="modal-body">
                  Contenido principal del modal.
              </div>                        
        </div>
     </div>
</div>
Modal
Para mostrar un modal, es necesario un elemento que ejecute la funcionalidad JavaScript correspondiente.
Esta funcionalidad puede ejecutarse mediante una combinación de atributos data-target y id. Los modales se
ocultan si el usuario da click en cualquier área fuera del modal.

<!-- Botón para mostrar el modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
      Mostrar
</button>
Modal
Modal
Modal
<div class="modal" id="modal1">
    <div class="modal-dialog">        
        <div class="modal-content">
            <div class="modal-header">
                <h3>Encabezado del modal</h3>
            </div>                      
            <div class="modal-body">
                Contenido principal del modal.
            </div>
            <div class="modal-footer">                            
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
            </div>                      
        </div>       
    </div>
</div>
Gracias