Please enable JavaScript.

Coggle requires JavaScript to display documents.

Manual Bootstrap 4 (jairo abu (Grupos de botones :warning: (Este es…

- - - - En el primer caso:
        la alineación hay que añadir a la fila usando la etiqueta:
        " .align-items- ", donde "" podrá ser " start "
        esta se colocara pegada a la parte superior de la fila "center" o "end" esta ira pegada a la parte inferior de la fila
      - En el segundo caso:
        Este es el que indica el separado de la alineación vertical de cada una de las columnas de una de las filas y tenemos que usar la clasde:
        .align-self- , donde "" podrá adoptar los mismos valores: start , center o end
- - - - Tamaña de los grupos de botones
        
        permiten indicar el tamaño de los botones que
        contienen mediante las etiquetas .btn-group- , donde "" puede ser " sm " o " lg "
      - Barra de botones
        
        permite crear combinaciones de grupos de botones, como resultado componentes avanzados
      - Grupo de botones con desplegables
        
        El desplegable
        tendrá que estar contenido a su vez dentro de otro grupo de botones.
        
        la etiqueta contendora en vez de ser tipo .dropdown es un .btn-group
  - - - Formulario inline
        
        la clase .form-inline sobre la etiqueta <form> podemos crear
        formularios que se dispondrán en una sola línea.
        
        aunque los campos del formulario no contengan etiquetas (labels) es necesario incluirlas por cuestiones de accesibilidad, para dar soporte a los lectores de pantalla
        
        Esta alineación tipo "inline" solo será visible para pantallas grandes. En pantallas
        pequeñas los elementos cambiarán a alineación vertical.
      - Formulario horizontal
        
        Mediante el uso del sistema de rejilla de Bootstrap podemos crear formularios con
        disposición en horizontal.
        
        para esto debemos crear una fila ( .row) por cada grupo, y situar la etiqueta y el input a cada uno de las columna
        
        es importante que nos fijemos es las etiquetas (.row) se añade al (div) de cada grupo, manteniendo la etiqueta ( .form group) ademas podemos aplicar la clase columnas para las etiquetas (label) directamente sobre dicho elemento, sin necesidad de crear una caja contenedora.
      - Estados de validación de un formulario
        
        Bootstrap también incluye clases para aplicar diferentes estados de validación a un
        formulario.
        
        añadir las clases: .is-valid o .isinvalid sobre el propio input. De esta forma, el color de los elementos del formulario
        cambiará.
        
        Podemos añadir texto o botones al principio, final o a ambos lados de campo tipo <input> .Para esto tenemos que agrupar dicho input dentro de un .input-group y añadir dentro del
        grupo el elemento que queremos agrupar con la etiqueta .input-group-addon .
  - - - Fichas o pestañas
        
        Mediante la clase .nav-tabs podemos crear un grupo de pestañas o fichas
        
        Es importante que nos fijemos en cómo se usan las clases CSS .nav , .nav-tabs , .nav item y .nav-link . Cada elemento del menú será un .nav-item , los cuales contienen un enlace tipo .nav-link a la sección a mostrar. Para marcar el elemento del menú que está activo o seleccionado se utiliza la clase .active . Además disponemos de la clase .disabled para deshabilitar elementos del menú.
      - Píldoras
        
        La clase .nav-pills se define de igual forma que la .nav-tab pero sus elementos
        adoptarán una apariencia más similar a botones o "píldoras"
        
        También podemos crear un menú vertical o apilado añadiendo la clase .flex-column a la
        etiqueta contenedora
      - Ancho justificado
        
        podemos indicar que el ancho de las pestañas o de las píldoras se distribuya equitativamente según el ancho disponible. Para esto simplemente tenemos que aplicar la clase .nav-fill a la etiqueta contenedora
        
        Este estilo no funcionará para pantallas con un ancho menor a 768px, que son las pantallas definidas como extra pequeñas o de smartphone. Para estos tamaños cada elemento del menú ocupará el ancho justo que necesite.
      - Elementos de navegación con desplegables
        
        podemos añadir elementos desplegables a nuestro menú de navegación, tanto al tipo de tabs como al de pildoras
  - - - Imagen en la barra de navegación
        
        Para incluir el logotipo de nuestra web en la barra de navegación tenemos que modificar la
        sección navbar-brand del ejemplo anterior para incluir la etiqueta <img>
      - Barra de navegación con formulario
        
        Podemos añadir formularios a nuestra barra de navegación utilizando el tipo de formulario
        inline, definido con " .form-inline " como vimos en la sección "Formularios"
      - Alineación
        
        la aliniacion del formulario podemos utilizar las clases de la sección "Alineación horizontal" dentro del "Sistema de rejilla", como por ejemplo " .justifycontent-between "
      - Anclajes de la barra de navegación
        
        Bootstrap nos permite anclar o fijar la posición de la barra de tres formas distintas: fijarla a la parte superior añadiendo la clase .fixed-top a la etiqueta nav, fijarla a la parte inferior con .fixed-bottom , o usar el modo sticky (o pegajoso) con la etiqueta .sticky-top , el cual anclará la barra a la parte superior mientras se realiza scroll y cuando se alcanza el tope permanecerá fija.
      - Contenedores
        
        Aunque no es completamente necesario, sí que se recomienda añadir un elemento contenedor a la barra. El cual podrá añadirse de dos formas: un contenedor externo que incluya toda la barra, o un contenedor interno que incluya solo los elementos de la barra.
      - Colores de la barra de navegación
        
        el color de la barra y los elementos que la componen de una forma
        muy sencilla. En primer lugar tendremos que elegir entre el tema claro ( .navbar-light ) o el tema oscuro ( .navbar-dark ), y además asignar un color de fondo con las clases .bg-* para personalizar el color (a continuación se incluye la lista de colores posibles).
  - - - Tablas pequeñas
        
        Si queremos compactar el tamaño de la tabla para que deje un padding (o espaciado
        interior) inferior, podemos aplicar la clase .table-sm
      - Colores alternos
        
        aplicamos la clase .table-striped a nuestra tabla conseguiremos que las filas
        presenten colores alterno
      - Tablas con bordes
        
        También podemos dibujar un borde al rededor de la tabla añadiendo la clase .tablebordered
      - Tablas Responsive
        
        Bootstrap proporciona una forma de crear tablas responsive que se basa en crear un scroll horizontal para que se vean correctamente. Para que esto funcione simplemente tenemos que añadir la etiqueta .table-responsive a la propia tabla
- - - - Una media query se define de esta forma:
        
        media (min-width: Tamaño-de pixeles){ //Los estilos aqui contenidos solo se aplicaran a partir del tamaño de pantalla indicado// }
      - Ejemplos de uso:
        
        si queremos que en las pantallas extra pequeñas (xs) en el fondo que aplica la clase .miestilo sea rojo y para el resto verde lo podriamos hacer asi: .miestilo{ background-color: green;} media (max-width: 768px){ .miestilo{ background-color:red; } }
      - Una media query sirve para:
        
        Aplicar determinados estilos deseados CSS (colores,alineación interna,etc.) que cambien segun el tamaño de la pantalla.
  - - - Estos componentes aplican:
        
        Algunos de estos componentes son:
        
        Tablas
        
        Formularios
        
        Botones
        
        Desplegables
        
        Estilos a elementos HTML existentes para crear diseños mas modernos y ademas adaptables a todos los dispositivos.
  - - - Estas clases no son exclusivas para las etiquetas button
    - - Se puede variar el tamaño de los botones simplemente añadiendo las clases siguientes:
        
        La clase .btn-block para que el boton sea mas ancho
        
        la clase .btn-lg para que el boton sea grande
        
        La clase .btn-sm para que el boton sea mas pequeño
    - - Esta clase la podemos combinar con:
        
        .btn-secondary
        
        .btn-success
        
        .btn-primary
        
        .btn-danger
        
        .btn-ligth
        
        .btn-warning
        
        .btn-link
        
        .btn-info
        
        .btn-dark
  - - - Para añadir separadores en un desplegable se utiliza la clase .dropdown-divider.
    - - <div class=''dropdown''> <button class=''btn btn-secondary dropdown-toggle'' type=''button'' id="dropdownMenuButton'' data-toggle="dropdown'' aria-haspopup=''true'' aria-expanded=''false''> Dropdown button </div> <div class=''dropdown menu'' aria labelledby=''dropdownMenuButton''> <a class="dropdown-item'' href=''#''>Action</a> <a class="dropdown-item'' href=''#''>Another action</a> <a class="dropdown-item'' href=''#''>Something else here</a> </div> </div>
    - - Para añadir un encabezado o varios y dividir en secciones un desplegable se puede utilizar la clase .dropdown-header.
    - - Este elemento requiere un plugin Javascript de Bootstrap este esta incluido en la plantilla.