Cum se folosește CSS de bază în Bootstrap

Unul dintre cele mai complexe lucruri atunci când vine vorba de lucrul cu designul web este depășirea diferențelor subtile dintre browsere, deși, în teorie, fiecare browser trebuie să respecte standardele și, în majoritatea cazurilor, există diferențe mici foarte subtile care pot face proiectarea noastră este dificil de implementat.

Înainte de existența Bootstrap un fișier numit reset.cssÎn aceasta, ceea ce s-a făcut a fost că toate valorile elementelor de bază și cheie, cum ar fi tamponările, marginile, fontul implicit etc., au fost definite în mod explicit. Cu aceasta, am împiedicat browserul să facă ceea ce dorea atunci când defineam elemente pe care nu le modificasem în stilurile noastre personalizate.

In zilele de azi Bootstrap are grijă de aceste detalii pentru noi, acest lucru se realizează cu un fișier numit bootstrap.css care este cunoscut popular ca fișier de bază.

CerințePentru a putea executa exemplele și exercițiile din acest tutorial trebuie să avem un proiect cu Bootstrap a descărcat deja sau, în caz contrar, o conexiune la Internet pentru a putea utiliza bibliotecile direct de pe CDN. Avem nevoie de un browser modern, cum ar fi Crom sau Firefox în cele mai recente versiuni ale sale și, în cele din urmă, avem nevoie de un editor de text de genul Text sublim sau NotePad ++ pentru a crea conținut HTML într-un mod mai prietenos, deși, dacă dorim gedit sau notepad, ne servește scopurile.

Anteturi
Unul dintre lucrurile care atrag cel mai mult atenția pe un site web sunt titlurile și subtitrările conținutului, desigur că aceasta este funcția acestor elemente, CSS bazat pe Bootstrap are un mod interesant de a gestiona acest lucru, în primul rând are câteva dimensiuni și un font definit pentru element h în oricare dintre numerotările sale variind de la 1 la 6, dar are și clase care corespund fiecărui element, astfel încât să putem aplica aceleași stiluri unui div sau încă span.

Un alt lucru interesant este că putem folosi elementul mic pentru a micșora dimensiunea unei secțiuni a titlului dar menținând proporția în raport cu elementul sau elementul care folosește clasa corespunzătoare.

Cu aceasta pur și simplu că, atunci când avem mai multe browsere, se menține o omogenitate a designului nostru, astfel încât titlurile nu trebuie să arate diferit, de exemplu, în Safari la Firefox, când știm că ambele browsere funcționează cu fonturi diferite în mod implicit.

Punerea în practică a ceea ce ați învățat
Vom crea o mică pagină în care vom face o listă de titluri, vom plasa cele două pante una peste alta, astfel încât să putem vedea cum diferențele nu mai există datorită fișierului de bază al Bootstrap. Să vedem mai întâi codul și apoi vom vedea cum arată în browserul nostru.

 Utilizarea fișierului Base BootstrapAcesta este un div cu clasa H1 sursa mică
Acesta este un titlu H4, fontul mic
Acesta este un div cu clasa H4 sursa mică

Aici vedem cum am făcut în interiorul corpului diferitele elemente pe care le vom folosi ca titluri, în plus vă arătăm cum funcționează elementul, astfel încât să îl putem combina cu titlurile pentru a obține efecte foarte interesante. De asemenea, includem un stil suplimentar pentru a adăuga unele garnituri suplimentar, astfel încât să putem avea un rezultat ca cel pe care îl vom vedea în următoarea imagine:

MARI

Paragrafele
Odată ce am captat atenția unui cititor sau a unui utilizator cu titlurile aplicației noastre, de obicei avem nevoie de un conținut care poate fi consumat, în mod normal este un text pe care îl plasăm într-un paragraf, deși poate fi și o imagine, audio sau video.

Revenind la paragraf, deja elementul

aduce un stil predefinit de baza CSS, totuși această bază ne oferă și un tip special de paragraf, care se numește conduce, când adăugăm această clasă la un paragraf, o vom distinge imediat de restul celor similare, deoarece dimensiunea sa este crescută și unele proprietăți ale fonturilor sunt modificate.

Să vedem în următorul cod cum funcționează acest lucru pe care tocmai l-am explicat, în acest exemplu vom crea două paragrafe în care primul va avea clasa conduce, în acest fel vom vedea cum va evidenția, desigur, toate acestea funcționează dacă avem Bootstrap în proiectul nostru, să vedem codul nostru:

 Utilizarea fișierului Base Bootstrap
Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly exercitation ex. Costine de vită magna corned beef incididunt id. Kevin se găsește în coadă. Filet mignon curcan quis, shankle venison ullamco jerky non voluptate pork pork.

Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly exercitation ex. Costine de vită magna corned beef incididunt id. Kevin se găsește în coadă. Filet mignon curcan quis, shankle venison ullamco jerky non voluptate pork pork.

Să rulăm exemplul nostru și să vedem cum arată în browserul nostru:

MARI

Aliniați textul
Unul dintre lucrurile care este, de asemenea, foarte important este alinierea textului, deoarece uneori avem nevoie ca textul nostru să fie justificat, aliniat la dreapta, la centru sau cu forța să fie la stânga, deși există echivalente în CSS care au o clasă pentru aceasta ne economisește multă muncă și ne ajută, de asemenea, să acordăm coerență codului.

În exemplul următor vom vedea cum aplicăm fiecare dintre aceste clase la diferite elemente și pentru ca codul nostru să aibă o lizibilitate mai bună vom face toate elementele paragrafe. Să vedem codul:

 Utilizarea fișierului Base Bootstrap
Bacon ipsum dolor amet in laboris magna ullamco, in drumstick dolor boudin eiusmod andouille
leberkas exercitarea burta de porc ex. Costine de vită magna corned beef incididunt id.
leberkas exercitarea burta de porc ex. Costine de vită magna corned beef incididunt id. leberkas exercitarea burta de porc ex. Costine de vită magna corned beef incididunt id. Kevin Rump

în biltong coadă. Filet mignon curcan quis, shankle venison ullamco jerky non voluptate pork pork.

Acum să vedem cum se comportă fiecare clasă în browserul nostru, există un caz special cu justifica, care este foarte subtil, astfel încât efectul său poate să nu fie văzut prea mult.

MARI

Liste
Listele sunt deseori necesare și nu exclusiv pentru a enumera lucrurile, ele sunt părți vitale ale designului de multe ori. Bootstrap le manipulează într-un mod transparent, precum elementele anterioare pe care le-am văzut, listele vin cu un stil predefinit de CSS base, totuși avem câteva variante, de exemplu listarea fără stiluri pentru a evita gloanțele și listarea cu in linie, acesta din urmă face lista orizontală.

Să vedem apoi în următorul cod un exemplu al fiecăreia dintre aceste liste, astfel încât să le putem folosi în codul nostru:

 Utilizarea fișierului Base Bootstrap
Listă în linie

Primul element
Al doilea element
Al treilea element
Al patrulea element
Al cincilea element

Listă fără stiluri

Primul element
Al doilea element
Al treilea element
Al patrulea element
Al cincilea element

Lista standard

Primul element
Al doilea element
Al treilea element
Al patrulea element
Al cincilea element

Acum să vedem cum arată în browserul nostru, unde putem vedea că diferențele sunt imediat vizibile:

Cu aceasta terminăm acest tutorial, am văzut că baza CSS a Bootstrap Ne oferă o bază standard pentru a ne asigura că elementele pe care nu le-am definit sau personalizat apar într-un anumit mod direct în browser, oferindu-ne astfel control deplin asupra aplicației noastre, indiferent de browser.