Vienas iš sudėtingiausių dalykų, susijusių su darbu su interneto dizainu, yra subtilių skirtumų tarp naršyklių įveikimas, nors teoriškai kiekviena naršyklė turi atitikti standartus, o daugeliu atvejų taip yra, yra labai subtilių mažų skirtumų, kurie gali apsunkink mūsų projekto įgyvendinimą.
Iki „ Bootstrap “ egzistavimo buvo daug naudojamas failas, pavadintas reset.css, o tai, kas buvo padaryta, aiškiai apibrėžė visas pagrindinių ir pagrindinių elementų, tokių kaip paminkštinimai, paraštės, šaltinio reikšmes. defektas ir kt. Tai neleido naršyklei daryti to, ko ji norėjo, apibrėždama elementus, kurių mes nepataisėme pagal savo pasirinktinius stilius.
Šiuo metu „ Bootstrap“ rūpinasi šia informacija mums. Tai pasiekiama naudojant failą bootstrap.css, kuris populiariai žinomas kaip bazinis failas.
Reikalavimai
Kad galėtume vykdyti šio vadovo pavyzdžius ir pratimus, turime turėti projektą su jau atsisiunttais „ Bootstrap“ failais arba nepavykus prisijungti prie interneto, kad galėtume naudoti bibliotekas tiesiai iš kompaktinio disko . Mums reikia modernios naršyklės, tokios kaip „ Chrome“ ar „ Firefox “ naujausios versijos, ir galiausiai mums reikia teksto rengyklės, tokios kaip „ Sublime Text“ ar „NotePad ++“, kad HTML turinį sukurtume patogesnį, nors, jei to norime, „gedit“ ar užrašų blokas yra naudingas mūsų tikslais
Antraštės
Vienas iš dalykų, labiausiai pritraukiančių dėmesį tinklalapyje, yra turinio pavadinimai ir paantraštės, žinoma, tai yra šių elementų funkcija, „ Bootstrap“ bazinė CSS yra įdomus būdas tai sutvarkyti, pirmiausia ji turi keletą dydžių. ir neabejotinas elemento h šaltinis bet kuriame jo skaičiuje 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 span .
Kitas įdomus dalykas yra tai, kad mažą elementą galime naudoti norėdami sumažinti pavadinimo dalies dydį, išlaikydami proporciją elemento atžvilgiu arba elementui, kuris naudoja klasę, kuri atitinka.
Paprasčiausiai tai reiškia, kad kai turime kelias naršykles, mūsų dizainas yra vienalytis, todėl pavadinimai neturi atrodyti skirtingai, pavyzdžiui, „ Safari“ ar „ Firefox“, kai žinome, kad abi naršyklės pagal numatytuosius nustatymus veikia su skirtingais šaltiniais.
Įgykite praktikos to, kas išmokta
Mes sukursime nedidelį puslapį, kuriame sudarysime pavadinimų sąrašą, du šlaitus sudėsime vieną ant kito, kad pamatytume, kaip skirtumai nebeegzistuoja dėka „bootstrap“ bazinio failo. Pirmiausia pažvelkime į kodą, o tada pamatysime, kaip jis atrodo mūsų naršyklėje.
Bazinės įkrovos juostos #style failo naudojimas {padding-top: 23px; paminkštinimas-dugnas: 24 taškai; paminkštinimas dešinėje: 51px; paminkštinimas kairėje: 55px; }Tai yra mažo šrifto H1 pavadinimas
Tai yra skyrius su H1 klasės mažuoju šriftu
Tai yra H4 pavadinimo mažasis šriftas
Tai yra skyrius su H4 klasės mažuoju šriftu
Čia matome, kaip mes padarėme kūne skirtingus elementus, kuriuos naudosime kaip pavadinimus, papildomai parodysime kaip elementą Jis veikia taip, kad galėtume jį derinti su pavadinimais, kad pasiektume labai įdomių efektų. Mes taip pat įtraukiame papildomą stilių, kad galėtume pridėti keletą papildomų trinkelių, kad galėtume turėti tokį rezultatą, kokį matysime šiame paveikslėlyje:
Pastraipos
Kai atkreipėme skaitytojo ar vartotojo dėmesį su mūsų programos pavadinimais, mums dažniausiai reikia tam tikro turinio, kurį galima sunaudoti, paprastai tai yra tekstas, kurį dedame pastraipoje, nors tai gali būti ir vaizdas, garso ar vaizdo įrašas.
Grįžtame prie pastraipos ir elemento
Tai sukuria iš anksto CSS bazės nustatytą stilių, tačiau ši bazė taip pat siūlo mums specialų pastraipos tipą, vadinamą švinu, pridėdami tą klasę prie pastraipos, mes iškart padarysime ją išsiskiriančią iš kitų panašių, nes ji yra padidinta pakeistas jo dydis ir kai kurios šriftų savybės.
Pažiūrėkime kitame kode, kaip tai veikia kaip tik paaiškinta. Šiame pavyzdyje sukursime dvi pastraipas, kuriose pirmojoje bus pagrindinė klasė, tokiu būdu pamatysime, kaip ji išsiskirs, žinoma, visa tai veikia, jei mūsų projekte yra „ Bootstrap “, pažiūrėkime mūsų kodas:
Bazinės įkrovos juostos #style failo naudojimas {padding-top: 23px; paminkštinimas-dugnas: 24 taškai; paminkštinimas dešinėje: 51px; paminkštinimas kairėje: 55px; }$config[ads_text6] not foundBacon ipsum pain amet in laboris magna ullamco, būgnelio skausmas boudin eiusmod andouille leberkas kiaulės pilvo mankšta ex. Jautienos šonkauliai magna corned beef incididunt id. Kevinas gaubia uodegą. Filė mignon kalakutienos kvasas, blauzdos venis ullamco trūkčiojantis nepatikimas kiaulienos nugarinė.
Bacon ipsum pain amet in laboris magna ullamco, būgnelio skausmas boudin eiusmod andouille leberkas kiaulės pilvo mankšta ex. Jautienos šonkauliai magna corned beef incididunt id. Kevinas gaubia uodegą. Filė mignon kalakutienos kvasas, blauzdos venis ullamco trūkčiojantis nepatikimas kiaulienos nugarinė.
Paleiskime pavyzdį ir pažiūrėkime, kaip jis atrodo mūsų naršyklėje:
Sulygiuokite tekstą
Vienas iš labai svarbių dalykų yra teksto suderinimas, nes kartais mums reikia, kad mūsų tekstas būtų pateisinamas, suderintas į dešinę, į centrą arba jėga būtų kairėje, nors yra CSS atitikmenų, kuriuos turime Už tai skirta klasė sutaupo daug darbo, be to, padeda suderinti kodą.
Šiame pavyzdyje pamatysime, kaip pritaikome kiekvieną iš šių klasių skirtingiems elementams ir kad mūsų kodas būtų lengviau skaitomas, mes padarysime visų elementų pastraipas. Pažiūrėkime kodą:
Bazinės įkrovos juostos #style failo naudojimas {padding-top: 23px; paminkštinimas-dugnas: 24 taškai; paminkštinimas dešinėje: 51px; paminkštinimas kairėje: 55px; }Bacon ipsum pain amet in laboris magna ullamco, būgnelio skausmas boudin eiusmod andouille
leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna corned beef incididunt id.
leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna corned beef incididunt id. leberkas kiaulienos pilvo mankšta ex. Jautienos šonkauliai magna corned beef incididunt id. Kevinas Rumpas
uodegoje bltong. Filė mignon kalakutienos kvasas, blauzdos venis ullamco trūkčiojantis nepatikimas kiaulienos nugarinė.
Dabar pažiūrėkime, kaip kiekviena klasė elgiasi mūsų naršyklėje, yra konkretus atvejis su išteisinimu, kuris yra labai subtilus, kad jo poveikis gali būti mažai matomas.
Sąrašai
Sąrašai dažnai yra būtini ir ne tik norint išvardyti daiktus, jie daugybę kartų yra svarbios dizaino dalys. „Bootstrap“ tvarko juos skaidriai, kaip ir ankstesni elementai, kuriuos matėme, sąrašai pateikiami naudojant stilių, kurį iš anksto nustatė bazinė CSS, tačiau mes turime keletą variantų, pavyzdžiui, sąrašą be stilių, kad išvengtume kulkų, ir sąrašą su įterptiniaisiais, pastarasis sąrašą sudaro horizontalų.
Pažiūrėkime į šį kodą kiekvieno iš šių sąrašų pavyzdį, kad galėtume juos naudoti savo kode:
Bazinės įkrovos juostos #style failo naudojimas {padding-top: 23px; paminkštinimas-dugnas: 24 taškai; paminkštinimas dešinėje: 51px; paminkštinimas kairėje: 55px; }$config[ads_text6] not foundIntarpų sąrašas
- Pirmasis elementas
- Antrasis elementas
- Trečias elementas
- Ketvirtasis elementas
- Penktasis elementas
Nėra stilių sąrašo
- 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
Tai baigę, mes pamatėme, kad bazinė „ Bootstrap“ CSS suteikia mums standartinį pagrindą, užtikrinantį, kad neapibrėžti ar pritaikyti elementai tam tikru būdu atrodytų tiesiogiai naršyklėje, tokiu būdu suteikdami visišką mūsų programos valdymą, nepriklausomai nuo to, naršyklę
Straipsnis