Šiame įraše pamatysime „Bootstrap“ svetainės išdėstymą parodyti nuostabias šios atvirojo kodo sistemos galimybes. Į ankstesni straipsniai buvome įdiegę kūrimo aplinką ir reikalingus papildinius, kad palengvintume mūsų darbą.
Prisiminkite tai kaip turinio valdytojas Linux Adictos Tai neleidžia man įterpti pavyzdžių, kuriuos įkėliau į „GitHub“, kodo. Norėdami juos atsisiųsti, savo paskirstyme turite įdiegti „Git“ paketą ir parašyti šias komandas:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Norėdami atsisiųsti naujus failus, turėsite periodiškai paleisti šias dvi komandas.
Analizuojant kodą
Dabar failų naršyklėje atidarykite example2.html su VSCodium. (Atidaryti dešiniuoju mygtuku) Matome:
- 1 eilutėje naršyklei nurodome dokumento tipą, kad ji žinotų, kaip jį pateikti.
- 2 eilutėje nurodoma svetainės kalba, kuri nurodo naršyklei, kaip pateikti tam tikrus simbolius, ir turinio kalbą paieškos sistemoms, o tai palengvina padėties nustatymą. Mūsų kode jis apibrėžiamas kaip es, tačiau yra regioninių variantų, pvz., es_ES ispanų kalba iš Ispanijos arba es_AR ispanų kalba iš Argentinos.
- Iš 3 eilutės turime metaduomenų konteinerį, esantį tarp žymų Y . Metaduomenys suteikia informaciją apie dokumentą. Mūsų pavyzdyje:
- 4 eilutė nurodo standartą, naudojamą simbolių kodavimui. Galbūt kartais matėte, kad vietoj kirčiuotų simbolių ar specialių simbolių deimanto viduje rodomas klaustukas. Taip yra todėl, kad naršyklė naudoja netinkamą kodavimą. Teiginys 8 eilutėje to išvengia, nes tai aiškiai deklaruoja.
- 5 eilutėje nurodome naršyklei, kaip ji turėtų prisitaikyti prie skirtingų ekrano formatų.
- Pavadinimas, kurį nustatėme 6 eilutėje, bus rodomas viršutinėje naršyklės juostoje ir paieškos sistemose.
- 7 eilutėje nurodome naršyklei, kur rasti Bootstrap sistemos elementus, susijusius su stiliumi.
- Nuo 10 eilutės prasideda konteineris. Turinys apima tinklalapio turinį ir nuorodą į „Bootstrap“ scenarijus, kurie suteiks interaktyvumo mūsų svetainei.
- 13 eilutė rodo dokumento pabaigą.
„Bootstrap“ svetainės išdėstymas
Pagrindinės „Bootstrap“ svetainės išdėstymo koncepcijos
Kaip minėjome ankstesniuose straipsniuose, „Bootstrap“ pirmiausia naudoja mobilųjį. Taikant šį metodą, dizainas atliekamas atsižvelgiant į įrenginį su mažiausiu ekrano dydžiu, o tada pridedami sluoksniai, kad jis būtų pritaikytas prie tolesnių dydžių.
Čia turime atsižvelgti į dvi pagrindines sąvokas:
- Lūžio taškai.
- Žiniasklaidos konsultacija.
Pertraukos taškai rodo, nuo kurio ekrano pločio išdėstymas keičiamas., Medijos užklausoms taikomi stiliaus parametrai, pagrįsti tam tikromis naršyklės ir operacinės sistemos ypatybėmis. Kitaip tariant, kiekvienas lūžio taškas turės atitinkamą stilių.
„Bootstrap“ turi šešis iš anksto nustatytus lūžio taškus, kuriuos gali modifikuoti pažangesni programuotojai. Numatytieji taškai yra šie:
- Itin mažas: neturi iš anksto nustatyto identifikatoriaus ir taikomas mažesniems nei 576 pikselių pločio ekranams.
- Mažas: identifikuojamas su sm ir naudojamas ekranams nuo 576 pikselių.
- Vidutinis: identifikuojamas su md ir naudojamas ekranams nuo 768 pikselių.
- Ilgis: identifikuotas kaip lg, naudojamas ekranams nuo 992 pikselių.
- Itin ilgas: turi identifikatorių lg ir stilius pritaiko 1200 pikselių ekranams.
- Ypač ilgas: pažymėtas identifikatoriumi xxl, jis naudojamas dizainui pritaikyti ekranams nuo 1400 pikselių.
Šie dydžiai nebuvo pasirinkti atsitiktinai, nes kiekviename lūžio taške gali būti konteinerių, kurių plotis yra 12 kartotinis. Jie taip pat nėra skirti konkrečiam įrenginiui, o prisitaiko prie skirtingų įrenginių kategorijų ir ekrano dydžių.
Skirtingų dydžių ekranuose randame konteinerius. Jie yra atsakingi už svetainės turinio talpinimą, užpildymą ir suderinimą tam tikrame įrenginyje ar grafiniame lange.
;