{"id":1412,"date":"2022-10-25T12:08:00","date_gmt":"2022-10-25T11:08:00","guid":{"rendered":"https:\/\/proximahost.es\/blog\/?p=1412"},"modified":"2022-10-15T22:10:10","modified_gmt":"2022-10-15T21:10:10","slug":"bootstrap-como-se-utiliza","status":"publish","type":"post","link":"https:\/\/proximahost.es\/blog\/bootstrap-como-se-utiliza\/","title":{"rendered":"\u00bfQu\u00e9 es Bootstrap y c\u00f3mo se utiliza?"},"content":{"rendered":"\n

Si tienes pensado crear un sitio web, es posible que hayas o\u00eddo hablar de Bootstrap<\/strong>. Pero, a pesar de su popularidad, probablemente tengas dudas acerca de este framework<\/strong>. \u00bfC\u00f3mo puedes sacarle partido en tu proyecto? \u00bfQu\u00e9 ventajas ofrece? \u00bfQu\u00e9 deber\u00edas hacer para empezar a usarlo?<\/p>\n\n\n\n

Todas estas cuestiones quedan resueltas en la siguiente gu\u00eda sobre Bootstrap<\/strong>. Aprende qu\u00e9 es exactamente, para qu\u00e9 sirve y cu\u00e1les son sus principales objetivos. Asimismo, te contamos c\u00f3mo poner en marcha Bootstrap <\/strong>y si tiene algunas desventajas que deber\u00edas considerar antes de elegirlo como framework. Todo lo que necesitas saber sobre Bootstrap lo tienes aqu\u00ed. \u00a1No te lo pierdas!<\/p>\n\n\n\n

\u00bfQu\u00e9 es bootstrap y para qu\u00e9 sirve?<\/h2>\n\n\n\n

Como hemos apuntado en la introducci\u00f3n, Bootstrap<\/strong> es un framework<\/strong>, es decir, un marco de trabajo, que permite generar desarrollos web con facilidad. Es de c\u00f3digo abierto e incluye c\u00f3digo basado en lenguajes como HTML<\/strong>, CSS <\/strong>y JavaScript<\/strong>.<\/p>\n\n\n\n

La principal caracter\u00edstica de Bootstrap es que est\u00e1 enfocado al mundo m\u00f3vil<\/strong>. De esta manera, facilita la creaci\u00f3n de sitios adaptables con dise\u00f1os responsive<\/em><\/strong>, algo de suma importancia a la hora de mejorar el posicionamiento SEO<\/strong>. Con este framework tu p\u00e1gina funcionar\u00e1 a la perfecci\u00f3n en toda clase de dispositivos. Por lo tanto, decimos que se trata de una potente biblioteca multiplataforma<\/strong>.<\/p>\n\n\n\n

Y, \u00bfpara qu\u00e9 sirve este framework? En esencia, su misi\u00f3n es la de ayudar a desarrollar sitios web m\u00e1s r\u00e1pidamente. Gracias a los archivos que incluye el paquete de Bootstrap, el desarrollador ya tiene gran parte del trabajo hecho. Podemos decir que estamos ante una completa caja de herramientas para el dise\u00f1o web<\/strong>. Esta se puede ampliar y modificar tanto como sea necesario para adaptarla a las caracter\u00edsticas de cada proyecto. Hasta viene con un sistema de componentes y complementos para aumentar su potencial. Las posibilidades son ilimitadas.<\/p>\n\n\n\n

\u00bfC\u00f3mo se usa Bootstrap?<\/h2>\n\n\n\n

Si lo que te hemos explicado hasta ahora te ha resultado atractivo, probablemente quieras conocer m\u00e1s acerca del funcionamiento de Bootstrap<\/strong>. Aqu\u00ed van algunos aspectos del framework que te interesa conocer para dar tus primeros pasos.<\/p>\n\n\n\n

Instala Bootstrap desde el CDN oficial<\/h3>\n\n\n\n

Para aprovechar el potencial de Bootstrap<\/strong>, es necesario que relaciones el c\u00f3digo del framework con el de tu web. Y para hacerlo hay dos v\u00edas muy populares que te conviene conocer.<\/p>\n\n\n\n

La primera consiste en vincularlo un enlace externo proporcionado por el CDN oficial de la biblioteca multiplataforma<\/strong>. As\u00ed, el CSS y el resto de scripts de Bootstrap ser\u00e1n funcionales en tu web. En la cabecera de tu portal debes incluir un c\u00f3digo similar al siguiente:<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0\n.0\/css\/bootstrap.min.css\">\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min\n.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/p\nopper.min.js\"><\/script>\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.\nmin.js\"><\/script><\/code><\/pre>\n\n\n\n
Este fragmento incluye tambi\u00e9n una dependencia a jQuery<\/strong>, ya que el JavaScript de Bootstrap se encuentra escrito en ese lenguaje.<\/p>\n\n\n\n
Un beneficio asociado a este m\u00e9todo es que la velocidad de carga es muy r\u00e1pida. Al tratarse de un CDN, siempre se emplea el servidor m\u00e1s \u00f3ptimo para el usuario<\/strong>. Con todo, si contratas un servidor con una tasa de transferencia elevada, como los que proporcionamos en Pr\u00f3xima Host<\/strong>, posiblemente la segunda opci\u00f3n sea la m\u00e1s conveniente para ti.<\/p>\n\n\n\n
Aloja el framework en tu propio servidor<\/h3>\n\n\n\n
El segundo modo de tener Bootstrap<\/strong> en tu web es subirlo a tu propio servidor para alojarlo. En ese caso, deber\u00e1s dirigirte a su p\u00e1gina web oficial<\/a> para descargar los archivos correspondientes desde el repositorio. Despu\u00e9s, con un c\u00f3digo parecido al anterior, incluye las rutas correspondientes de tu alojamiento en las que se localiza el framework.<\/p>\n\n\n\n
Al igual que en el anterior caso, esta manera de utilizar Bootstrap tambi\u00e9n te reporta beneficios. Sin duda, el m\u00e1s relevante es que no dependes de terceros<\/strong> para dotar a tu sitio los archivos necesarios para funcionar.<\/p>\n\n\n\n
Ventajas y desventajas de Bootstrap<\/h2>\n\n\n\n
Bootstrap tiene muchas ventajas y alguna que otra desventaja. Seguidamente, las analizamos para que valores si merece la pena implementarlo en tu proyecto o no.<\/p>\n\n\n\n
Ventajas de la biblioteca multiplataforma<\/h3>\n\n\n\n