Bună ziua, dragi prieteni! În articolul de astăzi, vreau să vă spun despre cadrul CSS moderne - Bootstrap. Cine nu știe, un cadru - un cadru de lucru la proiect, un set de funcții predefinite și soluții pentru dezvoltarea rapidă și eficientă.
Acest cadru CSS are o listă extraordinară de proprietăți css stilului, dispozițiile de punere în aplicare elementele necesare pe pagină în nici un fel cu minim de efort. De fapt, tot ce avea nevoie - este necesar să se specifice claselor și atributele elementelor de pagină pe care doriți să le modificați prin intermediul instrumentului Bootstrap. Dar mai multe despre asta mai târziu ..
De asemenea, jQuery UI (User Interface) este integrat în cadrul, care poate ajuta cu ușurință în crearea de diferite efecte vizuale: ferestre modale, ponturile, cursoare, și altele asemenea. Și toate acestea se bazează pe proprietățile și șabloanele Bootstrap.
Pentru a atașa cadrul proiectului dumneavoastră, ar trebui să descărcați arhiva cu foaia de stil și biblioteca Jquery Bootstrap.
descărcare Bootstrap
Dezarhivați conținutul arhivei descărcate în proiectul dumneavoastră. Arhiva conține trei dosare js, css, img. Distribuiți conținutul în funcție de structura proiectului, numai comoditate.
dosar Img, același lucru poate fi plasat în stilurile de director /. Acest dosar conține pictogramele sprite în culorile negru și alb. Aceste pictograme sunt utilizate pentru elemente de anumite proprietăți css styling formulare, liste, etc.
De la teorie la practica?
Instrumentul completă Bootstrap are un set foarte mare și flexibil de caracteristici pentru lucrul cu elemente de pe o pagină web. Să luăm în considerare câteva exemple pentru a avea o imagine de ansamblu a operei sale.
Crearea unei structuri de site-
Luați, de exemplu, recipientul (înfășurare) și site-ul va face în cantitatea potrivită de coloane plutitoare.
Ce vedem? Am avut un aspect cu două coloane a site-ului, o structură cu lățime fixă plutitoare. Care este logica? Dispunerea implicită este împărțit în 12 coloane (interval *) lățime c implicit de 940px.
Pentru a începe, vă rugăm bloc container nostru container clasa - se spune că structura blocului va fi plutitoare, dar cu o lățime fixă de 940px. Mai mult, în interiorul containerului, vom cere blocul cu rândul de clasă - determină deja rândul unitatea de bază plutitoare pentru coloanele noastre cu lățime fixă. Acum, în interiorul elementului părinte sub fiecare coloană vom specifica un div cu spanclass *, în cazul în care * - este numărul de aspect coloana (bazat pe 12), care se va ocupa unitatea.
In exemplul meu, blocul coloana din stânga este de 4, 8 și dreapta, cu raportul și de a obține un aspect cu două coloane stabile.
Nu uitați că numărul de coloane pentru copii nu trebuie să depășească valoarea mamă. Adică, un element cu o clasă nu poate fi încorporat span4 5 span1 bloc span5 sau blocuri. Cred că ai logica.
Dacă aveți nevoie pentru a crea un aspect de cauciuc, folosiți clasa împreună clasa .container .conteiner-fluid. și așa mai departe, în loc să-.row.row fluid. Aceasta permite lățimea blocului de calcul în raport cu lățimea elementului părinte.
Pentru a utiliza această opțiune, trebuie să conectați specială meta-tag-ul, precum și o foaie de stil speciale, care este, de asemenea, o parte din fișierul descărcat.
Astfel, dacă doriți ca site-ul pe diferite dispozitive cu rezoluție diferite, este necesar să se utilizeze un stylesheet bootstrap-responsive.css și aspect de cauciuc (clase de fluid).
Orice formă de tabel - este doar
C folosind bootstrap, puteți crea cu ușurință orice fel de formulare, tabele pe site, în mod corect.
Am creat un tabel regulat cu colțuri rotunjite, ușor de citit, atunci când treceți șirul sunt evidențiate.
Tot ceea ce am realizat prin adăugarea de etichete