Tässä viestissä aloitamme tekemällä sivusto Bootstrapilla, avoimen lähdekoodin kehys, jonka avulla meidän on helppo tehdä siitä responsiivinen ja tarjota sille jonkin verran interaktiivisuutta. Se on aiemmin suosittelemamme kehitysympäristölaajennuksen automaattisesti luoma perusmalli, jota meidän on muokattava.
Että artículo etupäätä Löydät ohjeet VS Codiumin asentamiseen, sen käyttöliittymän kääntämiseen espanjaksi ja Bootstrap-laajennuksen asentamiseen.
Muista kaksi asiaa:
- Käyttämämme komennot ovat pikanäppäimiä, sinun on kirjoitettava ne. Kopiointi/liittäminen ei toimi.
- Sisällönhallintamme ei salli minun näyttää HTML-koodia, joten minun on käytettävä kuvakaappauksia. Jotta sinulla on pääsy lataamieni esimerkkien koodiin GitHubille.
GitHub-arkiston kloonaaminen
Se, mikä erottaa suuret meistä muista, on tapa, jolla he reagoivat ongelmiin. Richard Stallman ei pitänyt tulostinohjaimestaan ja koska he eivät antaneet hänen muuttaa sitä, hän aloitti vapaiden ohjelmistojen liikkeen. Linus Torvalds ei ollut vakuuttunut mistään koodinjakoalustasta ja loi oman. git.
Toisin kuin perinteisissä ohjelmistojen jakelujärjestelmissä, joissa käyttäjän ainoa sallittu vuorovaikutus on lataaminen, Gitin avulla voit seurata projektin kehitystä ajan myötä. Muut ihmiset voivat kloonata arkiston, tehdä muutoksia ja ehdottaa, että alkuperäisen projektin kehittäjät sisällyttävät ne. Jos kehittäjät hyväksyvät, he voivat tehdä sen helposti ilman, että heidän tarvitsee ladata ja ladata tiedostoja uudelleen.
Gitiin perustuvia palveluita on useita, valitsin GitHubin yksinkertaisesti siksi, että se integroituu VS Codiumiin.
Jotta voit ladata mallitiedostot tietokoneellesi, sinun tarvitsee vain asentaa git-paketti noudattamalla jakelusi ohjeita pakettien asentamisesta terminaaliin.
Kirjoita sitten seuraavat komennot.
Tallenna tiedostot mieluummin Asiakirjat-kansioon, joten vaihdan hakemistoa
cd Documentos
Sitten kloonaan tiedostot:
git clone https://github.com/dggonzalez1971/bootstrap.git
Aion muistuttaa sinua näistä vaiheista kaikissa muissa artikkeleissa, koska tällä tavalla päivität esimerkkitiedostot niiden ladatessa.
Jos haluat nähdä tiedostot, avaa tiedostojen hallinta ja etsi kansio bootstrap.
Sivuston tekeminen Bootstrapilla
Jos haluat kirjoittaa koodin manuaalisesti, aloitamme luomalla kansion, johon tallennamme sivuston. Voit laittaa minkä nimen haluat.
Sitten noudatamme seuraavia vaiheita:
- Mennään valikkoon Arkistoi.
- Klikkaa Uusi tekstitiedosto.
- Klikkaa Tallenna.
- Etsimme luomamme kansion ja annamme tiedoston nimen esimerkki1.html.
- Klikkaa Tallenna.
Joskus VSCodium saattaa piilottaa File Explorer -ikkunan.
Annetaan laajennuksen luoda perusmalli meille. Tätä varten kirjoitamme !b5-$
Tämä luo koodin, jonka löydät esimerkkikansiosta muodossa esimerkki1.html
Näemme seuraavat:
Tämä on Bootstrap-laajennuksen luoma koodi.
Aiomme tehdä joitain muutoksia tähän tiedostoon. Löydät muutokset nimellä example2.html
- Rivillä 2 vaihdamme kieltä korvaamalla eng:llä es. Tämä osoittaa hakukoneille, että sivuston kieli on espanja.
- Rivillä 6 muutamme tarrojen alla olevaa tekstiä otsikko. Laitamme Ensimmäinen Bootstrap-sivustoni.
- Rivillä 12 muutamme sisältöä tunnisteiden välillä h1 mukaan Tämä on Bootstrapilla tehty sivusto.
Seuraavaksi teemme tärkeitä muutoksia. Nämä muutokset liittyvät:
- Laajennuksen kehittäjä ei pysty pysymään Bootstrap-versioiden mukana, ja niitä on enemmän uudempia.
- Bootstrap-komponenteille on monia vaihtoehtoja ja olen kiinnostunut toisesta.
- Virallisen dokumentaation mukaan Javascript-kirjastojen kutsujen tulee olla body-tagien sisällä.
Esimerkiksi 2:ssa muokkasimme rivin 7 sisältöä, poistimme rivit 8 ja 9 ja latasimme loput sisällöstä, jotta numerointiyhteensopivuus säilyy. Sitten napsautamme rivin 10 loppua luodaksesi uuden rivin 11 ja laitamme linkin Javascript-kirjastoihin.
Älä huoli, jos et ymmärrä koodia. Selitän kunkin rivin toiminnan seuraavassa artikkelissa.