Come creare un sito Web elegante e semplice con Bootstrap 4: 7 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Lo scopo di questo Instructable è fornire a chi ha familiarità con la programmazione - HTML o altro - una semplice introduzione alla creazione di un portfolio online con Bootstrap 4. Ti guiderò attraverso la configurazione iniziale del sito Web, come creare alcuni blocchi di contenuto diversi e alcuni problemi che potresti incontrare.

Il portfolio è suddiviso in una serie di passaggi più piccoli per cercare di renderlo più gestibile: frame HTML, frame CSS, frame Javascript, barra di navigazione e homepage (con blocchi di contenuto).

Se le mie spiegazioni per qualcosa ti lasciano ancora confuso, sentiti libero di lasciare un commento con le tue domande, suggerimenti o google l'elemento di cui sei confuso. Sono disponibili molte risorse per la programmazione di siti Web e Bootstrap.

Nota: questa guida non è esaustiva e non dovrebbe essere utilizzata come sostituto per imparare a programmare in HTML, CSS o Javascript.

Risorse richieste

• Bootstrap 4
• jQuery 3.3.1

Risorse facoltative

• FontAwesome
• Google Fonts
• evidenziare.js

Se desideri passare all'esempio completo o dare un'occhiata al repository:

• Esempio completo
• Repository

Nota: userò Sublime nelle immagini per i miei esempi se desideri seguire lo stesso editor di testo.

Passaggio 1: configurazione

Configurazione della cartella

1. Crea una cartella da qualche parte in cui puoi archiviare tutto ciò che stiamo per scaricare. Questa sarà la tua directory principale per il portfolio.
2. Crea una cartella all'interno di quella denominata "bootstrap"
3. Crea un'altra cartella all'interno della cartella del tuo portfolio principale che si chiama "jquery"

Cartella Portafoglio

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

Bootstrap 4

1. Visita il loro sito Web e fai clic sul pulsante "Download" sotto la sezione "CSS e JS compilati".
2. Salva il file.zip nella cartella "Download" o in un'altra posizione conveniente.
3. Apri il file.zip ed estrai le cartelle "css" e "js" nella cartella "bootstrap" che hai creato in precedenza.

jQuery

1. Visita il loro sito Web e scarica il "jQuery 3.3.1 di sviluppo non compresso"
2. Salva quel file all'interno della cartella "jquery" che hai creato in precedenza.

Tutti i framework sono ora pronti per quando inizieremo a lavorare sul portfolio effettivo.

Passaggio 2: cornice HTML (index.html)

Il tuo nome

Questo frame non è niente di eccessivamente complesso, ma voglio spiegare gli scopi generali del setup.

Bootstrap JS Dopo jQuery

Sembra esserci una sorta di sovrapposizione tra il file Javascript di Bootstrap e quello di jQuery. Non ho provato a vedere quanto sia estesa questa sovrapposizione, ma un esempio è la funzionalità a discesa che utilizzo nella barra di navigazione. Se carichi prima in Bootstrap, il pulsante a discesa non funziona.

FontAwesome

Se hai fatto dello sviluppo web, è probabile che tu sappia cos'è FontAwesome. Tuttavia, in caso contrario, è un set di icone che include un toolkit per una personalizzazione extra. È incredibilmente utile se sei come me e non hai assolutamente alcun talento artistico.

hightlight.js

Questo framework consente l'evidenziazione dinamica del codice nelle pagine web. Puoi importarlo come il resto dei framework che utilizzo se usi solo linguaggi di programmazione comuni, ma c'è anche un'opzione per scaricare un set personalizzato di linguaggi. Ho scelto quest'ultima opzione a causa di alcuni linguaggi di macro e ini, ma dipende interamente da te.

Nota: tieni presente i luoghi in cui utilizzo collegamenti codificati a file come le due icone e highlight.js. Inoltre, poiché sono richiesti solo Bootstrap e jQuery, sentiti libero di aggiungere o rimuovere qualsiasi altro framework. Se ne rimuovi qualcuno, ricordati di rimuovere le righe di codice che corrispondono in seguito.

Passaggio 3: frame CSS (style.css)

/* * Si spera che l'attenuazione del colore bg in grigio e la modifica dello stile del carattere renda il sito Web più facile da utilizzare */ body { background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Questo assicura che la barra di navigazione sia in cima a tutto */ nav { z-index: 9999; }

/*

* Questo dovrebbe rendere più leggibile il testo del paragrafo */ p { font-size: 18px; margine superiore: 5px; margine inferiore: 5px; }

/*

* Questo assicura che tutti i miei blocchi di codice siano formattati correttamente */ code { text-align: left; }

/*

* Non voglio che le liste abbiano i punti elenco */ li { list-style-type: none; }

/*

* I collegamenti sono blu per impostazione predefinita e voglio che siano allineati con lo stile di Bootstrap */ li a, a{ color: white; }

/*

* Lego un tag di classe a un div che contiene la barra di navigazione per assicurarmi che il contenuto non sia sovrapposto */.navFix { padding-bottom: 70px; }

/*

* La dimensione aumentata estende la barra di navigazione */.social-media { font-size: 1.3em; }

/*

* Il colore di evidenziazione predefinito per i collegamenti a discesa è bianco */.dropdown-menu a:hover { background-color: #212529; }

/*

* Forza i div che mostrano i pdf a una certa altezza */.pdfFill { height: 45rem; }

/*

* Aggiungi un po' di spazio tra i pulsanti e i blocchi di codice */.codeStyle { padding-top: 30px; }

Ho incluso gli elementi CSS basati sul contenuto in questo frame per cercare di farti risparmiare tempo in seguito. Sono tutti molto semplici e sono per lo più cambiamenti nella qualità della vita che rendono più facile l'interazione con il portfolio per i lettori.

nav z-index

Ho una quantità molto limitata di esperienza di sviluppo web, quindi non sono sicuro che questo sia un problema comune durante l'implementazione della barra di navigazione di Bootstrap, ma senza alcuna specifica di orientamento fronte-retro, la barra di navigazione apparirà effettivamente sotto altri contenuti come Le carte di Bootstrap. Questo è più evidente con la barra di navigazione pieghevole, ma ho comunque incluso la modifica dell'indice per sicurezza.

allineamento del codice

Poiché in genere utilizzo le classi "justify-content-center" e "text-center" di Bootstrap per allineare gli elementi, non voglio che il mio codice erediti quella natura allineata al centro. Questo può essere facilmente risolto sovrascrivendo eventuali modifiche all'allineamento e allineando a sinistra i tag di codice: questo preserva la spaziatura tra le tabulazioni nel codice.

Imbottitura navFix

Quando la barra di navigazione di Bootstrap è bloccata nella parte superiore della pagina, il contenuto verrà caricato sotto di essa. Credo che ciò accada perché la barra di navigazione è effettivamente bloccata nella parte superiore della finestra anziché nella pagina stessa. Indipendentemente da ciò, questo viene risolto aumentando lo spazio tra la barra di navigazione e il resto del contenuto.

pdf altezza

L'altezza predefinita dei file pdf è incredibilmente piccola. È essenzialmente illeggibile, quindi ho cambiato l'altezza per cercare di dare abbastanza spazio per circa una pagina alla volta.

Passaggio 4: frame Javascript (javascript.js)

/* * Questo cerca qualsiasi elemento con la classe 'toggle' e lo nasconde o mostra */ 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 = "blocco";

}

restituire falso;

}

/*

* Codice che deve essere eseguito in un certo ordine */ $(document).ready(function() { /* * Carica contenuto da file */

/*

* Forza un piccolo ritardo per caricare i dati */ setTimeout(function() { /* * Evidenzia tutto il codice che è stato caricato in */ $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }, 1000); });

Per rendere questo portfolio facile da modificare e gestire, ho deciso di utilizzare un formato a una pagina. Mantiene tutto locale per la maggior parte e velocizza il caricamento del contenuto.

toggleSezione

Ho usato i valori di classe per gestire il contenuto che deve essere mostrato o nascosto perché la maggior parte delle volte utilizzo div per separare e raggruppare più elementi insieme. Puoi usarlo per raggruppare anche singoli pulsanti, ma richiede un controllo aggiuntivo prima di impostare la visualizzazione "blocco" per consentire la visualizzazione di nessun contenuto.

caricamento del documento

L'ho incluso perché è generalmente disordinato includere un mucchio di codice di programmazione indipendente nei normali file HTML. Possiamo utilizzare questo metodo di evidenziazione dinamica per forzare l'esecuzione del processo dopo aver caricato il contenuto da altri file.

$('#mq2-intro').load("files/tutorial/mq2/mq2-intro/content.html");

Questo è un esempio di come caricheremo i contenuti.

Passaggio 5: barra di navigazione

Iniziali

• Casa
• A proposito di me
• Tutorial sui progetti
• Contattami

• La barra di navigazione è l'elemento più complesso di tutto il portfolio. La semplice combinazione di classi lo rende una specie di puzzle che richiede di guardare continuamente il libro delle regole.

  Funzionalità bootstrap

  Bootstrap funziona essenzialmente attraverso diversi valori di classe. Guardando l'elemento "nav" stesso, non è troppo difficile accertare lo scopo di ogni classe:

  La nostra "barra di navigazione" è l'opzione "md" (media), "espandibile", "scura". E l'abbiamo "fissato" al "top". Sembra confuso perché è un miscuglio di identificatori, ma se li guardi come aggettivi per l'elemento, diventa molto più facile capire cosa sta succedendo.

  Marca

  Il marchio è il tipico logo e nome che vedi su ogni sito web in alto a sinistra. È un elemento di design collaudato che ogni utente si aspetta a questo punto.

  Nota: i tag "i" sono in realtà le icone di FontAwesome e ottieni questi tag dalla pagina di qualsiasi icona.

  Pulsante di commutazione/ripiegabile (cellulare)

  Questo pulsante viene visualizzato solo sui dispositivi mobili. Ma poiché abbiamo incluso nella dichiarazione "nav" che la barra di navigazione deve essere espandibile, questi elementi si connettono tra loro tramite i loro ID e identificatori "data-toggle".

  Collegamenti Navbar (lato sinistro)

  Questi collegamenti dipendono interamente dalle categorie di cui hai bisogno per il tuo portafoglio. Ho incluso alcuni degli esempi tipici come punto di partenza, ma nessuno è lo stesso. Potresti non aver bisogno di una sezione "Tutorial" perché ti concentri sulla creazione di sculture d'arte. Ogni elemento "li" può essere copiato e incollato, quindi una volta capito ciò di cui hai bisogno, è facile impostare la navigazione.

  Nota: tecnicamente puoi creare menu a discesa all'interno di altri menu a discesa, ma non lo consiglierei a meno che tu non sia disposto ad aggiungere più CSS e Javascript per rendere l'interfaccia pulita.

  Collegamenti Navbar (lato destro)

  Assegnando all'elenco corretto di collegamenti la classe "ml-auto", Bootstrap separa uniformemente i due elenchi in modo uniforme. Questo crea la divisione netta sinistra e destra. Ho deciso di utilizzare questo spazio per i collegamenti ai social media perché è un metodo molto comune e popolare per aumentare la tua presenza. Se ciò non è rilevante, puoi eliminare questi collegamenti per una barra di ricerca, informazioni di accesso, ecc. Ma ricorda solo che è uno spazio importante da utilizzare. E in modo simile ai collegamenti della barra di navigazione sul lato sinistro, puoi anche copiare e incollare questi.

  Nota: se prevedi di utilizzare i link che ho già impostato, cambia il "nome utente" negli stessi link "href".

  Passaggio 6: pagina iniziale

  

  

  

  Il tuo nome

  Programmatore Scrittore Giocatore

  Questa sezione e le tue pagine di contenuto successive dipenderanno da ciò che vuoi inserire nel tuo portfolio. Ovviamente non posso affrontare ogni singolo tipo di contenuto, ma ho cercato di includere immagini, pdf, video, blocchi di codice, alcune delle inclusioni tipiche.

  Formato tabella

  La homepage è impostata per fungere da tabella. Non farei affidamento sulle mie straordinarie capacità di progettazione per creare il tuo prodotto finale, ma ho aggiunto le diverse varianti di combinazioni di righe e colonne per dimostrare che è molto dinamico e flessibile. Puoi creare 3 righe e 2 colonne per avere pulsanti a sinistra e contenuti a destra, oppure puoi fare qualcosa di completamente diverso. Ci vuole solo un po' di sperimentazione.

  pulsanti

  Questi funzionano essenzialmente come i normali pulsanti. L'unica vera integrazione Bootstrap qui deriva dallo stile per abbinarsi al resto del tema. Altrimenti, crea tutti i pulsanti necessari per mostrare i tuoi contenuti e quindi assicurati di abbinare i collegamenti href con gli ID per i div.

  Contenuto del codice di programmazione

  I tag "code" sono i tag predefiniti utilizzati da highlight.js per gestire tutte le evidenziazioni. Se ricordi dal file javascript.js, c'è una sezione per caricare il contenuto da altri file.

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

  • La prima parte di questo cerca l'"id" dell'elemento in cui vuoi inserire il contenuto.
  • La seconda parte è la posizione del file che si desidera caricare.

  Nota: il contenuto in realtà non verrà caricato completamente perché ci sono buone probabilità che tu stia modificando questa pagina web localmente invece che su un server. Questo può essere affrontato in diversi modi che tratterò alla fine di Instructable.

  Video Youtube

  L'"iframe" incorporato in realtà proviene da YouTube stesso. Non spiegherò ampiamente come ottenerli, ma quando vai su "Condividi" un video, c'è un'opzione "Incorpora" che ti aiuterà a generare il codice necessario per mostrare il tuo video sulla pagina web.

  Passaggio 7: guardare avanti

  È molto probabile che non abbia trattato alcuni elementi o tipi di contenuto che desideri includere nel tuo sito web. Per fortuna ci sono molte buone opzioni per farti compiere i prossimi passi da solo.

  Documentazione di Bootstrap

  La documentazione di Bootstrap è un ottimo punto di partenza se stai cercando elementi pre-programmati e con esempi che puoi copiare e incollare nel tuo portfolio per sperimentare. Non ho toccato Carte, Caroselli o Moduli. Consiglio vivamente di guardare attraverso la sezione "Componenti" per vedere le opzioni.

  W3Scuole

  W3Schools è un meraviglioso sito web dove puoi imparare qualsiasi cosa relativa alla programmazione e allo sviluppo web. Sono molto più intelligenti di me e coprono praticamente tutte le funzionalità HTML, CSS e Javascript a cui puoi pensare.

  Ospitare il tuo portfolio

  Questo Instructable ti insegna come ospitare il tuo sito Web su alcune piattaforme diverse. Questi sono i passaggi che devi compiere se vuoi essere in grado di mostrare a persone, reclutatori, ecc. il tuo portafoglio.

  Sperimenta e divertiti

  L'unico modo per creare un ottimo portfolio è sperimentare e provare qualsiasi cosa e tutto ciò che sembra interessante. Molti portafogli di design e siti Web di fantasia utilizzano grandi effetti di transizione o sfondi dinamici, ma nessuno di questi è stato preconfezionato.