{"id":12573,"date":"2021-04-27T12:32:00","date_gmt":"2021-04-27T15:32:00","guid":{"rendered":"https:\/\/www.neolo.com\/blog\/?p=12573"},"modified":"2021-04-27T12:32:01","modified_gmt":"2021-04-27T15:32:01","slug":"que-es-bootstrap-y-como-usarlo","status":"publish","type":"post","link":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php","title":{"rendered":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tiempo de lectura:<\/span> <span class=\"rt-time\"> 10<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n\n\n<p>Para aquellos que trabajan en desarrollo web, <strong>Bootstrap<\/strong> no es una palabra nueva. Es uno de los frameworks de desarrollo web m\u00e1s populares que existen y se utiliza para desarrollar proyectos altamente receptivos en HTML, CSS y JavaScript. B\u00e1sicamente, lo que hace es que el sitio web se adec\u00fae autom\u00e1ticamente al dispositivo electr\u00f3nico desde donde se acceda.<\/p>\n\n\n\n<p>Puede utilizar plantillas de dise\u00f1o para todos los aspectos de un <a href=\"https:\/\/www.neolo.com\/blog\/que-necesito-para-publicar-un-sitio-web.php\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web<\/a> y dispone de diferentes elementos con formas predefinidas sencillas de configurar: botones, men\u00fas desplegables, gu\u00edas. Contando con todos los elementos de integraci\u00f3n jQuery para mostrar ventanas y peque\u00f1os recuadros informativos muy din\u00e1micos. Aun as\u00ed, para facilitar su trabajo, debes aprender a usarlo en primer lugar. A continuaci\u00f3n te mostraremos m\u00e1s a detalle lo que es <strong>Booststrap<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-black-color\"><strong>Una introducci\u00f3n a Bootstrap<\/strong><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"369\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-uno.jpg\" alt=\"\" class=\"wp-image-12582\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-uno.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-uno-300x138.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-uno-768x354.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption>Bootstrap<\/figcaption><\/figure>\n\n\n\n<p>Antes que nada, debes dominar los conceptos b\u00e1sicos del uso de <strong>Bootstrap<\/strong>. Si das un vistazo a su sitio web oficial, ver\u00e1s que <strong>Bootstrap<\/strong> se describe como un framework HTML, CSS y JS que se utiliza para desarrollar proyectos receptivos que priorizan los dispositivos m\u00f3viles. Es importante agregar que <strong>Bootstrap<\/strong> es una herramienta de c\u00f3digo abierto que ayuda a miles de personas a crear prototipos de sus proyectos. Ademas crear aplicaciones de principio a fin utilizando elementos que ahorran tiempo en el dise\u00f1o, como las variables Sass incluidas en las herramientas integradas de<strong> Bootstrap<\/strong>. Viene equipado con un sistema de cuadr\u00edcula, componentes predise\u00f1ados y complementos que se crean con jQuery para adaptarse a cualquier proyecto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Amplia gama de herramientas<\/strong><\/h3>\n\n\n\n<p>En pocas palabras, <strong>Bootstrap<\/strong> dispone de una amplia gama de herramientas que se basan en c\u00f3digo reutilizable para que no tenga que desarrollar los componentes b\u00e1sicos de un <a href=\"https:\/\/www.neolo.com\/es\/crea-tu-sitio-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web<\/a> desde cero. Para crear sitios web que sean lo m\u00e1s productivos posible, <strong>Bootstrap<\/strong> facilita el proceso al permitir que los usuarios lo utilicen como un framework de desarrollo de front-end. Incluso si solo se desea crear un dise\u00f1o simple, Tambien puede ayudar. Al usar un framework como <strong>Bootstrap<\/strong>, sabr\u00e1s con certeza que su dise\u00f1o es consistente y no se encontrar\u00e1n problemas en los navegadores web.<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Para empezar, los archivos que debes conocer incluyen:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"420\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/iconos-bootstrap.jpg\" alt=\"\" class=\"wp-image-12583\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/iconos-bootstrap.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/iconos-bootstrap-300x158.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/iconos-bootstrap-768x403.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong>bootstrap<\/strong>.css &#8211; framework CSS<\/p>\n\n\n\n<p><strong>bootstrap<\/strong>.js \u2013JavaScript \/ jQuery framework<\/p>\n\n\n\n<p><strong>glyphicons<\/strong>: conjunto de fuentes de iconos<\/p>\n\n\n\n<p>Lo que <strong>Bootstrap<\/strong> hace de manera diferente en comparaci\u00f3n con otros frameworks es que usa jQuery de manera extensiva. Sin jQuery, la compatibilidad entre navegadores no ser\u00eda posible y JavaScript ser\u00eda demasiado complicado. El paquete <strong>Bootstrap<\/strong> contiene todas las herramientas que un desarrollador necesitar\u00eda para construir una interfaz de usuario regular siguiendo las \u00faltimas tendencias y requisitos en t\u00e9rminos de capacidad de respuesta y versatilidad. Si est\u00e1s cansado de escribir docenas de cadenas de c\u00f3digo largas, incluido CSS, <strong>Bootstrap<\/strong> te ayudar\u00e1 a simplificar enormemente el proceso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><span class=\"has-inline-color has-black-color\">La importancia de un framework<\/span><\/strong><\/h3>\n\n\n\n<p>Los desarrolladores de sitios web saben que implementar un proyecto no siempre fue tan simple como lo es ahora. Sol\u00eda \u200b\u200brequerir muchas horas de trabajo y grandes habilidades de programaci\u00f3n. Un solo error podr\u00eda arruinar todo un proyecto, por lo que la cantidad de estr\u00e9s y presi\u00f3n que se puso sobre los hombros del desarrollador fue enorme. Como herramienta predise\u00f1ada, lo que hace <strong>Bootstrap<\/strong> es simplificar el proceso de desarrollo, manteniendo el c\u00f3digo consistente y de alta calidad. Los errores humanos son normales y tener una herramienta bien probada y comprobada para construir es extremadamente conveniente.<\/p>\n\n\n\n<p>Escribir c\u00f3digos completamente a cuenta propia sigue siendo una opci\u00f3n, pero es el camino m\u00e1s complicado a seguir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Con una herramienta predise\u00f1ada, puedes:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Te permite evitar la repetici\u00f3n in\u00fatil<\/li><li>Adaptar diferentes requisitos sin realizar cambios dr\u00e1sticos<\/li><li>Tener coherencia con los c\u00f3digos<\/li><li>Crear prototipos con nuevos dise\u00f1os de forma m\u00e1s r\u00e1pida y sencilla que nunca.<\/li><li>Usar la compatibilidad entre navegadores<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfPor qu\u00e9 Bootstrap?<\/strong><\/h2>\n\n\n\n<p>Podemos decir que la base de c\u00f3digos estandarizados para crear aplicaciones web, son geniales. Pero \u00bfqu\u00e9 hace que <strong>Bootstrap<\/strong> sea una buena opci\u00f3n? Bueno, desde su aparici\u00f3n en 2011, <strong>Bootstrap<\/strong> gan\u00f3 instant\u00e1neamente el reconocimiento de los dise\u00f1adores y desarrolladores web por lo flexible que es <strong>Bootstrap<\/strong> y lo f\u00e1cil que es trabajar con \u00e9l. Si esto no lo convence de probarlo, tenga en cuenta que tiene una generosa compatibilidad con el navegador, puede reutilizar los componentes r\u00e1pidamente y tiene soporte integrado para jQuery.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Pero, \u00bfpor qu\u00e9 los ingenieros de software eligen <strong>Bootstrap<\/strong> sobre otros frameworks? Las razones son diversas. La principal, que es m\u00e1s f\u00e1cil dominar <strong>Bootstrap<\/strong> debido a su dise\u00f1o intuitivo. El sistema de cuadr\u00edcula marca la diferencia, mientras que los numerosos componentes reutilizables hacen que todo sea m\u00e1s conveniente y flexible para un desarrollador. El soporte para complementos ampl\u00eda a\u00fan m\u00e1s las capacidades de este framework.<\/p>\n\n\n\n<p><strong>Bootstrap<\/strong> se puede usar con un IDE o editor de su elecci\u00f3n, y se puede usar junto con lenguajes del lado del servidor que van desde ASP.NET hasta PHP o incluso Ruby.<\/p>\n\n\n\n<p>Usar <strong>Bootstrap<\/strong> es conveniente porque puede ahorrar mucho tiempo. Acelera enormemente el proceso de desarrollo, a la vez que mantiene el nivel de calidad y consistencia que todo programador busca. Cuando se utiliza <strong>Bootstrap<\/strong>, los desarrolladores no necesitan redise\u00f1ar elementos espec\u00edficos para satisfacer las necesidades de los navegadores, dispositivos o plataformas, ni gastar mucho tiempo tratando de averiguar d\u00f3nde est\u00e1 presente un error. La mayor parte del trabajo duro ya no lo manejan los desarrolladores, sino el propio <strong>Bootstrap<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Beneficios de Bootstrap<\/strong>:<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Es un ahorro de tiempo<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-tiempo.jpg\" alt=\"\" class=\"wp-image-12584\" width=\"402\" height=\"226\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-tiempo.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-tiempo-300x169.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-tiempo-768x432.jpg 768w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><figcaption>Ahorra tiempo<\/figcaption><\/figure>\n\n\n\n<p>Al usar <strong>Bootstrap<\/strong>, incluso los desarrolladores de back-end pueden crear front-end receptivos, sin invertir tiempo en comprender HTML y CSS. Bootstrap se puede aplicar a un sitio est\u00e1tico, un sitio PHP, un <a href=\"https:\/\/www.neolo.com\/blog\/cms-cuales-son-los-mejores-gestores-de-contenido.php\" target=\"_blank\" rel=\"noreferrer noopener\">CMS<\/a>. Su flexibilidad es la caracter\u00edstica que ayuda a ahorrar tiempo y evitar hacer demasiadas modificaciones. Adem\u00e1s, puede descargarlo de GitHub en unos minutos y comenzar a trabajar de inmediato.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bootstrap tiene una cuadr\u00edcula receptiva<\/strong><\/h3>\n\n\n\n<p>En lugar de pasar horas codificando su propia cuadr\u00edcula, <strong>Bootstrap<\/strong> viene con uno incluido. D\u00edgale adi\u00f3s al tiempo perdido utilizando el sistema de cuadr\u00edcula predefinido y comience a llenar los contenedores con el contenido de su elecci\u00f3n. Con <strong>Bootstrap<\/strong>, tambi\u00e9n puede definir sus puntos de interrupci\u00f3n personalizados para cada columna y determinar qu\u00e9 tan grandes pueden ser, o ce\u00f1irse a la configuraci\u00f3n predeterminada. De cualquier manera, es m\u00e1s simple y r\u00e1pido con una cuadr\u00edcula.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cambio de tama\u00f1o de la imagen<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/imagenes-bootstrap.jpg\" alt=\"\" class=\"wp-image-12585\" width=\"530\" height=\"258\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/imagenes-bootstrap.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/imagenes-bootstrap-300x146.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/imagenes-bootstrap-768x374.jpg 768w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/figure>\n\n\n\n<p>Uno de los procesos que requieren mucho tiempo al que se enfrentan los desarrolladores cuando trabajan en un proyecto, es el cambio de tama\u00f1o de las im\u00e1genes. Para que un sitio sea receptivo, debe reducir los tiempos de carga, y las im\u00e1genes son la principal causa de los tiempos de carga lentos. Afortunadamente, <strong>Bootstrap<\/strong> viene con su propio c\u00f3digo para cambiar el tama\u00f1o de las im\u00e1genes autom\u00e1ticamente, usando reglas CSS predefinidas y agregando a la imagen una nueva forma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Amabilidad del navegador<\/strong><\/h3>\n\n\n\n<p>En el mundo actual, las personas utilizan todo tipo de dispositivos, plataformas y navegadores, seg\u00fan sus preferencias. Este es otro aspecto que hace que <strong>Bootstrap<\/strong> sea conveniente. Es compatible con la mayor\u00eda de los navegadores y ayuda a crear sitios web y aplicaciones escalables que funcionan en todas partes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"182\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/framework-HTML-iconos.jpg\" alt=\"\" class=\"wp-image-12586\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/framework-HTML-iconos.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/framework-HTML-iconos-300x68.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/framework-HTML-iconos-768x175.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Un alto grado de personalizaci\u00f3n<\/strong><\/h3>\n\n\n\n<p><strong>Bootstrap<\/strong> tambi\u00e9n es altamente personalizable. Los desarrolladores web pueden tomar decisiones con respecto a los aspectos que desean incluir en un proyecto y modificarlos para adaptarlos a sus necesidades, desde la p\u00e1gina de personalizaci\u00f3n de <strong>Bootstrap<\/strong>. Con solo marcar una casilla, puede activar y desactivar funciones.<\/p>\n\n\n\n<p>Algunas de estas caracter\u00edsticas incluyen aspectos de CSS como modificar tipos de letra o estilos de medios impresos. Tambien aspectos de componentes como cambiar grupos de entrada, etiquetas, o incluso utilidades que hacen que el sitio web sea m\u00e1s receptivo.<\/p>\n\n\n\n<p>Es por eso que obtienes fragmentos geniales como tablas <strong>Bootstrap<\/strong> que puedes usar en tus proyectos f\u00e1cilmente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bootstrap es consistente<\/strong><\/h3>\n\n\n\n<p><strong>Bootstrap<\/strong> hace uso de herramientas interiores que siempre son las mismas. El concepto detr\u00e1s de <strong>Bootstrap<\/strong> se basa en emparejar dise\u00f1adores con desarrolladores y hacer el trabajo m\u00e1s f\u00e1cil para todos, mientras se mantiene el c\u00f3digo consistente y libre de errores, como afirm\u00f3 su cofundador, Mark Otto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Se puede integrar f\u00e1cilmente<\/strong><\/h3>\n\n\n\n<p><strong>Bootstrap<\/strong> se puede integrar r\u00e1pidamente con otras plataformas o incluso con diferentes frameworks. Puede usarlo en sitios que ya existen o sitios que se publicar\u00e1n en el futuro. Algunos elementos particulares de <strong>Bootstrap<\/strong> se pueden utilizar en el CSS que ya tiene en una de estas plataformas y la integraci\u00f3n se realizar\u00e1 sin problemas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Algunos componentes est\u00e1n predise\u00f1ados<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/herramienta-predisenada.jpg\" alt=\"\" class=\"wp-image-12587\" width=\"537\" height=\"302\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/herramienta-predisenada.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/herramienta-predisenada-300x169.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/herramienta-predisenada-768x432.jpg 768w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<p>Uno de los enfoques m\u00e1s convenientes para dise\u00f1ar un proyecto es mediante el uso de componentes predise\u00f1ados. <strong>Bootstrap<\/strong> incluye componentes predise\u00f1ados como men\u00fas desplegables, alertas o barras de navegaci\u00f3n que puede usar al <a rel=\"noreferrer noopener\" href=\"https:\/\/www.neolo.com\/blog\/antonio-escudero-tener-presencia-digital-es-una-necesidad-para-las-empresas-si-quieren-escalar-en-sus-negocios.php\" target=\"_blank\">desarrollar un proyecto digita<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/www.neolo.com\/blog\/antonio-escudero-tener-presencia-digital-es-una-necesidad-para-las-empresas-si-quieren-escalar-en-sus-negocios.php\" target=\"_blank\">l<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/www.neolo.com\/blog\/antonio-escudero-tener-presencia-digital-es-una-necesidad-para-las-empresas-si-quieren-escalar-en-sus-negocios.php\" target=\"_blank\">.<\/a> Estos componentes predise\u00f1ados ayudan a crear un proyecto rico en funciones y representan una de las mayores ventajas de este framework. Los componentes predise\u00f1ados son el gran secreto a voces que se esconde detr\u00e1s de los impresionantes dise\u00f1os web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/comunidad-enorme.jpg\" alt=\"\" class=\"wp-image-12589\" width=\"482\" height=\"355\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/comunidad-enorme.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/comunidad-enorme-300x221.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/comunidad-enorme-768x566.jpg 768w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>La comunidad es enorme<\/strong><\/h3>\n\n\n\n<p>La comunidad <strong>Bootstrap<\/strong> est\u00e1 ah\u00ed para ayudarlo cuando lo necesite. El hecho de que <strong>Bootstrap<\/strong> sea uno de los frameworks basados \u200b\u200ben CSS m\u00e1s populares, si no el m\u00e1s popular, significa que hay una gran comunidad para responder cualquier pregunta que pueda tener o solucionar un problema con el que est\u00e1 luchando.<\/p>\n\n\n\n<p>El proyecto <strong>Bootstrap<\/strong> se aloja y mantiene mediante GitHub, y hay m\u00e1s de 500 contribuyentes y casi 10,000 confirmaciones presentes en la plataforma.<\/p>\n\n\n\n<p><strong>Debes hacer lo siguiente<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Seguir a @getbootstrap en Twitter.<\/li><li>Estar atento al Blog oficial de <strong>Bootstrap<\/strong>.<\/li><li>Unete a la sala oficial de Slack.<\/li><li>Se puede discutir con otros IRC de Bootstrapperson: con\u00e9ctandose al servidor irc.freenode.net y \u00faniendose al canal #bootstrap.<\/li><li>Solicitar ayuda para la implementaci\u00f3n de Stack Overflow (etiquetado bootstrap-4).<\/li><li>Mantenerte actualizado con lo que la gente est\u00e1 haciendo \u00faltimamente en Bootstrap Expo.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Datos generales de Bootstrap<\/strong><\/h2>\n\n\n\n<p><strong>Bootstrap<\/strong> viene en dos variantes: Una que est\u00e1 pre compilada y otra que se basa en una versi\u00f3n del c\u00f3digo fuente. La \u00faltima variante es la que usa Less CSS, pero para aquellos que est\u00e1n m\u00e1s inclinados a Sass, deben acceder al puerto oficial de Sass de Bootstrap. Con este flameworks, los desarrolladores tambi\u00e9n pueden hacer uso del Autoprefixer para evitar perder tiempo con prefijos de proveedores de CSS. A continuaci\u00f3n, encontrar\u00e1 algunos datos generales sobre <strong>Bootstrap<\/strong> que deber\u00edan ayudarlo a usarlo inmediatamente despu\u00e9s de descargarlo.<\/p>\n\n\n\n<p><strong>C\u00f3mo se estructuran los archivos<\/strong><\/p>\n\n\n\n<p>Antes de seguir adelante, debe comprender c\u00f3mo se estructuran los archivos <strong>Bootstrap<\/strong>. La estructura es muy simple y auto explicativa, en comparaci\u00f3n a c\u00f3mo se presenta en el caso de otros frameworks. Los archivos est\u00e1n pre compilados para que los desarrolladores puedan usarlos inmediatamente y sin demora. Los archivos CSS y JavaScript tambi\u00e9n est\u00e1n minimizados e incluyen fuentes de Glyphicons.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Vea c\u00f3mo se ve la forma b\u00e1sica de la estructura del archivo Bootstrap<\/strong>:<\/h4>\n\n\n\n<p>Todos los complementos de JavaScript funcionar\u00e1n solo cuando se incluya jQuery.<\/p>\n\n\n\n<p><strong>\u00bfC\u00f3mo se ve la plantilla HTML?<\/strong><\/p>\n\n\n\n<p>A continuaci\u00f3n, debe familiarizarse con el aspecto de una plantilla HTML de <strong>Bootstrap<\/strong> b\u00e1sica.<\/p>\n\n\n\n<p>Despu\u00e9s de comprender c\u00f3mo se ve, no ser\u00e1 dif\u00edcil descubrir esta plantilla:<\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html lang = \u00aben\u00bb&gt;<\/p>\n\n\n\n<p>&lt;cabeza&gt;<\/p>\n\n\n\n<p>&lt;meta charset = \u00abutf-8\u00bb&gt;<\/p>\n\n\n\n<p>&lt;meta http-equiv = \u00abX-UA-Compatible\u00bb content = \u00abIE = edge\u00bb&gt;<\/p>\n\n\n\n<p>&lt;meta name = \u00abviewport\u00bb content = \u00abwidth = device-width, initial-scale = 1\u00bb&gt;<\/p>\n\n\n\n<p>&lt;title&gt; Plantilla Bootstrap &lt;\/title&gt;<\/p>\n\n\n\n<p>&lt;link href = \u00abcss \/ bootstrap.min.css\u00bb rel = \u00abhoja de estilo\u00bb&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;cuerpo&gt;<\/p>\n\n\n\n<p>&lt;h1&gt; \u00a1Hola, mundo! &lt;\/h1&gt;<\/p>\n\n\n\n<p>&lt;script src = \u00abhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\u00bb&gt; &lt;\/script&gt;<\/p>\n\n\n\n<p>&lt;script src = \u00abjs \/ bootstrap.min.js\u00bb&gt; &lt;\/script&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 componentes incluye?<\/strong><\/p>\n\n\n\n<p>Comenzando con botones simples, men\u00fas desplegables y cuadros de alerta, <strong>Bootstrap<\/strong> tiene una lista completa de componentes para todo tipo de escenarios. Puede buscar la clase que le interesa y aparecer\u00e1 una lista de todos los componentes en su pantalla. Leer m\u00e1s sobre los componentes incluidos deber\u00eda ser \u00fatil, considerando cu\u00e1n numerosos son y cu\u00e1n diferentes son en funci\u00f3n. La plantilla de dise\u00f1o es uniforme, lo que significa que no perder\u00e1 la coherencia de su proyecto. El esfuerzo de dise\u00f1o visual se minimiza as\u00ed.<\/p>\n\n\n\n<p><strong>Documentaci\u00f3n consistente<\/strong><\/p>\n\n\n\n<p><strong>Bootstrap<\/strong> tiene documentaci\u00f3n muy consistente y completa. Todos los bloques y bits de c\u00f3digo utilizados en <strong>Bootstrap<\/strong> se explican cuidadosamente. Mientras leen las explicaciones, los usuarios tambi\u00e9n podr\u00e1n notar ejemplos dentro del c\u00f3digo y averiguar a d\u00f3nde pertenece.<\/p>\n\n\n\n<p>La mayor\u00eda de las l\u00edneas de c\u00f3digo se utilizan para implementar elementos b\u00e1sicos, pero comprender los conceptos b\u00e1sicos desde el principio ahorra mucho tiempo. <strong>Bootstrap<\/strong> es una opci\u00f3n ideal para desarrolladores principiantes porque permite a las personas seleccionar los componentes exactos que desean incluir en un proyecto y no necesitan escribir el c\u00f3digo desde cero. La mayor\u00eda de las veces, todo lo que se necesita es copiar y pegar.<\/p>\n\n\n\n<p><strong>El sistema de cuadr\u00edcula<\/strong><\/p>\n\n\n\n<p>El sistema de cuadr\u00edcula es \u00fatil para el dise\u00f1o web escalable y con capacidad de respuesta. Al usarlo, puede crear un proyecto que se adapte a todos los tama\u00f1os de pantalla.<\/p>\n\n\n\n<p><strong>En Bootstrap, debes saber que:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/columnas-filas.jpg\" alt=\"\" class=\"wp-image-12588\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/columnas-filas.jpg 800w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/columnas-filas-300x160.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/columnas-filas-768x410.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Todas las filas se colocan en un contenedor de ancho fijo o completo para apoyar la alineaci\u00f3n correcta.<\/li><li>Estas filas se generan en grupos horizontales.<\/li><li>Si se colocan m\u00e1s de 12 columnas, dentro de una fila si se agrega otra columna, se ajustar\u00e1 a una nueva l\u00ednea, lo que dar\u00e1 como resultado una unidad.<\/li><li>Cuando el ancho de la pantalla es igual o mayor que los tama\u00f1os de los puntos de interrupci\u00f3n, se puede utilizar clases de cuadr\u00edcula.<\/li><li>Para dispositivos m\u00e1s peque\u00f1os, las clases de cuadr\u00edcula se anulan.<\/li><li>Los dise\u00f1adores pueden crear sus propios dise\u00f1os bas\u00e1ndose en las clases que est\u00e1n predefinidas.<\/li><\/ul>\n\n\n\n<p>El sistema de cuadr\u00edcula Bootstrap tiene 4 clases: lg, md, sm, xs, seg\u00fan la cantidad de p\u00edxeles que tiene el tama\u00f1o de la pantalla.<\/p>\n\n\n\n<p>Para comprender el sistema de cuadr\u00edcula m\u00e1s f\u00e1cilmente, eche un vistazo a esta imagen:<\/p>\n\n\n\n<p>Ejemplos de dise\u00f1o<\/p>\n\n\n\n<p>Finalmente, aqu\u00ed hay algunos ejemplos de dise\u00f1o que debe analizar:<\/p>\n\n\n\n<p>Plantilla de inicio<\/p>\n\n\n\n<p>Sitio de marketing b\u00e1sico<\/p>\n\n\n\n<p>Disposici\u00f3n fluida<\/p>\n\n\n\n<p>Mercadeo estrecho<\/p>\n\n\n\n<p>Jumbotron estrecho<\/p>\n\n\n\n<p>\u00c1lbum<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Conclusi\u00f3n<\/strong><\/p>\n\n\n\n<p>Como habr\u00e1s notado, <strong>Bootstrap<\/strong> es una herramienta s\u00f3lida que hace que el trabajo de los desarrolladores sea m\u00e1s f\u00e1cil y eficiente. Con <strong>Bootstrap<\/strong>, ahora puedes crear proyectos sin problemas, sin preocuparte por problemas de integraci\u00f3n o errores. El hecho de que <strong>Bootstrap<\/strong> tambi\u00e9n sea gratuito, lo convierte en una de las mejores opciones entre los desarrolladores, independientemente de su nivel de experiencia. Tanto los desarrolladores de front-end como los de back-end pueden usarlo sin esfuerzo.<\/p>\n\n\n\n<p>El framework es flexible y contiene todas las herramientas y la documentaci\u00f3n que un desarrollador necesitar\u00eda para crear proyectos receptivos. <strong>Bootstrap<\/strong> puede adaptarse a cualquier necesidad que pueda tener un desarrollador. Y, si alguna vez te quedas atascado, la comunidad siempre est\u00e1 ah\u00ed para ayudarte.<\/p>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:18px\"><strong>\u00bfQuieres conocer acerca de como tener presencia en la<\/strong> <strong>web?<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background\" href=\"https:\/\/www.neolo.com\/es\/crea-tu-sitio-web\/\"><strong>CREAR MI WEB<\/strong><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Para aquellos que trabajan en desarrollo web, Bootstrap no es una palabra nueva. Es uno de los frameworks de desarrollo web m\u00e1s populares que existen y se utiliza para desarrollar proyectos altamente receptivos en HTML, CSS y JavaScript. B\u00e1sicamente, lo que hace es que el sitio web se adec\u00fae autom\u00e1ticamente al dispositivo electr\u00f3nico desde donde [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":12657,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[351,340],"tags":[],"class_list":["post-12573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com<\/title>\n<meta name=\"description\" content=\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com\" \/>\n<meta property=\"og:description\" content=\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\" \/>\n<meta property=\"og:site_name\" content=\"Neolo Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neolohosting\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-27T15:32:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-27T15:32:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manuel Malav\u00e9\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@neolo\" \/>\n<meta name=\"twitter:site\" content=\"@neolo\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manuel Malav\u00e9\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\"},\"author\":{\"name\":\"Manuel Malav\u00e9\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\"},\"headline\":\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo?\",\"datePublished\":\"2021-04-27T15:32:00+00:00\",\"dateModified\":\"2021-04-27T15:32:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\"},\"wordCount\":2676,\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png\",\"articleSection\":[\"Desarrollo web\",\"Dise\u00f1o web\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\",\"url\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\",\"name\":\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png\",\"datePublished\":\"2021-04-27T15:32:00+00:00\",\"dateModified\":\"2021-04-27T15:32:01+00:00\",\"description\":\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png\",\"width\":1200,\"height\":627},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.neolo.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo web\",\"item\":\"https:\/\/www.neolo.com\/blog\/temas\/desarrollo-web\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"name\":\"Neolo Blog\",\"description\":\"Blog de Neolo: Dominios, Web Hosting y Marketing Digital\",\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.neolo.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\",\"name\":\"Neolo\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"width\":392,\"height\":83,\"caption\":\"Neolo\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neolohosting\",\"https:\/\/x.com\/neolo\",\"https:\/\/www.instagram.com\/neolodotcom\/\",\"https:\/\/www.linkedin.com\/company\/neolo.com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\",\"name\":\"Manuel Malav\u00e9\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"caption\":\"Manuel Malav\u00e9\"},\"description\":\"Redactor de contenidos\",\"sameAs\":[\"manuel\"],\"url\":\"https:\/\/www.neolo.com\/blog\/author\/manuel\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com","description":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.","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:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php","og_type":"article","og_title":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com","og_description":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.","og_url":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php","og_site_name":"Neolo Blog","article_publisher":"https:\/\/www.facebook.com\/neolohosting","article_published_time":"2021-04-27T15:32:00+00:00","article_modified_time":"2021-04-27T15:32:01+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png","type":"image\/png"}],"author":"Manuel Malav\u00e9","twitter_card":"summary_large_image","twitter_creator":"@neolo","twitter_site":"@neolo","twitter_misc":{"Escrito por":"Manuel Malav\u00e9","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#article","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php"},"author":{"name":"Manuel Malav\u00e9","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c"},"headline":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo?","datePublished":"2021-04-27T15:32:00+00:00","dateModified":"2021-04-27T15:32:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php"},"wordCount":2676,"publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png","articleSection":["Desarrollo web","Dise\u00f1o web"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php","url":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php","name":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? www.Neolo.com","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png","datePublished":"2021-04-27T15:32:00+00:00","dateModified":"2021-04-27T15:32:01+00:00","description":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo? El frameworks de desarrollo web m\u00e1s popular entre los desarrolladores web con todas herramientas necesarias.","breadcrumb":{"@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#primaryimage","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2021\/04\/bootstrap-que-es.png","width":1200,"height":627},{"@type":"BreadcrumbList","@id":"https:\/\/www.neolo.com\/blog\/que-es-bootstrap-y-como-usarlo.php#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.neolo.com\/blog"},{"@type":"ListItem","position":2,"name":"Desarrollo web","item":"https:\/\/www.neolo.com\/blog\/temas\/desarrollo-web"},{"@type":"ListItem","position":3,"name":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo usarlo?"}]},{"@type":"WebSite","@id":"https:\/\/www.neolo.com\/blog\/#website","url":"https:\/\/www.neolo.com\/blog\/","name":"Neolo Blog","description":"Blog de Neolo: Dominios, Web Hosting y Marketing Digital","publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.neolo.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.neolo.com\/blog\/#organization","name":"Neolo","url":"https:\/\/www.neolo.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","width":392,"height":83,"caption":"Neolo"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neolohosting","https:\/\/x.com\/neolo","https:\/\/www.instagram.com\/neolodotcom\/","https:\/\/www.linkedin.com\/company\/neolo.com\/"]},{"@type":"Person","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c","name":"Manuel Malav\u00e9","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","caption":"Manuel Malav\u00e9"},"description":"Redactor de contenidos","sameAs":["manuel"],"url":"https:\/\/www.neolo.com\/blog\/author\/manuel"}]}},"_links":{"self":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/12573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/comments?post=12573"}],"version-history":[{"count":20,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/12573\/revisions"}],"predecessor-version":[{"id":12659,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/12573\/revisions\/12659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media\/12657"}],"wp:attachment":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media?parent=12573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/categories?post=12573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/tags?post=12573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}