{"id":2967,"date":"2020-11-13T13:00:00","date_gmt":"2020-11-13T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=2967"},"modified":"2021-09-23T11:15:24","modified_gmt":"2021-09-23T09:15:24","slug":"bootstrap-como-instalar","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/","title":{"rendered":"Bootstrap, c\u00f3mo instalar"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Bootstrap?<\/h2>\n\n\n\n<p>En este art\u00edculo te explicaremos lo m\u00e1s b\u00e1sico sobre Bootstrap c\u00f3mo instalarlo, qu\u00e9 es, cuales son sus ventajas&#8230;<\/p>\n\n\n\n<p>Bootstrap es un<strong> <em>framework <\/em>para la creaci\u00f3n de p\u00e1ginas web<\/strong>. Se trata de unas herramientas predefinidas de c\u00f3digo abierto para facilitar el dise\u00f1o web. Se basa en <strong>estilos de CSS ya predefinidos<\/strong> a los que se les llama con determinadas clases desde el HTML. Tambi\u00e9n incluye alguna funcionalidad cubierta por JavaScript, bajo el <em>framework <\/em>jQuery.<\/p>\n\n\n\n<p>Actualmente se encuentra en su versi\u00f3n 4.5.3 que puedes encontrar en la p\u00e1gina <a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">getbootstrap.com<\/a>.<\/p>\n\n\n\n<div class=\"text-center\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"512\" height=\"430\" class=\"img-fluid mb-3 mb-md-0\" viewBox=\"0 0 1024 860\" focusable=\"false\" role=\"img\"><title>Bootstrap<\/title><defs><linearGradient id=\"c\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#5c24ae\"><\/stop><stop offset=\"100%\" stop-color=\"#30135a\"><\/stop><\/linearGradient><path id=\"b\" d=\"M355.967 242.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z\"><\/path><filter id=\"a\" width=\"108%\" height=\"112%\" x=\"-4%\" y=\"-4.3%\" filterUnits=\"objectBoundingBox\"><feOffset dy=\"10\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"><\/feOffset><feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"10\"><\/feGaussianBlur><feColorMatrix in=\"shadowBlurOuter1\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"><\/feColorMatrix><\/filter><linearGradient id=\"f\" x1=\"50%\" x2=\"50%\" y1=\"-17.303%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#7331d4\"><\/stop><stop offset=\"100%\" stop-color=\"#461b84\"><\/stop><\/linearGradient><path id=\"e\" d=\"M355.967 132.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z\"><\/path><filter id=\"d\" width=\"108%\" height=\"112%\" x=\"-4%\" y=\"-4.3%\" filterUnits=\"objectBoundingBox\"><feOffset dy=\"10\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"><\/feOffset><feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"10\"><\/feGaussianBlur><feColorMatrix in=\"shadowBlurOuter1\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"><\/feColorMatrix><\/filter><linearGradient id=\"i\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#905bdd\"><\/stop><stop offset=\"100%\" stop-color=\"#5521a0\"><\/stop><\/linearGradient><path id=\"h\" d=\"M355.967 22.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z\"><\/path><filter id=\"g\" width=\"108%\" height=\"112%\" x=\"-4%\" y=\"-4.3%\" filterUnits=\"objectBoundingBox\"><feOffset dy=\"10\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"><\/feOffset><feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"10\"><\/feGaussianBlur><feColorMatrix in=\"shadowBlurOuter1\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"><\/feColorMatrix><\/filter><\/defs><g fill=\"none\"><g transform=\"translate(75 23)\"><use fill=\"#000\" filter=\"url(#a)\" xlink:href=\"#b\"><\/use><use fill=\"url(#c)\" xlink:href=\"#b\"><\/use><\/g><g transform=\"translate(75 23)\"><use fill=\"#000\" filter=\"url(#d)\" xlink:href=\"#e\"><\/use><use fill=\"url(#f)\" xlink:href=\"#e\"><\/use><\/g><g transform=\"translate(75 23)\"><use fill=\"#000\" filter=\"url(#g)\" xlink:href=\"#h\"><\/use><use fill=\"url(#i)\" xlink:href=\"#h\"><\/use><\/g><path fill=\"#fff\" d=\"M558.273 447.667L308.036 279.5l97.982-65.847c42.83-28.784 96.789-31.483 134.245-6.311 26.044 17.502 31.214 46.615 11.444 65.724l1.389.934c38.324-19.932 84.107-18.527 117.396 3.845 44.046 29.6 38.671 68.419-14.561 104.193l-97.658 65.629zM447.112 331.01l49.942-33.562c36.935-24.822 42.31-48.249 15.224-66.451-24.798-16.665-55.49-14.453-85.851 5.95l-59.641 40.081 80.326 53.982zm176.532 35.663c37.63-25.289 42.136-48.832 13.203-68.276-28.932-19.444-64.163-15.614-104.042 11.186l-58.789 39.508 87.92 59.084 61.708-41.502z\"><\/path><\/g><\/svg><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 usar Bootstrap?<\/h2>\n\n\n\n<p>Al fin y al cabo es solo CSS con algo de JavaScript. Desde luego podemos hacer una programaci\u00f3n a medida, como siempre. Pero la gran ventaja de Bootstrap es que, tan solo asignando ciertas clases, tendremos un control r\u00e1pido y sencillo sobre las diferentes <strong>resoluciones de pantalla<\/strong>. Es decir, nos facilita mucho la creaci\u00f3n de un <strong>sitio web <em>responsive<\/em><\/strong>.<\/p>\n\n\n\n<p>No solo eso, Bootstrap 4 sigue la filosof\u00eda <strong>Mobile First<\/strong>, lo que a ojos del SEO es lo ideal.<\/p>\n\n\n\n<p>Bootstrap hace uso de unas clases ya definidas en diferentes <em>media queries<\/em>. Por ejemplo, al asignar a un bot\u00f3n la clase \u00abd-none d-md-block\u00bb, estoy haciendo que ese elemento se oculte en m\u00f3vil, mientras que en dispositivos medianos y grandes se muestre como un bloque. \u00a1Todo sin salir del HTML!<\/p>\n\n\n\n<p>Otra gran ventaja es su sistema de columnas, que hace muy f\u00e1cil maquetar y ordenar los elementos en la p\u00e1gina. Funciona bajo una plantilla de doce columnas, de manera que le podemos indicar cu\u00e1nta anchura (en columnas) tendr\u00e1 un elemento.<\/p>\n\n\n\n<p>Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"col-4\">Lorem1&lt;\/div>\n&lt;div class=\"col-4\">Lorem2&lt;\/div>\n&lt;div class=\"col-4\">Lorem3&lt;\/div><\/code><\/pre>\n\n\n\n<p>Con esto habremos creado tres divs de la misma anchura, que, todos ellos, ocupar\u00e1n todo el ancho permitido (4+4+4=12).<\/p>\n\n\n\n<p>Esto, sumado a lo que ve\u00edamos del dise\u00f1o <em>responsive<\/em>, nos da un control exhaustivo sobre c\u00f3mo se ve la web:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"col-12 col-sm-6 col-md-4\">Lorem1&lt;\/div>\n&lt;div class=\"col-12 col-sm-6 col-md-4\">Lorem2&lt;\/div>\n&lt;div class=\"col-12 col-md-4\">Lorem3&lt;\/div><\/code><\/pre>\n\n\n\n<p>Aqu\u00ed estamos creando, tambi\u00e9n, 3 divs, que en m\u00f3vil ocupar\u00e1n todo el ancho de la pantalla; en pantallas un poco m\u00e1s grandes, los dos primeros, se repartir\u00e1n toda la anchura, mientras que el 3\u00ba ocupar\u00e1, todav\u00eda, todo el ancho; de pantallas medianas para arriba, se comportar\u00e1n como tres columnas iguales, ocupando el 33% del espacio disponible.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"359\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/bootstrap-responsive-1024x359.png\" alt=\"Bootstrap: Webs responsive de manera sencilla\" class=\"wp-image-2979\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/bootstrap-responsive-1024x359.png 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/bootstrap-responsive-300x105.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/bootstrap-responsive-768x269.png 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/bootstrap-responsive.png 1424w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo instalar Bootrstrap<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 1: CDN<\/h3>\n\n\n\n<p>La forma m\u00e1s<strong> sencilla e inmediata<\/strong> de usar Bootstrap es<strong> a trav\u00e9s de CDN<\/strong> (Content Delivery Network). Se trata de una red de distribuci\u00f3n de contenidos, es decir, los archivos est\u00e1n alojados en un servidor ajeno.<\/p>\n\n\n\n<p>Para empezar a usar Bootstrap debemos insertar una llamada como esta en el <em>head <\/em>de nuestro HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\"><\/code><\/pre>\n\n\n\n<p>Muchas funcionalidades de Bootstrap funcionan bajo jQuery, por lo que deber\u00edamos, tambi\u00e9n, a\u00f1adir el archivo js despu\u00e9s de cargar jQuery, antes del cierre del <em>body<\/em>. Algo as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\">&lt;\/script>\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 2: Descargar archivos en tu servidor<\/h3>\n\n\n\n<p>Otra forma es <strong>descargar los archivos<\/strong> que componen Bootstrap desde su web y subirlas en tu servidor. De esa manera tienes un control m\u00e1s local sobre estos elementos, sin hacer llamadas externas.<\/p>\n\n\n\n<p>En el c\u00f3digo tienes que hacer las mismas llamadas que a trav\u00e9s de CDN, pero esta vez usando las rutas de tu propia web:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/mipaginaweb.es\/css\/bootstrap.min.css\"><\/code><\/pre>\n\n\n\n<p>Y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/mipaginaweb.es\/js\/jquery-3.5.1.slim.min.js\">&lt;\/script>\n&lt;script src=\"https:\/\/mipaginaweb.es\/js\/bootstrap.bundle.min.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>Puedes descargar los archivos de Bootstrap desde su p\u00e1gina web pinchando <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/getting-started\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 3: Compilar tu propio Bootstrap<\/h3>\n\n\n\n<p>Bootstrap funciona de forma modular, y permite que, si eres un desarrollador avanzado, puedas <strong>seleccionar \u00fanicamente los componentes que vayas a usar <\/strong>en tu proyecto y configures un <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/getting-started\/theming\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap a medida<\/a>. De esta manera tendr\u00e1s una <strong>edici\u00f3n personalizada de Bootstrap<\/strong>, ocupando un m\u00ednimo de espacio y optimizando los recursos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Bootrstap da toda una serie de facilidades para trabajar con \u00e9l. Desde el primer momento, con una llamada al CDN, puedes empezar a trabajar con sus elementos de manera f\u00e1cil y sencilla. Bootstrap es un framework que <strong>agilizar\u00e1 mucho la creaci\u00f3n de p\u00e1ginas web<\/strong> y sus adaptaciones de m\u00f3vil a ordenador.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfConoces el este framework? Te explicamos c\u00f3mo instalar Bootstrap. Te facilitar\u00e1 la creaci\u00f3n de tu web y, a base de elementos pre-creados, podr\u00e1s tener, en tiempo r\u00e9cord, tu web lista. \u00a1Es muy f\u00e1cil! Te explicamos tres maneras diferentes de instalarlo en tu proyecto web.<\/p>\n","protected":false},"author":2,"featured_media":2996,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,50],"tags":[],"class_list":["post-2967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria<\/title>\n<meta name=\"description\" content=\"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria\" \/>\n<meta property=\"og:description\" content=\"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-13T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-23T09:15:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alberto Bravo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alberto Bravo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/\"},\"author\":{\"name\":\"Alberto Bravo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\"},\"headline\":\"Bootstrap, c\u00f3mo instalar\",\"datePublished\":\"2020-11-13T12:00:00+00:00\",\"dateModified\":\"2021-09-23T09:15:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/\"},\"wordCount\":679,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/como-instalar-bootstrap.jpg\",\"articleSection\":[\"Dise\u00f1o web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/\",\"name\":\"Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/como-instalar-bootstrap.jpg\",\"datePublished\":\"2020-11-13T12:00:00+00:00\",\"dateModified\":\"2021-09-23T09:15:24+00:00\",\"description\":\"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/como-instalar-bootstrap.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/como-instalar-bootstrap.jpg\",\"width\":1250,\"height\":737,\"caption\":\"C\u00f3mo instalar bootstrap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/bootstrap-como-instalar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap, c\u00f3mo instalar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\",\"name\":\"Alberto Bravo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"caption\":\"Alberto Bravo\"},\"sameAs\":[\"http:\\\/\\\/albertobravoart.com\",\"https:\\\/\\\/www.instagram.com\\\/albertobravoart\\\/\",\"https:\\\/\\\/es.linkedin.com\\\/in\\\/albertobravobarreiro\",\"https:\\\/\\\/www.youtube.com\\\/@albertobravoart224\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/alberto\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria","description":"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.","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:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/","og_locale":"es_ES","og_type":"article","og_title":"Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria","og_description":"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.","og_url":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2020-11-13T12:00:00+00:00","article_modified_time":"2021-09-23T09:15:24+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg","type":"image\/jpeg"}],"author":"Alberto Bravo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Alberto Bravo","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/"},"author":{"name":"Alberto Bravo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350"},"headline":"Bootstrap, c\u00f3mo instalar","datePublished":"2020-11-13T12:00:00+00:00","dateModified":"2021-09-23T09:15:24+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/"},"wordCount":679,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg","articleSection":["Dise\u00f1o web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/","url":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/","name":"Bootstrap, c\u00f3mo instalar - Caronte Web Studio Vitoria","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg","datePublished":"2020-11-13T12:00:00+00:00","dateModified":"2021-09-23T09:15:24+00:00","description":"Te explicamos tres maneras diferentes de c\u00f3mo instalar Bootstrap para tu p\u00e1gina web. Desde la manera m\u00e1s sencilla a la m\u00e1s profesional.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/como-instalar-bootstrap.jpg","width":1250,"height":737,"caption":"C\u00f3mo instalar bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap, c\u00f3mo instalar"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350","name":"Alberto Bravo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","caption":"Alberto Bravo"},"sameAs":["http:\/\/albertobravoart.com","https:\/\/www.instagram.com\/albertobravoart\/","https:\/\/es.linkedin.com\/in\/albertobravobarreiro","https:\/\/www.youtube.com\/@albertobravoart224"],"url":"https:\/\/carontestudio.com\/blog\/author\/alberto\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/2967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=2967"}],"version-history":[{"count":7,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/2967\/revisions"}],"predecessor-version":[{"id":2998,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/2967\/revisions\/2998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/2996"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}