Seguimos el curso para aprender a crear un sitio con bootstrap (build-your-first-website-in-1-week) que pueden seguir ustedes de manera gratuita en Udemy.
Pues bien, teníamos un sitio básico que tenía el típico hello world y un poco más de eso. Pero nosotros no queremos que sólo se vea un "hola mundo" en el sitio sino que el objetivo del curso es hacer un sitio como el que se ve a continuación:
Así que el basic tamplate que teníamos no nos será muy útil por lo que vamos a buscar otra plantilla en el sitio de bootstrap. La que más nos será útil será el template jumbotron.
Le damos clic y se abre la página:
Acto seguido con el botón derecho le picamos y nos vamos a ver el código fuente. Este código lo vamos a copiar y pegar en nuestro documento index. Obviamente primero eliminamos el código que tenemos en index para pegar el del template de jumbotron.
Salvamos el documento y recargamos la página de index o la abrimos y veremos que no se parece en nada a lo que queremos. Es decir, se ven los elementos básicos pero de ahí en más no parece ser lo que nosotros deseamos. El problema es el CSS.
Vemos que el link tiene un href que nos manda a bootstrap.min.css pero la ruta no es adecuada para nosotros así que habrá que cambiarla.
La cambiamos de tal manera que se enlace bien al archivo que nosotros tenemos en nuestra carpeta css.
Como ya tenemos el archivo css que queremos eliminamos el resto de archivos en la carpeta css.
Ya guardados los cambios recargamos nuestra página index y se verá como sigue:
Casi está listo, pero si observas la página que aparece cuando le diste clic al template de bootstrap, te darás cuenta que tiene entre la barra de navegación y el Hello, world! un espacio mayor que nuestra página index. Una vez más el problema es del css.
En nuestro código html hay otro link:
Nos está diciendo que el estilo de la página viene dado por jombotron.css, pero en nuestros archivos no tenemos ese código css así que hay que ir por él.
Volvemos a la página de donde copiamos el código fuente y buscamos el link href que vemos en la imagen de arriba.
Le picamos al hipervínculo jumbotron.css y nos va a abrir el código css.
El código de arriba lo copiamos y vamos al sublime text para abrir un archivo nuevo en css. Ahí pegmaos el código. Le damos guardar poniéndole como nombre a custom.css a nuestro nuevo archivo.
Guargamos y recargamos nuestra página index y ya tenemos el resultado deseado.
Hasta aquí esta parte.
@EricAraujoM
Muy Bueno, me sirvió. Gracias
ResponderEliminar