Grupo de Gobierno
BOOTSTRAP - Grid Tablas e Imagenes
Glyphicon Examples
Envelope icon:
Envelope icon as a link:
Search icon:
Search icon on a button:
Search icon on a styled button:
Print icon:
Print icon on a styled link button: Print
******************************
Button Styles
****************
Well
--------------------------
Well
/////////////////////////////////
Grid
Este ejemplo demuestra que si quitamos la sentencia <div class="container"> el GRID se regulariza al tamaño de la página, y si debajo tiene texto se acopla en la última columna.
Cambiar el tamaño de la ventana del navegador para ver el efecto.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
---------------------------------------------------------------------------------------
TABLAS
Si la TABLA se excede del contenedor de la página, quitamos la sentencia <div class="container">
Tabla Básica Bootstrap
La clase .table agrega un estilo básico (relleno ligero y solo divisores horizontales) a una tabla.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@ example.com |
| Mary | Moe | mary@ example.com |
| July | Dooley | july@ example.com |
----------------------------------------------------------------------------------------------------
Filas de rayas
La clase .table-striped agrega rayas de cebra a una tabla:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
----------------------------------------------------------------------------------------------------
Tabla bordeada
La clase .table-bordered agrega bordes a una tabla:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
----------------------------------------------------------------------------------------------------
Hover filas
La clase .table-hover habilita un estado de desplazamiento en las filas de la tabla:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
----------------------------------------------------------------------------------------------------
Tabla condensada
La clase .table-condensed hace que una tabla sea más compacta al cortar el relleno de la celda a la mitad:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
----------------------------------------------------------------------------------------------------
Clases contextuales
Las clases contextuales se pueden usar para colorear filas de tablas o celdas de tablas. Las clases que se pueden usar son: .active, .success, .info, .warning y .danger.
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
Las clases contextuales que se pueden utilizar son:
| Clase | Descripción |
|---|---|
.active | Aplica el color de desplazamiento sobre la fila de la tabla o la celda de la tabla |
.success | Indica una acción exitosa o positiva. |
.info | Indica un cambio o acción informativa neutral. |
.warning | Indica una advertencia que podría necesitar atención. |
.danger | Indica una acción peligrosa o potencialmente negativa. |
----------------------------------------------------------------------------------------------------
Tablas responsivas
La clase .table-responsive crea una tabla responsiva que se desplazará horizontalmente en dispositivos pequeños (bajo 768px). Cuando se ve en algo más grande que 768px de ancho, no hay diferencia:
| # | Firstname | Lastname | Age | City | Country |
|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA |
******************************************************************************************************************************************
Rejillas de Bootstrap
Clases de Grid
El sistema de rejilla Bootstrap tiene cuatro clases:
xs(para teléfonos - pantallas de menos de 768px de ancho)sm(para tabletas: pantallas iguales o superiores a 768 px de ancho)md(para computadoras portátiles pequeñas: pantallas de 992px o más de ancho)lg(para computadoras portátiles y de escritorio: pantallas iguales o superiores a 1200px de ancho)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Tenga en cuenta que los números en .col-*-*siempre deben agregar hasta 12 para cada fila
Reglas del sistema de cuadrícula
Algunas reglas del sistema de rejilla Bootstrap:
- Las filas se deben colocar dentro de un
.container(ancho fijo) o.container-fluid(ancho completo) para una alineación y relleno correctos - Usa filas para crear grupos horizontales de columnas
- El contenido se debe colocar dentro de las columnas, y solo las columnas pueden ser hijos inmediatos de las filas
- Clases predefinidas como
.rowy.col-sm-4están disponibles para hacer diseños de cuadrícula rápidamente - Las columnas crean canales (espacios entre el contenido de la columna) a través del relleno. El relleno se compensa en filas para la primera y la última columna mediante un margen negativo en
.rows - Las columnas de la cuadrícula se crean especificando el número de 12 columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres
.col-sm-4 - Los anchos de columna están en porcentaje, por lo que siempre son fluidos y tienen un tamaño relativo al elemento principa
Apilado a horizontal
Este ejemplo demuestra una división del 50% / 50% en dispositivos pequeños, medianos y grandes. En dispositivos extra pequeños, se apilará (100% de ancho).
Cambiar el tamaño de la ventana del navegador para ver el efecto.
Con los años, entraré, que nostrud aliquip fuera de ella la ventaja de ejercicio, por lo que los esfuerzos de estímulo si el distrito escolar y la longevidad.
-------------------------------------------------------------------------------------------------------------
Contenedor de fluidos
Sugerencia: puede convertir cualquier diseño de ancho fijo en un diseño de ancho completo cambiando la .containerclase a .container-fluid:
This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).
Resize the browser window to see the effect.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
---------------------------------------------------------------------------------------------
Tres columnas iguales
Hello World!
Resize the browser window to see the effect.
The columns will automatically stack on top of each other when the screen is less than 768px wide.
---------------------------------------------------------------------------------------------
Tres columnas Desiguales
Hello World!
Resize the browser window to see the effect.
---------------------------------------------------------------------------------------------
Dos columnas Desiguales
Hola Mundo!
Cambiar el tamaño de la ventana del navegador para ver el efecto.
Las columnas se apilarán automáticamente una sobre otra cuando la pantalla tenga menos de 768 píxeles de ancho.
---------------------------------------------------------------------------------------------
Sin canaletas
No gutters
Use la clase .row-no-gutters para eliminar los canales de una fila y sus columnas:
Y aquí hay una fila con canalones para demostrar las diferencias:
---------------------------------------------------------------------------------------------
Dos columnas con dos columnas anidadas
El siguiente ejemplo muestra cómo hacer que dos columnas comiencen en tabletas y se amplíen a escritorios grandes, con otras dos columnas (anchos iguales) dentro de la columna más grande (en los teléfonos móviles, estas columnas y sus columnas anidadas se apilarán):
Hello World!
Cambiar el tamaño de la ventana del navegador para ver el efecto..
---------------------------------------------------------------------------------------------
Mixto: Móvil Y Escritorio
El sistema de cuadrícula de Bootstrap tiene cuatro clases: xs (teléfonos), sm (tabletas), md (escritorios) y lg (escritorios más grandes). Las clases se pueden combinar para crear diseños más dinámicos y flexibles.
Sugerencia: cada clase se amplía, por lo que si desea establecer los mismos anchos para xs y sm, solo necesita especificar xs.
Hello World!
Cambiar el tamaño de la ventana del navegador para ver el efecto.
---------------------------------------------------------------------------------------------
Flotadores claros
Borre los flotadores (con la .clearfixclase) en puntos de interrupción específicos para evitar envolturas extrañas con contenido desigual
Las columnas 3 y 4 en el móvil se ponen debajo
Hello World!
Cambiar el tamaño de la ventana del navegador para ver el efecto. También intente eliminar la línea div clearfix y vea qué sucede.
---------------------------------------------------------------------------------------------
Columnas de compensación
Mueve las columnas a la derecha usando .col-md-offset-*clases. Estas clases aumentan el margen izquierdo de una columna en * columnas:
Columnas de Compensación
Cambiar el tamaño de la ventana del navegador para ver el efecto.
---------------------------------------------------------------------------------------------
Empujar y jalar - Cambiar orden de columnas
Cambia el orden de las columnas de la cuadrícula con .col-md-push-*y .col-md-pull-*clases:
Resize the browser window to see the effect.
***************************************************************************************************************************************
Contenedor Interior Jumbotron
Coloque el jumbotron en el interior si desea que el jumbotron NO se extienda hasta el borde de la pantalla:
Tutorial Bootstrap
Bootstrap es el marco HTML, CSS y JS más popular para el desarrollo de proyectos receptivos y móviles en la web.
This is some text.
This is another text.
-------------------------------------------------------------
Ejemplo de encabezado de página (Raya de Cabecera)
This is some text.
This is another text.
***************************************************************************************************************************************
Imágenes de Bootstrap
Rounded Corners
La clase .img redondeada agrega esquinas redondeadas a una imagen (no disponible en IE8):
Circle
La clase .img-circle da forma a la imagen en un círculo (no disponible en IE8):
Thumbnail
La clase .img-thumbnail crea una miniatura de la imagen:
Image
La clase .img-responsive hace que la imagen se adapte bien al elemento principal (cambie el tamaño de la ventana del navegador para ver el efecto):
Galería de imágenes
La clase .thumbnail se puede utilizar para mostrar una galería de imágenes.
La clase .caption agrega el relleno adecuado y un color gris oscuro al texto dentro de las miniaturas.
Pincha en las imágenes para ampliarlas.
Incrustar responsivo
Cree un video con capacidad de respuesta y ajústelo al elemento principal con una relación de aspecto de 16: 9
----------------------------------------------