{"id":4294,"date":"2021-11-17T13:07:25","date_gmt":"2021-11-17T12:07:25","guid":{"rendered":"https:\/\/www.sortlist.es\/blog\/?p=4294"},"modified":"2021-11-28T15:26:33","modified_gmt":"2021-11-28T14:26:33","slug":"que-es-bootstrap","status":"publish","type":"post","link":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/","title":{"rendered":"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira"},"content":{"rendered":"\n<p>La calidad de un buen sitio web, o de una aplicaci\u00f3n m\u00f3vil, depende de <strong>diferentes elementos<\/strong> como el dise\u00f1o, la calidad de los contenidos y la velocidad de carga. En este art\u00edculo, te explicamos qu\u00e9 es Bootstrap, uno de los Frameworks CSS m\u00e1s populares para crear <strong>sitios web <\/strong><em><strong>responsive<\/strong><\/em> (adaptables) y brindar una experiencia de usuario inolvidable para tus visitantes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Bootstrap?<\/h2>\n\n\n\n<p>Vi\u00e9ndolo de una manera muy sencilla y coloquial podr\u00edamos decir que <strong>Bootstrap <\/strong>es un banco de c\u00f3digos HTML, CSS y JavaScript disponible para cualquier persona interesada en desarrollar sitios web y aplicaciones m\u00f3viles.<\/p>\n\n\n\n<p>Esta herramienta fue dise\u00f1ada en el a\u00f1o 2010 por Mark Otto y Jacob Thornton para Twitter. Un a\u00f1o m\u00e1s tarde se public\u00f3 como un \u00abopen source framework\u00bb en GitHub de manera que estuviera disponible para todos.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/Bootstrap_logo.svg\" alt=\"Entendiendo qu\u00e9 es Bootstrap\" width=\"252\" height=\"201\"\/><\/figure><\/div>\n\n\n\n<p>Una de las grandes ventajas de Bootstrap, especialmente para programadores y equipos de <a href=\"https:\/\/www.sortlist.es\/desarrollo-web\" target=\"_blank\" rel=\"noreferrer noopener\">desarrollo web<\/a>, es que les ayuda a <strong>reducir el tiempo<\/strong> que dedican a escribir l\u00edneas de c\u00f3digo y les permite dedicarse as\u00ed a crear aplicaciones y p\u00e1ginas mucho m\u00e1s din\u00e1micas, interesantes y pensadas en la experiencia del usuario.<\/p>\n\n\n\n<p>Adicionalmente, Bootstrap es un framework de desarrollo frontend que permite producir sitios web totalmente adaptables a dispositivos, tales como tel\u00e9fonos m\u00f3viles, tabletas y otros, de una manera muy sencilla y r\u00e1pida.<\/p>\n\n\n\n<p>La mejor noticia que te podemos dar es que Bootstrap, al ser un proyecto de c\u00f3digo abierto, es <strong>totalmente gratis<\/strong>. No hay tarifas asociadas a su descarga o uso y puedes obtenerlo haciendo clic en este <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">enlace<\/a>. Sin embargo, es importante dejar claro que existen paquetes de <a href=\"https:\/\/themes.getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">plantillas premium<\/a> para aquellos interesados en hacer una p\u00e1gina web un poco m\u00e1s sofisticada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entendiendo para qu\u00e9 sirve Bootstrap<\/h2>\n\n\n\n<p>Desde el primer momento en que este proyecto estuvo disponible para el p\u00fablico general gan\u00f3 mucha popularidad. Y es como dijimos m\u00e1s arriba, ofrece una serie de beneficios que permiten ahorrar mucho tiempo cuando de desarrollo web se trata.<\/p>\n\n\n\n<p>Por ejemplo, uno de sus principales usos es permitir que tu p\u00e1gina web <strong>se adapte al tama\u00f1o del dispositivo en donde est\u00e1 siendo presentada<\/strong>. Para lograr esto Bootstrap trabaja con la estilizaci\u00f3n del elemento <em>&lt; div &gt;<\/em> y el uso de <em>class containers<\/em>. El primero permite crear notas que dan la estructura adaptable a la p\u00e1gina y el segundo determina las dimensiones apropiadas para los elementos insertados.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.surferseo.art\/4c6308fd-121d-4949-992f-490a37c7dc6d.png\" alt=\"Funciones de Bootstrap en el dise\u00f1o web\" width=\"891\" height=\"181\"\/><\/figure><\/div>\n\n\n\n<p>Adem\u00e1s cuenta con una serie de componentes que te van a ayudar a mejorar la comunicaci\u00f3n e interacci\u00f3n con los visitantes que acudan a tu sitio web. Puedes estar seguro de que todos y cada uno de los elementos que agregues van a ser <strong>totalmente adaptables<\/strong> a cualquier pantalla donde sean presentados.<\/p>\n\n\n\n<p>Algunas de las opciones disponibles, incluso a trav\u00e9s de JQuery para los que trabajen con JavaScript, son:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Mensajes de alerta<\/strong> para captar la atenci\u00f3n del visitante.<\/li><li><strong>Carrusel de diapositivas<\/strong> o im\u00e1genes con efectos especiales de transici\u00f3n y controles de visualizaci\u00f3n.<\/li><li><strong>Barra de navegaci\u00f3n<\/strong> con diferentes opciones de ubicaci\u00f3n, visualizaci\u00f3n y dem\u00e1s configuraciones.<\/li><li><strong>Men\u00fa desplegable<\/strong> para presentar diferentes opciones a los visitantes de tu sitio web.<\/li><li><strong>Barra de progreso<\/strong> para que el visitante entienda qu\u00e9 tan avanzado est\u00e1.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.surferseo.art\/41437065-6c5e-4373-a2ba-ed5d433dd5c9.png\" alt=\"Componentes de Bootstrap y para qu\u00e9 sirven\" width=\"750\" height=\"450\"\/><\/figure><\/div>\n\n\n\n<p>Bootstrap cuenta tambi\u00e9n con <strong>amplia documentaci\u00f3n<\/strong> de respaldo. All\u00ed podr\u00e1s conseguir las descripciones y explicaci\u00f3n de cada uno de los c\u00f3digos que ofrecen, as\u00ed como ejemplos para su correcta implementaci\u00f3n.<\/p>\n\n\n\n<p>En caso de que a\u00fan no sean suficientes razones para convencerte de usar Bootstrap, debemos se\u00f1alar que viene cargado con una serie de plantillas de <strong><a href=\"https:\/\/www.sortlist.es\/blog\/que-es-diseno-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">dise\u00f1o web<\/a><\/strong> que te ayudan a ahorrar tiempo en el proceso de creaci\u00f3n de una nueva cada vez que vayas a dise\u00f1ar una p\u00e1gina. Todas estas plantillas son editables para ajustarse a tus necesidades o las de tu cliente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo utilizar correctamente Bootstrap<\/h2>\n\n\n\n<p>Ahora, para poder sacar el mayor provecho de Bootstrap, lo primero que debes hacer es entender <strong>c\u00f3mo usarlo<\/strong>. A continuaci\u00f3n compartimos algunas recomendaciones que te van a ayudar a hacer de este un camino m\u00e1s sencillo y f\u00e1cil de transitar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1- Siempre usa la versi\u00f3n m\u00e1s reciente<\/h3>\n\n\n\n<p>Cada vez que publican una nueva versi\u00f3n del framework agregan una serie de funciones y actualizan las ya existentes. De all\u00ed que insistamos en que, tan pronto est\u00e9 disponible, <strong>la descargues<\/strong> y as\u00ed te asegures de contar con la mayor cantidad de recursos posibles.<\/p>\n\n\n\n<p>A la fecha han publicado 5 grandes versiones de Bootstrap, cada una con una serie de actualizaciones menores. Para acceder a la m\u00e1s actual puedes hacer clic <a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.surferseo.art\/0cba5b3c-5fd4-45e1-a95a-0953e4cfc8bf.png\" alt=\"Bootstrap y c\u00f3mo configurarlo\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2- Aseg\u00farate de revisar su biblioteca de contenidos<\/h3>\n\n\n\n<p>Antes de empezar a trabajar con Bootstrap lo primero que debes hacer es revisar la <strong>biblioteca de contenidos<\/strong> que tienen y as\u00ed tener un panorama mucho m\u00e1s claro de cu\u00e1les son los diferentes c\u00f3digos que ofrecen.<\/p>\n\n\n\n<p>Recuerda que una de las razones principales para usar este framework es reducir el tiempo que dedicas a escribir c\u00f3digos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3- Considera Bootstrap como la base de tu p\u00e1gina web<\/h3>\n\n\n\n<p>Si bien la herramienta te ofrece una serie de plantillas y funciones predeterminadas, desde <strong><a href=\"https:\/\/www.sortlist.es\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sortlist<\/a><\/strong> queremos animarte a siempre ir m\u00e1s all\u00e1 y <strong>personalizar<\/strong>, seg\u00fan las necesidades de tu marca o negocio, tu sitio web tanto como puedas.<\/p>\n\n\n\n<p>Recuerda que los usuarios no quieren ver p\u00e1ginas web iguales, una tras otra.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4- Tu prioridad debe ser la versi\u00f3n m\u00f3vil<\/h3>\n\n\n\n<p>Cada vez con m\u00e1s frecuencia vemos c\u00f3mo los usuarios prefieren usar sus <strong>dispositivos m\u00f3viles<\/strong> para navegar en Internet. Esto es algo que todos los desarrolladores o dise\u00f1adores deben tomar en cuenta, pues deben trabajar en crear interfaces que garanticen siempre la buena <a href=\"https:\/\/www.sortlist.es\/ux\" target=\"_blank\" rel=\"noreferrer noopener\">experiencia del visitante<\/a>.<\/p>\n\n\n\n<p>De hecho, Bootstrap est\u00e1 desarrollado para <strong>crear primero la versi\u00f3n m\u00f3vil<\/strong>, una estrategia que permite optimizar el c\u00f3digo para dispositivos m\u00f3viles y luego hacer los ajustes necesarios en los componentes usando <em>CSS media queries<\/em>. En la web oficial de Bootstrap recomiendan, para garantizar la representaci\u00f3n adecuada y el zoom t\u00e1ctil en cualquier dispositivo, agregar la siguiente metaetiqueta en la cabecera:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1135\" height=\"64\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3.png\" alt=\"metaetiqueta CSS boostrap\" class=\"wp-image-4420\" srcset=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3.png 1135w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-768x43.png 768w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-50x3.png 50w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-288x16.png 288w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-576x32.png 576w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-339x19.png 339w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-678x38.png 678w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-373x21.png 373w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-746x42.png 746w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-691x39.png 691w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-973x55.png 973w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-1048x59.png 1048w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-478x27.png 478w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-956x54.png 956w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-516x29.png 516w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-1032x58.png 1032w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots3-680x38.png 680w\" sizes=\"auto, (max-width: 1135px) 100vw, 1135px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo configurar Bootstrap correctamente para tu web<\/h2>\n\n\n\n<p>Si bien existen diferentes m\u00e9todos para descargar e instalar Bootstrap aqu\u00ed queremos guiarte por el proceso para que logres instalarlo de forma correcta.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Instalar Bootstrap a trav\u00e9s de CDN<\/h3>\n\n\n\n<p>La primera opci\u00f3n que queremos revisar es c\u00f3mo configurarlo a trav\u00e9s de <strong>CDN (Content Delivery Network)<\/strong> pues es la que nos ha parecido m\u00e1s sencilla, directa y que aloja todos los archivos en un servidor ajeno sin necesidad de recargar el tuyo.<\/p>\n\n\n\n<p>Lo primero que debes hacer es insertar una llamada en la cabecera o header del HTML de tu p\u00e1gina web:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1131\" height=\"143\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2.png\" alt=\"cabecera HTML Boostrap\" class=\"wp-image-4419\" srcset=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2.png 1131w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-768x97.png 768w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-50x6.png 50w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-288x36.png 288w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-576x73.png 576w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-339x43.png 339w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-678x86.png 678w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-373x47.png 373w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-746x94.png 746w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-691x87.png 691w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-973x123.png 973w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-1048x133.png 1048w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-478x60.png 478w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-956x121.png 956w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-516x65.png 516w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-1032x130.png 1032w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots2-680x86.png 680w\" sizes=\"auto, (max-width: 1131px) 100vw, 1131px\" \/><\/figure>\n\n\n\n<p>Como puedes ver, incluimos el c\u00f3digo para los archivos js, pues gran parte de las funcionalidades de Bootstrap funcionan bajo jQuery.<\/p>\n\n\n\n<p>Con esta llamada ya puedes empezar a trabajar con todos los elementos que ofrece Bootstrap y agilizar los proyectos de <strong>creaci\u00f3n o edici\u00f3n de tus p\u00e1ginas web<\/strong> y su versi\u00f3n para tel\u00e9fono m\u00f3vil.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Instalar Bootstrap descargando los archivos al servidor<\/h3>\n\n\n\n<p>Existe tambi\u00e9n la posibilidad de instalarlo al descargar los archivos que componen Bootstrap <strong>desde su sitio web oficial<\/strong> para luego subirlas a tu servidor. Con este m\u00e9todo tienes un poco m\u00e1s de control sobre los elementos a utilizar, sin necesidad de agregar llamadas externas al c\u00f3digo de tu web.<\/p>\n\n\n\n<p>Es importante dejar claro que aunque s\u00ed vas a tener que agregar una llamada en la cabecera, en este caso va a ser usando <strong>rutas de tu propio sitio<\/strong>. Los c\u00f3digos que vas a tener que insertar van a ser algo como:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1131\" height=\"102\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1.png\" alt=\"cabecera HTML Bootstrap\" class=\"wp-image-4418\" srcset=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1.png 1131w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-768x69.png 768w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-50x5.png 50w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-288x26.png 288w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-576x52.png 576w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-339x31.png 339w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-678x61.png 678w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-373x34.png 373w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-746x67.png 746w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-691x62.png 691w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-973x88.png 973w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-1048x95.png 1048w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-478x43.png 478w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-956x86.png 956w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-516x47.png 516w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-1032x93.png 1032w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/boots1-680x61.png 680w\" sizes=\"auto, (max-width: 1131px) 100vw, 1131px\" \/><\/figure>\n\n\n\n<p>Para descargar los archivos o ver cu\u00e1les son los enlaces espec\u00edficos que necesitas insertar en la cabecera de su sitio web puedes ir a la p\u00e1gina oficial de Bootstrap y acceder a su versi\u00f3n m\u00e1s reciente.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.surferseo.art\/f45ce068-1980-43d5-aa67-e5f547f012b5.png\" alt=\"Framework CSS Bootstrap\" width=\"564\" height=\"314\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00a1Manos a la obra!<\/h2>\n\n\n\n<p>Seas ingeniero de sistemas, desarrollador o dise\u00f1ador web empezar a usar Bootstrap en tus proyectos web tiene una serie de beneficios. Por un lado es uno de los Frameworks CSS <strong>m\u00e1s sencillos de configurar<\/strong> y entender. Por el otro, su uso te va a permitir ahorrar tiempo y trabajar de forma m\u00e1s eficiente, adem\u00e1s de que te va a facilitar procesos para crear p\u00e1ginas y aplicaciones que fomenten la <strong>interacci\u00f3n del usuario<\/strong> y que garanticen una experiencia amena y positiva.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La calidad de un buen sitio web, o de una aplicaci\u00f3n m\u00f3vil, depende de diferentes elementos como el dise\u00f1o, la calidad de los contenidos y la velocidad de carga. En este art\u00edculo, te explicamos qu\u00e9 es Bootstrap, uno de los Frameworks CSS m\u00e1s populares para crear sitios web responsive (adaptables) y brindar una experiencia de [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":4299,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51,36,35],"class_list":["post-4294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-de-creacion-de-sitios-web","category-desarrollo-de-la-web","category-desarrollo-web-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira<\/title>\n<meta name=\"description\" content=\"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.\" \/>\n<meta name=\"robots\" content=\"noindex, 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=\"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira\" \/>\n<meta property=\"og:description\" content=\"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-17T12:07:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-28T14:26:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1748\" \/>\n\t<meta property=\"og:image:height\" content=\"1240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Clara Gil\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Clara Gil\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/\",\"name\":\"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira\",\"isPartOf\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg\",\"datePublished\":\"2021-11-17T12:07:25+00:00\",\"dateModified\":\"2021-11-28T14:26:33+00:00\",\"author\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/393b2835dd2de9916eb2e215cbc9a00b\"},\"description\":\"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.\",\"breadcrumb\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg\",\"contentUrl\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg\",\"width\":1748,\"height\":1240,\"caption\":\"que es bootstrap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www-es.sortlist-test.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#website\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/\",\"name\":\"Sortlist Blog\",\"description\":\"Nuestras Gu\u00edas de Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www-es.sortlist-test.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/393b2835dd2de9916eb2e215cbc9a00b\",\"name\":\"Clara Gil\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/08\/avatar_user_83_1627915879-96x96.png\",\"contentUrl\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/08\/avatar_user_83_1627915879-96x96.png\",\"caption\":\"Clara Gil\"},\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/author\/claragil\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira","description":"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.","robots":{"index":"noindex","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":"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira","og_description":"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.","og_url":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/","og_site_name":"Sortlist Blog","article_published_time":"2021-11-17T12:07:25+00:00","article_modified_time":"2021-11-28T14:26:33+00:00","og_image":[{"width":1748,"height":1240,"url":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg","type":"image\/jpeg"}],"author":"Clara Gil","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Clara Gil","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/","url":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/","name":"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira","isPartOf":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg","datePublished":"2021-11-17T12:07:25+00:00","dateModified":"2021-11-28T14:26:33+00:00","author":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/393b2835dd2de9916eb2e215cbc9a00b"},"description":"En esta gu\u00eda te definimos qu\u00e9 es Bootstrap, c\u00f3mo funciona y c\u00f3mo implementarlo para tu negocio.","breadcrumb":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#primaryimage","url":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg","contentUrl":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/11\/bootstrap-cover.jpg","width":1748,"height":1240,"caption":"que es bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/www-es.sortlist-test.com\/blog\/que-es-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www-es.sortlist-test.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfQu\u00e9 es Bootstrap? 4 recomendaciones que debes tener en la mira"}]},{"@type":"WebSite","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#website","url":"https:\/\/www-es.sortlist-test.com\/blog\/","name":"Sortlist Blog","description":"Nuestras Gu\u00edas de Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-es.sortlist-test.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/393b2835dd2de9916eb2e215cbc9a00b","name":"Clara Gil","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/08\/avatar_user_83_1627915879-96x96.png","contentUrl":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/08\/avatar_user_83_1627915879-96x96.png","caption":"Clara Gil"},"url":"https:\/\/www-es.sortlist-test.com\/blog\/author\/claragil\/"}]}},"_links":{"self":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/4294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/comments?post=4294"}],"version-history":[{"count":0,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/4294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media\/4299"}],"wp:attachment":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media?parent=4294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/categories?post=4294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}