Cómo hacer un sitio web elegante y simple con Bootstrap 4: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

El propósito de este Instructable es brindar a los familiarizados con la programación, HTML o de otro tipo, una introducción simple para hacer un portafolio en línea con Bootstrap 4. Lo guiaré a través de la configuración inicial del sitio web, cómo crear algunos bloques de contenido diferentes. y algunos problemas con los que podría encontrarse.

El portafolio se divide en una serie de pasos más pequeños para intentar hacerlo más manejable: marco HTML, marco CSS, marco Javascript, barra de navegación y la página de inicio (con bloques de contenido).

Si mis explicaciones sobre algo aún lo dejan confundido, no dude en dejar un comentario con sus preguntas, sugerencias o buscar en Google el elemento sobre el que está confundido. Hay muchos recursos disponibles para programar sitios web y Bootstrap.

Nota: esta guía no es exhaustiva y no debe utilizarse como sustituto para aprender a programar en HTML, CSS o Javascript.

Recursos necesarios

• Bootstrap 4
• jQuery 3.3.1

Recursos opcionales

• FontAwesome
• Fuentes de Google
• highlight.js

Si desea pasar al ejemplo completo o echar un vistazo al repositorio:

• Ejemplo completo
• Repositorio

Nota: Usaré Sublime en las imágenes para mis ejemplos si desea seguir con el mismo editor de texto.

Paso 1: Configuración

Configuración de carpeta

1. Cree una carpeta en algún lugar donde pueda almacenar todo lo que vamos a descargar. Este será su directorio raíz para la cartera.
2. Crea una carpeta dentro de esa llamada "bootstrap"
3. Cree otra carpeta dentro de la carpeta raíz de su cartera que se llame "jquery"

Carpeta de cartera

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Visite su sitio web y haga clic en el botón "Descargar" debajo de la sección "CSS y JS compilados".
2. Guarde el archivo.zip en su carpeta "Descargas" u otra ubicación conveniente.
3. Abra el archivo.zip y extraiga las carpetas "css" y "js" a la carpeta "bootstrap" que creó anteriormente.

jQuery

1. Visite su sitio web y descargue el "jQuery 3.3.1 de desarrollo sin comprimir"
2. Guarde ese archivo dentro de la carpeta "jquery" que creó anteriormente.

Todos los marcos ahora están listos para cuando comencemos a trabajar en la cartera real.

Paso 2: marco HTML (index.html)

Tu nombre

Este marco no es demasiado complejo, pero quiero explicar los propósitos generales de la configuración.

Bootstrap JS después de jQuery

Parece haber algún tipo de superposición entre el archivo Javascript de Bootstrap y el de jQuery. No probé para ver qué tan extensa es esta superposición, pero un ejemplo es la funcionalidad desplegable que uso en la barra de navegación. Si carga en Bootstrap primero, el botón desplegable no funciona.

FontAwesome

Si ha realizado algún desarrollo web, es probable que sepa qué es FontAwesome. Sin embargo, si ese no es el caso, es un conjunto de iconos que incluye un conjunto de herramientas para una personalización adicional. Es increíblemente útil si eres como yo y no tienes absolutamente ningún talento artístico.

hightlight.js

Este marco permite resaltar código dinámico en páginas web. Puede importarlo como el resto de los marcos que uso si solo usa lenguajes de programación comunes, pero también hay una opción para descargar un conjunto personalizado de lenguajes. Elegí la última opción debido a algunos lenguajes de macro e ini, pero depende completamente de usted.

Nota: Tenga en cuenta los lugares donde utilizo enlaces codificados a archivos como los dos íconos y highlight.js. Además, dado que solo se requieren Bootstrap y jQuery, no dude en agregar o eliminar cualquier otro marco. Si elimina alguno, recuerde eliminar las líneas de código que correspondan más adelante.

Paso 3: Marco CSS (style.css)

/ * * Con suerte, atenuar el color bg a gris y cambiar el estilo de fuente hace que el sitio web sea más fácil de consumir * / body {background: gray; familia de fuentes: 'Open Sans', sans-serif; }

/*

* Esto asegura que la barra de navegación esté encima de todo * / nav {z-index: 9999; }

/*

* Esto debería hacer que el texto del párrafo sea más legible * / p {font-size: 18px; margen superior: 5px; margen inferior: 5px; }

/*

* Esto asegura que todos mis bloques de código tengan el formato correcto * / code {text-align: left; }

/*

* No quiero que las listas tengan viñetas * / li {list-style-type: none; }

/*

* Los enlaces son azules por defecto, y quiero que se alineen con el estilo de Bootstrap * / li a, a {color: white; }

/*

* Ato una etiqueta de clase a un div que contiene la barra de navegación para asegurarme de que el contenido no se superponga * /.navFix {padding-bottom: 70px; }

/*

* El tamaño aumentado extiende la barra de navegación * /.social-media {font-size: 1.3em; }

/*

* El color de resaltado predeterminado para los enlaces desplegables es blanco * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Forzar divs que muestran archivos PDF a una cierta altura * /.pdfFill {height: 45rem; }

/*

* Agregue algo de espacio entre los botones y los bloques de código * /.codeStyle {padding-top: 30px; }

Incluí los elementos CSS basados en contenido en este marco para intentar ahorrarte algo de tiempo más adelante. Todos son muy simples y en su mayoría son cambios en la calidad de vida que facilitan la interacción con el portafolio para los lectores.

índice z de navegación

Tengo una cantidad muy limitada de experiencia en desarrollo web, por lo que no estoy seguro de si este es un problema común al implementar la barra de navegación de Bootstrap, pero sin ninguna especificación de orientación de adelante hacia atrás, la barra de navegación aparecerá debajo de otro contenido como Cartas de Bootstrap. Esto es más notable con la barra de navegación plegable, pero incluí el cambio de índice de todos modos por seguridad.

alineación de código

Dado que normalmente uso las clases "justify-content-center" y "text-center" de Bootstrap para alinear elementos, no quiero que mi código herede esa naturaleza alineada al centro. Esto se soluciona fácilmente sobrescribiendo cualquier cambio de alineación y haciendo que las etiquetas de código estén alineadas a la izquierda: esto preserva el espacio entre tabulaciones en el código.

relleno navFix

Cuando la barra de navegación de Bootstrap está pegada en la parte superior de la página, el contenido se cargará debajo de ella. Creo que esto sucede porque la barra de navegación está pegada en la parte superior de la ventana gráfica en lugar de en la página en sí. Independientemente, esto se soluciona aumentando el espacio entre la barra de navegación y el resto del contenido.

altura del pdf

La altura predeterminada de los archivos PDF es increíblemente pequeña. Es esencialmente ilegible, así que cambié la altura para intentar dejar espacio suficiente para aproximadamente una página a la vez.

Paso 4: marco de JavaScript (javascript.js)

/ * * Esto busca cualquier elemento con la clase 'toggle' y lo esconde o muestra * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "ninguno"; }

divID.style.display = "bloque";

}

falso retorno;

}

/*

* Código que debe ejecutarse en un orden determinado * / $ (documento).ready (function () {/ * * Cargar contenido de archivos * /

/*

* Forzar un pequeño retraso para cargar en los datos * / setTimeout (function () {/ * * Resaltar todo el código que se ha cargado en * / $ ('pre code'). Each (function (i, block) { hljs.highlightBlock (bloque);});}, 1000); });

Para que este portafolio sea fácil de modificar y administrar, decidí usar un formato de una página. Mantiene todo local en su mayor parte y hace que el contenido se cargue más rápido.

toggleSection

Usé valores de clase para administrar qué contenido debe mostrarse u ocultarse porque la mayoría de las veces uso divs para separar y agrupar varios elementos. También puede usar esto para agrupar botones individuales, pero requiere una verificación adicional antes de configurar la pantalla de "bloqueo" para permitir que no se muestre ningún contenido.

carga de documentos

Incluí esto porque generalmente es complicado incluir un montón de código de programación independiente en archivos HTML normales. Podemos utilizar este método de resaltado dinámico para forzar que el proceso se lleve a cabo después de cargar contenido de otros archivos.

$ ('# mq2-intro'). load ("archivos / tutoriales / mq2 / mq2-intro / content.html");

Este es un ejemplo de cómo cargaremos contenido.

Paso 5: barra de navegación

Iniciales

• Hogar
• Sobre mí
• Tutoriales de proyectos
• Contáctame

• La barra de navegación es el elemento más complejo de todo el portafolio. La mera combinación de clases lo convierte en una especie de rompecabezas que requiere que mires continuamente el libro de reglas.

  Funcionalidad Bootstrap

  Bootstrap funciona esencialmente a través de diferentes valores de clase. Al observar el elemento "nav" en sí, no es demasiado difícil determinar el propósito de cada clase:

  Nuestra "barra de navegación" es la opción "md" (media), "expandir" capaz, "oscura". Y lo "arreglamos" en la "parte superior". Parece confuso porque es un revoltijo de identificadores, pero si los mira como adjetivos para el elemento, se vuelve mucho más fácil entender lo que está sucediendo.

  Marca

  La marca es el logotipo y el nombre típicos que ve en cada sitio web en la parte superior izquierda. Es un elemento de diseño probado y verdadero que todo usuario espera en este momento.

  Nota: Las etiquetas "i" son en realidad los íconos de FontAwesome, y las obtienes de la página de cualquier ícono.

  Botón alternador / plegable (móvil)

  Este botón solo aparece en dispositivos móviles. Pero dado que incluimos en la declaración "nav" que la barra de navegación debe ser expandible, estos elementos se conectan entre sí a través de sus ID e identificadores de "alternancia de datos".

  Enlaces de la barra de navegación (lado izquierdo)

  Estos enlaces dependen completamente de las categorías que necesite para su cartera. Incluí algunos de los ejemplos típicos como punto de partida, pero ninguno es igual. Es posible que no necesite una sección de "Tutoriales" porque se centra en la elaboración de esculturas de arte. Cada elemento "li" se puede copiar y pegar, por lo que una vez que descubra lo que necesita, es fácil configurar la navegación.

  Nota: técnicamente, puede crear menús desplegables dentro de otros menús desplegables, pero no lo recomendaría a menos que esté dispuesto a agregar más CSS y Javascript para que la interfaz se vea limpia.

  Vínculos de la barra de navegación (lado derecho)

  Al dar la lista correcta de enlaces de la clase "ml-auto", Bootstrap separa las dos listas de manera uniforme. Esto crea la división limpia del lado izquierdo y derecho. Decidí usar este espacio para enlaces a redes sociales porque es un método muy común y popular para aumentar su presencia. Si eso no es relevante, puede descartar estos enlaces para una barra de búsqueda, información de inicio de sesión, etc. Pero recuerde que es un espacio importante para usar. Y de manera similar a los enlaces de la barra de navegación en el lado izquierdo, también puede copiarlos y pegarlos.

  Nota: Si planea usar los enlaces que ya he configurado, cambie el "nombre de usuario" en los enlaces "href" reales.

  Paso 6: página de inicio

  

  

  

  Tu nombre

  Programador Escritor Gamer

  Esta sección, y sus páginas de contenido subsiguientes, dependerán de lo que desee incluir en su portafolio. Obviamente, no puedo abordar todos los tipos de contenido, pero traté de incluir imágenes, archivos PDF, videos, bloques de código, algunas de las inclusiones típicas.

  Formato de tabla

  La página de inicio está configurada para actuar como una tabla. No confiaría en mis increíbles habilidades de diseño para crear su producto final, pero agregué las diferentes variaciones de combinaciones de filas y columnas para mostrar que es muy dinámico y flexible. Puede crear 3 filas y 2 columnas para tener botones a la izquierda y contenido a la derecha, o puede hacer algo completamente diferente. Solo se necesita un poco de experimentación.

  Botones

  Estos funcionan esencialmente como lo hacen los botones normales. La única integración real de Bootstrap aquí proviene del estilo para que coincida con el resto del tema. De lo contrario, cree tantos o tan pequeños botones como necesite para mostrar su contenido y luego asegúrese de hacer coincidir los enlaces href con los ID de los divs.

  Contenido del código de programación

  Las etiquetas de "código" son las etiquetas predeterminadas que utiliza highlight.js para administrar todo el resaltado. Si recuerda el archivo javascript.js, hay una sección para cargar el contenido de otros archivos.

  $ ('# macro-programador-casero'). load ("archivos / home / watchLoot.mac");

  • La primera parte de esto busca el "id" del elemento en el que desea insertar el contenido.
  • La segunda parte es la ubicación del archivo en el que desea cargar.

  Nota: En realidad, el contenido no se cargará por completo porque es muy probable que esté editando esta página web localmente en lugar de en un servidor. Esto se puede abordar de varias formas diferentes que abordaré al final del Instructable.

  Video de Youtube

  El "iframe" incrustado en realidad proviene del propio YouTube. No explicaré detalladamente cómo obtenerlos, pero cuando vaya a "Compartir" un video, hay una opción "Insertar" que lo ayudará a generar el código necesario para mostrar su video en la página web.

  Paso 7: Mirando hacia el futuro

  Es muy probable que no haya cubierto algún elemento o tipo de contenido que desee incluir en su sitio web. Afortunadamente, hay muchas buenas opciones para que usted mismo pueda dar los siguientes pasos.

  Documentación de Bootstrap

  La documentación de Bootstrap es un excelente lugar para comenzar si está buscando elementos que están preprogramados y tienen ejemplos que puede copiar y pegar en su portafolio para experimentar. No toqué Cartas, Carruseles o Formularios. Le recomiendo encarecidamente que consulte la sección "Componentes" para ver las opciones.

  W3Schools

  W3Schools es un sitio web maravilloso donde puede aprender casi cualquier cosa relacionada con la programación y el desarrollo web. Son mucho más inteligentes que yo y cubren casi todas las funciones de HTML, CSS y Javascript que pueda imaginar.

  Alojamiento de su cartera

  Este Instructable le enseña cómo alojar su sitio web en algunas plataformas diferentes. Estos son los pasos que debe seguir si desea poder mostrar su cartera a personas, reclutadores, etc.

  Experimente y diviértase

  La única forma de hacer un gran portafolio es experimentando y probando todo lo que parezca interesante. Muchos portafolios y sitios web de diseño sofisticado utilizan excelentes efectos de transición o fondos dinámicos, pero ninguno de ellos viene prefabricado.