Cum să utilizați bootstrap pentru aspectul site-uri

Vă urez bun venit pe blogul meu, care este dedicat tehnologiilor web. În special, astăzi aș dori să vă spun despre cadru css, bootstrap. cum să-l folosească, cum să-l instalați și de ce ai nevoie de un dezvoltator web.

În doar câțiva ani pe internet am găsit un număr de site-uri și servicii utile, care nu sunt direct legate de construirea site-ului și tema generală a acestui blog, dar am vrut doar sa le recomanda pentru tine:

Servicii de Cashback. cum ar fi Epn.bz și Letishops. Prima va economisi până la 15% pe Aliekspress iar al doilea stint cu Cash Back de mai mult de 1.000 de magazine online. bilete de avion, doar servicii excelente - Aviasales.ru. Căutări pe sute de site-uri și oferă toate opțiunile pentru bilete, puteți alege cel mai ieftin sau cele în care există mai puțin timp de călătorie. Ei au, de asemenea, o mare gloată. aplicații și plugin pentru browser.

Ce este Bootstrap

Acest cadru css. De fapt, un designer gata de care aveți nevoie pentru a alege elementele necesare și să le includă în proiect. Acesta a fost creat de mai multe ori pentru a accelera procesul de aspectul site-ului, dezvoltatorul nu a scris de mână stilurile necesare. În cazul în care acestea ar putea folosi cadrul, puteți face mai puțin și a obține mai mult.

Beneficiile bootstrap

În plus față de creșterea vitezei de dezvoltare, cadrul are o serie de avantaje evidente, printre care aș dori să subliniez următoarele:

  1. Compatibilitate cross-browser și adaptabilitate. Că, fără un cadru trebuie să fie pus în aplicare în mod independent, Bootstrap mult mai ușor, pentru că este, de fapt, presupune realizarea acestor aspecte importante. A început în site-urile vor fi bine afișate pe toate dispozitivele, și chiar și în browserele vechi, totul va arata normal.
  2. Open source. Astfel, mama razrabotchki web au posibilitatea de a rafina fremvork pentru a se potrivi nevoilor dumneavoastră, inclusiv componentele sale, etc. în ea
  3. Simplitatea. Pentru a-cadru de master nu trebuie să fie profiluri ascuțite cu dinți, care poate trezi noaptea, și el a pus pe tine rece site-ul. Este suficient să aibă cunoștințe de HTML și CSS, JS idee bună să știu la nivel de intrare.

deficiențe

  1. Bootstrap voluminoase. Da, există, chiar și fișiere comprimate într-un cadru de maxim conține încă mii de linii de cod care nu adaugă viteza proiectului finit.
    Cum să utilizați bootstrap pentru aspectul site-uri
  2. Nu este potrivit pentru absolut toate site-urile. Este imposibil să scrie un stil universal, care s-ar potrivi sub complet diferite modele. Dacă este posibil, ar trebui luate ani. Bootstap potrivite pentru site-urile Templated, dacă aveți un design super-exotice, necesitatea de a schimba cadrul parțial pentru ei înșiși, dar ar fi chiar mai dificilă decât în ​​curs de dezvoltare de la zero.

Deci, cu intrarile si iesirile sortate, dar eu încă mai spun că Bootstrap instrument de bun, mai degrabă decât una rea.

Stabilirea cadrului

Bootstrap, puteți descărca de pe site-ul oficial

Cum să utilizați bootstrap pentru aspectul site-uri
Pe această pagină, puteți ajusta setările pentru a se potrivi, și apoi descărcați propria versiune.
Cum să utilizați bootstrap pentru aspectul site-uri
Toate dosarele pe care le descărcați, trebuie să copiați în proiectul dumneavoastră. Cadrul Css-fișier este necesar să se conecteze la fisier HTML. Este de remarcat faptul că există două versiuni ale unui fișier - un sistem complet și concis. În al doilea lizibilității cod este foarte rău, dar mai mici dimensiuni. Pe proiectul dumneavoastră este recomandat să utilizați această opțiune.

Cum de a lucra cu el

Am ajuns la cea mai importantă întrebare. Cadrul este compus în întregime din stiluri predefinite care sunt legate de diferite clase. Acest lucru înseamnă că toate lucrările cu acesta este elementul dorit de pe pagina de a construi pe clasele de stilul dorit. O să-ți dau doar un exemplu, era clar.

Crearea unui text bloc informativ folosind Bootstrap

Imaginați-vă că trebuie să introducem un articol în bara laterală, așa-numitul bloc, care este presat la marginea din stânga sau din dreapta de o culoare diferită și conține unele informații importante. Deci, pentru stabilirea unor astfel de unități în clasele de Bootstrap întâlni la stânga-pull și trageți-dreapta. Prin urmare, pentru blocurile stânga și dreapta.

Deci, provocarea noastră: de a crea un bloc din stânga de culoare roșie, lățime de 250 pixeli. Ce facem? Creați un div, vom da astfel de clase:

Deci, primele două clase de browser-ul va lua cadru, deoarece acestea sunt deja în ea sunt descrise. Trage stânga bloc va face float noastră și strângeți-l la marginea din stânga, și bg-pericol este culoarea de fundal roșu pal, ca mesaje de eroare afișate se vor face.

O clasă personalizată ne-a creat pentru că trebuie să adăugați manual anumite stiluri. Creați propriul style.css și scrie în ea:

Lățime personalizat: 250px;
>

Acesta este modul în care ne-am atins obiectivele dorite. Nu avem nevoie pentru a defini manual toate proprietățile pentru bloc, cere doar clasele și toate. Prin urmare, studiul este de a examina clase Bootstap pe care le are și utilizarea acestora.

Cum să învețe să lucreze cu cadrul?

Cum pot deveni un profesionist pe Bootstrap?

După cum vă puteți imagina, gratuit, nimeni nu va trebui să învețe. Fiind capabil de a lucra cu acest cadru, puteți câștiga mai mulți bani decât colegii tăi care fac totul cu mâna. Prin urmare, dacă doriți să aflați mai repede, recomand sa ia un curs de formare dintr-o echipa Webformyself abrupta te va învăța toate subtilitățile de lucru cu cadrul, și, în același timp, să învețe cum să creeze site-uri adaptive, și mult mai repede decât fără Bootstrap.

articole similare