Com fer un lloc web elegant i senzill amb Bootstrap 4: 7 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

El propòsit d’aquest Instructable és oferir a aquells que estiguin familiaritzats amb la programació (HTML o no) una senzilla introducció a la creació d’un portafoli en línia amb Bootstrap 4. Us guiaré a través de la configuració inicial del lloc web, com crear uns quants blocs de contingut diferents, i alguns problemes que podríeu trobar.

La cartera es divideix en diversos passos més petits per intentar fer-lo més manejable: marc HTML, marc CSS, marc Javascript, barra de navegació i la pàgina d'inici (amb blocs de contingut).

Si les meves explicacions d'alguna cosa encara us deixen confús, no dubteu a deixar un comentari amb les vostres preguntes, suggeriments o google l'element que us confon. Hi ha molts recursos disponibles per programar llocs web i Bootstrap.

Nota: aquesta guia no ho inclou i no s’hauria d’utilitzar com a substitut per aprendre a programar en HTML, CSS o Javascript.

Recursos necessaris

• Bootstrap 4
• jQuery 3.3.1

Recursos opcionals

• FontAwesome
• Tipus de lletra de Google
• highlight.js

Si voleu passar a l'exemple complet o fer una ullada al dipòsit:

• Exemple complet
• Dipòsit

Nota: Utilitzaré Sublim a les imatges per als meus exemples si voleu seguir-ho junt amb el mateix editor de text.

Pas 1: configuració

Configuració de la carpeta

1. Creeu una carpeta en algun lloc on pugueu emmagatzemar tot el que baixarem. Aquest serà el vostre directori arrel per a la cartera.
2. Creeu una carpeta dins d'aquest nom anomenat "bootstrap"
3. Creeu una altra carpeta dins de la carpeta de cartera arrel que tingui el nom "jquery"

Carpeta de cartera

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

Bootstrap 4

1. Visiteu el seu lloc web i feu clic al botó "Baixa" que hi ha a sota de la secció "CSS i JS compilats".
2. Deseu el fitxer.zip a la carpeta "Baixades" o en una altra ubicació convenient.
3. Obriu el fitxer.zip i extraieu les carpetes "css" i "js" a la carpeta "bootstrap" que heu creat anteriorment.

jQuery

1. Visiteu el seu lloc web i descarregueu el "jQuery 3.3.1 de desenvolupament sense comprimir"
2. Deseu aquest fitxer a la carpeta "jquery" que heu creat anteriorment.

Tots els marcs estan preparats per començar a treballar en la cartera real.

Pas 2: marc HTML (index.html)

El teu nom

Aquest marc no és massa complex, però vull explicar els propòsits generals de la configuració.

Bootstrap JS Després de jQuery

Sembla que hi ha algun tipus de solapament entre el fitxer Javascript de Bootstrap i el de jQuery. No vaig provar per veure l’extensió d’aquesta superposició, però un exemple és la funcionalitat desplegable que faig servir a la barra de navegació. Si primer carregueu a Bootstrap, el botó desplegable no funcionarà.

FontAwesome

Si heu fet algun desenvolupament web, és probable que sàpigueu què és FontAwesome. Tanmateix, si no és el cas, es tracta d’un conjunt d’icones que inclou un conjunt d’eines per a una personalització addicional. És increïblement útil si sou com jo i no teniu absolutament cap talent artístic.

hightlight.js

Aquest marc permet ressaltar el codi dinàmic a les pàgines web. Podeu importar-lo com la resta de marcs que faig servir si només utilitzeu llenguatges de programació comuns, però també hi ha una opció per descarregar un conjunt de llenguatges personalitzat. Vaig escollir aquesta última opció a causa d'alguns idiomes macro i ini, però depèn completament de vosaltres.

Nota: tingueu en compte els llocs on faig servir enllaços codificats a fitxers com ara les dues icones i highlight.js. A més, com que només són necessaris Bootstrap i jQuery, no dubteu a afegir o eliminar qualsevol altre marc. Si n’elimineu cap, recordeu d’eliminar les línies de codi que corresponguin més endavant.

Pas 3: marc CSS (style.css)

/ * * Amb sort, reduir el color bg a gris i canviar l’estil de lletra facilita el consum del lloc web * / body {background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Això assegura que la barra de navegació estigui a sobre de tot * / nav {z-index: 9999; }

/*

* Això hauria de fer que el text del paràgraf sigui més llegible * / p {font-size: 18px; marge superior: 5 px; marge-fons: 5 px; }

/*

* Això assegura que tots els meus blocs de codi estiguin formatats correctament * / code {text-align: left; }

/*

* No vull que les llistes tinguin les vinyetes * / li {list-style-type: none; }

/*

* Els enllaços són de color blau per defecte i vull que s’alineïn amb l’estil de Bootstrap * / li a, a {color: white; }

/*

* Lligo una etiqueta de classe a un div que conté la barra de navegació per assegurar-me que el contingut no se superponga * /.navFix {padding-bottom: 70px; }

/*

* Augment de la mida de la barra de navegació * /.social-media {font-size: 1.3em; }

/*

* El color de ressaltat predeterminat per als enllaços desplegables és blanc * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Força els divs que mostren pdf a una alçada determinada * /.pdfFill {height: 45rem; }

/*

* Afegiu una mica d’espai entre els botons i els blocs de codi * /.codeStyle {padding-top: 30px; }

He inclòs els elements CSS basats en el contingut en aquest marc per intentar estalviar-vos una estona més endavant. Tots són molt senzills i són sobretot canvis de qualitat de vida que faciliten la interacció amb la cartera per als lectors.

índex z de navegació

Tinc una quantitat molt limitada d’experiència en desenvolupament web, de manera que no estic segur de si es tracta d’un problema comú en implementar la barra de navegació de Bootstrap, però sense cap especificació d’orientació frontal a posterior, la barra de navegació apareixerà realment sota altres continguts com Targetes de Bootstrap. Això es nota més amb la barra de navegació plegable, però he inclòs el canvi d'índex de totes maneres per seguretat.

alineació del codi

Com que normalment faig servir les classes "justify-content-center" i "text-center" de Bootstrap per alinear elements, no vull que el meu codi hereti aquesta naturalesa alineada al centre. Això es soluciona fàcilment sobreescrivint qualsevol canvi d'alineació i fent que les etiquetes de codi siguin alineades a l'esquerra: això permet preservar l'espai entre pestanyes al codi.

encoixinat navFix

Quan la barra de navegació de Bootstrap estigui enganxada a la part superior de la pàgina, es carregarà contingut a sota. Crec que això passa perquè la barra de navegació està enganxada a la part superior de la finestra gràfica en lloc de la mateixa pàgina. Independentment d'això, es soluciona augmentant l'espai entre la barra de navegació i la resta del contingut.

pdf d'alçada

L'altura predeterminada dels fitxers pdf és increïblement petita. És essencialment il·legible, de manera que he canviat l’alçada per intentar donar prou espai per aproximadament una pàgina a la vegada.

Pas 4: marc Javascript (javascript.js)

/ * * Es busca qualsevol element amb la classe 'toggle' i ho amaga o desamaga * / 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 = "none"; }

divID.style.display = "bloc";

}

tornar fals;

}

/*

* Codi que cal executar en un ordre determinat * / $ (document). Ready (function () {/ * * Carrega el contingut dels fitxers * /

/*

* Forçar un petit retard a carregar-se a les dades * / setTimeout (function () {/ * * Ressalteu tot el codi que s'ha carregat a * / $ ('pre codi'). Cadascun (funció (i, bloc) { hljs.highlightBlock (bloc);});}, 1000); });

Per fer que aquesta cartera fos fàcil de modificar i gestionar, vaig decidir utilitzar un format d’una pàgina. Manté tot allò local en la seva major part i fa que la càrrega del contingut sigui més ràpida.

toggleSection

He utilitzat valors de classe per gestionar el contingut que s’ha de mostrar o amagar perquè la majoria de vegades faig servir divs per separar i agrupar diversos elements. Podeu utilitzar-lo per agrupar botons individuals també, però requereix una comprovació addicional abans d’establir la pantalla de “bloc” perquè no es mostri contingut.

càrrega de documents

Ho he inclòs perquè en general és complicat incloure un munt de codi de programació independent en fitxers HTML normals. Podem utilitzar aquest mètode de ressaltat dinàmic per forçar que el procés tingui lloc després de carregar contingut d’altres fitxers.

$ ('# mq2-intro'). load ("fitxers / tutorials / mq2 / mq2-intro / content.html");

Aquest és un exemple de com carregarem el contingut.

Pas 5: barra de navegació

Inicials

• Inici
• Sobre mi
• Tutorials de projectes
• Poseu-vos en contacte amb mi

• La barra de navegació és l'element més complex de tot el que hi ha a la cartera. La gran combinació de classes fa que sigui una mena de trencaclosques que requereixen que consulteu contínuament el llibre de regles.

  Funcionalitat Bootstrap

  Bootstrap funciona essencialment a través de diferents valors de classe. Mirant l'element "nav" en si, no és massa difícil determinar l'objectiu de cada classe:

  La nostra "barra de navegació" és l'opció "md" (mitjà), "expandible", "fosca". I l'hem "fixat" al "cim". Sembla confús perquè és una barreja d’identificadors, però si els mireu com a adjectius de l’element, es fa molt més fàcil entendre el que passa.

  Marca

  La marca és el nom i el logotip típics que podeu veure a tots els llocs web de la part superior esquerra. És un element de disseny provat i esperat que tots els usuaris esperen en aquest moment.

  Nota: Les etiquetes "i" són en realitat les icones de FontAwesome i les obteniu des de la pàgina de qualsevol icona.

  Toggler / Botó plegable (mòbil)

  Aquest botó només es mostra als dispositius mòbils. Però com que vam incloure a la declaració "nav" que la barra de navegació ha de ser ampliable, aquests elements es connecten entre ells mitjançant els seus identificadors i identificadors de "commutació de dades".

  Enllaços de barra de navegació (costat esquerre)

  Aquests enllaços depenen completament de les categories que necessiteu per a la vostra cartera. Vaig incloure alguns exemples típics com a punt de partida, però ningú no és el mateix. És possible que no necessiteu una secció "Tutorials" perquè us centreu en la creació d'escultures d'art. Cada element "li" es pot copiar i enganxar, de manera que un cop esbrineu el que necessiteu, és fàcil configurar la navegació cap amunt.

  Nota: Tècnicament podeu crear menús desplegables dins d’altres menús desplegables, però no el recomano si no esteu disposat a afegir més CSS i Javascript perquè la interfície sembli neta.

  Enllaços de barra de navegació (costat dret)

  En donar a la llista correcta d'enllaços la classe "ml-auto", Bootstrap separa uniformement les dues llistes de manera uniforme. Això crea la divisió del costat dret i esquerre. Vaig decidir utilitzar aquest espai per a enllaços de xarxes socials perquè és un mètode molt comú i popular per augmentar la vostra presència. Si això no és rellevant, podeu desfer aquests enllaços per a una barra de cerca, informació d’inici de sessió, etc. Però recordeu que és un espai important per utilitzar. I, de manera similar als enllaços de barra de navegació del costat esquerre, també podeu copiar-los i enganxar-los.

  Nota: Si teniu previst utilitzar els enllaços que ja tinc configurats, canvieu el "nom d'usuari" als enllaços "href" reals.

  Pas 6: pàgina d'inici

  

  

  

  El teu nom

  Programador Escriptor Jugador

  Aquesta secció i les vostres pàgines de contingut posteriors dependran del que vulgueu incloure a la vostra cartera. Evidentment, no puc abordar tots els tipus de contingut, però he intentat incloure imatges, pdf, vídeos, blocs de codi, algunes de les inclusions típiques.

  Format de taula

  La pàgina d'inici està configurada per fer de taula. No confiaria en les meves increïbles habilitats de disseny per crear el vostre producte final, però he afegit les diferents variacions de combinacions de files i columnes per demostrar que és molt dinàmic i flexible. Podeu crear 3 files i 2 columnes per tenir botons a l'esquerra i contingut a la dreta, o podeu fer quelcom completament diferent. Només cal una mica d’experimentació.

  Botons

  Aquests funcionen essencialment com fan els botons normals. L'única integració Bootstrap real aquí prové de l'estil que coincideix amb la resta del tema. En cas contrari, creeu tants o tants botons com calgui per mostrar el vostre contingut i, a continuació, assegureu-vos de fer coincidir els enllaços href amb els identificadors dels divs.

  Contingut del codi de programació

  Les etiquetes "codi" són les etiquetes predeterminades que highlight.js utilitza per gestionar tot el ressaltat. Si recordeu el fitxer javascript.js, hi ha una secció per carregar el contingut d'altres fitxers.

  $ ('# home-programmer-macro'). load ("files / home / watchLoot.mac");

  • La primera part d'aquesta cerca l'identificador de l'element al qual voleu inserir el contingut.
  • La segona part és la ubicació del fitxer que voleu carregar.

  Nota: el contingut no es carregarà completament perquè hi ha moltes possibilitats d’editar aquesta pàgina web localment en lloc de fer-ho en un servidor. Això es pot abordar mitjançant diverses maneres diferents que tractaré al final de la instrucció.

  Vídeo de YouTube

  El "iframe" incrustat prové realment del mateix YouTube. No explicaré extensament com obtenir-los, però quan aneu a "Compartir" un vídeo, hi ha una opció "Incrusta" que us ajudarà a generar el codi necessari per mostrar el vostre vídeo a la pàgina web.

  Pas 7: mirar cap endavant

  És molt probable que no cobreixi algun element o tipus de contingut que vulgueu incloure al vostre lloc web. Afortunadament, hi ha moltes bones opcions per fer vosaltres mateixos els passos següents.

  Documentació de Bootstrap

  La documentació de Bootstrap és un lloc ideal per començar si cerqueu elements preprogramats i que tinguin exemples que pugueu copiar i enganxar a la vostra cartera per experimentar. No vaig tocar cartes, carrusels ni formularis. Us recomano que consulteu la secció "Components" per veure les opcions.

  W3Schools

  W3Schools és un lloc web meravellós on podeu aprendre gairebé qualsevol cosa relacionada amb la programació i el desenvolupament web. Són molt més intel·ligents que jo i cobreixen gairebé totes les funcions HTML, CSS i Javascript que se us acudeixin.

  Allotjament de la vostra cartera

  Aquest manual instructiu us ensenya a allotjar el vostre lloc web en algunes plataformes diferents. Aquests són els passos que heu de fer si voleu mostrar a la gent, reclutadors, etc. la vostra cartera.

  Experimenta i diverteix-te

  L'única manera de fer una gran cartera és experimentant i provant qualsevol cosa i tot el que sembli interessant. Moltes carteres de disseny i llocs web de fantasia utilitzen efectes de transició excel·lents o fons dinàmics, però cap d’ells ha estat fabricat prèviament.