El documento explica cómo usar clases de columnas en Bootstrap para crear diseños responsivos en dispositivos de diferentes tamaños. Se describen las clases .col-xl-* para crear diseños específicos para dispositivos muy grandes con una resolución mayor a 1200 píxeles. También se explica cómo usar solo la clase .col-lg para crear columnas de igual ancho automáticamente en todos los dispositivos.
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Jornadas Odoo 2016 - Cómo realizar un módulo de Odoo compatible con todo - Pe...Pedro Manuel Baeza Romero
El CTO de Tecnativa realizará durante 30 minutos una charla de corte técnico sobre metodologías para mejorar la compatibilidad de un módulo dentro del ecosistema de Odoo para evitar conflictos con el resto. Se darán nociones de herencia, tests, metodologías, buenas prácticas y otros consejos para llevar a cabo la tarea.
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
Jornadas Odoo 2016 - Cómo realizar un módulo de Odoo compatible con todo - Pe...Pedro Manuel Baeza Romero
El CTO de Tecnativa realizará durante 30 minutos una charla de corte técnico sobre metodologías para mejorar la compatibilidad de un módulo dentro del ecosistema de Odoo para evitar conflictos con el resto. Se darán nociones de herencia, tests, metodologías, buenas prácticas y otros consejos para llevar a cabo la tarea.
Escaneo y eliminación de malware en el equiponicromante2000
El malware tiene muchas caras, y es que los programas maliciosos se reproducen en los ordenadores de diferentes formas. Ya se trate de virus, de programas espía o de troyanos, la presencia de software malicioso en los sistemas informáticos siempre debería evitarse. Aquí te muestro como trabaja un anti malware a la hora de analizar tu equipo
Si bien los hospitales conjuntan a profesionales de salud que atienden a la población, existe un equipo de organización, coordinación y administración que permite que los cuidados clínicos se otorguen de manera constante y sin obstáculos.
Mario García Baltazar, director del área de Tecnología (TI) del Hospital Victoria La Salle, relató la manera en la que el departamento que él lidera, apoyado en Cirrus y Estela, brinda servicio a los clientes internos de la institución e impulsa una experiencia positiva en el paciente.
Conoce el Hospital Victoria La Salle
Ubicado en Ciudad Victoria, Tamaulipas, México
Inició operaciones en el 2016
Forma parte del Consorcio Mexicanos de Hospitales
Hospital de segundo nivel
21 habitaciones para estancia
31 camas censables
13 camillas
2 quirófanos
+174 integrantes en su plantilla
+120 equipos médicos de alta tecnología
+900 pacientes atendidos
Servicios de +20 especialidades
Módulos utilizados de Cirrus
HIS
EHR
ERP
Estela - Business Intelligence
1. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Grids Muy Grandes en BOOTSTRAP
Muy pequeña Pequeño Mediana Grande Muy grande
Prefijo Clase .col- .col-sm- .col-md- .col-lg- .col-xl-
Ancho pantalla <576px >=576px >=768px >=992px >=1200px
Anteriormente, presentamos un ejemplo de grid con las clases para dispositivos pequeños y
medianos. Se han utilizado dos divs (columnas) y les dimos un 25% / 75% en dispositivos
pequeños y 50% / 50% en dispositivos medianos y un 33% y 66% en dispositivos grandes.
Pero en los dispositivos muy grandes el diseño puede ser mejor como una relación 20% / 80%.
Un dispositivo muy grande es aquel que su resolución es mayor a 1200 pixeles.
Para los dispositivos muy grandes usaremos las clases .col-xl-*:
El siguiente ejemplo se traducirá en un diseño 25% / 75% en dispositivos pequeños y 50% / 50%
en dispositivos medianas, 33% / 66% en grandes y de 20% / 80% en muy grandes. En los
dispositivos muy pequeños, se apilarán de forma automática (100% de ancho):
Código 241.html
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-4">....</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9" col-md-6 col-lg-4 col-xl-10>....</div>
2. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Grid Solo para muy Grandes
En el siguiente ejemplo, sólo se especifica la clase .col-xl-6 (sin .col-sm-*, col-sm-* y/o col-lg-
*). Esto significa que los dispositivos muy grandes se repartirán al 50% / 50%. Sin embargo, para
dispositivos grandes, medianos, pequeños y muy pequeños, se apilarán verticalmente (ancho
100%):
Código 242.html
Columnas de Diseño Automático
En Bootstrap 4, hay una manera fácil de crear columnas iguales de ancho para todos los
dispositivos: simplemente retire el número de .col-lg-* y sólo utilice la clase .col-lg en un número
específico de elementos col. Bootstrap reconocerá el número de columnas que hay, y cada
columna tendrá el mismo ancho. (Observe que aquí la clase lleva –lg- en las anteriores era –md- y
–sm-)
Si el tamaño de la pantalla es de menos de 992 px , las columnas se apilan horizontalmente:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 2 columnas: 50% de ancho en medianos y superior-->
<div class="row">
<div class="col-lg">1 de 2</div>
<div class="col-lg">2 de 2</div>
</div>
<!-- 4 columnas: 25% de ancho en medianos y superior -->
<div class="row">
<div class="col-lg">1 de 4</div>
<div class="col-lg">2 de 4</div>
<div class="col-lg">3 de 4</div>
<div class="col-lg">4 de 4</div>
</div>