Creați un șablon de adaptare Joomla utilizând Bootstrap. Partea 5. Adăugarea icoanelor Bootstrap la elementele din meniul Joomla
În acest articol voi vorbi despre cum puteți adăuga pictogramele Bootstrap la elementele de meniu individuale Joomla, prin simpla editare a setărilor acestor elemente.
Wedal Joomla Slider v1.1 - modul slideshow gratuit pentru Joomla de la wedal.ru (update)
Astăzi aș dori să vă prezint o actualizare a modulului Wedal Joomla Slider - versiunea 1.1 =). În ciuda faptului că 1.1 de la 1.0 separă doar 10%, modulul a fost rescris aproape complet. Am adăugat câteva noi caracteristici utile, care anterior nu erau disponibile și care lipseau în dezvoltare. Sper că le plac.
Noile caracteristici ale programului Joomla 3.7
În acest articol dau o prezentare generală a noilor caracteristici ale Joomla 3.7 cu exemple.
Filtre personalizate Pro - filtru rapid și convenabil pentru câmpurile suplimentare Virtuemart
Astăzi, vom vorbi despre una dintre cele mai bune extensii la problema de filtrare a produselor Virtuemart-Custom Filters Pro.
Joomla Custom Fields - câmpuri personalizate în Joomla
În acest articol vom analiza toate tipurile de câmpuri personalizate disponibile în Joomla, precum și exemple de utilizare a acestora pe site.
- principal
- Joomla Templates
- Creați un șablon de adaptare Joomla utilizând Bootstrap. Partea 3. Introducere în sistemul de marcare Bootstrap
În acest articol, vă vom arăta cum să utilizați Bootstrap pentru a crea blocuri adaptive fixe și plutitoare pentru șabloanele Joomla și componentele Joomla.
După ce am aflat ce este Bootstrap și ne-am familiarizat cu principiile de bază ale utilizării sale, este timpul să luăm în considerare sistemul de marcare Bootstrap și aplicația sa în șabloanele Joomla.
În acest articol, vă vom arăta cum să utilizați Bootstrap pentru a crea blocuri adaptive fixe și plutitoare pentru șabloanele Joomla și componentele Joomla.
Bazele razmetkiBootstrap.
În primul rând, să analizăm principiul de bază al construirii unei rețele de bootstrap pentru o pagină html. Dacă înțelegeți, atunci totul va fi parțial. Construirea unei rețele este cel mai important lucru.
Pentru inceput, ar fi frumos sa intelegem ce este vorba despre Grid. În limba engleză se numește Grid. Cel mai simplu mod de a asocia o rețea cu o masă obișnuită, pe care suntem obișnuiți să o vedem în Word. Principala diferență este că grila este construită nu de celulele tabelului, ci de DIV-uri. sau, mai simplu, blocuri.
Toți jucăm în bătălia de la mare. Hârtie, un câmp de 10x10 celule, pe care trebuie să aranjezi nave. Navele constau din una sau mai multe celule. În mod similar, puteți construi un aspect șablon de bază utilizând Bootsotrap, singura diferență fiind că domeniul este aici 12 x celule N, unde N este orice număr întreg de la 1 la infinit.
Să ne uităm la imagine:
Prima linie - 12 nave cu o singură punte, a doua - o navă de opt punți și una cu patru punți, a treia - 3 nave cu patru punți, 4 - 2 șase autovehicule.
Bootsrap ne permite să creăm orice număr de nave de la 1 la 12 punți. Condiția principală - numărul total de punți în linie trebuie să fie 12.
Fiecare dintre nave este un bloc div cu o anumită clasă.
Această clasă este responsabilă de dimensiunea blocului și se formează după cum urmează:
col- [gamă de dimensiuni ecran] - [număr de punți]
În primul rând, vom face față punților. Totul este elementar aici. Ce număr ați indicat, un astfel de număr de punți va fi la nava voastră (lățimea div'a).
Acum, în ceea ce privește rezoluția ecranului. Iată un tabel foarte important:
Afișează gama de dimensiuni ale ecranului pentru care această denumire este caracteristică:
Acum întoarce-te la imagine cu grila.
Faptul este că am specificat lățimea blocului numai pentru ecranele md. dar nu a specificat-o pentru toate celelalte ecrane. În acest caz, Bootstrap:
- Face aceeași lățime pe ecrane mai mari decât intervalul specificat.
- Face o lățime de 12 din 12 (adică 100%) pe ecrane mai mici decât intervalul specificat.
Să ne imaginăm că vrem:
Cum scriem asta? Aici:
În acest caz, clasa col-xs-12 poate fi omisă, deoarece în absența ei, Bootstrap va face în continuare un bloc mai mic de 12 dimensiuni de celule.
Ordinea enumerării claselor nu este, de asemenea, importantă. Puteți scrie de la cele mai mici la cele mai mari, și puteți scrie mai mult la mai puțin.
Pentru a forma o linie completă, trebuie să înfășurăm coloanele DIV din DIV cu clasa de rânduri.
De exemplu, al doilea rând din prima noastră imagine este implementat cu acest cod:
Unii, în special cititorii curioși, pot pune întrebarea: "Și dacă nu am 12 coloane? Dacă am 20 de blocuri la rând?
Răspunsul este următoarea caracteristică importantă a rețelei Bootstrap. Fiecare dintre celulele rețelei poate fi un câmp de sub-celule de 12 x N și fiecare dintre sub-celulele cu un câmp de sub-sublaturi de 12 x N și așa mai departe până la infinit. Imaginați-vă că aceasta poate fi după cum urmează:
Tabelele, pentru simplitate, sunt reduse la 2 coloane. De fapt, sunt 12 pe fiecare nivel. Fiecare nivel (culori diferite) este o grilă completă Bootstrap în care puteți crea o structură mai precisă.
O altă regulă: toate liniile:
și anume toate ochiurile noastre ar trebui să fie într-un bloc cu o clasă de containere sau container-fluid.
Dacă utilizați un container, veți avea un șablon de cauciuc a cărui lățime maximă este fixă (de exemplu, 1200 pixeli). Pe ecrane cu o lățime mai mică, șablonul se va micșora, cum ar fi cauciucul, iar pe ecrane cu o lățime mai mare în jurul marginilor, va apărea spațiu liber.
În cazul recipientului-fluid, șablonul va fi întotdeauna întins la lățimea maximă a ecranului, ca în wedal.ru.
Iată un exemplu general:
Acesta va fi codul de grilă Bootstrap gata făcut.
Învățând acest Zen simplu, puteți crea cu ușurință o rețea, chiar și pentru un șablon foarte complex Joomla.
Integrarea modulelor componente și Joomla în marcajul Bootstrap al șablonului Joomla. Crearea layout-ului de bază.
Este timpul să profitați de cunoștințele dobândite în prima parte a lecției, în practică.
Ar trebui să aveți deja șablonul MasterBootstrap instalat. despre care am scris în ultimul articol.
Structura unui șablon tipic Joomla este prezentată în figură:
Deschideți fișierul:
Acesta este fișierul șablon principal, care stochează marcajele de bază html.
Bootstrap Framework este deja conectat în acest șablon și nu este necesar să îl conectați separat.
Deoarece vrem să creăm propriul șablon folosind Bootstrap bazat pe acest șablon, ștergem tot codul deja creat între etichete:
și și
După aceste acțiuni, șablonul nostru va arăta astfel:
Site-ul va afișa o pagină albă goală.
În primul rând, vom crea cel mai simplu marcaj care implementează aspectul standard cu trei coloane sub forma literei "O": un capac, o polvală, un bloc de conținut central, o coloană stângă și una dreaptă. Aproximativ un astfel de layout de bază este folosit pe wedal.ru. Este prezentat în imagine:
Setați imediat condiția ca aspectul nostru pe ecranele sm și mai jos să fie transformat într-o singură coloană, așa cum se arată în figură.
Urmând regulile pentru crearea unei rețele, descrise mai sus, puteți crea întreaga noastră structură cu următorul cod:
Am creat grila în conformitate cu regulile descrise mai sus. Id-ul a fost adăugat la fiecare element. Acest lucru nu este necesar, dar poate fi util pentru procesarea ulterioară.
Deoarece marcajul inițial al șablonului nostru Joomla separă antetul de restul și nu există niciun bloc cu o clasă de containere, am împărțit codul nostru în două containere: unul va fi în antet. iar celălalt în secțiune. Introduceți acest cod în șablonul Joomla. Sistemul de partiționare Bootstrap nu contrazice acest lucru. Ca rezultat, codul șablonului Joomla este după cum urmează:
Bootstrap-ul de bază pentru șablonul nostru Joomla este gata. Și se poate vedea deja pe partea din față a site-ului. Pentru claritate, am colorat blocurile în conformitate cu imaginea prin adăugarea următorului cod în fișierul CSS /css/template.css:
și eliminarea din fișier a întregului cod CSS din șablonul de bază.
Iată ce puteți vedea pe site:
Dacă începem să comprimăm browserul, obținem:
Practic, ceea ce a fost intenționat inițial în imagine.
Tot ce rămâne pentru noi este să adăugăm pozițiile modulelor Joomla și variabila de ieșire a conținutului (componentă) în locul textului din blocuri.
Integrarea modulelor componente și Joomla în marcajul Bootstrap al șablonului Joomla. Adăugarea pozițiilor modulului și a componentei variabile Joomla.
Componenta variabilă este afișată și mai ușor:
Folosind aceste coduri, le înlocuim cu texte din șablonul nostru. După o scurtă manipulare, obținem codul final al grilei de șabloane Joomla:
După aceea, în zona de administrare, adăugați modulele de care avem nevoie la pozițiile create. Dacă nu aveți nevoie de un element rând în lista verticală a pozițiilor disponibile, introduceți manual numele acestuia.
Dupa ce am terminat, ne uitam la site-ul nostru:
Rețeaua funcționează. Acum, pagina încă nu pare foarte prezentabilă, deoarece am făcut doar aspectul de bază. Fiecare dintre elementele paginii necesită, de asemenea, înregistrarea.
Versiunea curentă a șablonului poate fi descărcată mai jos:
După cum puteți vedea, folosind Bootstrap Framework, grila de bază a șablonului este creată foarte simplu. Este suficient doar să înțelegem principiile formării sale. Folosind această tehnică, puteți crea șabloane complexe de multicolume prin reconstruirea coloanelor la diferite rezoluții ale ecranului.
Vă mulțumim pentru un alt articol util! cu mult timp în urmă, aveam de gând să stăpânească bootstrap și a fost o bună ocazie să o fac cu ajutorul tău! Spune-mi te rog, deci, de exemplu, am creat un modul de meniu, și am nevoie de bootstrap stiluri pentru acest modul nu este utilizat și, prin urmare, modulul pentru a afișa simplu, fără nici un decor, așa cum am folosit pentru a desena mine meniuri și mă simt atât de confortabil, dar în bootstrap șablon Wizard dacă adăugați un meniu în orice poziție, este afișat cu formatarea. Vă mulțumim în avans!
spro1, aceasta este deja dezvoltatorii Joomla. Puteți fie trece peste aspectul meniului este utilizat pentru a elimina șablonul și clasa „NAV“, care consideră Bootstrap pentru meniu, sau pur și simplu face din meniul cu CSS doriți, folosind clase CSS, astfel încât prioritatea lor a fost mai mare decât Bootstrap clasa de prioritate. Întotdeauna mă duc în munca mea pe a doua cale.
Mulțumesc! Aștept cu nerăbdare asta!
Am petrecut câteva zile citind diverse articole pe Joomla și bootstrap - nu a putut crea o imagine de ansamblu a tine până când nu mutat din greșeală la link-ul de la care a Forumului aici.
cu plăcere, mă abonez la newsletter!
ps arată că imaginile unice și lucrările încorporate) în imagine, cu o structură de șablon există o greșeală de scriere în fața dosar imagini - este scris că este stocat css)
m-alex, mulțumesc! A corectat imaginea.
Dmitry, linia:
cod:
conectează fișierul php corespunzător, care conectează scripturile și stilurile.
conectează fișierul php corespunzător, care conectează scripturile și stilurile.
De asemenea, nu am conectat template.css. Versiunea sa minimizată este conectată - template.min.css. În acest sens, aș vrea să știu de ce? Este scris undeva de Joomla? Am cea mai recentă versiune 3.6.4. Am încercat să șterg template.min.css. și să înregistreze șablonul.css prost
Da, într-adevăr, este conectată doar o versiune minimizată. După specificarea referinței la template.css, apare culoarea, dar sub antet există o bară orizontală albă. Dacă utilizați codul fără a specifica separat antetul - banda dispare.
Oricum, o adevărată confuzie. În index.php eficient, vă recomandăm să includeți următoarele linii:
> conectează fișierul php corespunzător, în care există o conexiune de scripturi și stiluri.
Și nu există în special stiluri.
"
Dmitry, ce stiluri ai nevoie? În acest fișier numai culorile din fundalurile coloanelor noastre. Încă nu este nevoie de nimic. Totul altceva formează Bootstrap.
"Deoarece dorim să creăm propriul șablon unic utilizând Bootstrap bazat pe acest șablon, vom șterge tot codul deja creat între etichete:
dacă ($ params-> get ('compile_sass', '0') === '1')
require_once "include / sass.php";
>
fundal al corpului: url ("") repeta centrul fix de sus rgba (0, 0, 0, 0);
>
Dmitry, cred că am înțeles de ce ai "tot greșit". Faptul este că, din moment ce scris primul articol Masterbootstrap dezvoltator a actualizat șablonul pe site-ul oficial. Au fost adăugate unele elemente noi. Ați descărcat deja șablonul actualizat de la. site-ul, deci ceva nu se potrivește cu cel descris în articol. Descărcați șablonul la sfârșitul acestui articol. Este pentru el să meargă toate lecțiile ulterioare.
Dacă sunteți, în general, foarte familiarizat cu codul de șablon, puteți utiliza versiunea actualizată. Principiul este același, doar vor exista inconsecvențe ale codului, precum cele pe care le-ați adus.
Eu nu sunt un expert foarte mult pe joomla și bootstrap consiliere atât de înțelept este necesar.
Am un site scris pe bootstap 3 care îl poate conecta la joomla? poate fi ca un șablon.
sevhenia, site-ul nu poate fi scris la Bootstrap 3. Bootstrap - acest CSS-cadru care este utilizat numai pentru proiectarea site-ul web. Scrieți despre ce funcționează cu adevărat site-ul dvs.? În cazul în care PHP, ce CMS sau de sine? Sau HTML goală?
Doar în cazul în care am vrut să clarific, în Maestrul Bootstrap nu vor exista legături ascunse și alte lucruri murdare? Sau tot la fel este necesar să creați absolut un șablon de la zero?
Anton, nu pot spune pentru dezvoltatorul Master Bootstrap. În timp ce nu am observat în șablon link-uri ascunse și alte lucruri murdare, dar ceea ce se va întâmpla în viitor - este necunoscut. Puteți lua un șablon din lecțiile acestei serii. E curat.
Bună ziua! Am descărcat șablonul de pe site-ul dvs., partea 3, dar în motorul din managerul extensiei, căutarea, scrie "nimic nu a fost găsit". Ce ar trebui să fac?
Articole similare
Trimiteți-le prietenilor: