Tutorial Bootstrap


tutorial bootstrap 4


bootstrap è un framework front-end che ti aiuta a creare siti Web responsive per dispositivi mobili in modo più rapido e semplice. Sviluppato per la prima volta da Twitter, Bootstrap è ormai utilizzato per qualsiasi cosa, dallo sviluppo di applicazioni Web ai temi WordPress. È anche completamente gratuito, versatile e intuitivo.

Con Bootstrap puoi evocare pagine Web complesse da HTML standard e personalizzarle in base alle tue esigenze. Bootstrap include anche numerosi plug-in jQuery in grado di fornire funzionalità aggiuntive come caroselli, pulsanti, descrizioni comandi e altro.

Infine, ma non meno importante, ti offre molte scorciatoie per la creazione di pagine Web che ti faranno risparmiare tempo ed energia. Tutto ciò di cui hai bisogno è una conoscenza di base di HTML e CSS per creare risposte reattive, mobili e compatibili con tutti i browser moderni.

P.S. Bootstrap non è un’opzione perfetta per i principianti completi. Alcune conoscenze HTML e CSS sarebbero utili. In alternativa, è possibile utilizzare i creatori di siti Web o WordPress per creare un sito Web.

Come creare un sito Web utilizzando Bootstrap (sommario):

  1. Passo 1: Installazione e panoramica
    1. Crea una pagina HTML
    2. Caricare Bootstrap tramite CDN o ospitarlo localmente
    3. Includi jQuery
    4. Carica JavaScript Bootstrap
    5. Metterli tutti insieme
  2. Passo 2: Progetta la tua landing page
    1. Aggiungi una barra di navigazione
    2. Includi CSS personalizzato
    3. Creare un contenitore del contenuto della pagina
    4. Aggiungi immagine di sfondo e JavaScript personalizzato
    5. Aggiungi un overlay
    6. Includi il titolo di una pagina e il testo del corpo
    7. Crea un pulsante CTA
    8. Imposta una sezione a tre colonne
    9. Aggiungi un modulo di contatto
    10. Crea un piè di pagina a due colonne
    11. Aggiungi query multimediali
    12. Dai vita al tuo sito web

Tempo totale per la creazione di un sito Web tramite Bootstrap: 3-4 ore.
Livello di abilità: Principiante a intermedio

Passaggio 1: installazione e panoramica


Per utilizzare Bootstrap, devi prima integrarlo nel tuo ambiente di sviluppo, noto anche come pagina web. Per questo, hai due diverse possibilità: caricarlo da remoto o scaricare e utilizzare Bootstrap localmente. Tuttavia, per entrambi, è necessario prima qualcosa per caricarlo.,

1. Creare una pagina HTML

Come primo passo, creeremo un semplice modello HTML come base in cui utilizzeremo Bootstrap. Per questo, la prima cosa che vuoi fare è creare una cartella sul tuo computer o server per i file di progetto. In questo caso, lo chiamerò semplicemente bootstrap. Qui, crea un nuovo file di testo e chiamalo index.html. Aprilo con un editor di testo a tua scelta (ad es. Bloc notes++), quindi incolla il codice sottostante.





Pagina di esempio del tutorial Bootstrap








Non dimenticare di salvare il file prima di procedere!

2a. Caricare Bootstrap tramite CDN

Come già spiegato, Bootstrap è costituito principalmente da fogli di stile e script. Come tali, possono essere caricati nell’intestazione e nel piè di pagina della tua pagina web come altre risorse come caratteri personalizzati. Il framework offre un percorso di accesso CDN (content delivery network). Puoi trovarlo sul Pagina di download di Bootstrap, più sotto.

Per ottenere Bootstrap nella tua pagina, è sufficiente incollare il codice qui sotto in sezione del modello.

Quando ora salvi il file, qualsiasi browser che lo apre caricherà automaticamente le risorse Bootstrap.

L’uso del metodo remoto è una buona idea poiché molti utenti avranno già il framework nella cache del proprio browser. In tal caso, non dovranno ricaricarlo quando accederanno al tuo sito, portando a tempi di caricamento della pagina più rapidi. Di conseguenza, questo è il metodo raccomandato per i siti live.

Tuttavia, per sperimentare e sviluppare, o se vuoi essere indipendente da una connessione Internet, puoi anche ottenere la tua copia di Bootstrap. Questo è quello che sto facendo per questo tutorial perché risulta anche meno codice da pubblicare.

2b. Host Bootstrap localmente

Un modo alternativo per configurare Bootstrap è scaricarlo sul disco rigido e utilizzare i file localmente. Le opzioni di download si trovano nello stesso posto dei collegamenti alla versione remota. Qui, assicurati di ottenere i file CSS e JS compilati. Non hai bisogno dei file di origine.

Una volta fatto, decomprimere il file e copiarne il contenuto nella stessa directory di index.html. Successivamente, puoi caricare il CSS Bootstrap nel tuo progetto in questo modo:

Noterai che questo include il percorso del file in cui trovare il file Bootstrap. Nel tuo caso, assicurati che il tuo percorso corrisponda alla tua configurazione effettiva. Ad esempio, i nomi delle directory potrebbero differire se è stata scaricata una versione diversa di Bootstrap.

3. Includi jQuery

Per ottenere la piena funzionalità di Bootstrap, è inoltre necessario caricare la libreria jQuery. Anche qui hai la possibilità di caricarlo da remoto o ospitarlo localmente.

Nel primo caso, trovi il link all’ultima versione di jQuery Qui. Puoi usarlo per caricare la libreria nella tua pagina mettendo la riga di codice in basso a destra prima di dove dice sulla tua pagina.

In alternativa, scarica jQuery (tasto destro> Salvare il link come…), decomprimilo e inseriscilo nella cartella del progetto. Quindi, includilo nello stesso posto del tuo file in questo modo:

Ancora una volta, assicurati che il percorso corrisponda alla tua configurazione.

4. Caricare Bootstrap JavaScript

L’ultimo passaggio nella configurazione di Bootstrap è caricare la libreria JavaScript Bootstrap. Questi sono inclusi nella versione scaricata del framework e si trovano anche collegamenti a fonti remote nello stesso posto di prima. Tuttavia, lo cariceremo in un posto diverso rispetto al foglio di stile. Invece dell’intestazione, va nel piè di pagina, subito dopo la chiamata per jQuery.

Puoi chiamarlo da remoto in questo modo:

O localmente così:

5. Metti tutto insieme

Se hai seguito correttamente i passaggi sopra, dovresti trovare un file simile alla soluzione remota:

   Pagina di esempio del tutorial Bootstrap         

In alternativa, se si esegue l’hosting locale, il modello di pagina dovrebbe assomigliare al codice seguente:

   Pagina di esempio del tutorial Bootstrap         

Se questo è ciò che hai e hai salvato il tuo lavoro, ora sei pronto per passare al passaggio successivo.

Passaggio 2: Progetta la tua pagina di destinazione


Va bene, è stato, certamente, molto lavoro di preparazione. Tuttavia, non è stato molto difficile, vero? Inoltre, ora inizia il divertimento.

Al momento, quando accedi al tuo sito di esempio, dovresti semplicemente vedere una pagina vuota. È ora di cambiarlo.

1. Aggiungi una barra di navigazione

La prima cosa che vogliamo fare è aggiungere una barra di navigazione nella parte superiore della pagina. Ciò consente ai tuoi visitatori di aggirare il tuo sito e scoprire il resto delle tue pagine.

Per questo, useremo il barra di navigazione classe. Questo è uno dei elementi predefiniti di Bootstrap. Crea un elemento di navigazione che è reattivo per impostazione predefinita e crollerà automaticamente su schermi più piccoli. Offre inoltre supporto integrato per l’aggiunta di marchio, combinazioni di colori, spaziatura e altri componenti.

Lo useremo come di seguito e lo pubblicheremo appena sotto il etichetta:

 Logo   

Qualche spiegazione del codice:

  • navbar-expand-md – Questo indica a che punto la barra di navigazione si espande dall’icona verticale o hamburger a una barra orizzontale a grandezza naturale. In questo caso, lo abbiamo impostato su schermi medi, che, in Bootstrap, è qualcosa di più grande di 768px.
  • navbar-brand – Questo è usato per il marchio del tuo sito web. Puoi anche includere un file immagine logo qui.
  • navbar-toggler – Indica il pulsante di attivazione / disattivazione per il menu compresso. Il pezzo Dati ginocchiera = "collasso" definisce che questo si trasformerà in un menu di hamburger, non in un menu a discesa, che è l’altra opzione. È importante definire a data-obiettivo con un ID CSS (definito da #) e avvolgere a div con lo stesso nome attorno all’attuale barra di navigazione elemento.
  • navbar-toggler-icon – Come probabilmente puoi immaginare, questo crea l’icona su cui gli utenti fanno clic per aprire il menu su schermi più piccoli.
  • navbar-nav – La classe per il
      elemento dell’elenco che contiene le voci di menu. Questi ultimi sono indicati con nav-item e nav-link.

    Perché lo sto spiegando così tanto?

    Perché questo è il punto di Bootstrap. Hai tutti questi standard che ti consentono di creare rapidamente elementi con alcune classi HTML e CSS. Non è necessario scrivere alcun CSS per fornire uno stile, tutto è già impostato in Bootstrap. Inoltre, tutto è pronto per la risposta mobile! Stai iniziando a vedere quanto sia utile?

    Quanto sopra è sufficiente per aggiungere una barra di navigazione al tuo sito. Tuttavia, al momento, sembra ancora molto poco.

    tutorial bootstrap aggiunge barra di navigazione

    Questo perché non ha molti stili associati. Mentre sei in grado di aggiungere colori predefiniti (ad esempio, assegnando alla barra di navigazione una classe simile bg-dark navbar-dark), vogliamo invece aggiungere il nostro.

    2. Includi CSS personalizzato

    Fortunatamente, se vuoi cambiare lo stile predefinito, non devi guadare una vasta libreria di fogli di stile e apportare le modifiche a mano. Invece, proprio come con un tema figlio di WordPress, puoi aggiungere i tuoi file CSS che puoi utilizzare per sovrascrivere lo stile esistente.

    Per questo, basta creare un file vuoto con l’editor di testo e chiamarlo main.css. Salvalo, quindi aggiungilo alla sezione head del tuo sito Bootstrap in questo modo:

    Questo è il codice per un foglio di stile che risiede nella directory principale. Se decidi di metterti dentro css cartella, assicurarsi di includere il percorso corretto nel collegamento.

    Da qui, puoi aggiungere CSS personalizzati al tuo sito. Ad esempio, per dare uno stile alla barra di navigazione e ai suoi elementi, è possibile utilizzare il markup in questo modo:

    body { imbottitura: 0; margine: 0; sfondo: # f2f6e9; } /*--- barra di navigazione ---*/ .navbar { background: # 6ab446; } .nav-link, .marchio navbar { colore: #fff; cursore: puntatore; } .nav-link { margine-destra: 1em! importante; } .nav-link: hover { colore: # 000; } .navbar-collapse { contenuti giustificati: flex-end; }

    E questo è il risultato:

    barra di navigazione in stile tutorial bootstrap

    Sembra meglio di prima, no?

    3. Creare un contenitore del contenuto della pagina

    Dopo la barra di navigazione, la prossima cosa che vuoi è un contenitore per il contenuto della pagina. Questo è davvero facile in Bootstrap in quanto tutto ciò che serve è questo sotto il tag della barra di navigazione:

    Notare il contenitore di fluido classe. Questa è un’altra di quelle classi Bootstrap predefinite. Applicandolo al div L’elemento applica automaticamente un gruppo di CSS ad esso.

    Il -fluido parte assicura che il contenitore si estenda per l’intera larghezza dello schermo. C’è anche solo un contenitore, a cui sono state applicate larghezze fisse, quindi ci sarà sempre spazio su entrambi i lati dello schermo.

    Tuttavia, se ora ricarichi la pagina, non vedrai ancora nulla (a meno che non utilizzi gli strumenti per sviluppatori). Questo perché hai creato solo un elemento HTML vuoto. Questo inizierà a cambiare ora.

    4. Aggiungi un’immagine di sfondo e JavaScript personalizzato

    Come passaggio successivo di questa esercitazione su Bootstrap, vogliamo includere un’immagine di sfondo a schermo intero per la nostra intestazione della pagina di destinazione. Per questo, dovremo usare un po ‘di jQuery per allungare l’immagine su tutto lo schermo.

    Lo fai nello stesso modo in cui includi CSS personalizzati. Innanzitutto, crea un file di testo con il nome main.js e inseriscilo nella cartella del tuo sito. Quindi, chiamalo prima della chiusura tag all’interno index.html.

    Successivamente, puoi copiare e incollare questo pezzo di codice per creare il

    elemento si estende su tutto lo schermo:
    $ (Document) .ready (function () { $ ( 'Header') Altezza ($ (window) .height ()).; })

    Quindi, l’unica cosa che rimane è impostare un’immagine di sfondo. Puoi farlo così dentro main.css:

    .intestazione { immagine di sfondo: url ('images / header-background.jpg'); dimensione dello sfondo: copertina; posizione di sfondo: centro; posizione: relativa; }

    Se si posiziona un’immagine di dimensioni sufficienti nella posizione specificata dal percorso sopra, si otterrà un risultato simile al seguente:

    Tutorial bootstrap include immagine di sfondo dell'intestazione

    5. Aggiungi un overlay

    Per rendere l’immagine di sfondo più elegante, aggiungeremo anche una sovrapposizione. Per questo, creerai un altro elemento div all’interno di quello che hai appena incluso in precedenza.

    Quindi, puoi aggiungere quanto segue nel tuo file CSS personalizzato:

    .overlay { posizione: assoluta; altezza minima: 100%; larghezza minima: 100%; sinistra: 0; in alto: 0; sfondo: rgba (0, 0, 0, 0.6); }

    Questo creerà questo bel overlay per l’immagine che hai inserito in precedenza:

    tutorial bootstrap aggiungere overlay

    6. Includere il titolo di una pagina e il testo del corpo

    Ora probabilmente vuoi aggiungere un titolo di pagina sotto forma di un’intestazione più un po ‘di testo. In questo modo, i tuoi visitatori sapranno immediatamente su quale sito si trovano e cosa possono aspettarsi da esso.

    Per crearli, aggiungi semplicemente questo frammento all’interno del contenitore che hai impostato nell’ultimo passaggio, sotto l’overlay:

    Benvenuto nella pagina di destinazione!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.

    Successivamente, aggiungi il seguente markup a main.css.

    .descrizione { sinistra: 50%; posizione: assoluta; in alto: 45%; trasforma: traduci (-50%, -55%); text-align: center; } .descrizione h1 { colore: # 6ab446; } .descrizione p { colore: #fff; font-size: 1.3rem; altezza della linea: 1,5; }

    Quando lo fai, la landing page ora appare così:

    tutorial bootstrap aggiunge titolo e descrizione della pagina

    Sta davvero iniziando a riunirsi, non è vero?

    7. Creare un pulsante CTA

    Nessuna pagina di destinazione è completa senza un invito all’azione, molto spesso sotto forma di un pulsante. Per questo motivo, ci dispiacerebbe non includere come crearne uno in questo tutorial Bootstrap.

    Il framework offre numerosi strumenti per creare pulsanti in modo rapido e semplice. Puoi trovare molti esempi Qui. Nel mio caso, aggiungo il seguente markup proprio sotto il contenuto della pagina all’interno di contenitore:

    Inoltre, aggiungo questo CSS a main.css:

    .pulsante descrizione { bordo: 1px solido # 6ab446; background: # 6ab446; bordo-raggio: 0; color: #fff; } .pulsante descrizione: hover { bordo: 1px solido #fff; sfondo: #fff; color: # 000; }

    Dopo aver salvato e ricaricato, si presenta così:

    tutorial bootstrap aggiunge il pulsante di invito all'azione

    8. Impostare una sezione a tre colonne

    Sono già abbastanza soddisfatto di come stanno andando le cose. Tuttavia, non abbiamo ancora finito con la pagina. Successivamente, vogliamo creare tre colonne sotto il contenuto principale per ulteriori informazioni. Questa è una specialità di Bootstrap poiché gioca alla sua forza: creando una griglia. Ecco come farlo in questo caso:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    La prima cosa che noterai è la riga elemento. Questo è necessario ogni volta che si creano colonne per fungere da contenitore per la griglia.

    Per quanto riguarda le colonne, hanno tutte diverse classi: col-lg-4, col-md-4 e col-sm-12. Questi indicano che abbiamo a che fare con le colonne e le dimensioni che avranno su schermi diversi.

    Per capirlo, devi sapere che in una griglia Bootstrap, tutte le colonne in una riga si sommano sempre al numero 12. Quindi, dare loro le classi sopra significa che occuperanno un terzo dello schermo su grande e medio schermi (12 divisi per 3 è 4) ma l’intero schermo su piccoli dispositivi (12 colonne su 12).

    Ha senso, no?

    Noterai anche che ho incluso immagini e aggiunto il .image-fluido classe per loro. Questo per renderli reattivi in ​​modo che si ridimensionino insieme a uno schermo su cui viene visualizzata la pagina.

    Oltre a ciò, hai il seguente stile incluso nel solito posto:

    .Caratteristiche { margine: 4em auto; imbottitura: 1em; posizione: relativa; } .titolo-funzione { colore: # 333; font-size: 1.3rem; peso carattere: 700; margine inferiore: 20 px; trasformazione del testo: maiuscolo; } .features img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); margine inferiore: 16px; }

    Se aggiunto sotto il contenuto principale e salvato, si presenta così:

    Il tutorial bootstrap aggiunge una sezione di tre colonne

    9. Aggiungi un modulo di contatto

    Noterai che uno dei nuovi campi è ancora vuoto. Questo è stato apposta perché vogliamo aggiungere un modulo di contatto ad esso. Questa è una pratica molto normale per le landing page per consentire ai visitatori di entrare in contatto.

    La creazione di un modulo di contatto in Bootstrap è abbastanza semplice:

    Mettiti in contatto!

    Ormai non dovrei più spiegare il markup per creare colonne. Ecco cosa significa il resto del markup:

    • forma-gruppo – Utilizzato per avvolgere i campi del modulo per la formattazione.
    • modulo di controllo – Indica campi modulo come input, aree di testo ecc.

    C’è molto di più che puoi fare con i moduli, che puoi trovare nel documentazione. Tuttavia, a scopo dimostrativo, quanto sopra è sufficiente. Inseriscilo nella colonna vuota rimanente e aggiungi questo stile main.css:

    .caratteristiche .form-control, .input di funzioni { bordo-raggio: 0; } .features .btn { colore di sfondo: # 589b37; bordo: 1px solido # 589b37; colore: #fff; margine superiore: 20 px; } .features .btn: hover { colore di sfondo: # 333; bordo: 1px solido # 333; }

    Quando lo fai, ottieni un modulo come questo:

    tutorial bootstrap include modulo di contatto

    10. Creare un piè di pagina a due colonne

    Bene, ora stiamo arrivando alla fine del tutorial Bootstrap. L’ultima cosa che vuoi aggiungere alla tua landing page è una sezione a piè di pagina con due colonne. Ormai, questo non dovrebbe più rappresentare un grosso problema per te.

    Informazioni aggiuntive

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Contatto

    1640 Riverside Drive, Hill Valley, California
    [Email protected]
    + 01 234 567 88
    + 01 234 567 89

    Oltre al solito markup della griglia, questa sezione evidenzia alcune possibilità per modificare la tipografia con Bootstrap:

    • text-maiuscolo
    • font-weight-bold
    • text-center

    Dovrebbe essere abbastanza chiaro dai nomi delle classi che fanno. Puoi trovare ulteriori informazioni su Bootstrap e tipografia Qui.

    Oltre a quanto sopra, è possibile utilizzare lo stile in questo modo:

    .piè di pagina { colore di sfondo: # 222; colore: #ccc; imbottitura: 60px 0 30px; } .footer-copyright { colore: # 666; imbottitura: 40px 0; }

    Ciò si traduce in un bellissimo piè di pagina che assomiglia a questo:

    tutorial bootstrap include piè di pagina

    11. Aggiungi query multimediali

    La pagina è praticamente pronta ormai. È anche pienamente responsabile. Tuttavia, nella vista mobile del browser, la sezione superiore non è ancora del tutto corretta.

    errore tutorial bootstrap sul design mobile

    Tuttavia, non preoccuparti, puoi correggerlo abbastanza facilmente con una semplice query multimediale. A meno che tu non stia usando SASS per compilare il tuo sito Bootstrap, questi funzionano allo stesso modo degli altri casi. Devi solo tenere a mente il punti di interruzione preimpostati incluso in Bootstrap.

    Di conseguenza, per correggere il problema sopra riportato, puoi semplicemente includere un pezzo di codice come questo:

    @media (larghezza massima: 575.98px) { .descrizione { sinistra: 0; imbottitura: 0 15px; posizione: assoluta; in alto: 10%; trasforma: nessuno; text-align: center; } .descrizione h1 { dimensione carattere: 2em; } .descrizione p { dimensione carattere: 1,2rem; } .Caratteristiche { margine: 0; } }

    Dopodiché, tutto è come dovrebbe essere:

    tutorial bootstrap aggiunge media query

    12. Carica il tuo sito Web su un host web

    Se stai seguendo, ora dovresti essere impostato con un sito Web finito che anche su dispositivo mobile ed è completamente reattivo.

    Tuttavia, finora, nessuno tranne te lo puoi vedere. Per cambiarlo, sono necessari un host web e un dominio. In questo modo, le persone possono inserire l’indirizzo del tuo sito Web nella barra del browser e quindi accedere al tuo sito Web Bootstrap coniato di recente online.

    Per consentire loro di farlo, è necessario caricare il sito sul proprio server. Puoi farlo con un client FTP come FileZilla. Raccogliere l’indirizzo host FTP, nome utente e password dal provider di hosting per connettersi al server in remoto. Quando lo fai, dovresti essere in grado di vedere i file e le directory attualmente presenti.

    caricare il sito Web bootstrap sul server tramite ftp

    Passa alla directory in cui è indicato il tuo dominio (di solito la directory principale). Una volta fatto, trova semplicemente la cartella con i tuoi file Bootstrap sul tuo disco rigido, segna tutti i file all’interno e quindi trascinali sul server per avviare il caricamento. Il processo richiederà un po ‘di tempo, a seconda della velocità di connessione, nonché del numero e delle dimensioni dei file.

    Tuttavia, una volta terminato, quando accedi al tuo dominio, dovresti essere in grado di vedere il sito finito nella finestra del browser.

    Tutorial bootstrap finito landing page

    Non male per poche righe di codice, giusto?

    A proposito, se si desidera avere l’intero codice per la pagina inclusi CSS e JavaScript personalizzati, è possibile scaricarli tutti qui. Con questo, hai tutto ciò che ti serve per creare una landing page con Bootstrap.

    Conclusione

    Bootstrap è un framework di sviluppo open-source e front-end che chiunque può utilizzare gratuitamente. Ti consente di prototipare rapidamente i progetti, creare pagine Web e, in generale, andare in pista.

    Come hai visto in questo tutorial di Bootstrap per principianti, richiede solo conoscenze di base di HTML, CSS e alcuni jQuery opzionali. Sebbene non sia comodo come usare WordPress, Bootstrap è ancora una valida alternativa per creare un sito Web.

    Ormai sai come impostare e installare Bootstrap e i suoi componenti, creare una semplice pagina di destinazione, includere alcuni contenuti di base e modellarlo. È possibile creare menu di navigazione, impostare immagini di sfondo, includere pulsanti, colonne e moduli di contatto.

    Certo, c’è altro da imparare.

    Grazie a questo tutorial Bootstrap di base, ora conosci abbastanza per andare avanti da solo. Se vuoi immergerti più a fondo nel framework, è un buon punto di partenza W3Schools. A parte questo, speriamo che questo tutorial per principianti ti sia piaciuto e che desideri ascoltare i tuoi pensieri e le tue esperienze al riguardo.

    Aggiornamento: abbiamo anche creato un cheat bootstrap per principianti nelle versioni .pdf e .png.

    Hai qualche idea sul tutorial Bootstrap sopra? Domande, commenti, richieste? Facci sapere nella sezione commenti qui sotto!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map