Ir al contenido principal

Cómo usar bootstrap en html y no volverte loco

Hola de nuevo, esto es fácil pero como todo hasta que no lo haces por lo menos una vez hay que mirarlo.

Lo más fácil imposible

Como he visto que esto puede serte de mucha utilidad he creado solo para ti un proyecto preconfigurado. Esto quiere decir que boostrap ya esta listo para funcionar sin que hagas nada y desde el minuto 1. Te lo puedes descargar desde aquí https://ifelse.es/vistas/recursos.html

Lo mínimo

Para configurar un proyecto Bootstrap lo primero que tenemos que hacer es descargarlo, para ello vamos a https://getbootstrap.com/ y pulsamos en download.

Si descomprimimos el proyecto nos generara dos carpetas, css y js. Teniendo esto en mente, nuestro documento .html debería quedarnos enlazado de la siguiente manera.


Con esto ya te debería estar funcionando el asunto.

Lo profesional

Algunas utilidades de Boostrap utilizan Jquery, así que lo enlazaremos también. Para ello nos descargamos Jquery dirigiéndonos a https://jquery.com/ y pinchando en download. Deberemos elegir la versión "Download the compressed, production jQuery Número.Número.Número". Se os abrirá todo el código en una nueva pestaña, son así de gañanes, aunque esto tiene su justificación dado que se puede enlazar directamente con esa url pero bueno. Yo soy siempre partidario de tenerlo descargado así que click derecho, guarda como y a la carpeta "js" del boostrap.

Ahora el proyecto nos debería de quedar de la siguiente manera.


Los numeritos del jquery evidentemente a ti te variarán porque de seguro que te descargarás una versión más actual respecto a al fecha de publicación de este artículo. Copia y pega el nombre del archivo y fuera.

un saludo colegui, pásalo bien y espero que ya lo tengas funcionando.

Comentarios

Entradas populares de este blog

Capturar email de páginas webs bash scripting

Hola buenos días colegí. Hoy te traigo una manera de extraer un email de una página web de forma automatizada. Para ello solo necesitas una terminal unix. Yo he hecho las pruebas en Kali Linux. El primer paso es posicionarnos en un directorio, yo lo haré en el directorio principal del mi usuario. #cd /home/kali/ Creamos una carpeta/directorio, hay que ser ordenados. En mi caso lo llamaré email-dominio. #mkdir email-dominio Nos posicionamos dentro del directorio que acabamos de crear #cd email-dominio Ahora elegimos un dominio del cual extraeremos el email si lo hay. Cabe mencionarse que este algoritmo es muy sencillo y solo afectará a la index. Así pues lo primero que deberemos hacer es descargarnos desde terminal la página html de esa url. Para el ejemplo yo utilizaré la página web de cristalbox.es #wget cristalbox.es -O index-html ya tendremos el archivo descargado en nuestro directorio. Ahora nos queda obtener los emails del fichero. Para ello ejecutar

Cómo hacer scroll suave o smooth scroll en javascript y css

Seguro que alguna vez te has preguntado como conseguir el efecto de scroll suave o también conocido como smooth scroll. Esto significa que cuando haces un enlace dentro de la propia página. Al pinchar no salte de golpe, sino que vaya a la ubicación correspondiente de manera suave. Para este propósito tenemos dos opciones: Sencilla En mi página web dentro del curso básico de html ( ver curso de ifelse.es ) lo tengo programado de la siguiente manera y me funciona bastante bien. Para verlo en acción, accede a la página de mi curso de html básico y pincha en el menú de la izquierda en la opción de párrafos. html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } Más compleja Otra opción es utilizando la librería scroll-smooth para ello debes añadir los siguientes fragmentos antes de la última etique body de vuestro html. <script src="<tu_carpeta>/smooth-scroll.min.js"></script> <script> var scroll = new SmoothScroll(&