Share
Bootstrap este conceput pentru a răspunde la o mulțime de scenarii, oferind o mână de componente Web uzuale utilizate în mod obișnuit. Există butoane, o bară de navigare receptivă, tab-uri, sfaturi, caruseluri și așa mai departe. Totuși, chiar și cu toate jucăriile pe care le oferă Bootstrap, este încă lipsit de un model foarte popular: navigarea în afara panoului.
Această abordare a navigării dezactivează meniul din zona vizibilă (pânza), oferind mai mult spațiu pentru focalizarea pe conținutul principal. Navigarea pe canavă a fost făcută pentru prima oară populară în aplicațiile mobile native, după care a venit pe web receptiv (datorită în parte articolului lui Luke Wroblewski). În mod obișnuit, acesta face uz de jQuery pentru a comuta starea navigației.
Vorbind despre care, Bootstrap fiind atât de popular și sprijin comunitar fiind atât de mare, dezvoltatorii au creat pluginuri sau extensii pentru a include componente care nu sunt disponibile în oficial Bootstrap. Și asta include unul pentru implementarea navigației off-canvas.
În acest tutorial, vă voi arăta cum să adăugați o navigare în afara canvasului la Bootstrap cu o extensie numită Jasny Bootstrap de Arnold Daniels. Cele două motive pentru această opțiune sunt:
În timpul acestui tutorial vă voi conduce printr-un flux de lucru care vă ajută la mentenanța site-ului utilizând Bower. Deci, asigurați-vă că ați instalat deja sistemul Bower pe sistemul dvs. Dacă nu preferați să folosiți Bower, este bine, dar pentru a începe ați publicat și o serie de tutoriale pentru începători pe Bower.
Să începem.
Să începem proiectul prin crearea directoarelor de lucru în care vom plasa piesele necesare.
- active; | - css | | - img | '- js' - surse | - js '- mai puțin
Vom folosi bunuri pentru a salva activitățile site-ului, cum ar fi imaginile, foile de stil, fișierele JavaScript și cele asemănătoare. surse dosarul este locul în care vom pune necompilat codul sursă al LESS și JavaScript. Ulterior, vom defini specificația proiectului - numele, versiunea, dependențele și altele - cu Bower.
Alerga bower init comandă în directorul de lucru și completați toate instrucțiunile.
Un exemplu de intrări de comandă "init Bower" Nu trebuie să urmăriți cu exactitate intrările așa cum este arătat mai sus; ajustați intrările conform propriilor cerințe. Odată terminat, un nou nume de fișier bower.json ar trebui să fie prezent, conținând specificația proiectului pe care tocmai l-am completat.
Acest proiect necesită două cadre; și anume Bootstrap și Jasny Bootstrap. Înainte de a le instala, să specificăm numele directorului în care Bower va trebui să instaleze pachetele. Pentru a face acest lucru, creați un fișier nou în nivelul rădăcină al directorului de lucru denumit .bowerrc și introduceți următoarele linii pentru a numi dosarul.
"director": "componente"
Apoi, includeți aceste linii de mai jos bower.json, care îi va spune lui Bower că dependențele proiectului sunt Bootstrap și Jasny Bootstrap versiunea 3.1.1 sau mai nouă.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
În terminal sau comanda de comandă, rulați bower install comanda pentru a apuca dependențele pe care le-au specificat toate în același timp.
Așa cum se specifică în .bowerrc, dependențele proiectului ar trebui să fie acum într-un folder nou generat numit componente.
Cu toate dependențele pregătite, putem începe să lucrăm la proiect! Vom elimina lucrurile prin organizarea foilor de stil. Există patru foi de stil mai mici pe care va trebui să le creăm, și anume:
Accentsconagua
variables.less - după cum spune și numele, această foaie de stil conține variabilele utilizate în Bootstrap. Vom face acest exemplar în cazul în care vrem să customizăm variabilele, fără a afecta fișierele originale (copiați variabilele Bootstrap din această listă de conținut).Variabilele-jasny.less - în mod similar, această foaie de stil conține variabilele utilizate în extensie, Jasny Bootstrap (copiați variabilele de aici).app.less - această foaie de stil conține referințe la foile de stil Bootstrap și Jasny Bootstrap de care avem nevoie pentru a construi site-ul web (puteți copia conținutul aici).style.less - vom scrie propriile noastre stiluri în această foaie de stil.Creați-le și puneți-le împreună așa:
... '- surse | - js' - mai puțin | - app.less | - stil.less | - variables-jasny.less '- variabile
Următorul lucru este să compilați aceste foi de stil. Pentru a face acest lucru, vom folosi Koala cu următoarea configurație:
app.less la fel de bine ca style.less ieșire de destinație la active / css / director..Hartă pentru depanarea mai ușoară a foii de stil. Dacă acesta este primul care ați auzit despre hartă sursă, consultați tutorialul nostru despre Tuts + Code, Source Map 101.
Odată ce configurația este setată, compilați LESS to CSS.
Notă: rețineți că nu sunteți obligat să utilizați Koala dacă preferați un alt mod de a vă compila fișierele NOI.
Creați un nou fișier HTML numit index.html. În afară de structura de bază HTML5 de bază, index.html fișierul va conține, de asemenea, eticheta pentru meta-vizualizare, eticheta meta descriptivă, titlul și linkurile către foile de stil, cum ar fi:
Bootstrap Navigare în afara panzei
Acum, să adăugăm navigarea în afara canapelei. Jasny Bootstrap folosește o abordare similară cu Bootstrap când vine vorba de marcarea componentelor. Acesta este modul în care pornim structura de navigare în afara canapelei:
Acesta cuprinde o mână de clase. Trei clase, și anume navmenu, navmenu-invers, navmenu-fix-dreapta defini elementul ca a navmenu. navmenu este una dintre componentele Jasny Bootstrap care stabilește elementul alocat ca navigație verticală. offcanvas este clasa care plasează elementul din fereastra de vizualizare. În plus, am adăugat și o nouă clasă, navmenu-site-, care ne va permite să personalizăm navigația cu propriile noastre stiluri.
Elementele de meniu din navigarea în afara canvasului pot fi stabilite utilizând nav navum-nav clasa, ca atare.
Sunteți foarte bineveniți să includeți componentele originale Bootstrap împreună cu acest marcaj, cum ar fi Dropdowns și Buttons.
Marcajul HTML pentru navigația pe care o vom adăuga în acest tutorial este destul de lung. Deci, de dragul simplității, poate fi obținută marcarea completă acest Gist..
Următoarea imagine prezintă planul nostru de a stabili conținutul paginii web:
Planul site-ului web, care arată aspectul. Așa cum am arătat mai sus, conținutul site-ului va conține o siglă, un buton de comutare cu pictograma "Hamburger" pentru a glisa navigația în și de a ieși și câteva linii de frază de captură cu un buton mare - cunoscut sub numele de buton de chemare la acțiune
Marcajul HTML al conținutului este la fel de lung pentru a fi inserat în acest tutorial. În schimb, nu ezitați să copiați întregul acest Gist.
Multe dintre stilurile de aici vor fi doar decorative, care se vor roti în jurul culorilor, dimensiunilor și pozițiilor. Acest stil decorativ va fi realizat prin personalizarea stilurilor predefinite Bootstrap și scrierea propriilor noastre stiluri. Deci, în loc să parcurg pașii care ar putea fi deja evideni, aș dori să subliniez câteva detalii-cheie care contează cel mai mult.
Mai întâi, înainte de a scrie o singură linie, importați app.less stiluri în style.less. Acest lucru ne va permite să reutilizăm variabilele și amestecurile din cadrul acesteia.
@import (referință) "app.less";
În al doilea rând, vom crea o variabilă LESS pentru a defini calea imaginii. Vom numi variabila @ Cale-img.
@ path-img: "... / ... / active / img /";
Oricând trebuie să ne referim la o imagine din foaia de stil, vom include această variabilă. Acest exemplu de mai jos arată modul în care îl folosim pentru a indica logo-ul.
.brand-ul principal margin-top: 10px; margin-bottom: 10px; plutește la stânga; text-aliniere: stânga; marginea superioară: -15px; un .text-ascunde (); afișare: inline-block; imaginea de fundal: url ('@ path-img logo.png'); background-repeat: nu-repeta; dimensiunea fundalului: 100% 100%; lățime: 100px; înălțime: 33px; În cele din urmă, dorim să centurăm conținutul, cuvintele de captură și butonul, pe verticală. CSS, în acest moment, nu ne-a oferit încă o modalitate convenabilă de a alinia conținutul vertical folosind doar o singură declarație de proprietate. În consecință, există o serie de modalități de a realiza acest lucru și, sincer, nici unul nu este mai bun decât oricare altul.
În acest caz, vom alinia conținutul utilizând metoda de afișare a tabelului CSS. Dacă aruncați o privire la marcajul paginii web, veți vedea că vom împacheta conținutul paginii web cu două Pentru a alinia conținutul vertical, am setat Se pot obține detalii complete despre regulile de stil în acest Gist. Odată ce am adăugat stilurile, site-ul web ar trebui să aibă acum aspectul, ca imaginea de mai jos: Cu toate acestea, site-ul nu funcționează încă pe deplin. Încercați să faceți clic pe pictograma "Hamburger"; nici o navigare off-canvas alunecare inch Această funcționalitate vine de la biblioteca JavaScript, prin urmare, noi trebuie să-l compilați și să-l adăugați pe site-ul web. Există patru biblioteci JavaScript de care avem nevoie pentru a utiliza navigația în afara canvasului, care este jQuery, transition.js, dropdown.js pentru a activa meniul derulant pe care l-am adăugat în navigare și, în cele din urmă offcanvas.js. Pentru a le compila împreună, creați un nou fișier JavaScript în sursa / js director. În acest caz, îl vom numi app.js. Importați librăriile JavaScript utilizând Setați ieșirea la / active / js director, și apăsați pe Compila buton. Nu uitați să conectați fișierul compilat în pagina web. Acum, ar trebui să puteți glisa și scoate navigația în afara canapelei. În plus, este posibil să adăugați și următoarea bucată de JavaScript în partea de jos a paginii, care va permite efectul de tranziție al meniului derulant. În acest tutorial, am inclus o navigare funcțională în afara Bootstrap-ului folosind o extensie numită Jasny Bootstrap. Folosind Bower în acest tutorial ne vom ajuta să ne menținem și să rămânem la curent cu aceste două biblioteci. După un timp, aceste două biblioteci ar putea fi actualizate. Cu Bower, puteți rula În cazul în care o versiune nouă este disponibilă, pur și simplu rulați Sper că ați învățat câteva metode și trucuri din acest tutorial, dacă aveți întrebări, nu ezitați să le lăsați în comentarii.Site-wrapper și Site-wrapper-interior clasa, ca atare. afişa proprietatea Site-wrapper la masa, și să o extindeți pe întreaga fereastră de vizualizare, specificând lăţime si înălţime la 100%. Apoi, am setat ambalajul interior afişa proprietate la masă de celule. Acest lucru ne permite acum să aplicăm vertical-align pentru a alinia conținutul pe verticală..site-wrapper afișare: tabel; lățime: 100%; înălțime: 100%; min-înălțime: 100%; . site-wrapper-interior afișaj: table-cell; vertical-aliniere: mijloc;
6. Faceți pagina Web să vină în viață
... "- surse | - js | '- app.js' - mai puțin
@ Koala-Prepend, ca astfel.// koala-prepend "... / ... /components/jquery/dist/jquery.js" // @ koala-prepend "... / ... /components/bootstrap/js/transition.js" // @ koala-prepend "... / ... /components/jasny-bootstrap/js/offcanvas.js "
Tranziție
Concluzie
lista de albine comanda pentru a lista toate pachetele instalate Bower și pentru a verifica dacă o nouă versiune a fiecăruia este disponibilă.
bower update sau bower install comanda pentru a actualiza pachetul. Este atât de ușor.Alte referințe
