Please enable JavaScript.
Coggle requires JavaScript to display documents.
BOOTSTRAP 4
b (SISTEMA DE REJILLA
Se basa en la creación o disposición…
BOOTSTRAP 4
UTILIDADES RESPONSIVE
Bootstrap incluye clases que nos ayudan a mostrar o a ocultar contenido dependiendo el tamaño de del dispositivo
-
COMPONENTES RESPONSIVE
Bootstrap incluye un completo conjunto de componentes para hacer mas fácil nuestro diseño de una web responsive. Estos componentes de estilo pueden ser aplicados a elementos HTML par crear algo más moderno.
BOTONES
-
Elementos tipo botón
Esta clase no es exclusiva para las etiquetas button, si no que también funcionará con las etiquetas <a> y <input>
Por ejemplo:
El resultado sería:
Tamaño de los botones
El tamaño puede variar con solo añadir las clases .btn-lg, .btn-sm o .btn-block.
Por ejemplo:
El resultado sería:
DESPLEGABLES
Bootstrap facilita la creación de botones con opciones despegables por medio de la clase .dropdown. Este elemento requiere que le plugin JavaScript de Bootstrap este incluido en la plantilla.
La estructura básica para crear un elemento de este tipo es:
El resultado sería:
Encabezados en un despegable
Para agregar un encabezado y dividir en secciones un despegable se utiliza la clase .dropdown-header
Por ejemplo:
El resultado sería:
-
GRUPOS DE BOTONES
Para crea una línea de botones se agrupa dentro de un elemento contenedor con la etiqueta .btn-group
Por ejemplo:
El resultado sería:
-
Tamaños de los grupos de botones
Los grupos de botones permiten indicar el tamaño con las etiquetas .btn-group-x, donde x puede ser sm, md, lg o xl
Por ejemplo:
El resultado sería:
Grupo de botones con despegable
Para esto el despegable también tendrá que estar contenido a su vez dentro de otro grupo de botones.
Por ejemplo:
El resultado sería:
FORMULARIOS
Para que los formularios se conviertan en elementos responsive Bootstrap aplica estilo a estos tipos de elementos.
-
Formulario horizontal
Para esto tendremos que crear una fila .row por cada grupo, y situar la etiqueta y el input cada uno en una columna.
Por ejemplo:
El resultado sería:
Estado de validación de un formulario
Para utilizar a validación de formularios agregamos las clases .is-valid o .is-invalid sobre el input.
Por ejemplo:
El resultado sería:
Agrupar inputs con otro elementos
Para hacer esto agrupamos el inputs dentro de un .input-group y añadir dentro de grupo el elemento que queremos agrupar con la etiqueta .input-group-addon
Por ejemplo:
El resultado sería:
-
NAVEGACIÓN
Bootstrap comparte la etiqueta .nav para su marcado en la clase contenedora. Es necesario para estos elementos la librería de JavaScript para que su funcionamiento sea correcto.
-
-
Ancho justificado
Podemos indicar que el ancho de las pestañas y las píldoras se distribuya equitativamente. Para esto usamos la clase .nav-fill
Por ejemplo:
El resultado sería:
Elementos de navegación con despegables
Para esto se agrega el dropdowm como un elemento del menú mas. Quedaría de la siguiente forma: <li class="nav-item dropdown">
Por ejemplo:
El resultado sería:
-
SISTEMA DE REJILLA
Se basa en la creación o disposición del contenido de la página web dentro de rejillas flexibles que se encargan del tamaño y posición de forma automática. segun el tamaño de la pantalla.
Elemento contenedor
Estos elementos son la raíz de la rejilla que Bootstrap ya provee las cuales son: container ó container-fluid
Si lo queremos usar centrado o con un ancho fijo se utiliza la etiqueta .container
Si queremos que ocupe todo el ancho en todos los tamaños se utiliza la etiqueta .container-fluid
Funcionamiento del sistema de rejilla
Ayuda a que la pagina web se adapte a diferentes tamaños de pantalla de forma automática. Cada fila se puede dividir hasta en 12 columnas.
a) .row: Determina las filas.
b) Las filas se colocan dentro de la etiqueta contenedora .container ó .container-fluid
c) El tamaño se especifica con clases css que Bootstrap define por cada tamaño de pantalla.
Por ejemplo: .col-md-xx, donde xx es el tamaño de la columna que puede ser entre 1 y 12.
-
-
-
ORDENACIÓN DE COLUMNAS
Podemos hacer una modificación al orden visual de las columnas utilizando la clase .order. Esta clase indica la posición a la cuál queremos desplazar la columna (del 1 al 12, por ejemplo .order-1, .order-2, etc.). Si se va mover hacia la izquierda es necesario establecer el order de todas las columnas.
El resultado seria:
-
ANIDAMIENTO DE COLUMNAS
El el sistema de rejillas el anidar columnas dentro de otras columnas es una característica bastante relevante. Para esto se crea una nueva fila dentro de una columna y entro de esa fila se puede subdividir usando también hasta 12 columnas.
El resultado sería:
-
-
MEDIA QUERIES
Gracias a Bootstrap podemos componer nuestras paginas web utilizando las clases que ya provee. Sin embargo nos es necesario utilizar algunos estilos determinados por CSS que cambien según el tamaño de pantalla.
-