{"id":6828,"date":"2017-02-09T09:38:10","date_gmt":"2017-02-09T09:38:10","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6828"},"modified":"2019-06-19T08:47:47","modified_gmt":"2019-06-19T08:47:47","slug":"la-rejilla-grid-bootstrap","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/","title":{"rendered":"La rejilla (grid) Bootstrap"},"content":{"rendered":"<p><strong>Bootstrap<\/strong> incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de <strong>12 columnas<\/strong> y tiene varios niveles.<\/p>\n<p>El sistema de cuadr\u00edcula de <strong>Bootstrap<\/strong> utiliza una serie de contenedores, filas y columnas para dise\u00f1ar y alinear el contenido.<\/p>\n<p>En este art\u00edculo queremos demostrar alg\u00fan ejemplo e informar de las principales funciones o ventajas de usar esta rejilla.<\/p>\n<h2>Principales funciones:<\/h2>\n<ul>\n<li>Los contenedores proporcionan un medio para centrar el contenido de de una p\u00e1gina Web. Se puede usar la clase CSS <em>.container<\/em> para establecer un ancho fijo o <em>.container-fluid<\/em> para establecer un ancho completo, es decir, ocupando toda la pantalla.<\/li>\n<li>Las filas son grupos horizontales de columnas donde se aseguran que sus columnas est\u00e9n alineadas correctamente. Utiliza el m\u00e9todo de margen negativo en <em>.row<\/em> para asegurar que todo el contenido est\u00e9 alineado correctamente por el lado izquierdo.<\/li>\n<li>El contenido debe colocarse dentro de las columnas, y s\u00f3lo las columnas pueden ser hijos inmediatos de las filas.<\/li>\n<li>Las columnas de la cuadr\u00edcula sin un ancho establecido, autom\u00e1ticamente se muestran con anchos iguales. Por ejemplo, cuatro instancias de .col-sm ser\u00e1n autom\u00e1ticamente un 25% de ancho.<\/li>\n<li>Las clases de columna indican el n\u00famero de columnas que se desea utilizar de las 12 posibles por fila. Por tanto, si deseas tres columnas de igual ancho, puede utilizar .col-sm-4.<\/li>\n<li>Los anchos de columna se establecen en porcentajes, esto significa que siempre son fluidos y dimensionados en relaci\u00f3n con su elemento principal.<\/li>\n<li>Hay cinco niveles de rejilla, uno para cada punto de interrupci\u00f3n sensible: todos los puntos de interrupci\u00f3n (extra peque\u00f1o), peque\u00f1o, medio, grande y extra grande.<\/li>\n<li>Los niveles de la grilla se basan en anchos m\u00ednimos, lo que significa que se aplican a ese nivel y todos los que est\u00e1n por encima (por ejemplo, .col-sm-4 se aplican a dispositivos peque\u00f1os, medianos, grandes y extra grandes).<\/li>\n<li>Puedes utilizar clases de cuadr\u00edcula predefinidas o mezclas Sass para obtener m\u00e1s marcado sem\u00e1ntico.<\/li>\n<\/ul>\n<h2>Opciones de la rejilla<\/h2>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-table.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6829\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-table.png\" alt=\"\" width=\"791\" height=\"485\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-table.png 791w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-table-300x184.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-table-768x471.png 768w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/a><\/p>\n<p>Quiz\u00e1s te pueda resultar m\u00e1s interesante conocer todo esto con ejemplos o de forma visual. F\u00edjate bien en la siguiente foto:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6830\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid.png\" alt=\"\" width=\"1248\" height=\"664\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid.png 1248w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid-300x160.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid-768x409.png 768w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/bootstrap-grid-1024x545.png 1024w\" sizes=\"auto, (max-width: 1248px) 100vw, 1248px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/bootstrap\/tutorial\/grid\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver ejemplo en linea<\/a><\/p>\n<p>Dispones de otras opciones para manipular los contenedores:<\/p>\n<p><strong>Push and pull<\/strong><\/p>\n<p>Esta opci\u00f3n permite cambiar f\u00e1cilmente el orden de las columnas de la cuadr\u00edcula incorporando las clases de modificaci\u00f3n <em>.push-md- *<\/em> y <em>.pull-md- *<\/em>.<\/p>\n<p><strong>Anidamiento<\/strong><\/p>\n<p>Para anidar el contenido con la cuadr\u00edcula predeterminada, puedes agregar un nuevo contenedor con<em> .row<\/em> y un conjunto de columnas <em>.col-sm- *<\/em> dentro de una columna <em>.col-sm- *<\/em> existente. Las filas anidadas deben incluir un conjunto de columnas que suman 12 o menos (no es necesario que utilice las 12 columnas disponibles).<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver m\u00e1s documentaci\u00f3n<\/a><\/p>\n<p>Quiz\u00e1 te pueda resultar un sistema un poco limitado pero con esta rejilla de <strong>Bootstrap<\/strong> se pueden hacer muchos dise\u00f1os de forma f\u00e1cil y adaptables a todos los dispositivos. De hecho, esta es una de las claves de su \u00e9xito para continuar siendo una de las tecnolog\u00edas m\u00e1s utilizadas.<\/p>\n<p>An\u00edmate y env\u00edanos un comentario respondiendo a nuestra pregunta. \u00bfTe parece <strong>Bootstrap<\/strong> una herramienta que tiene futuro? \u00bfO conoces alguna que la suplantar\u00e1?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.<\/p>\n","protected":false},"author":1,"featured_media":7331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-6828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>La rejilla (grid) Bootstrap - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La rejilla (grid) Bootstrap - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-09T09:38:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-19T08:47:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/\",\"name\":\"La rejilla (grid) Bootstrap - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png\",\"datePublished\":\"2017-02-09T09:38:10+00:00\",\"dateModified\":\"2019-06-19T08:47:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"La rejilla (grid) Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La rejilla (grid) Bootstrap - Jose Aguilar Blog","description":"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"La rejilla (grid) Bootstrap - Jose Aguilar Blog","og_description":"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2017-02-09T09:38:10+00:00","article_modified_time":"2019-06-19T08:47:47+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/","url":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/","name":"La rejilla (grid) Bootstrap - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png","datePublished":"2017-02-09T09:38:10+00:00","dateModified":"2019-06-19T08:47:47+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Bootstrap incluye un potente sistema de rejilla (grid) para la construcci\u00f3n de dise\u00f1os de todas las formas y tama\u00f1os. Se basa en un dise\u00f1o de 12 columnas y tiene varios niveles.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2017\/02\/la-rejilla-grid-bootstrap.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/la-rejilla-grid-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"La rejilla (grid) Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6828"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7331"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}