Tässä viestissä näemme Bootstrap-sivuston asettelun esitelläksesi tämän avoimen lähdekoodin kehyksen uskomattomia ominaisuuksia. Sisään aiemmat artikkelit olimme asentaneet kehitysympäristön ja tarvittavat lisäosat työmme helpottamiseksi.
Muista tämä sisällön hallinnoijana Linux Adictos Se ei salli minun lisätä GitHubiin lataamieni esimerkkien koodia. Ladataksesi ne sinun on asennettava Git-paketti jakelullesi ja kirjoitettava sitten seuraavat komennot:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Sinun on suoritettava nämä kaksi komentoa säännöllisesti ladataksesi uudet tiedostot.
Analysoi koodia
Avaa nyt tiedostonhallinnassa example2.html VSCodiumilla. (Avaa oikealla painikkeella) Näemme seuraavan:
- Rivillä 1 kerromme selaimelle asiakirjan tyypin, jotta se osaa hahmontaa sen.
- Rivi 2 ilmaisee sivuston kielen, joka kertoo selaimelle, kuinka tiettyjä merkkejä esitetään, ja hakukoneille sisällön kielen, joka helpottaa paikantamista. Koodissamme se määritellään espanjaksi, mutta on olemassa alueellisia muunnelmia, kuten es_ES espanjalle Espanjasta tai es_AR espanjalle Argentiinasta.
- Riviltä 3 lähtien meillä on metatietosäiliö tunnisteiden välissä Y . Metadata antaa tietoa asiakirjasta. Esimerkissämme:
- Rivi 4 osoittaa merkkikoodauksessa käytetyn standardin. Ehkä olet joskus nähnyt, että aksenttimerkkien tai erikoissymbolien sijasta timantin sisällä näkyy kysymysmerkki. Tämä johtuu siitä, että selain käyttää väärää koodausta. Rivillä 8 oleva lausunto välttää tämän ilmoittamalla sen nimenomaisesti.
- Rivillä 5 kerromme selaimelle, kuinka sen tulee mukautua eri näyttömuotoihin.
- Rivillä 6 asettamamme otsikko näkyy selaimen yläpalkissa ja hakukoneissa.
- Rivillä 7 kerromme selaimelle, mistä löytää tyyliin liittyvät Bootstrap-kehyselementit.
- Riviltä 10 kontti alkaa. Body sisältää web-sivun sisällön ja linkin Bootstrap-skripteihin, jotka antavat sivustollemme interaktiivisuutta.
- Rivi 13 osoittaa asiakirjan lopun.
Bootstrap-sivuston ulkoasu
Bootstrap-sivuston ulkoasun keskeiset käsitteet
Kuten aiemmissa artikkeleissa totesimme, Bootstrap ottaa ensisijaisesti mobiiliratkaisun. Kun tätä lähestymistapaa käytetään, suunnittelu tehdään siten, että laite ottaa huomioon pienimmän näyttökoon, ja sitten lisätään tasoja mukauttamaan se seuraaviin kokoihin.
Tässä meidän on otettava huomioon kaksi keskeistä käsitettä:
- Katkopisteet.
- Mediakonsultointi.
Katkaisupisteet osoittavat, mistä näytön leveydestä asettelua muutetaan., Mediakyselyt käyttävät tyyliparametreja tiettyjen selaimen ja käyttöjärjestelmän ominaisuuksien perusteella. Toisin sanoen jokaisella keskeytyskohdalla on vastaava tyyli.
Bootstrapissa on kuusi ennalta määritettyä keskeytyspistettä, joita edistyneemmät ohjelmoijat voivat muokata. Oletuspisteet ovat:
- Extra Small: Ei esiasetettua tunnistetta ja koskee näyttöjä, joiden leveys on alle 576 pikseliä.
- Pieni: Se tunnistetaan sm:llä ja sitä käytetään 576 pikselin näytöille.
- Medium: Se tunnistetaan md:llä ja sitä käytetään 768 pikselin näytöille.
- Pituus: Tunnistettu lg:ksi, käytetään 992 pikselin näytöille.
- Erittäin pitkä: Sillä on tunniste lg ja se soveltaa tyylejä näytöille alkaen 1200 pikselistä.
- Erikoispitkä: Tunnisteella xxl merkitty, käytetään muotoilua 1400 pikselin näytöille.
Näitä kokoja ei valittu satunnaisesti jokainen keskeytyspiste voi sisältää säiliöitä, joiden leveys on 12:n kerrannainen. Niitä ei myöskään ole kohdistettu tiettyyn laitteeseen, vaan ne mukautuvat eri laiteluokkiin ja näyttökokoihin.
Löydämme säiliöt eri näyttökokojen sisällä. He ovat vastuussa sivuston sisällön isännöimisestä, täyttämisestä ja kohdistamisesta tietyssä laitteessa tai graafisessa ikkunassa.
;