Bentornato alcuni di noi video che abbiamo creato l'app per blog creata il nostro modello di blog e abbiamo aggiunto il modello
di indice in questo video.
In realtà non aggiungeremo ancora nuove rotte.
Questo sarà molto veloce ma vogliamo aggiungere la nostra intestazione e il footer di Parshall.
E poi voglio includere anche l'interfaccia semantica.
E infine aggiungeremo una barra di navigazione davvero semplice in alto.
Quindi iniziamo a voler creare la nostra intestazione e il piè di pagina che Ejay come file.
E quello dovrebbe essere dentro se le directory viste.
Quindi faremo una directory di make usando la barra delle viste di Parshall e poi il taglio barra di Parshall Hetter che ci
fa Ejay e poi tocchiamo le viste tagliano il barrato E. J. Grande.
Ora apriamo quelli.
Iniziamo con l'intestazione.
E perché lo scheletro di base in HD non era un titolo di testa in metallo.
Lo chiameremo app per il blog e poi avremo bisogno del nostro corpo proprio così e lo
sposteremo al piè di pagina in modo che possiamo eliminarlo per ora e poi solo per sapere che funziona.
su ogni pagina si sa che l'abbiamo fatto correttamente.
Aggiungiamo solo un paragrafo in alto che dice dal file di intestazione e se vediamo che
Ora apriamo il footer incolla questo e possiamo fare la
stessa cosa dal salvataggio del footer.
Ora dobbiamo collegare questo e facciamolo nel nostro indice per iniziare.
Quindi in cima abbiamo bisogno di avere la nostra inclusione e il nostro percorso è che siamo invece usati nel file indice.
Quindi vogliamo solo un punto tagliare l'intestazione di barra di Parshall.
E poi la stessa cosa qui sotto per il taglio di Parshall.
Cerchiamo di testare fino ad ora nessun problema e otteniamo dal file di intestazione dal piede o cinque.
Grande.
Ora aggiungiamo l'interfaccia utente semantica.
Quindi ho questo seminario semantico sull'interfaccia utente aperta Dasch you dot com.
E proprio come il bootstrap possiamo scaricare i file o possiamo includere un CDN semantico UI CDN.
Basta fare clic su questo primo esempio e noterai che ci
sono molti file diversi tra cui possiamo scegliere.
ciò che si
desidera è dopo la nostra sezione o se si desidera solo i moduli, è sufficiente prendere quel singolo componente.
Questo perché il modo in cui l'interfaccia utente semantica è organizzata nel modo in cui è progettata è che, a differenza del bootstrap, se tutto
SS Quindi non ti serve l'intera
cosa che è una delle critiche al bootstrap: se vuoi solo un piccolo pezzo devi comunque prendere l'intera libreria.
Ma vogliamo l'intera biblioteca.
Quindi se scorri in
basso su tutti questi idiomi, vuoi quello che dice semantico che CDN che se fai solo una ricerca o semantica
riesca a rivalutare che è proprio qui è difficile da trovare se non lo sai o lo stai cercando ma fai una ricerca
No, in realtà, prendi una versione minuscola per rendere le cose più veloci.
Quindi è semantico che gli uomini vedono valutare
e noi copiamo il tuo Erl e lo metteremo in cima al nostro file di intestazione nella testa.
È un tag di lunghezza.
E vogliamo che sia il link e quindi il ref è uguale a quello giusto.
Si si.
E dovremmo aggiungere anche nel tipo di foglio di stile rel è uguale alla barra del testo.
C Ss Così ora salviamo e riavviamo il server.
come quando installiamo il bootstrap il font cambia un po '.
Dai un'occhiata alla nostra home page vedrai alcune piccole modifiche, proprio
OK.
Questo
significa che ce l'abbiamo fatta liberiamoci dei nostri paragrafi nell'intestazione e nel piè di pagina e invece aggiungiamo una semplice barra di navigazione nella coda.
Ora, naturalmente, sono chiamati menu.
Quindi, se andiamo qui, fai clic
sul menu di tutti i diversi componenti e vogliamo trovare il menu che si trova nel menu della raccolta.
Puoi vedere che ci sono diversi tipi di menu.
C'è un menu che è quello che vedi qui.
C'è un menu di Poynting, c'è una maginazione verticale di testo tabulare.
E c'è ancora un bel po 'di tutto ciò di cui abbiamo bisogno se vogliamo rendere
la parte superiore del nostro corpo un div e andiamo a farlo correttamente.
Kate ha una classe uguale a te.
Ho risolto e faremo un menu invertito che cambia solo il colore proprio come in bootstrap.
Potresti dire in versi e poi dentro di lì abbiamo bisogno di un altro div.
E questo avrà classe uguale a contenitore che è proprio come un contenitore bootstrap.
E poi invece di lì avrò un altro div e questo avrà classe uguale a item Hetter.
E questo è come il marchio della barra di navigazione sul bootstrap.
Quindi tutto ciò che vogliamo è un blog per bambini o qualsiasi altra cosa vogliamo che venga chiamata la nostra app.
E poi dopo aggiungeremo un tag di ancoraggio per la home page
e lo chiameremo a casa e aggiungeremo in classe uguale a item e poi faremo la stessa cosa tranne che andare a
barrare vai a slash logs slash nuovi che non esistono ancora e farà freddo New Post o New Blog.
Quello sarà il testo che vediamo.
OK, quindi non è stato risolto il menu invertito.
Un contenitore invece di quello.
E poi all'interno del contenitore dovremmo effettivamente avere tutto questo piccolo errore da parte mia.
Quindi vogliamo che sia anche lì.
È tutto nel contenitore.
E poi abbiamo la nostra intestazione e poi abbiamo due elementi che sono ancorati a Tex.
Diamo un'occhiata a questo ora.
E otteniamo la nostra semplice barra matematica.
Sì, abbiamo un problema qui con qualche spaziatura.
Lo gestiremo in un attimo, ma ora abbiamo un punto in cui funziona bene.
Aggiungiamo una semplice icona che in semantica si chiama solo icone.
Ce n'è un sacco in quello che ho usato.
Si chiama codice.
Prova a trovarlo qui e fai una ricerca.
Eccolo.
Ma sentiti libero di scegliere il tuo se ti piace il commento.
L'idea era che si trattava di un blog basato su codice, ma potrebbe esserci qualcos'altro.
Mi piace anche l'idea.
Comunque ce ne sono un sacco.
Ciò che è bello è che hanno anche un sacco di icone per le aziende che è utile.
In fondo penso che li abbiano e andiamo a tonnellate di diversi marchi
e aziende comuni a cui avresti collegato la tua applicazione.
OK.
Quindi è il codice un nome per icona e lo aggiungerò proprio qui accanto all'intestazione del blog.
Quindi proprio qui aveva il suo oggetto e tutto ciò di cui abbiamo bisogno è un marchio.
E ha bisogno di avere una classe di codice e un'icona.
Quindi, davvero semplice, solo il nome dell'icona e
quindi l'icona della classe salva l'aggiornamento e abbiamo un piccolo codice.
Vengo lì.
Facciamo un piccolo cambiamento che è quello di rendere questa icona un po 'più grande.
Per fare ciò, potremmo semplicemente scrivere un tag di
stile molto bello ma, piuttosto che farlo, usiamo la directory pubblica che abbiamo impostato.
Dobbiamo ancora creare la directory.
Ma abbiamo istituito il fatto che sia servito.
Quindi faremo una barra dei fogli di stile e la chiameremo semplicemente perché C Ss non esiste ancora.
Quindi abbiamo bisogno di fare una directory pubblica e quindi anche fare una directory
pubblica dei fogli di stile e infine toccare i fogli di stile public slash con le app di Dotsie SS che vogliamo anche aprire
così in fogli di stile pubblici Aptos il completamento della scheda SS è sicuramente tuo amico lì.
E per rendere tutte le icone un po 'più grandi.
'più specifiche e imposteremo la dimensione del font
IEM BE2 proprio come il doppio della dimensione del contenitore o la doppia dimensione del genitore.
Beh, solo tu in realtà piuttosto che tutte le icone e le icone stewe che hanno quella classe di icone solo per essere un po
OK, così ora abbiamo avviato il backup del server e aggiorniamo la pagina.
Dovremmo vedere che l'icona diventa più grande, che è solo una questione di preferenze personali.
Ma penso che sembra un po 'meglio quando è più grande.
OK.
Ora che abbiamo finito, abbiamo finito con tutto ciò che dovevamo fare in questo video.
personalizzato anche se è solo una riga ora possiamo facilmente aggiungere
CSSA personalizzati a ogni singolo file ogni singolo modello e volevo mostrarti come possiamo includere l'interfaccia utente semantica.
Quindi volevo semplicemente impostare la barra di navigazione aggiunta nel file Header Footer da aggiungere nel nostro file CSSA
OK, quindi riprenderemo il nuovo video con il nuovo e creare così possiamo effettivamente creare nuovi blog.