Release Bootstrap (cunoscut anterior sub numele de Twitter Bootstrap) câțiva ani a apărut la Drupal 7 cum ar fi. Cu toate acestea, am învățat că a luat doar în această săptămână. „Autentificare“, în cadrul mi se părea deloc ușor și am umplut o mulțime de lovituri. Informații cu privire la bootstrap mult, dar imaginea de ansamblu nu este corect. De aceea, am decis să combine toate într-un articol scurt.
Ce este Bootstrap? Pe scurt - este proiectantul de a construi o interfață site-ul, care este, în ceea ce privește aspectul său. Acesta este un set de controale interfață de utilizator, cum ar fi butoane, antete, câmpuri de intrare, tooltip. (Oochen-le mult și. Ele sunt frumoase!).
Dezvoltatorii Bootstrap au făcut o treabă excelentă. Ele nu definesc numai aspectul și comportamentul fiecăruia dintre controalele, dar, de asemenea, au testat toate această mare cantitate de cod în diferite browsere (inclusiv mobil!).
Pentru ei iubesc Bootstrap programatori soveremennyy?
Pentru ei iubesc proprietarii Bootstrap site-uri moderne?
- Design Bootstrap face un frumos, clar, previzibil, și HTML / CSS / JS cod compact.
- Chiar și pe pagina de Internet mobil a site-ului, a făcut pe Bootstrap încărcate mult mai rapid! Desigur, dacă totul este în mâinile potrivite, ca să spunem așa, și pe a doua și a treia pentru a face site-ul;).
Bootstrap nu depinde de ceea ce CMS este de lucru / site-ul de afaceri. Este important să conectați-l corect. Sunt specializat în Drupal, prin urmare, vă spun cum să faci tema de proiectare bazat pe Bootstrap pentru Drupal 7.
Drupal + Bootstrap
În plus, procedeul descris în exemplul 3 Bootstrap.
Pentru a lucra necesită o bibliotecă mai recent Bootstrap jQuery decât Drupal, astfel încât a pus modulul jQuery_update. includ versiunea 1.9 sau mai mare.
Pentru a Bootstrap câștigat dreptul, pe de o parte a Drupal este necesară pentru generarea motorului adaptate clase HTML, care sunt descrise în stiluri Bootstrap.
Set de proiectare temă bootstrap
Pentru a trece peste această clasă și HTML structura drupalnuyu sa stabilit tema de proiectare versiune bootstrap 7.x-3.0. Structura temelor ale fișierelor afișate în imagine.
Creați-vă propria temă pe baza stabilită
Dacă intenționați să modificați șabloanele, vă recomandăm să creați imediat tema de proiectare bazat pe platoul de filmare. În cazul în care acest lucru se face în tema principală, toate modificările vor fi suprascrise (pierdute!) La site-ul este actualizat în apropiere. Sunt opisalovo grijuliu. Dar dacă este scurt și în limba rusă, atunci trebuie să faci:
- bootstrap_subtheme copiați directorul de un nivel mai sus (în directorul cu temele designul site-ului);
- redenumiți în ceva din propria lor, de exemplu, mytheme;
- bootstrap_subtheme.info.starterkit redenumiți fișierul în .info mytheme;
- în mod opțional, puteți edita mytheme.info fișier și schimba numele pentru tema.
Crearea unui sub-temă este terminat.
Activarea și configurarea Create Skin
Distracția începe. În mod implicit, bootstrap în sine este încărcat de la o sursă externă - CDN (livrare de rețea de conținut). Aceasta este, pe șireturi serverului nu sunt script-uri. Loaded versiunea completă, care include toate componentele disponibile. Se încarcă rapid (pentru CDN), dar este departe de a fi optim. Acum este timpul să ne spună ce fel de bootstrap se întâmplă:
Când se utilizează un CDN este optim? Dacă site-ul este mare, și sunt susceptibile de a utiliza aproape toate controalele, utilizați CDN-versiune.
Pentru site-urile mici care utilizează puterea de câteva controale, nu este necesar să se încarce js-cod și css-stiluri de celelalte comenzi. Aveți posibilitatea să le eliminați și, prin urmare, pentru a reduce fișierele descărcate de browser (de exemplu, viteza de încărcare a paginilor pe dispozitive mobile).
Minimalizarea (compresie) oferă o reducere semnificativă a dimensiunii fișierelor. Dar, în timpul dezvoltării site-ului este mai bine să utilizați versiunea necomprimat - este mai convenabil pentru a prinde erori și edita fișiere (dacă este necesar).
Pentru foarte avansate, este necesar să se utilizeze codul sursă. Acest lucru va permite să le schimbe. Conform dezvoltării final, amintiți-vă că fișierele trebuie să fie reduse la minimum.
Conectarea la bootstrap tema de proiectare
Cea mai recentă versiune de Bootstrap este in git. Directorul dist sunt reduse la minimum și fișiere normale, cum ar fi all-in-un singur fișier. Punerea aceste fișiere plasate în mytheme / bootstrap.
Minimizarea fișiere pentru a elimina css redundante și js
Odată ce dezvoltarea site-ului este finalizată și știți ce sunt folosite componente, este timpul pentru a minimiza fișierele script și stiluri. În primul rând, elimina costurile inutile pentru a afișa site-ul stiluri și script-uri. Este minunat pentru a reduce cantitatea de CSS și codul JS. Acest lucru se poate face în următoarele moduri:
- Tema bootstrap în sine vă permite să specificați un fișier * .info fișiere pentru a exclude sub forma exclude [css] [] = 'module / carte / book.css';
- Puteți utiliza hook_js_alter, hook_css_alter - un mod universal.
Comprimarea și pack-le pot fi instrumente de terță parte, sau pe partea de Drupal. Pentru acest din urmă caz este soluția perfectă avansată CSS / JS cumulare. Acest modul conține un număr mare de setări și va umenishit în mod semnificativ dimensiunea script.
Ce urmează?
Apoi, puteți utiliza bootstrap la maxim: adăugați componente și personaliza aspectul lor. Toate componentele sunt foarte bine descrise în paginile proiectului (folosiți orizontală superioară de meniu). Desigur, există o versiune rusă a acestei documentații, dar mi se părea prea crud și nu l-am folosit.
Cum de a conecta un Bootstrap de control
Link-uri utile
Bootstrap se dezvoltă rapid, există o mulțime de documentare cu privire la versiunea 2. nevoia de a fi atent, este semnificativ diferită de versiunea curentă.