{"id":10307,"date":"2018-01-18T07:08:12","date_gmt":"2018-01-18T07:08:12","guid":{"rendered":"https:\/\/www.templatemonster.com\/es\/blog\/?p=10307"},"modified":"2021-08-25T15:25:38","modified_gmt":"2021-08-25T15:25:38","slug":"bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/","title":{"rendered":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios"},"content":{"rendered":"<p>Todos conocemos Bootstrap, ya que es el marco web de c\u00f3digo abierto m\u00e1s popular. Mark Otto y Jacob Thorton lograron crear uno de los marcos de CSS m\u00e1s potentes de la web.<\/p>\n<p>Cuando se lanz\u00f3 Bootstrap 3, el cambio m\u00e1s interesante&nbsp;de la nueva versi\u00f3n fue la diferencia en el sistema de cuadr\u00edcula. Bootstrap 2 ten\u00eda dos tama\u00f1os del navegador diferentes (escritorio y dispositivos m\u00f3viles). Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador. Una tendencia similar se observa en la versi\u00f3n m\u00e1s reciente del marco - Alpha Release&nbsp;de Bootstrap 4.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>\n<h4>Bootstrap 2<\/h4>\n<\/td>\n<td>\n<h4>Bootstrap 3<\/h4>\n<\/td>\n<td>\n<h4>Bootstrap 4<\/h4>\n<\/td>\n<\/tr>\n<tr>\n<td>La cuadr\u00edcula que creas funciona en computadoras&nbsp;regulares y las columnas se apilan una encima de otra cuando el tama\u00f1o del navegador&nbsp;se vuelve&nbsp;menos de 767px. Es limitado, ya que solo puedes definir 1 cuadr\u00edcula&nbsp;para los&nbsp;navegadores de tama\u00f1o de escritorio. Te queda una cuadr\u00edcula apilada en dispositivos m\u00f3viles.<\/td>\n<td>El nuevo sistema de&nbsp;cuadr\u00edcula de Bootstrap se aplica primero al m\u00f3vil. Cuando&nbsp;determinas un tama\u00f1o de cuadr\u00edcula espec\u00edfico que es la cuadr\u00edcula para ese tama\u00f1o y m\u00e1s.<\/td>\n<td>La \u00faltima versi\u00f3n de Bootstrap ofrece&nbsp;el sistema de&nbsp;cuadr\u00edcula mejorado con un nuevo nivel que te permite dirigirte a los usuarios m\u00f3viles mejor que nunca. Adem\u00e1s, los mixins sem\u00e1nticos tambi\u00e9n han sido actualizados. A partir de ahora, puedes acceder a todos los mixins necesarios desde cualquier lugar.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<hr class=\"wp-block-separator\"\/>\n<h4>Ejemplo de columnas de Bootstrap 3<\/h4>\n<p>Esto puede ser un poco dif\u00edcil de entender al principio, as\u00ed que,&nbsp;te ofrecemos un ejemplo. Digamos que quieres crear un sitio que tenga:<\/p>\n<ul>\n<li>1 columna en dispositivos extra peque\u00f1os<\/li>\n<li>2 columnas en dispositivos peque\u00f1os Y medianos<\/li>\n<li>4 columnas en dispositivos grandes<\/li>\n<\/ul>\n<p>El sistema de&nbsp;cuadr\u00edcula ahora cae&nbsp;en cascada&nbsp;en los dispositivos m\u00f3viles.<\/p>\n<pre class=\"wp-block-code\"><code><div class=\"wp_syntax\">&lt;div class=\"row\"&gt;<br>&lt;div class=\"col-sm-6 col-lg-3\"&gt;<br>This is part of our grid.<br>&lt;\/div&gt;<br>&lt;div class=\"col-sm-6 col-lg-3\"&gt;<br>This is part of our grid.<br>&lt;\/div&gt;<br>&lt;div class=\"col-sm-6 col-lg-3\"&gt;<br>This is part of our grid.<br>&lt;\/div&gt;<br>&lt;div class=\"col-sm-6 col-lg-3\"&gt;<br>This is part of our grid.<br>&lt;\/div&gt;<\/div><\/code><\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/01\/grid.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"959\" height=\"123\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/01\/grid.jpg\" alt=\"\" class=\"wp-image-10729\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/01\/grid.jpg 959w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/01\/grid-300x38.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/01\/grid-768x99.jpg 768w\" sizes=\"(max-width: 959px) 100vw, 959px\" \/><\/a><\/figure>\n<\/div>\n<p>No tenemos que definir nada para dispositivos extra peque\u00f1os ya que el predeterminado es&nbsp;1 columna. Tenemos que definir&nbsp;el tama\u00f1o de cuadr\u00edcula para dispositivos peque\u00f1os, pero no para dispositivos medianos. Esto se debe a que la&nbsp;cuadr\u00edcula se cae en cascada. Entonces, si defines un tama\u00f1o en sm, entonces ser\u00e1 ese tama\u00f1o de cuadr\u00edcula para sm, md&nbsp;y lg. Explicaremos diferentes tama\u00f1os de cuadr\u00edcula y c\u00f3mo crear ellos y a continuaci\u00f3n mostraremos algunos ejemplos.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h3 class=\"aligncenter\">Tama\u00f1os de cuadr\u00edculas<\/h3>\n<p>Este es lo mejor&nbsp;en el nuevo sistema de cuadr\u00edculas. Realmente podr\u00edas hacer que tu sitio muestre una&nbsp;cuadr\u00edcula diferente en 4 tama\u00f1os diferentes de navegador. A continuaci\u00f3n se muestra el c\u00f3digo de&nbsp;diferentes tama\u00f1os.<\/p>\n<pre class=\"wp-block-code php\"><code>.col-xs-$\tExtra Small\tPhones Less than 768px\n<span class=\"sumo_twilighter_highlighted twilighter-218fab37\">.col-sm-$\tSmall Devices\tTablets 768px and Up\n.col-md-$\tMedium Devices\tDesktops 992px and Up<\/span>\n.col-lg-$\tLarge Devices\tLarge Desktops 1200px and Up<\/code><\/pre>\n<p>Los <a rel=\"noopener noreferrer nofollow\" href=\"http:\/\/getbootstrap.com\/css\/#grid\" target=\"_blank\">documentos oficiales de Bootstrap<\/a> ofrecen una comprensi\u00f3n mucho m\u00e1s completa de c\u00f3mo funciona la cuadr\u00edcula. Echa un vistazo a ellos para obtener una descripci\u00f3n m\u00e1s&nbsp;completa de los tama\u00f1os de columnas, tama\u00f1os de gutter, tama\u00f1os m\u00e1ximos de columna y el ancho m\u00e1ximo de tu sitio en general seg\u00fan el tama\u00f1o del navegador.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Tama\u00f1os predeterminados de&nbsp;cuadr\u00edcula de&nbsp;Bootstrap<\/h4>\n<p>A veces necesitar\u00e1s usar consultas de medios para que tu sitio&nbsp;funcione de la manera que te gustar\u00eda. Conocer los tama\u00f1os de cuadr\u00edcula predeterminados es esencial para extender la&nbsp;cuadr\u00edcula de Bootstrap. Hemos escrito una gu\u00eda corta para mostrarte los tama\u00f1os predeterminados, as\u00ed que echa un vistazo a la info a continuaci\u00f3n.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Puntos de interrupci\u00f3n de consultas de medios de Bootstrap 3<\/h4>\n<p>Bootstrap 3 es un marco de front-end m\u00f3vil. Hemos incluido el orden correcto para las consultas de medios a continuaci\u00f3n, pero tambi\u00e9n incluimos en la parte inferior los primeros puntos de interrupci\u00f3n no m\u00f3viles en caso de que algunas personas no est\u00e9n acostumbradas a la metodolog\u00eda de tecnolog\u00eda m\u00f3vil, ya que t\u00e9cnicamente ambas funcionar\u00e1n. <strong>Min-Width<\/strong>: se refiere a todo lo que sea mayor o igual a la cantidad determinada. <strong>Max-Width:<\/strong> se refiere a todo menos o igual a la cantidad determinada.<\/p>\n<pre class=\"wp-block-code\"><code>\/*==================================================\r\n=            Bootstrap 3 Media Queries             =\r\n==================================================*\/\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n\t\/*==========  Mobile First Method  ==========*\/\r\n&amp;nbsp;\r\n\t\/* Custom, iPhone Retina *\/\r\n\t@media only screen and (min-width : 320px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Extra Small Devices, Phones *\/\r\n\t@media only screen and (min-width : 480px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Small Devices, Tablets *\/\r\n\t@media only screen and (min-width : 768px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Medium Devices, Desktops *\/\r\n\t@media only screen and (min-width : 992px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Large Devices, Wide Screens *\/\r\n\t@media only screen and (min-width : 1200px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n&amp;nbsp;\r\n\t\/*==========  Non-Mobile First Method  ==========*\/\r\n&amp;nbsp;\r\n\t\/* Large Devices, Wide Screens *\/\r\n\t@media only screen and (max-width : 1200px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Medium Devices, Desktops *\/\r\n\t@media only screen and (max-width : 992px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Small Devices, Tablets *\/\r\n\t@media only screen and (max-width : 768px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Extra Small Devices, Phones *\/\r\n\t@media only screen and (max-width : 480px){\r\n&amp;nbsp;\r\n\t}\r\n&amp;nbsp;\r\n\t\/* Custom, iPhone Retina *\/\r\n\t@media only screen and (max-width : 320px){\r\n&amp;nbsp;\r\n\t}<\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Puntos de interrupci\u00f3n de consultas de medios de Bootstrap 2.3.2<\/h4>\n<pre class=\"wp-block-code\"><code>*=====================================================\r\n=            Bootstrap 2.3.2 Media Queries            =\r\n=====================================================*\/\r\n@media only screen and (max-width : 1200px){\r\n&amp;nbsp;\r\n}\r\n&amp;nbsp;\r\n@media only screen and (max-width : 979px){\r\n&amp;nbsp;\r\n}\r\n&amp;nbsp;\r\n@media only screen and (max-width : 767px){\r\n&amp;nbsp;\r\n}\r\n&amp;nbsp;\r\n@media only screen and (max-width : 480px){\r\n&amp;nbsp;\r\n}\r\n&amp;nbsp;\r\n@media only screen and (max-width : 320px){\r\n&amp;nbsp;\r\n}<\/code><\/pre>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Utilidades adaptables<\/h4>\n<p>Al igual que Bootstrap 2, Bootstrap 3 proporciona utilidades&nbsp;adaptables (responsive) para ocultar y mostrar elementos seg\u00fan el tama\u00f1o del navegador. Esto tambi\u00e9n nos ayudar\u00e1 a definir nuestro sistema de cuadr\u00edcula.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;table>\r\n&lt;tbody>\r\n&lt;tr>\r\n&lt;td class=\"code\">\r\n&lt;pre class=\"php\">.visible-xs\r\n.visible-sm\r\n.visible-md\r\n.visible-lg\r\n.hidden-xs\r\n.hidden-sm\r\n.hidden-md\r\n.hidden-lg&lt;\/pre>\r\n&lt;\/td>\r\n&lt;\/tr>\r\n&lt;\/tbody>\r\n&lt;\/table><\/code><\/pre>\n<p>Esto ayuda porque podemos mostrar ciertos elementos seg\u00fan el tama\u00f1o. En nuestros ejemplos de hoy, mostraremos una barra lateral adicional en los escritorios grandes.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h3 class=\"aligncenter\">Ejemplos<\/h3>\n<p>Aqu\u00ed hay algunos ejemplos de las cuadr\u00edculas que puedes crear. Analizaremos algunos sitios b\u00e1sicos que las personas podr\u00edan desear y mostraremos la facilidad de su creaci\u00f3n&nbsp;con la cuadr\u00edcula de Bootstrap 3.<\/p>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Sencillo: Gran escritorio vs m\u00f3vil<\/h4>\n<p>Supongamos que deseas que un sitio tenga <strong>1 columna<\/strong> en dispositivos extra peque\u00f1os (tel\u00e9fonos) y peque\u00f1os (tabletas), <strong>2 columnas<\/strong> en dispositivos medianos (escritorio mediano) y <strong>4 columnas<\/strong> en dispositivos grandes (escritorio).<\/p>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo para ese ejemplo:<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\n&lt;\/div>\n&lt;div class=\"col-md-6 col-lg-3\">\n&lt;div class=\"visible-lg text-success\">Large Devices!&lt;\/div>\n&lt;div class=\"visible-md text-warning\">Medium Devices!&lt;\/div>\n&lt;div class=\"visible-sm text-primary\">Small Devices!&lt;\/div>\n&lt;div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices&lt;\/div>\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"994\" height=\"587\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-1.jpg\" alt=\"\" class=\"wp-image-10631\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-1.jpg 994w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-1-300x177.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-1-768x454.jpg 768w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/a><\/figure>\n<\/div>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Intermedio: Mostrar columna extra en escritorios grandes<\/h4>\n<p>Este es un ejemplo interesante. Supongamos que tienes un sitio&nbsp;web con una barra lateral y una secci\u00f3n de contenido principal. Para dispositivos extra peque\u00f1os, deseas que tenga una columna con&nbsp; el contenido principal y con la barra lateral apilada debajo. Para dispositivos peque\u00f1os y medianos, queremos que la barra lateral y el contenido principal se coloquen uno al lado del otro. Ahora, para dispositivos grandes, queremos utilizar el espacio en dispositivos m\u00e1s grandes. Queremos a\u00e1dir una barra lateral adicional para mostrar a\u00fan m\u00e1s contenido. Cambiamos el tama\u00f1o del contenido principal para que abarque 6 columnas en dispositivos grandes para&nbsp;que haya espacio para nuestra segunda barra lateral. Esta es una gran manera de utilizar el espacio en escritorios m\u00e1s grandes. Y aqu\u00ed&nbsp;te mostramos el c\u00f3digo para hacerlo.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\n&lt;div class=\"col-sm-9 col-lg-6 text-danger\">\nI am the main content.\n&lt;\/div>\n&lt;div class=\"col-sm-3 text-warning\">\nI am the main sidebar.\n&lt;\/div>\n&lt;div class=\"col-lg-3 visible-lg text-success\">\nI am the secondary sidebar that only shows up on LARGE devices.\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1078\" height=\"173\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2.jpg\" alt=\"\" class=\"wp-image-10632\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2.jpg 1078w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2-300x48.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2-768x123.jpg 768w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-2-1024x164.jpg 1024w\" sizes=\"(max-width: 1078px) 100vw, 1078px\" \/><\/a><\/figure>\n<\/div>\n<hr class=\"wp-block-separator\"\/>\n<h4 class=\"aligncenter\">Avanzado: Cuadr\u00edcula diferente para cada tama\u00f1o<\/h4>\n<p>Este ser\u00e1 un ejemplo m\u00e1s complejo. Digamos que en ning\u00fan punto de nuestro sistema de&nbsp;cuadr\u00edcula queremos que se apilen todas nuestras columnas. Para dispositivos extra peque\u00f1os, queremos que haya 2 columnas. Para dispositivos peque\u00f1os - 3 columnas. Y para dispositivos medianos - 4 columnas. Para dispositivos grandes, queremos que haya 6 columnas (una adicional de las cuales se muestre s\u00f3lo en dispositivos grandes).<\/p>\n<p>Qu\u00e9 tarea...&nbsp;Echa un vistazo al c\u00f3digo.<\/p>\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\nI'm content!\n&lt;\/div>\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\nI'm content!\n&lt;\/div>\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\nI'm content!\n&lt;\/div>\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\nI'm content!\n&lt;\/div>\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">\nI'm content!\n&lt;\/div>\n&lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\">\nI'm content only visible on large devices!\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-3.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"988\" height=\"190\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-3.jpg\" alt=\"\" class=\"wp-image-10633\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-3.jpg 988w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-3-300x58.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/Bootstrap-3-768x148.jpg 768w\" sizes=\"(max-width: 988px) 100vw, 988px\" \/><\/a><\/figure>\n<\/div>\n<p>Puedes ver que a medida que el tama\u00f1o del navegador se reduce, las columnas comienzan a formarse. Adem\u00e1s, el contenido dentro de cada uno comenzar\u00e1 a apilarse.<\/p>\n<p>Puedes ver&nbsp;que es f\u00e1cil crear sitios complejos y din\u00e1micos con la cuadr\u00edcula de Bootstrap 3. Desde los sitios de 2 columnas m\u00f3viles hasta la ocultaci\u00f3n compleja y la visualizaci\u00f3n de elementos particulares en escritorios grandes, puedes construir cualquier tipo de sitio.&nbsp;Esperamos que estos ejemplos te dar\u00e1n una idea de la flexibilidad del nuevo sistema de cuadr\u00edcula y todas las grandes cosas que puedes crear.<\/p>\n<p>Fuente: \"<a rel=\"noopener noreferrer\" href=\"https:\/\/monsterspost.com\/bootstrap-3-grid-system-guide\/\" target=\"_blank\">Bootstrap 3: The Grid System and Media Queries<\/a>\" por&nbsp;Ahmed Faisal<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Todos conocemos Bootstrap, ya que es el marco web de c\u00f3digo abierto m\u00e1s popular. Mark Otto y Jacob Thorton lograron crear uno de los marcos de CSS m\u00e1s potentes de la web. Cuando se lanz\u00f3 Bootstrap 3, el cambio m\u00e1s interesante&nbsp;de la nueva versi\u00f3n fue la diferencia en el sistema de cuadr\u00edcula. Bootstrap 2 ten\u00eda [&hellip;]<\/p>\n","protected":false},"author":1334762,"featured_media":10638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[26,24],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios<\/title>\n<meta name=\"description\" content=\"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios\" \/>\n<meta property=\"og:description\" content=\"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterEspana\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-18T07:08:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T15:25:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/featured_image14.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Diane Parks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:site\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diane Parks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\"},\"author\":{\"name\":\"Diane Parks\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\"},\"headline\":\"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios\",\"datePublished\":\"2018-01-18T07:08:12+00:00\",\"dateModified\":\"2021-08-25T15:25:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\"},\"wordCount\":1236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"articleSection\":[\"Desarrollo web\",\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\",\"url\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\",\"name\":\"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#website\"},\"datePublished\":\"2018-01-18T07:08:12+00:00\",\"dateModified\":\"2021-08-25T15:25:38+00:00\",\"description\":\"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/es\/#website\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"name\":\"Blog de TemplateMonster\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\",\"name\":\"MonstersPost Espa\u00f1a\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonstersPost Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterEspana\",\"https:\/\/twitter.com\/TMonster_ES\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\",\"name\":\"Diane Parks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Diane Parks\"},\"description\":\"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!\",\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\"],\"url\":\"https:\/\/monsterspost.com\/es\/author\/diane\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios","description":"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/","og_locale":"es_ES","og_type":"article","og_title":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios","og_description":"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.","og_url":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/","og_site_name":"Blog de TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterEspana","article_author":"https:\/\/www.facebook.com\/profile.php?id=100004881674652","article_published_time":"2018-01-18T07:08:12+00:00","article_modified_time":"2021-08-25T15:25:38+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/05\/featured_image14.jpg","type":"image\/jpeg"}],"author":"Diane Parks","twitter_card":"summary_large_image","twitter_creator":"@TMonster_ES","twitter_site":"@TMonster_ES","twitter_misc":{"Escrito por":"Diane Parks","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/"},"author":{"name":"Diane Parks","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c"},"headline":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios","datePublished":"2018-01-18T07:08:12+00:00","dateModified":"2021-08-25T15:25:38+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/"},"wordCount":1236,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"articleSection":["Desarrollo web","Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/","url":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/","name":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/#website"},"datePublished":"2018-01-18T07:08:12+00:00","dateModified":"2021-08-25T15:25:38+00:00","description":"Con Bootstrap 3, ahora creas pensando primero en el m\u00f3vil, y el sistema de cuadr\u00edcula te permite crear diferentes cuadr\u00edculas basadas en el tama\u00f1o del navegador.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/es\/bootstrap-3-sistema-de-cuadricula-y-consultas-de-medios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/es\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3: sistema de cuadr\u00edcula y consultas de medios"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/es\/#website","url":"https:\/\/monsterspost.com\/es\/","name":"Blog de TemplateMonster","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/es\/#organization","name":"MonstersPost Espa\u00f1a","url":"https:\/\/monsterspost.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonstersPost Espa\u00f1a"},"image":{"@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterEspana","https:\/\/twitter.com\/TMonster_ES"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c","name":"Diane Parks","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Diane Parks"},"description":"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!","sameAs":["https:\/\/www.facebook.com\/profile.php?id=100004881674652"],"url":"https:\/\/monsterspost.com\/es\/author\/diane\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10307"}],"collection":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/users\/1334762"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/comments?post=10307"}],"version-history":[{"count":5,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10307\/revisions"}],"predecessor-version":[{"id":24340,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10307\/revisions\/24340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media\/10638"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media?parent=10307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/categories?post=10307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/tags?post=10307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}