Share
Bootstrap è progettato per soddisfare molti scenari fornendo una manciata di componenti Web di uso comune. Vi sono pulsanti, una barra di navigazione reattiva, schede, descrizioni comandi, caroselli e così via. Eppure, anche con tutti i giocattoli che ci fornisce Bootstrap, manca ancora un modello molto popolare: la navigazione fuori dal canvas.
Questo approccio alla navigazione imposta il menu fuori dall'area visibile (la tela), dando più spazio per concentrarsi sul contenuto principale. La navigazione fuori tela è stata inizialmente resa popolare nelle app native per dispositivi mobili, dopo di che è arrivata al web reattivo (grazie in parte all'articolo di Luke Wroblewski). Comunemente, fa uso di jQuery per commutare lo stato della navigazione.
A proposito, Bootstrap è così popolare e il supporto della community è così grande che gli sviluppatori hanno creato plug-in o estensioni per includere componenti che non sono disponibili nel ufficiale Bootstrap. E questo include uno per l'implementazione di una navigazione off-canvas.
In questo tutorial, ti mostrerò come aggiungere una navigazione off-canvas a Bootstrap con un'estensione chiamata Jasny Bootstrap di Arnold Daniels. I miei due motivi per questa opzione sono:
Durante questo tutorial ti guiderò attraverso un flusso di lavoro che aiuta la manutenzione del sito Web utilizzando Bower. Quindi, assicurati di aver già installato Bower sul tuo sistema. Se preferisci non usare Bower, va bene, ma per iniziare abbiamo anche pubblicato una manciata di tutorial per principianti su Bower.
Bene, iniziamo.
Iniziamo il progetto creando le directory di lavoro in cui posizioneremo i bit e i pezzi necessari.
working-dir | - assets | | - css | | - img | '- js' - sources | - js '- less
Useremo il risorse cartella per salvare le risorse del sito Web come immagini, fogli di stile, file JavaScript e simili. Il fonti cartella è dove metteremo il non compilato codice sorgente di LESS e JavaScript. In seguito, definiremo le specifiche del progetto - nome, versione, dipendenze e altre - con Bower.
Correre bower init comando nella directory di lavoro e compilare tutti i prompt.
Un esempio degli ingressi del comando "bower init" Non è necessario seguire gli ingressi come mostrato sopra in modo preciso; regolare gli ingressi secondo le proprie esigenze. Una volta completato, un nuovo nome di file bower.json dovrebbe essere presente, contenente le specifiche del progetto che abbiamo appena compilato.
Questo progetto richiede due framework; vale a dire Bootstrap e Jasny Bootstrap. Prima di installarli, specifichiamo il nome della directory in cui Bower dovrà installare i pacchetti. Per fare ciò, creare un nuovo file nel livello root della directory di lavoro chiamata .bowerrc e inserisci le seguenti righe per nominare la cartella.
"directory": "componenti"
Quindi, includi queste righe di seguito in bower.json, che dirà a Bower che le dipendenze del progetto sono Bootstrap e Jasny Bootstrap versione 3.1.1 o successive.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
In Terminale o Prompt dei comandi, esegui installazione di bower comando per afferrare le dipendenze che hanno specificato tutto in una volta.
Come specificato in .bowerrc, le dipendenze del progetto dovrebbero ora trovarsi in una cartella appena creata chiamata componenti.
Con tutte le dipendenze preparate, possiamo iniziare a lavorare sul progetto! Daremo il calcio d'inizio organizzando i fogli di stile. Ci sono quattro fogli di stile MENO che dovremo creare, vale a dire:
Accentsconagua
variables.less - come dice il nome, questo foglio di stile contiene le variabili utilizzate in Bootstrap. Creeremo questa copia nel caso in cui vogliamo personalizzare le variabili, senza alterare i file originali (copia le variabili Bootstrap da questo Gist).variabili-jasny.less - allo stesso modo, questo foglio di stile contiene le variabili utilizzate nell'estensione, Jasny Bootstrap (copia qui le variabili).app.less - questo foglio di stile contiene riferimenti ai fogli di stile Bootstrap e Jasny Bootstrap di cui abbiamo bisogno per creare il sito web (puoi copiare il contenuto qui).style.less - scriveremo i nostri stessi stili in questo foglio di stile.Creare e metterli insieme in questo modo:
... '- sources | - js' - less | - app.less | - style.less | - variables-jasny.less '- variables.less
La prossima cosa è compilare questi fogli di stile. Per fare ciò, utilizzeremo Koala con la seguente configurazione:
app.less così come il style.less destinazione di uscita a assets / css / elenco..carta geografica per semplificare il debug del foglio di stile. Se questo è il primo che hai sentito su Source Map, consulta il nostro tutorial su Tuts + Code, Source Map 101.
Una volta che la configurazione è stata impostata, compilare il programma LESS to CSS.
Nota: tieni presente che non sei obbligato a utilizzare Koala se preferisci un altro modo per compilare i tuoi file LESS.
Crea un nuovo file HTML chiamato index.html. A parte la struttura base HTML5, la index.html il file conterrà anche il tag meta viewport, il tag meta description, il titolo e i link ai fogli di stile, in questo modo:
Navigazione fuoristrada Bootstrap
Ora aggiungiamo la navigazione fuori dalla tela. Jasny Bootstrap utilizza un approccio simile a Bootstrap per quanto riguarda il markup dei componenti. Ecco come iniziamo la struttura di navigazione fuori tela:
Comprende una manciata di classi. Tre classi vale a dire navmenu, navmenu-inversa, navmenu-fisso-destra definire l'elemento come a navmenu. Il navmenu è uno dei componenti di Jasny Bootstrap che imposta l'elemento assegnato come una navigazione verticale. Il offcanvas è la classe che imposta l'elemento fuori dal viewport. Inoltre, abbiamo anche aggiunto una nuova classe, navmenu-site, che ci permetterà di personalizzare la navigazione con i nostri stili personali.
Le voci del menu all'interno della navigazione fuori dalla tela possono essere disposte usando nav navmenu-nav classe, così.
Puoi benissimo includere i componenti Bootstrap originali insieme a questo markup, come i menu a discesa e i pulsanti.
Il markup HTML per la navigazione che aggiungeremo in questo tutorial è piuttosto lungo. Quindi, per semplicità, il markup completo può essere ottenuto attraverso questo Gist..
L'immagine seguente mostra il nostro piano per disporre il contenuto della pagina web:
Il progetto del sito Web, che mostra il layout. Come mostrato sopra, il contenuto del sito web comprenderà un logo, un pulsante di attivazione con l'icona "Hamburger" per far scorrere la navigazione dentro e fuori, e alcune linee di frasi con un grande pulsante - noto come pulsante di invito all'azione
Il codice HTML del contenuto è ugualmente lungo da incollare all'interno di questo tutorial. Invece, sentiti libero di copiare il tutto da questo Gist.
Molti degli stili qui presenti saranno puramente decorativi, ruotando attorno a colori, dimensioni e posizioni. Questo stile decorativo sarà raggiunto personalizzando gli stili predefiniti Bootstrap e scrivendo i nostri stili. Quindi, invece di camminare attraverso i passaggi che potrebbero già essere ovvi, vorrei sottolineare alcuni dettagli chiave che contano di più.
Prima di tutto, prima di scrivere una singola riga, importare il file app.less foglio di stile nel style.less. Questo ci consentirà di riutilizzare le Variabili e i Mixin al suo interno.
@import (riferimento) 'app.less';
In secondo luogo, creiamo una variabile LESS per definire il percorso dell'immagine. Denominiamo la variabile @ Path-img.
@ path-img: '... / ... / assets / img /';
Ogni volta che avremo bisogno di fare riferimento a un'immagine all'interno del foglio di stile, includeremo questa variabile. Questo esempio mostra come lo usiamo per indicare il logo.
.masthead-brand margin-top: 10px; margin-bottom: 10px; fluttuare: a sinistra; allineamento del testo: a sinistra; margin-top: -15px; a .text-hide (); display: blocco in linea; background-image: url ('@ path-img logo.png'); background-repeat: no-repeat; formato di sfondo: 100% 100%; larghezza: 100 px; altezza: 33 px; Infine, vorremmo centrare il contenuto, gli slogan e il pulsante, verticalmente. Il CSS, a questo punto, non ci ha ancora fornito un modo conveniente per allineare verticalmente il contenuto usando solo una singola dichiarazione di proprietà. Di conseguenza, ci sono diversi modi per raggiungerlo, e onestamente nessuno è migliore di nessun altro.
In questo caso, allineeremo il contenuto utilizzando il metodo di visualizzazione della tabella CSS. Se dai un'occhiata al markup della pagina web, vedrai che avvolgiamo il contenuto della pagina web con due Per allineare il contenuto verticalmente, impostiamo il È possibile ottenere dettagli completi sulle regole di stile in questo Gist. Una volta aggiunti gli stili, il sito Web dovrebbe ora avere l'aspetto e lo stile, come nella seguente schermata: Tuttavia, il sito Web non è ancora completamente funzionante. Prova a cliccare sull'icona "Hamburger"; nessuna navigazione off-canvas scorrevole. Questa funzionalità proviene dalla libreria JavaScript, quindi dobbiamo compilarla e aggiungerla al sito web. Ci sono quattro librerie JavaScript di cui abbiamo bisogno per usare la navigazione fuori tela, quali sono jQuery, transition.js, dropdown.js per abilitare il menu a discesa che abbiamo aggiunto nella navigazione, e infine il offcanvas.js. Per compilarli insieme, crea un nuovo file JavaScript nel source / js directory. In questo caso, lo nomineremo app.js. Importa le librerie JavaScript usando il Imposta l'output su / attività / js directory e premere il tasto Compilare pulsante. Non dimenticare di collegare il file compilato nella pagina web. Ora, dovresti essere in grado di far scorrere la navigazione fuori dalla tela in entrata e in uscita. Inoltre, puoi aggiungere la seguente parte di JavaScript nella parte inferiore della pagina, che abiliterà l'effetto di transizione del menu a discesa. In questo tutorial, abbiamo incluso una navigazione off-canvas funzionante su Bootstrap usando un'estensione chiamata Jasny Bootstrap. Avendo usato Bower in questo tutorial ci aiuterà a mantenere e rimanere aggiornati con queste due librerie. Dopo un po ', queste due librerie potrebbero essere aggiornate. Con Bower, puoi eseguire il Nel caso sia disponibile una nuova versione, esegui semplicemente il Spero che tu abbia imparato un paio di metodi e trucchi da questo tutorial, se hai qualche domanda sentiti libero di lasciarli nei commenti.sito-wrapper e sito-involucro-interno classe, così. display proprietà di sito-wrapper a tavolo, e fai in modo che si estenda all'intero viewport specificando il larghezza e il altezza a 100%. Quindi, impostiamo l'involucro interno display proprietà a table-cell. Questo ora ci consente di applicare vertical-align proprietà per allineare il contenuto verticalmente..site-wrapper display: table; larghezza: 100%; altezza: 100%; altezza minima: 100%; .site-wrapper-inner display: table-cell; allineamento verticale: medio;
6. Rendi viva la pagina web
... '- fonti | - js | '- app.js' - meno
@ Koala-anteporre, così.// @ koala-prepend "... / ... /components/jquery/dist/jquery.js" // @ koala-prepend "... / ... /components/bootstrap/js/transition.js" // @ koala-prepend "... / ... /components/jasny-bootstrap/js/offcanvas.js "
Transizione
Conclusione
lista dei bower comando per elencare tutti i pacchetti Bower installati e verificare se è disponibile una nuova versione di ciascuno.
aggiornamento del pergolato o il installazione di bower comando per aggiornare il pacchetto. È così facile.Ulteriori riferimenti
