Bentornati in questa lezione useremo il bootstrap per creare una landing page per una startup fittizia.
La nostra startup si chiama Perfect Match.
Molto divertente.
So che si tratta di un'app di datazione umana felina e lascerò a te il compito di interpretare
quale datazione umana felina potrebbe essere relativamente innocua, potrebbe semplicemente essere l'abbinamento di gatti Sheldrick con umani soli che potrebbero
essere qualcos'altro.
Non lo so.
Iniziamo facendo un breve tour del sito e scrivendole.
Intendo davvero solo sottolineando alcune caratteristiche.
Non c'è molto qui.
In realtà non abbiamo questo collegato, non fa ancora niente.
Quindi sono solo i mounseers in HD, ma questo è tutto ciò che abbiamo trattato finora.
Quindi abbiamo abbastanza la nostra perfetta corrispondenza per quanto riguarda le lunghezze di incontattazione.
In realtà non vanno da nessuna parte e registrano sul lato destro due piccole icone là dove prendiamo il
suo hamburger.
Posso cliccarci sopra.
Tutti quei link sono ora dentro quell'hamburger.
Quindi abbiamo una grande immagine di sfondo che rimane centrata e copre l'intero sfondo.
Quindi nel mezzo abbiamo il nome del nostro start up perfetto con il nostro e poi abbiamo la nostra
didascalia L'unico feed umano sull'app di appuntamenti.
E poi abbiamo una piccola regola orizzontale qui e poi un pulsante per iniziare con un'icona.
E mentre mi riduco, tutto rimane nel mezzo e si muove anche un po 'in modo che non abbiamo una sorta
di layout scomodo sul tuo dispositivo mobile in cui il testo inizia a metà della pagina.
Quindi lo spostiamo un po 'e rimane centrato.
Questo layout è davvero facile da fare e bootstrap, ma è relativamente efficace per la pagina di destinazione.
Tutto ciò che abbiamo è una singola colonna che occupa l'intera larghezza.
Quindi questa colonna ha 12 unità in tutto.
Non lo dividiamo in nessuna sezione solo per una colonna di 12 unità e poi centriamo tutto
all'interno di quella colonna.
Quindi iniziamo.
La prima cosa che dobbiamo fare è creare un file.
Ne ho uno chiamato index su DML.
Aggiungerò questo nella mia partita perfetta standard calda e
poi aggiungo in Bootstrap e userò un
CDN Bitstrips CDN.
Facciamo le SS e Javascript qui.
Avremo bisogno di quel javascript per la barra delle applicazioni.
Quindi dobbiamo collegare il tag.
Quindi otteniamo il javascript.
Copia questo.
Mettilo giù in fondo che è un tag script e quindi impostiamo la sorgente uguale a quella che sei.
Ora se apriamo questa finestra, OK, apriamo la console, abbiamo un piccolo problema che è che abbiamo bisogno anche della query
di Jay per il bootstrap javascript.
Ricordati di nuovo dalla lezione sulla barra di navigazione, dobbiamo richiedere J.
Querrey.
Quindi otterremo un CDN per questo.
Faremo la versione modificata.
Copia questo URL.
E finalmente torniamo qui e dobbiamo farlo prima di collegarci al bootstrap con javascript.
Altrimenti non saprà ancora della tua query, quindi deve prima caricare la query.
Ora proviamo di nuovo.
Aggiornamento del fuoco.
OK, non vediamo nulla che sia un buon segno perché non vediamo errori.
Iniziamo con il testo nel mezzo.
Tutto questo contenuto qui.
ECOs per una riga per div class e quindi all'interno di questo abbiamo un altro div che abbiamo sempre bisogno di quella riga.
Quindi abbiamo bisogno di creare un container e quindi all'interno del contenitore abbiamo bisogno di un contenitore
Ogni volta che usiamo il sistema di grid e quindi il nostro div che sarà di classe uguale a dash di colonna
large 12.
E questo attraverserà tutto quel container.
E poi dentro se avranno un H1 che dirà solo match perfetto e salvataggio.
E lasciamo a quel refresh.
E non è proprio quello che vogliamo ancora e questo perché ci sono alcune cose che dobbiamo fare.
Il primo è che dobbiamo centrare tutto in quella colonna.
Quindi, se ispezioniamo con cosa abbiamo a che fare qui, potremmo vedere che l'H1 attraversa tutto e
dobbiamo solo centrarlo all'interno di quello.
E il secondo è che dobbiamo abbassarlo un po '.
Abbiamo bisogno di aggiungere un po 'di padding o margine in modo che non vada in cima alla nostra pagina.
Iniziamo aggiungendo il resto del contenuto.
Quindi abbiamo anche l'unica app per appuntamenti umani felini e che sarà solo una H 3
e potremmo davvero giocare con quello che potrebbe essere qualsiasi elemento che vogliamo, ma lo renderò un H-3 l'unica app di
datazione umana.
E poi possiamo aggiungere quella regola orizzontale che non assomiglierà molto ma la modificheremo dopo
il fatto e poi aggiungeremo anche un pulsante nella classe su quel pulsante.
Diamo un'occhiata.
Questo è un pulsante di avvio predefinito ed è un pulsante di grandi dimensioni.
Torniamo indietro.
Quindi abbiamo bisogno di PTEN e quindi del colore predefinito e quindi della dimensione tra LG per grande e
qui aggiungeremo semplicemente il
testo che è iniziato e salviamo vediamo cosa finiamo.
Tutto ok.
Quindi ora abbiamo il nostro contenuto ma Centro all'interno della griglia.
E poi ci concentreremo sul padding e lo sposteremo verso il basso.
Ma per iniziare con il centro all'interno di questa griglia e per renderlo più facile, raggrupperò tutto
all'interno di un div in modo da non dover centrare ogni cosa individualmente.
Dobbiamo centrare l'H-1 e poi i tre e poi il pulsante, piuttosto possiamo raggruppare un div e solo
centrare quel div con una linea.
Facciamo un div e io gli darò un ID di Cantet e poi metteremo tutto dentro di lì.
Quindi l'H-1 di 3 anni l'H. R. e il pulsante rientrerà e salverà correttamente.
Quindi niente dovrebbe apparire diverso se aggiorno la pagina prima di fare ciò aggiungiamo nel nostro foglio di stile.
Così ho aggiunto un tag link e chiamerò la mia app per fogli di stile.
SS Non esiste ancora.
Quindi ho bisogno di farlo salvare.
Vedo SS nella stessa directory.
E iniziamo con qualcosa di semplice come tutti quelli che sono viola.
Solo per assicurarsi che funzioni OK.
Ritorniamo al refresh.
Andrew prende un viola H-1.
Grande.
Quindi ora selezioniamo che Dave abbiamo aggiunto l'idea del contenuto e lo centriamo.
Quindi sbarazzatevi di questo e abbiamo bisogno di un contenuto ID e omettendo di fare è allineare il testo Centro.
Torniamo indietro.
Eccoci.
Quindi le cose sono allineate al Centro ora.
Poi lo spingeremo giù di un po 'del 25 percento verso il basso per essere precisi con il padding uguale al 25 percento.
Quindi qui faremo il padding del 25%.
E invece di dargli un numero duro di pixel se lo manteniamo in percentuale è un
po 'più reattivo.
Quindi è proprio al centro.
E poi il 25% cambia mentre ridimensioniamo lo schermo.
Grande.
Ora aggiungiamo l'immagine di sfondo.
Quindi l'immagine che sto usando è adorabile, e l'interazione umana che sta succedendo qui è da questo sul sito di
Splash Web che ho introdotto nell'ultimo video in cui abbiamo creato la griglia dell'immagine di bootstrap.
E hanno tutti i tipi di immagini di alta qualità davvero grandi che è possibile utilizzare senza alcun problema.
E quello che uso è proprio qui, cerco anche i link dei gatti in quella descrizione.
Ecco il tuo Aro di questa immagine con il tasto destro del mouse copia l'immagine che sei.
Ora torniamo indietro e lo aggiungerò al corpo come immagine di sfondo.
Quindi sfondo e poi dargli un URL che è quel gigante Tu sei proprio lì.
o l'aggiornamento, otteniamo un'immagine di sfondo gigantesca e tutto quello che possiamo dire è che questa è una sorta di avvio per le unghie.
E se lasciamo che sia la forma a questo livello
Quindi abbiamo bisogno di ridimensionarlo e per farlo usiamo le dimensioni dello sfondo e cambiamo di nuovo l'argomento.
Di nuovo ci stiamo avvicinando.
Ciò renderà l'immagine più piccola possibile mentre copre ancora l'intera larghezza e altezza dello
schermo.
Quindi non cambierà le proporzioni che non obbligherà l'immagine in alcun modo, ma si estenderà in entrambe le
direzioni tanto quanto è necessario.
Ma l'importo minimo che è necessario per adattarsi al nostro schermo e non è ancora perfetto.
E quello che vogliamo fare non è cambiarne le dimensioni, ma cambiare la posizione.
Ci concentreremo sul centro di posizione in background, ma evitiamo di essere più vicini.
Ma non è ancora una corrispondenza perfetta per quanto riguarda l'immagine.
E quei cambiamenti verranno dopo.
Per ora voglio concentrarmi sull'aggiunta nella barra di navigazione e farlo quando vai ai documenti di Boucek e
vai ai componenti e ho già detto questo prima.
Lo faccio sempre se aggiungo una barra di navigazione bootstrap.
È troppa roba da ricordare altrimenti.
E lo copio proprio qui.
Prenderò l'intero nav per iniziare a tornare alla nostra app qui e metterlo appena in cima.
Questo non è sicuramente il NAF che vogliamo ma contiene i pezzi che vogliamo aggiornare.
È abbastanza vicino
Quindi ci sono alcuni cambiamenti che vogliamo apportare.
Il primo e il più semplice è che il nostro contenuto della soluzione si trova in un contenitore, quindi
non va fino ai bordi come fa qui.
che, poiché abbiamo aggiunto in quel contenitore, ora abbiamo un po 'di spazio proprio come facciamo qui sopra sulla soluzione.
Quindi possiamo tornare indietro e inserire o semplicemente cambiarlo in contenitore di classe div e se torniamo
ora puoi vedere
Ora iniziamo a lavorare sul contenuto reale del Nev. Quindi, la cosa più semplice è cambiare il marchio
che in questo momento dice semplicemente che Brand in questa classe di linea è uguale al marchio neth bar e lo cambieremo in corrispondenza di una corrispondenza fissa e di un salvataggio.
Provalo.
Ok bene.
Ora sbarazzarsi di questo modulo.
Non ne abbiamo affatto bisogno.
Quindi il nostro modulo inizia tutto qui.
Sbarazzati di quell'intera cosa aggiorna.
Eliminiamo anche il menu a discesa.
Non ne hai bisogno.
Quindi inizia proprio qui.
Questa menzogna che finisce
è di nuovo fresca.
Ora abbiamo un singolo link.
Quindi inizieremo con questi due collegamenti che dovrebbero essere registrati e registrarlo.
Questo è il link qui, quindi possiamo cambiarlo per essere registrato e quindi duplicarlo.
Solo un alleato con un tag di ancoraggio al suo interno.
E questo verrà registrato.
Controlliamolo.
Grande.
Quindi le icone arriveranno alla fine.
Abbiamo i due collegamenti.
Ora abbiamo bisogno di tre link qui.
Ne abbiamo già due e ci libereremo di questo menu a discesa.
Quindi abbiamo bisogno di casa in contatto.
Quindi individuare quel menu a discesa che è proprio qui.
Classe uguale a discesa.
Liberiamolo e ora sono molto semplificati da Akbar.
Ora abbiamo due lunghezze diverse.
Ci libereremo di entrambi e lo faremo da zero.
Quindi aggiungeremo un alleato con un tag di ancoraggio e lo faremo tre volte.
Questo primo dovrebbe dire casa.
Il prossimo è circa.
E l'ultimo è il contatto.
Controlliamolo.
Ci andiamo sono tre lunghezze.
Una cosa minore.
La casa dovrebbe essere attiva e un bootstrap davvero facile.
Tutto ciò che dobbiamo fare è aggiungere l'uguaglianza di classe attiva all'alleato
non il tag di ancoraggio ma l'alleato genitore e ora finiamo con il fatto che il collegamento attivo è home.
Grande.
OK,
questa è la nostra barra di navigazione e se ridimensioni vedremo che questo hamburger funziona già bene.
Abbiamo un problema che è che la nostra immagine di sfondo è incasinata.
Ne parleremo tra poco, ma abbiamo l'hamberger che funziona bene.
Tutto sembra a posto.
Adesso parliamo del font in modo che il font che ho usato qui sia Ledo L. UN. Proviene dai caratteri di Google, quindi andrò su Google font e cercherò Ledo.
LA T-O tutti vanno alla collezione.
Usiamolo se diventerà normale e audace.
Inoltre vogliamo che il nostro H-1 sia audace.
Va bene.
E poi aggiungeremo questo link direttamente nella sua applicazione.
In alto qui risparmia ora inserisci le app. Valuteremo che applicheremo quel font a tutto.
Quindi selezionerò all'interno della famiglia di caratteri del corpo è Ledo e assicuriamoci che si carichi correttamente.
Guarda cosa abbiamo aggiornato.
E i nostri cambiamenti frontali sono difficili da vedere perché il testo è scuro ma cambiato, puoi
anche vederlo sulla NFR qui.
È cambiato
Corrisponde a ciò che abbiamo in questa soluzione.