Kako koristiti osnovni CSS u Bootstrapu

Jedna od najsloženijih stvari u radu s web dizajnom je prevladavanje suptilnih razlika među preglednicima, iako u teoriji svaki preglednik mora biti u skladu sa standardima, a u većini slučajeva jest, postoje vrlo suptilne male razlike koje mogu napraviti naš dizajn teško implementirati.

Prije postojanja Bootstrap datoteka pod nazivom reset.cssU tome je učinjeno da su eksplicitno definirane sve vrijednosti osnovnih i ključnih elemenata kao što su ulošci, margine, zadani font itd. Time smo spriječili preglednik da učini što želi pri definiranju elemenata koje nismo promijenili u našim prilagođenim stilovima.

Ovih dana Bootstrap vodi brigu o tim pojedinostima umjesto nas, to se postiže datotekom pod nazivom bootstrap.css koja je u narodu poznata kao osnovna datoteka.

ZahtjeviDa bismo mogli izvesti primjere i vježbe u ovom vodiču, moramo imati projekt s Bootstrap već ste preuzeli ili niste uspjeli, internetsku vezu kako biste mogli koristiti biblioteke izravno s vašeg CDN. Potreban nam je moderan preglednik poput Krom ili Firefox u najnovijim verzijama, a na kraju nam je potreban uređivač teksta poput Uzvišen tekst ili NotePad ++ za stvaranje HTML sadržaja na prijateljskiji način, iako, ako želimo, gedit ili bilježnica služe našoj svrsi.

Zaglavlja
Jedna od stvari koje najviše privlače pozornost na web stranici su naslovi i podnaslovi sadržaja, naravno to je funkcija ovih elemenata, CSS baza od Bootstrap ima zanimljiv način rješavanja ovoga, prije svega ima nekoliko veličina i font definiran za element h u bilo kojem numeriranju u rasponu od 1 do 6, ali također ima klase koje odgovaraju svakom elementu, tako da te iste stilove možemo primijeniti na div ili još raspon.

Još jedna zanimljivost je da možemo koristiti element mali smanjiti veličinu dijela naslova, ali zadržati proporciju u odnosu na element ili element koji koristi odgovarajuću klasu.

Time jednostavno, kada imamo više preglednika, održava se homogenost našeg dizajna, pa naslovi ne moraju izgledati drugačije, na primjer u Safari do Firefox, kad znamo da oba preglednika prema zadanim postavkama rade s različitim fontovima.

Primjena naučenog u praksi
Napravit ćemo malu stranicu na kojoj ćemo napraviti popis naslova, postaviti ćemo dva nagiba jedan na drugi kako bismo vidjeli kako razlike više ne postoje zahvaljujući osnovnoj datoteci Bootstrap. Pogledajmo prvo kôd, a zatim ćemo vidjeti kako izgleda u našem pregledniku.

 Korištenje datoteke Base BootstrapOvo je div s klasom H1 izvor mali
Ovo je naslov H4, mali font
Ovo je div s klasom H4 izvor mali

Ovdje vidimo kako smo unutar tijela učinili različite elemente koje ćemo koristiti kao naslove, dodatno pokazujemo kako element radi tako da ga možemo kombinirati s naslovima kako bismo postigli vrlo zanimljive učinke. Uključujemo i dodatni stil za dodavanje podstavke dodatno kako bismo mogli imati rezultat poput onog koji ćemo vidjeti na sljedećoj slici:

POVEĆAJTE

Odlomci
Nakon što smo naslovima naše aplikacije privukli pozornost čitatelja ili korisnika, obično nam je potreban neki sadržaj koji se može konzumirati, obično je to tekst koji stavljamo u odlomak iako to može biti i slika, audio ili video.

Vraćajući se na odlomak, već element

donosi stil koji je unaprijed definiran osnovnim CSS -om, međutim ova baza nudi nam i posebnu vrstu odlomka koji se naziva voditi, dodavanjem ove klase u odlomak odmah ćemo je izdvojiti od ostalih sličnih, budući da se povećava njezina veličina i mijenjaju neka svojstva fontova.

Pogledajmo u sljedećem kodu kako ovo funkcionira, što smo upravo objasnili, u ovom primjeru ćemo stvoriti dva odlomka u kojima će prvi imati klasu voditi, na ovaj način ćemo vidjeti kako će to istaknuti, naravno da sve ovo funkcionira ako imamo Bootstrap u našem projektu, pogledajmo naš kod:

 Korištenje datoteke Base Bootstrap
Slanina ipsum bol amet in Laboris magna ullamco, u bolovima od bataka boudin eiusmod andouille leberkas svinjski trbuh vježbanje ex. Goveđa rebra magna corned beef incididunt id. Kevin ramp u repnom biltongu. Filet mignon puretina quis, kostur divljači ullamco jerky non voluptate svinjski but.
Slanina ipsum bol amet in Laboris magna ullamco, u bolovima od bataka boudin eiusmod andouille leberkas svinjski trbuh vježbanje ex. Goveđa rebra magna corned beef incididunt id. Kevin ramp u repnom biltongu. Filet mignon puretina quis, kostur divljači ullamco jerky non voluptate svinjski but.

Pokrenimo naš primjer i vidimo kako to izgleda u našem pregledniku:

POVEĆAJTE

Poravnajte tekst
Jedna od stvari koja je također vrlo važna je poravnanje teksta, jer ponekad nam je potrebno da naš tekst bude opravdan, poravnat s desne strane, u sredinu ili prisilno s lijeve strane, iako u CSS -u postoje ekvivalenti koji imaju klasa za ovo štedi nam mnogo rada, a također nam pomaže da damo dosljednost kodu.

U sljedećem primjeru vidjet ćemo kako primjenjujemo svaku od ovih klasa na različite elemente, a kako bi naš kôd imao bolju čitljivost, sve ćemo elemente učiniti paragrafima. Pogledajmo kod:

 Korištenje datoteke Base Bootstrap
Slanina ipsum dolor amet in Laboris magna ullamco, dolor štapić boudin eiusmod andouille
leberkas svinjski trbuh vježbanje ex. Goveđa rebra magna corned beef incididunt id.
leberkas svinjski trbuh vježbanje ex. Goveđa rebra magna corned beef incididunt id. leberkas svinjski trbuh vježbanje ex. Goveđa rebra magna corned beef incididunt id. Kevin ramp
u repnom biltongu. Filet mignon puretina quis, kostur divljači ullamco jerky non voluptate svinjski but.

Pogledajmo sada kako se svaka klasa ponaša u našem pregledniku, postoji poseban slučaj s opravdati, što je vrlo suptilno pa se njegov učinak možda neće puno vidjeti.

POVEĆAJTE

Popisi
Popisi su često potrebni, a ne isključivo radi navođenja stvari, oni su vitalni dijelovi dizajna mnogo puta. Bootstrap rukuje njima na transparentan način kao i prethodni elementi koje smo vidjeli, popisi dolaze sa stilom koji je unaprijed definiran CSS base, međutim imamo nekoliko varijanti, na primjer navođenje bez stilova kako bi se izbjegli metci i navođenje s u redu, potonji popis čini vodoravnim.

Pogledajmo onda u sljedećem kodu primjer svakog od ovih popisa kako bismo ih mogli koristiti u svom kodu:

 Korištenje datoteke Base Bootstrap
Ugrađeni popis

Prvi element
Drugi element
Treći element
Četvrti element
Peti element

Popis bez stilova

Prvi element
Drugi element
Treći element
Četvrti element
Peti element

Standardni popis

Prvi element
Drugi element
Treći element
Četvrti element
Peti element

Pogledajmo sada kako to izgleda u našem pregledniku, gdje možemo vidjeti da su razlike odmah uočljive:

Ovim smo završili ovaj vodič, vidjeli smo da je osnovni CSS od Bootstrap Daje nam standardnu ​​osnovu za osiguravanje da se elementi koje nismo definirali ili prilagodili pojavljuju na određeni način izravno u pregledniku, dajući nam tako potpunu kontrolu nad našom aplikacijom bez obzira na preglednik.