Kaip naudoti bazinį CSS „Bootstrap“

Vienas iš sudėtingiausių dalykų dirbant su žiniatinklio dizainu yra įveikti subtilius naršyklių skirtumus, nors teoriškai kiekviena naršyklė turi atitikti standartus, ir daugeliu atvejų tai yra labai subtilūs nedideli skirtumai, mūsų dizainą sunku įgyvendinti.

Prieš egzistavimą Bootstrap failas vadinamas reset.cssŠiuo tikslu buvo aiškiai apibrėžtos visos pagrindinių ir pagrindinių elementų, tokių kaip užpildai, paraštės, numatytasis šriftas ir kt., Vertės. Taip neleidome naršyklei daryti to, ko ji norėjo, apibrėždama elementus, kurių nekeitėme pagal savo pasirinktinius stilius.

Šiais laikais Bootstrap pasirūpina šiomis detalėmis už mus, tai pasiekiama naudojant failą pavadinimu bootstrap.css kuris populiariai vadinamas pagrindiniu failu.

ReikalavimaiKad galėtume vykdyti šios pamokos pavyzdžius ir pratimus, turime turėti projektą su Bootstrap jau atsisiuntę arba, jei to nepadarėte, interneto ryšį, kad galėtumėte naudotis bibliotekomis tiesiogiai iš savo CDN. Mums reikia tokios modernios naršyklės kaip „Chrome“ arba „Firefox“ naujausiose versijose, ir pagaliau mums reikia tokio teksto redaktoriaus Aukščiausias tekstas arba „NotePad ++“, kad sukurtumėte HTML turinį draugiškiau, nors norime, kad „gedit“ ar užrašų knygelė tarnautų mūsų tikslams.

Antraštės
Vienas iš dalykų, kurie labiausiai patraukia dėmesį svetainėje, yra turinio pavadinimai ir subtitrai, žinoma, tai yra šių elementų funkcija, CSS bazė Bootstrap turi įdomų būdą tai spręsti, visų pirma jis turi keletą dydžių ir šrifto, apibrėžto elementui h bet kuriuo numeriu nuo 1 iki 6, tačiau jis taip pat turi klases, atitinkančias kiekvieną elementą, kad galėtume pritaikyti tuos pačius stilius div arba dar span.

Kitas įdomus dalykas yra tai, kad galime naudoti elementą mažas sumažinti pavadinimo dalies dydį, tačiau išlaikant proporciją elemento ar elemento, kuris naudoja atitinkamą klasę, atžvilgiu.

Tai tiesiog reiškia, kad kai turime kelias naršykles, mūsų dizainas yra vienodas, todėl pavadinimai neturi atrodyti kitaip, pvz. „Safari“ į „Firefox“, kai žinome, kad abi naršyklės pagal numatytuosius nustatymus veikia su skirtingais šriftais.

Tai, ką išmokote, pritaikykite praktikoje
Mes sukursime nedidelį puslapį, kuriame sudarysime pavadinimų sąrašą, sudėsime du šlaitus vienas ant kito, kad pamatytume, kaip skirtumų nebėra dėl pagrindinio failo. Bootstrap. Pirmiausia pažvelkime į kodą, o tada pamatysime, kaip jis atrodo mūsų naršyklėje.

 „Base Bootstrap“ failo naudojimasTai yra div, kurio klasė H1, o šaltinis mažas
Tai mažo šrifto H4 pavadinimas
Tai yra divizionas su H4 klase, šaltinis mažas

Čia matome, kaip kūne padarėme įvairius elementus, kuriuos ketiname naudoti kaip pavadinimus, be to, parodome, kaip elementas veikia, kad galėtume derinti jį su pavadinimais, kad pasiektume labai įdomių efektų. Taip pat įtraukiame papildomą stilių paminkštinimai papildomas, kad galėtume gauti tokį rezultatą, kokį matysime šiame paveikslėlyje:

DIDELIS

Pastraipos
Pritraukę skaitytojo ar vartotojo dėmesį mūsų programos pavadinimais, mums paprastai reikia tam tikro turinio, kurį galima vartoti, paprastai tai yra tekstas, kurį dedame į pastraipą, nors tai gali būti ir vaizdas, garsas ar vaizdo įrašą.

Grįžtant prie pastraipos, jau elementas

pateikia stilių, kurį iš anksto nustato bazinis CSS, tačiau ši bazė taip pat siūlo mums ypatingą pastraipos tipą, vadinamą vadovauti, pridėję šią klasę prie pastraipos, mes tuoj pat išskirsime ją iš kitų panašių, nes padidės jos dydis ir bus pakeistos kai kurios šriftų savybės.

Pažvelkime į šį kodą, kaip tai veikia, ką tik paaiškinome, šiame pavyzdyje mes sukursime dvi pastraipas, kuriose pirmoji turės klasę vadovauti, tokiu būdu pamatysime, kaip jis paryškins, žinoma, visa tai veikia, jei turime Bootstrap mūsų projekte, pažiūrėkime savo kodą:

 „Base Bootstrap“ failo naudojimas
Bacon ipsum pain amet in laboris magna ullamco, in būgnelio skausmo boudin eiusmod andouille leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna sūdyta jautiena incididunt id. Kevinui užpakalinė uodegos dalis. Filė mignon kalakutiena quis, blauzdos elnienos ullamco trūkčiojantis be valios kiaulienos nugarinė.
Bacon ipsum pain amet in laboris magna ullamco, in būgnelio skausmo boudin eiusmod andouille leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna sūdyta jautiena incididunt id. Kevinui užpakalinė uodegos dalis. Filė mignon kalakutiena quis, blauzdos elnienos ullamco trūkčiojantis be valios kiaulienos nugarinė.

Vykdykime savo pavyzdį ir pažiūrėkime, kaip jis atrodo mūsų naršyklėje:

DIDELIS

Lygiuoti tekstą
Vienas iš dalykų, kuris taip pat yra labai svarbus, yra teksto derinimas, nes kartais mums reikia, kad mūsų tekstas būtų pagrįstas, sulygiuotas į dešinę, į centrą arba priverstinai būtų kairėje, nors CSS turi atitikmenų. klasė sutaupo mums daug darbo, taip pat padeda mums nuosekliau elgtis su kodu.

Šiame pavyzdyje pamatysime, kaip mes pritaikome kiekvieną iš šių klasių skirtingiems elementams ir kad mūsų kodas būtų geriau skaitomas, mes padarysime visų elementų pastraipas. Pažiūrėkime kodą:

 „Base Bootstrap“ failo naudojimas
Bacon ipsum dolor amet in laboris magna ullamco, būgnelis dolor boudin eiusmod andouille
leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna sūdyta jautiena incididunt id.
leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna sūdyta jautiena incididunt id. leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna sūdyta jautiena incididunt id. Kevin Rump
per uodegą. Filė mignon kalakutiena quis, blauzdos elnienos ullamco trūkčiojantis be valios kiaulienos nugarinė.

Dabar pažiūrėkime, kaip kiekviena klasė elgiasi mūsų naršyklėje, yra ypatingas atvejis su pateisinti, kuris yra labai subtilus, todėl jo poveikis gali būti nematomas.

DIDELIS

Sąrašai
Sąrašai dažnai yra būtini, o ne tik tam, kad būtų išvardyti dalykai, jie yra gyvybiškai svarbios dizaino dalys. Bootstrap juos tvarko skaidriai, kaip ir ankstesnius elementus, kuriuos matėme, sąrašai pateikiami iš anksto nustatytu stiliumi CSS bazę, tačiau turime keletą variantų, pavyzdžiui, sąrašas be stilių, kad būtų išvengta kulkų, ir sąrašas su įterpti, pastarasis daro sąrašą horizontalų.

Toliau pateiktame kode pamatysime kiekvieno iš šių sąrašų pavyzdį, kad galėtume juos naudoti savo kode:

 „Base Bootstrap“ failo naudojimas
Įterptas sąrašas

Pirmasis elementas
Antrasis elementas
Trečias elementas
Ketvirtasis elementas
Penktasis elementas

Sąrašas be stilių

Pirmasis elementas
Antrasis elementas
Trečias elementas
Ketvirtasis elementas
Penktasis elementas

Standartinis sąrašas

Pirmasis elementas
Antrasis elementas
Trečias elementas
Ketvirtasis elementas
Penktasis elementas

Dabar pažiūrėkime, kaip tai atrodo mūsų naršyklėje, kur matome, kad skirtumai iš karto pastebimi:

Baigę šį vadovėlį pamatėme, kad bazinis CSS yra Bootstrap Tai suteikia mums standartinį pagrindą užtikrinti, kad mūsų neapibrėžti ar pritaikyti elementai būtų rodomi tam tikru būdu tiesiogiai naršyklėje, taip suteikdami mums visišką savo programos valdymą nepriklausomai nuo naršyklės.