{"id":41474,"date":"2022-12-29T10:04:37","date_gmt":"2022-12-29T08:04:37","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=41474"},"modified":"2022-12-23T13:22:18","modified_gmt":"2022-12-23T11:22:18","slug":"como-instalar-bootstrap-en-cpanel-y-ejemplo-practico","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/panel-alojamiento\/como-instalar-bootstrap-en-cpanel-y-ejemplo-practico\/","title":{"rendered":"C\u00f3mo Instalar Bootstrap en cPanel y Ejemplo Pr\u00e1ctico"},"content":{"rendered":"
<\/div>

\"C\u00f3mo<\/p>\n

Bootstrap<\/strong> es un framework CSS que utilizan un gran n\u00famero de desarrolladores web para crear su proyectos web.<\/p>\n

Se trata de una opci\u00f3n muy popular gracias a su flexibilidad, facilidad de uso y cantidad de opciones disponibles, ya que se pueden hacer muchas m\u00e1s cosas que con CSS.<\/p>\n

Se combina con JavaScript, lo que le da todas esa consistencia y capacidad que a la hoja de estilos CSS le falta.<\/p>\n

Su principal raz\u00f3n de ser es adaptar el dise\u00f1o a todo tipo de dispositivos<\/strong>, pensando especialmente en los tel\u00e9fonos m\u00f3viles. Es decir, crear un dise\u00f1o totalmente responsive<\/strong>.<\/p>\n

Para poder trabajar con Bootstrap, es necesario descargar los archivos descargar los archivos del framework, pero si tienes contratado un hosting con Hostinet<\/a><\/strong>, puedes instalar Bootstrap<\/strong> de forma sencilla y autom\u00e1tica.<\/p>\n

 <\/p>\n

Instalar Bootstrap en tu Hosting<\/h2>\n

Cuando contratas un hosting en Hostinet, te damos acceso a un panel de control llamado cPanel<\/strong> (excepto en hosting Windows).<\/p>\n

En cPanel cuantas con un instalador de aplicaciones autom\u00e1tico<\/strong> con el que puedes instalar una gran cantidad de aplicaciones, como WordPress, PrestaShop y lo que hoy nos interesa, Bootstrap<\/strong>.<\/p>\n

Para instalar Bootstrap en tu hosting debes acceder a cPanel y en apartado de Software<\/strong> busca el icono de la herramienta Softaculous Apps Installer.<\/strong><\/p>\n

\"cPanel<\/p>\n

Softaculous es el instalador de aplicaciones autom\u00e1tico y como puedes ver, encontrar\u00e1s un mont\u00f3n de software que puedes instalar.<\/p>\n

Para encontrar Bootstrap puedes buscar en el men\u00fa izquierdo la opci\u00f3n de Frameworks<\/strong>, en cuanto lo habr\u00e1s, ver\u00e1s la opci\u00f3n de Bootstrap, aunque tambi\u00e9n puedes usar el buscador que encontrar\u00e1s en la parte superior.<\/p>\n

\"Buscar<\/p>\n

Selecciona la opci\u00f3n y despu\u00e9s pulsa en Instalar<\/strong> para configurar d\u00f3nde quieres instalar Bootstrap.<\/p>\n

Dependiendo del tipo de hosting que tengas, podr\u00e1s seleccionar el dominio donde quieres instalarlo y si quieres, crearlo en un directorio. Si dejas el campo de directorio vac\u00edo, se instalar\u00e1 en la ra\u00edz del dominio, pero cuidado si ya tienes instalado algo ah\u00ed.<\/p>\n

Si quieres instalarlo en un subdominio tambi\u00e9n puedes hacerlo, pero deber\u00e1s crear el subdominio antes<\/a>.<\/p>\n

\"Instalar<\/p>\n

En un momento Softaculous terminar\u00e1 la instalaci\u00f3n y as\u00ed te lo indicara. Tambi\u00e9n te mostrar\u00e1 la URL en la que lo has instalado.<\/p>\n

\"Bootstrap<\/p>\n

Si accedes a la URL donde has instalado Bootstrap ver\u00e1s que as\u00ed te lo indica, pero que no hay ning\u00fan archivo index para que pueda mostrar nada, aunque Bootstrap ya est\u00e9 instalado.<\/p>\n

\"Bootstrat<\/p>\n

Ahora vamos a probar si realmente Bootstrap funciona en nuestro hosting subiendo un proyecto creado en Bootstrap.<\/p>\n

 <\/p>\n

Ejemplo Pr\u00e1ctico de Bootstrap Funcionando en el Hosting<\/h2>\n

La mejor forma de comprobar que Bootstrap est\u00e1 funcionando en el hosting es subir un proyecto creado en Bootstrap.<\/p>\n

En lugar de crear un proyecto nuevo de cero, hay que saber c\u00f3mo funciona Bootstrap antes, vamos a usar un proyecto ya creado y para eso vamos a usar GitHub<\/a><\/strong> para buscarlo.<\/p>\n

GitHub es un repositorio de software open source<\/em> que los desarrolladores usar para tener un control de las versiones de su software. Tambi\u00e9n para almacenarlo y al ser de c\u00f3digo abierto, podemos usarlo sin necesidad de pagar ninguna licencia de uso.<\/p>\n

Puedes usar el buscador de GitHub para encontrar alg\u00fan proyecto creado en BootStrap. Nosotros hemos buscado: Bootstrap Hello World.<\/p>\n

\u00abHello World\u00bb<\/strong> es la aplicaci\u00f3n t\u00edpica para comprobar que un lenguaje de programaci\u00f3n est\u00e1 funcionando, como si fuera un punto de partida<\/strong> para comprobar que funciona.<\/p>\n

Busca cualquier proyecto que veas que te puede servir y desc\u00e1rgalo desde GitHub.<\/p>\n

\"bootstrap<\/p>\n

Despu\u00e9s tienes que subir los archivos al hosting. Esto puedes hacerlo desde el Administrador de Archivos de cPanel.<\/p>\n

S\u00f3lo tienes que acceder a la carpeta donde has instalado Bootstrap, donde ya ver\u00e1s que tienes una carpeta css<\/strong> y otra js<\/strong> con los archivos que Bootstrap ha instalado, que es la estructura b\u00e1sicas de Bootstrap.<\/p>\n

Nosotros hemos subido un proyecto en el que ya ten\u00eda las carpetas y los archivos creados, as\u00ed que lo hemos sustituidos. Tambi\u00e9n le he hemos cambiado el nombre al archivo HTML, como index.html<\/strong>, par no tener que determinar toda la URL.<\/p>\n

Puedes subir el archivo comprimido que has descargado, ya que el Administrador de Archivos no te permite subir las carpetas.<\/p>\n

S\u00f3lo accede a la carpeta que corresponda y pulsa en el men\u00fa Cargar<\/strong>., selecciona el archivo comprimido y s\u00fabelo.<\/p>\n

Una vez este en el hosting, pulsa con el bot\u00f3n derecho encima del .zip y ver\u00e1s que tienes la opci\u00f3n de Extract.<\/strong><\/p>\n

\"bootstrap<\/p>\n

Es posible que tengas que mover alg\u00fan archivo para dejarlo en la carpeta ra\u00edz del Bootstrap. Esto depender\u00e1 de c\u00f3mo lo ha organizado el desarrollador.<\/p>\n

Al final deber\u00eda quedarte algo parecido a esto, aunque puede variar, repetimos, dependiendo del proyecto que hayas descargado.<\/p>\n

\"bootstrap<\/p>\n

Ahora s\u00f3lo tienes que acceder a la URL desde cualquier navegador web para ver si funciona. Si todo va bien s\u00f3lo ver\u00e1s un Hello, world!<\/strong> o lo que sea que hayan puesto en el proyecto.<\/p>\n

\"bootstrap<\/p>\n

Esto puede parecer muy simpl\u00f3n, pero es lo que necesitamos ver para comprobar que Bootstrap est\u00e1 funcionando en nuestro hosting<\/strong>.<\/p>\n

Te puede parecer que han puesto en HTML el proyecto, pero si abres el archivo con un editor de texto, ver\u00e1s como est\u00e1 haciendo las llamadas a CSS y JavaScript, que es lo que necesita Bootstrap para funcionar.<\/p>\n

En nuestro caso, el archivo index ten\u00eda un c\u00f3digo parecido a esto:<\/p>\n

<!doctype html>\r\n<html lang=\"pt-br\">\r\n\t<head>\r\n\t\t<!-- Required meta tags -->\r\n\t\t<meta charset=\"utf-8\">\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n\r\n\t\t<!-- Bootstrap CSS -->\r\n\t\t<link rel=\"stylesheet\" href=\"css\/bootstrap.css\">\r\n\t\t<title>Primeros Pasos<\/title>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<h1>Hello, world!<\/h1>\r\n\r\n\t\t<!-- Optional JavaScript -->\r\n\t\t<!-- jQuery first, then Popper.js, then Bootstrap JS -->\r\n\t\t<script src=\"js\/jquery-3.2.1.slim.min.js\"><\/script>\r\n\t\t<script src=\"js\/popper.min.js\"><\/script>\r\n\t\t<script src=\"js\/bootstrap.min.js\"><\/script>\r\n\t<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
 <\/p>\n
Ahora que ya sabes que puedes trabajar con Bootstrap en tu hosting contratado con en Hostinet. Ya puedes empezar a crear tu web en Bootstrap<\/strong>.<\/p>\n
Hosting SSD con Bootstrap<\/h2>\n
Como hemos comentado en el art\u00edculo, desde el panel de control cPanel puedes encontrar la herramienta Softaculous y desde ah\u00ed, instalar Bootstrap donde quieras<\/strong>.<\/p>\n
El instalador autom\u00e1tico est\u00e1 disponible en todos los planes de alojamiento, incluso en los hosting m\u00e1s baratos<\/a><\/strong>.<\/p>\n
\"Hosting<\/a><\/p>\n