Creare siti con Bootstrap con un Metodo Efficace #1 - Intro, Metodo, Navbar

In questa serie di video andiamo a vedere come creare sito con bootstrap con un metodo efficace. Scarica il codice creato qui: bit.ly/marchett...
...
Oggi vi presento il metodo che utilizzeremo per massimizzare l'efficenza di bootstrap lo SMO. Setup, Modify, Override.
Facciamo subito un esempio di utilizzo del sistema realizzando il menu del nostro sito responsive.
-
Sito: www.marchettide...
-
Temi WordPress FREE
Fullby: www.marchettide...
Gridby: www.marchettide...
Swipy: www.marchettide...
Fullbase: it.wordpress.o...
-
Twitter: / afmarchetti
Facebook: / marchettidesignnet-140...
Github: github.com/afm...
Codepen: codepen.io/afm...
-
Music: Soundcloud
-
Camera - iPhone 6
-
Stay Tuned!

[@effiemero2989]

Bravissimo!!! Fino a 15 minuti e 13 non sapevo neanche cosa fosse Bootstrap. GRAZIE MILLE!

[@Enrico-Migliore]

Il Sig. Andrea Marchetti e' una persona molto competente nell'ambito del Web Design ed ha una completa padronanza di HTML-5 e CSS-3. Ti ringrazio molto per questo tutorial gratuito che mi ha permesso in 20 minuti di diventare operativo con Bootstrap.

[@gregoriograziano]

Complimenti, chiarissimo ed utilissimo e non era facile visto che non si parlava solo di un componente ma di un metodo vero e proprio per lavorare con qualsiasi componente.

[@mrchricco]

Accidenti grazie mille !!! Ottimo tutorial chiaro ed efficace, la cosa più importante per me è stata il metodo S.M.O. mi ha aperto un mondo ... seguirò volentieri tutti gli altri tutorial.

[@romyt9816]

Grazie. Ho imparato da poco ad usare Bootstrap 3; seguivo anch'io il metodo SMO, solo che non lo chiamavo così :D mi hai dato una conferma e una sorta di sicurezza su come muovermi, sei stato davvero charo. Ovviamente ne vedrò altri e mi iscriverò al canale, bravo!

[@fulviopulimanti8333]

Corso molto ben fatto. Il tempo è passato, sarebbe bello vederne uno con bootstrap 4! Ancora complimenti

[@Pinolissimo]

Complimenti per le spiegazioni chiare e precise, ottimo lavoro!

[@lullo7852]

Complimenti , continua con questi video che sono letteralmente eccellenti.

[@invinoveritas8176]

Ottima e abbondante qualità nel lavoro. Grazie, davvero bravo.

[@fabpanzer5889]

Ciao Andrea, grazie sei molto bravo a spiegare..cercavo dei tutorial per imparare a suonare la chitarra e mi sono imbattuto nei tuoi video: ora sono in grado di creare siti con bootstrap!.. :-)

[@solvingsolutions8107]

Ottimo video, veramente ben realizzato! Vado a vedere il prossimo.

[@lucadifazio2735]

Bravo, spieghi benissimo

[@giuseppesperanza3581]

Sei davvero molto chiaro nelle spiegazioni, mi trovo davvero bene e sto imparando tantissimo! Grazie mille! spero che farai altri video come questo :)

[@Marchetti_Design]

Grazie Giuseppe!

[@GiuseppeTresTRIK]

Peccato che siano finite .... Spero ancora in altri video, perché come ci hai fatto notare il mondo bootstrap è molto vasto.Per il momento un gigantesco GRAZIE

[@danilos5627]

veramente bel video, chiaro, finalmente un video che va molto nel tecnico! grande andrea marchetti per favore continua così!

[@vagnonivagnoni]

OTTIMO VIDEO HO CAPITO FINALMENTE COME INTEGRARE I CSS IN BOOTSTRAP😊😊😊😊😊😊😊😊😊.

[@codyx274]

Ottima Guida !! Grazie ( Like & Subscribe )

[@marcosorrenti93]

Chiaro, preciso e utilissimo. Grazie!

[@33kisha33]

Sei bravissimo e chiaro.

[@giustinoromano]

Fai anche il farmacista Andrè? XD Sempre chiaro ed utilissimo! Grazie!!!

[@pierospano2149]

Ottimo video e davvero molto chiaro nelle spiegazioni. Domanda. Come fare per inglobare un tema creato direttamente con bootstrap in wordpress?

[@lucalorenzetti5645]

Ciao Andrea, complimenti per questo corso, volevo chiederti se farai mai un aggiornamento con Bootstrap 4, sarebbe bello vedere i cambiamenti e/o miglioramenti effettuati da questo framework...

[@fabrizio8791]

Molto chiaro e utilissimo. Grazie

[@deepweb2472]

Comunque sei un grande e quello che faccio anche io su template prescaricati quando ho dei lavori svelti da fare grande !!@

[@glsoft]

Spieghi davvero bene! Complimenti! proprio per questo mi hai fatto venir voglia di imparare qualcosa in più. Sto lavorando infatti ad un template bootstrap dove ad un certo punto compare un player audio con sorgente "file" che al click apre la solita finestra di Input del Pc. La domanda è: posso modificare la sorgente di Input ed inserire al suo posto una sorgente streming , per es. quella di una radio online? Grazie per la risposta! Ciao Luciano

[@claytonmion502]

Grandissimo! Cheers from Brazil.

[@damianofiorentino1919]

Sei un grandissimo, video ben fatto e spiegazione eccellente!

[@robertocoletti5067]

presentazione fantastica. Non è che per caso ne hai fatta una anche per la versione 4.5? :)

[@stefanobulgheroni]

complimenti , spiegazione molto chiara. ciao

[@Marchetti_Design]

Grazie per il supporto!

[@AlessandroForcuti]

Ottime spiegazioni. Grazie tantissimo.

[@robertomuscolini1041]

Complimenti chiaro e semplice

[@TechID]

Grazie. Ottimo video come tutti gli altri del tuo canale. ;)

[@donniedesign9095]

Complimenti ! una bomba !

[@alessandrobertino]

ciao a me non funziona jquery :-( menu con dropdown non funziona come mai? ho puntato logicamente il file jquery ma non funziona lo stesso. ho ultima versione di bootstrap

[@TheMrTraceur]

Mi trovo molto bene col tuo modo di spiegare e ti ringrazio per l'ottimo lavoro che fai con i tuoi video, sono davvero una risorsa fondamentale. Ora farò una domanda da principiante, lo so, ma come mai bisogna mettere la versione 1.x di jquery e non una più aggiornata come la 3.x?

[@Marchetti_Design]

Ciao Francesco grazie del supporto ;-) Bootstrap richiede di default la versione 1.x di jquery che supporta internet explorer 8

[@sebastiancalanzone4640]

Ciao, anch'io ho seguito attentamente i passaggi per la corretta visualizzazione della Navbar,ma ho avuto 2 problemi;Il 1°legato all'effetto hover(black) dei link del menu che rimane fermo sulla prima voce e quindi al momento di cliccare le altre voci del menu,incluso il Brand...l'effetto dell'hover black non è visibile; Il 2°problema riscontrato riguarda il menu dropdown a destra...quest'ultimo oltre all'hover non visibile non apre la tendina,non mostrando le voci contenute; Secondo voi quale potrebbe essere il problema??? Confido in voi e grazie in anticipo! Sebastiano

[@baldassarrecanino5586]

Ciao, trovo fantastici i tuoi video e la tua professionalità. Nella prima parte quando inserisco la navbar, la parte destra, il dropdown non funziona, non riesco ad individuare il problema avendo seguito tutti gli step...

[@maurobellini-q1k]

Molto bravo nella spiegazione. Unica nota dolente, per me, la musichetta di sottofondo...la metterei solo all'inizio e alla fine...

[@samuelefilincieri]

bel tutorial, ma ne potresti fare un'altro uguale mentre vai un po' più lento e spieghi più lentamente i tag a cosa servono ecc..che mi perdo? grazie

[@marcomilza7801]

A livello teorico perchè quello che scrivi nel tuo foglio css custum sovrascrive bootstrap? E' perchè ha pari importanza ma viene letto dopo ? se si in base a quale criterio legge dopo il tuo foglio custum rispetto alle classi di bootstrap? ....e poi pensavo, boostrap mette "! important" dopo le sue classi css, non dovrebbero quindi avere un'importanza gerarchica superiore?

[@andreamodesti658]

Ottima spiegazione. Per ora mi sembra molto chiaro. Ho bisogno però di chiederti una cosa, vedo che tu quando scrivi compili automaticamente i tag con apertura chiusura ed eventualmente classe... Ci sono delle scorciatoie da tastiera che fanno ciò ? Oppure ci sono dei pacchietti da installare ? Grazie e Ciao

[@riccardoantoniocalabrese7010]

Si chiama Emmett ed è un tool di Arom

[@marcelloprocaccini4493]

Nella Navbar esiste un menu a due o più livelli? L'ho cercato ma non l'ho trovato. Grazie

[@sabrinapani5854]

Ciao, seguo con costanza i tuoi video tutorial che sono fatti veramente bene. Grazie Vorrei realizzare un menu fisso allo scroll della pagina, ma che cambia la visualizzazione degli elementi. Devo creare due menu differenti e lavorare con Jquery?

[@gianlucacaruso7810]

drop down non funziona, ma ho messo tutto, per come li hai elencati tu

[@ale888able]

ottimo video

[@matteobasso92]

Ciao Andrea, volevo chiederti un consiglio. Vorrei cimentarmi a creare siti web con Bootstrap. (Premetto che ho fatto una scuola di grafica e che a scuola utilizzavamo dreamweaver). Tempo fa avevo trovato un modo per collegare lo stesso css a più pagine di un sito, così da rendere diversa ogni pagina, ma evitare di fare più css. Con bootstrap posso farlo? Se volessi un domani vendere un sito creato con bootstrap, che ho modificato a mio piacimento, però utilizzando codici base dal sito bootstrap, posso? È legale, posso farlo? GRAZIE E CONTINUA COSÌ, I TUOI VIDEO SONO UTILISSIMI ❤️😘

[@elamusic6240]

Complimenti! (:

[@Marcorossetti26]

Fantastico!

[@dinotorraco8136]

Tutto bello e perfetto nella spiegazione!! Ma io non riesco a capire come mai la parte script se non ho interent NON funziona....ho anche scaricato jquery offline ma non va! dove sbaglio?? grazie

[@francescam.colombo6410]

io ho un problema... quando il menù viene "compattato" a dropdown per la visualizzazione su mobile, una volta cliccato sopra il menù scende, ma se riclicco sull'icona per nasconderlo di nuovo questo non risale. Ho provato a capire se fosse un problema mio di scrittura del codice, ma invece no perchè ho provato a copiarlo e incollarlo prendendolo direttamente dal sito di bootstrap.qualche consiglio???

[@giuseppebosco4269]

del file css, se viene usato bootstrap.min.css, perchè conservare il file bootstrap.css? Il template ne legge solo uno, quello minificato o quello standard?

[@bannylla]

Ciao, sto seguendo il tuo tutorial che è veramente fatto molto bene. Ho il problema che quando provo a modificare il css della classe navbar-brand nel foglio di stile "style.css", le modifiche che apporto non vengono acquisite. Sai dirmi quale può essere il motivo?

[@XxXgabbO95XxX]

Hai linkato il foglio di stile nella pagina html con ? Se si, vedi se il file del foglio di stile è contenuto nella stessa cartella del file html, sennò devi specificare il percorso, credo. Ciao

[@rafaelbenetton3674]

Ottimo Tutorial, una domanda, solo a me ci mette tanto ad aprirsi l'installazione di Atom?

[@grazialotito2470]

Non mi visualizza il pulsante della navbar quando lo fai diventare mobile. Gentilmente mi spiegheresti il problema. Grazie

[@agrippinoperuggio4666]

Ciao, guida perfetta, solo che... seguendo passo passo la navbar mi viene visualizzata non proprio come nel video, in pratica è tutto bianco e solo la scritta "brand" viene visualizzata di blu.. come posso risolvere? (tutti gli altri elementi della navbar non li vedo) grazie in anticipo

[@alessiocornacchione8960]

Ciao, fai attenzione e controlla se nel link del css, anche tu come me, hai aggiunto lo slash (/css....). Eliminando lo slash (/) tutto è perfetto {{{Questa è la versione corretta }}}. Ciao! PS: Bravo Marchetti!

[@Desnos]

COMPLIMENTI PER LA TUA GENTILEZZA E FLUIDITA CONCETTUALE

[@michael.favero]

Non mi funzionano i JavaScript, sapresti consigliarmi una soluzione?

[@DaniloTomasino]

Ho seguito con attenzione e interesse tutto il tutorial e avrei due domande: 1 - Quando crei lo stile custom agisci sul tag body per abbassare il paragrafo poichè era coperto dalla navbar. Come mai mettendo il padding al body non scende anche la navbar? 2 - Nella parte finale per allineare i link della navbar allargata al centro della navbar stessa (circa min.14'50") ho risolto agendo in maniera diversa: sul selettore nav{height:80; padding-top:20;} e sono scesi tutti i link assieme. E' una buona soluzione o nasconde delle insidie? :) GRAZIE!

[@giorgioitalia]

ciao Andrea, nel caso dovessi rendere la navbar trasparente, come faccio a togliere la proprietà background dato che è presente di default?

[@massieto]

Ciao, grazie del video. sto cercando di fare passo passo quello che fai, ma mi blocco in partenza perché scaricando bootstrap e aprendo la cartella css, non ci sono gli stessi file che dovrei mantenere. sono diversi. Non so come procedere. grazie

[@t-dreams949]

ciao, ho appena scaricato Bootstrap e mi sà che i codici sono diversi, infatti credo non esista il navbar-right. Come posso rimediare?

[@elijahcoleman9638]

Grazie Twitter ❤️

[@Stopthevideo_1979]

Mi-a plăcut, mulțumesc!

[@mariocardillo264]

Ciao Andrea, premetto che sei un tutor eccezionale, seguendo il corso "html/css modulare" ho realizzato la bozza del mio sito e fin qui tutto ok. Poi seguendo anche il corso di bootstrap, che ho trovato molto interessante, ho provato ad inserire nel mio sito il carosello che funziona solo che non riesco ad impostare le mie immagini come background-image dell'item. Questa e la sintassi " " mi puoi dire dove sbaglio.

[@oiurehj]

Prova a scrivere

[@effiemero2989]

Ho una domanda: posso utilizzare adesso Bootstrap 4 seguendo il tuo video? Nel video dicevi di utilizzare Bootstrap 3

[@Marchetti_Design]

Ciao Alcune cose sono cambiate ma se segui i video la logica del framework è la stessa, se hai dubbi o problemi scrivi sul gruppo facebook dove parliamo di questi argomenti ;-) bit.ly/gruppo-nlw

[@lorenzolevis2849]

Ciao, tutorial molto interessante. Vorrei chiederti come fare ad ottenere un autocomplete per le classi css da codice html. ho provato diversi package in atom ma nessuno ha la funzione che vedo nei tuoi video, mi potresti aiutare ?

[@miticojack08]

ciao! perdona la mia domanda impertinente, ma l'hosting e il dominio sono gratis o li hai acquistati separatamente? ( vorrei iniziare a cercare siti, in particolare un mio personale portfolio, e non ho ben capito se vi sono hosting e domini gratis o no) :)

[@mimmoballini7048]

Protesti fare un video su Photoshop come salvare un sito web con le sezioni e istallare su programma tipo Word press

[@WantOxide]

ma il terzo schema a forma di pisello in alto a sinistra nei fogli sul muro?

[@erosravera3721]

Perché usare una versione obsoleta di jQuery? L'ultima non va bene?

[@kefa0153]

Ma con bootstrap quattro quello attuale non riesco ad allineare a destra i contenuti del navbar ho provato anche con i float ma ninete AIUTO!!!!

[@foxcrawler4847]

Ciao grazie a te sono riuscito a passare dal vecchio modo di fare web a tutte le nuove tecnologie messe a disposizione ho dovuto mettere da parte per un po di tempo e non riuscivo a rimettermi in pari.. Grazie..!! ho una richiesta visto che saper insegnare è un dono e tu ce l'hai.. non potresti fare qualche video su javascript e/o PHP solo qualche cosa che possa servire nel pagine web..

[@Marchetti_Design]

Ciao Fox, grazie del supporto! dai un occhiata alla mia guida base su javascript: www.marchettidesign.net/tag/js-base/ e jquery www.marchettidesign.net/2016/01/cose-jquery-inclusione-e-sintassi-base/

[@massieto]

Buonasera Andre. Ho un problema nell'inserire un logo all'interno della navbar.

[@grazialotito2470]

per farlo nero ho utilizzato i parametri della navbar versione 4.0 boostrap

[@Kaos_00S]

Andrea ma come faccio a creare un database con phpmyadmin e collegarlo ad un sito php?

[@antolepore]

esiste atom per windows ? Pinegrow si avvicina a questo ide?

[@angolodicarlo]

Ciao stavo seguendo i passaggi ma la nav bar non mi viene visualizzata come nel tuo video

[@andreasiragusa7009]

ciao, credo di essere l´unico.. quando creo il contenitore nel body per contenere il "testo riempitivo" a sx dello schermo effettivamente ha margine a dx invece no... e un problema di visualizzatore oppure ce qualcosa di sbagliato in quello che faccio?

[@Marchetti_Design]

Ciao Andrea, scarica il codice realizzato (trovi il link in descrizione) e confrontalo con il tuo ;-)

[@danielcoletta2966]

ciao come si puo unire bootstrap con sass?

[@grazialotito2470]

scusami come hai fatto a mettere i due link ed il dropdown a destra.

[@vincenzomarturano8133]

la cartella fonts in bootstrap 4 dove si trova?

[@etsecla61]

Nella 4 è stata abbandonata, se la vuoi devi usare la 3...

[@Fabiosoluzionipc]

ciao ho scaricato bootstrap ma ci sono2 cartelle soltanto,puoi fare un nuovo video su come impostarlo?grazie

[@effiemero2989]

Dove posso trovare il codice scaricabile? Sul link non lo trovo

[@effiemero2989]

Ma tutto ciò posso inserirlo su wordpress?

[@renzorenzi1557]

Mi piace il tuo sfondo, come si chiama? non quello della montagna, Utilissima guida!

[@Marchetti_Design]

Ciao è lo sfondo di default del mac..

[@nickton]

Miglior libro per imparare bootstrap???

[@massimobarletta8570]

bravissimo ! ho seguito passo passo, ma ho un piccolo intoppo. Non visualizzo la navbar come dovrebbe essere :/ ma mi viene fuori una lista con tutti i tasti che ci dovrebbero essere su, sottolineati come se fossero dei link. A cosa può essere dovuto?

[@massimobarletta8570]

ok, ho risolto (y)

[@pisachess7215]

Ciao, come hai risolto? ho lo stesso problema tuo

[@massimobarletta8570]

era un problema di percorso dello JavaScript

[@massimobarletta8570]

prova a controllare

[@pisachess7215]

Grazie, risolto :)

[@GoldenFederico]

A me non ce la cratella foonts perchè?

[@nicolass7102]

come posso inserire javascript? a me quando mi avvicino alla navbar non funzionano le funzioni a tendina????mi puoi dire come si fa?

[@nicolass7102]

ho risolto

[@dle9216]

Ciao, scusami come hai risolto?

[@iMet97]

Siccome attualmente c'è la versione 5.1.1 ... vale ancora questa guida?

[@Marchetti_Design]

La 5 introduce funzionalità che non utilizziamo questa guida vale ancora 😉

[@iMet97]

@@Marchetti_Design siccome dovrei imparare bootstrap volevo seguire il tuo tutoria siccome ti trovo molto professionale e competente, ma il dubbio era che siccome attualmente c'è la versione 5 .. vale la pena imparare la versione 3?

[@GiuseppeBonfanti]

Mi sono bloccato al minuto 2.35. Schiaccio il tasto TAB ma non succede nulla.

[@AntonioTanzillo67]

anche a me ! come sifa ?

[@stefaniaia6615]

Ottimo tutorial, complimenti. Solo una cosa: potresti, la prossima volta, togliere la musichetta di sottofondo? Alla lunga è un po' snervante :|

[@cochy66]

ciao ti seguo da diverso tempo ..potresti dirmi dove posso trovare queste musiche che metti in sottofondo?

[@myls_pianist]

Ciao, perché non fai i tutorial di lui kzbin.info/www/bejne/bpyuXpZ3bp6Gd5I in italiano? Te ne saremo molto gratis.. diciamo che mi sto riferendo a css animations.

[@grazialotito2470]

a me non funziona la navbar scura navbar-inverse

[@lorenzomilan855]

Nel complesso ottimo video ma la musichetta di sottofondo mi manda fuori di testa!!!

[@mariocardillo264]

Ciao Andrea problema risolto Grazio comunque

[@antolepore]

cdn sta per ?

[@necus64]

Ma lo vedi che mi dai solo informazioni utili???

[@antolepore]

quindi che ha di speciale questo framework?

[@Marchetti_Design]

anto lepore ti permette di sviluppare siti in meno tempo.

[@oiurehj]

Praticamente ti permette di preoccuparti unicamente del Css, ossia lo stile che poi vuoi dare agli elementi della pagina. Solo la navbar, per un principiante/intermedio, prenderebbe 1 ora di tempo.