{"id":6263,"date":"2014-05-10T13:24:47","date_gmt":"2014-05-10T13:24:47","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6263"},"modified":"2019-03-02T09:13:42","modified_gmt":"2019-03-02T09:13:42","slug":"maquetacion-web-con-bootstrap-responsive-design","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/","title":{"rendered":"Maquetaci\u00f3n Web con bootstrap Responsive Design"},"content":{"rendered":"<p>Bootstrap es un framework desarrollado por Twitter que simplifica el proceso de creaci\u00f3n de dise\u00f1os Webs combinado con CSS y Javascript. Si eres un programador que no tiene mucho estilo para el dise\u00f1o, Bootstrap Twitter podr\u00eda ser tu framework para no tocar ni una linea de c\u00f3digo CSS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6330\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap_logo.png\" alt=\"bootstrap_logo\" width=\"800\" height=\"172\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap_logo.png 800w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap_logo-300x64.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Una de las principales ventajas de este framework es que podemos crear interfaces que se adapten a los distintos navegadores y dispositvos. No te tienes que romper la cabeza en ver que sucede con una maquetaci\u00f3n propia en los navegadores conflictivos como Internet Explorer 8 ni te tienes que preocupar siquiera de la maquetaci\u00f3n en responsive porque ya viene predise\u00f1ada. Adem\u00e1s, presenta una interfaz bastante agradable para la vista.<\/p>\n<h2>Caracter\u00edsticas principales<\/h2>\n<ul>\n<li>Uso de responsive web design.<\/li>\n<li>Uso de est\u00e1ndares HTML5 y CSS3.<\/li>\n<li>Sistema de grillas con 12 columnas.<\/li>\n<li>Integraci\u00f3n f\u00e1cil con librer\u00edas como jQuery.<\/li>\n<li>Utilizaci\u00f3n de Less &#8211; el lenguage de hojas de estilo din\u00e1mico.<\/li>\n<\/ul>\n<p>La caracter\u00edsticas m\u00e1s especial y que es realmente necesario entender es su sistema de grillas o ret\u00edcula fluida pensada para m\u00f3viles y que cumple con el dise\u00f1o Web responsive. Esta ret\u00edcula crece hasta 12 columnas a medida que crece el tama\u00f1o de la pantalla del dispositivo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6332\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/boopstrap-responsive.jpg\" alt=\"boopstrap-responsive\" width=\"500\" height=\"375\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/boopstrap-responsive.jpg 500w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/boopstrap-responsive-300x225.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>El sitema de grillas est\u00e1 basado en filas y columnas donde las columnas van a ser vitales para el dise\u00f1o Web responsive con media queries.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/bootstrap\/3.1.1\/grids.php\" target=\"_blank\" rel=\"noopener noreferrer\">Ver demostraci\u00f3n del sistema de grillas<\/a><\/p>\n<p>Ver m\u00e1s documentaci\u00f3n en espa\u00f1ol para empezar a trabajar con Bootstrap<\/p>\n<p><a href=\"http:\/\/getbootstrap.com\/getting-started\/\" target=\"_blank\" rel=\"noopener noreferrer\">Descargar \u00faltima versi\u00f3n de Bootstrap<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap es un framework desarrollado por Twitter que simplifica el proceso de creaci\u00f3n de dise\u00f1os Webs combinado con CSS y Javascript. Si eres un programador que no tiene mucho estilo para el dise\u00f1o, Bootstrap Twitter podr\u00eda ser tu framework para no tocar ni una linea de c\u00f3digo CSS. Una de las principales ventajas de este [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12],"tags":[163,166],"class_list":["post-6263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","tag-bootstrap","tag-framework"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog<\/title>\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=\"Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Bootstrap es un framework desarrollado por Twitter que simplifica el proceso de creaci\u00f3n de dise\u00f1os Webs combinado con CSS y Javascript. Si eres un programador que no tiene mucho estilo para el dise\u00f1o, Bootstrap Twitter podr\u00eda ser tu framework para no tocar ni una linea de c\u00f3digo CSS. Una de las principales ventajas de este [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/\" \/>\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=\"2014-05-10T13:24:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:13:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"650\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\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=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/\",\"name\":\"Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png\",\"datePublished\":\"2014-05-10T13:24:47+00:00\",\"dateModified\":\"2019-03-02T09:13:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png\",\"width\":650,\"height\":650},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maquetaci\u00f3n Web con bootstrap Responsive Design\"}]},{\"@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":"Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog","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":"Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog","og_description":"Bootstrap es un framework desarrollado por Twitter que simplifica el proceso de creaci\u00f3n de dise\u00f1os Webs combinado con CSS y Javascript. Si eres un programador que no tiene mucho estilo para el dise\u00f1o, Bootstrap Twitter podr\u00eda ser tu framework para no tocar ni una linea de c\u00f3digo CSS. Una de las principales ventajas de este [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-05-10T13:24:47+00:00","article_modified_time":"2019-03-02T09:13:42+00:00","og_image":[{"width":650,"height":650,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/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":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/","url":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/","name":"Maquetaci\u00f3n Web con bootstrap Responsive Design - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png","datePublished":"2014-05-10T13:24:47+00:00","dateModified":"2019-03-02T09:13:42+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/05\/bootstrap.png","width":650,"height":650},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/maquetacion-web-con-bootstrap-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Maquetaci\u00f3n Web con bootstrap Responsive Design"}]},{"@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\/6263","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=6263"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6263\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6331"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}