Bootstrap-kehitysympäristön luominen

VSCodium on ihanteellinen kehitysympäristö sivuston luomiseen Bootstrapilla

Tässä artikkelissa Aloitamme luomalla Bootstrap-kehitysympäristön. Kuten selitimme edellisessä artikkelissa, Bootstrap on kehys, jonka avulla voimme helposti luoda sivustoja, jotka mukautuvat automaattisesti mihin tahansa näyttökokoon.

Itse asiassa erikoistyökaluja ei tarvita. Voit kirjoittaa koodin helposti työpöydälläsi olevaan tekstieditoriin. Monilla on jopa tuki HTML:lle, CSS:lle ja Javascriptille. Mutta, integroidut kehitysympäristöt sisältävät muita työkaluja, jotka helpottavat koodin kirjoittamista ja oikolukua.

Bootstrap-kehitysympäristön luominen

Minun makuuni paras integroitu kehitysympäristö on Visual Studio Code. Mutta monet Linux-käyttäjät eivät pidä siitä, koska se lähettää telemetriaa Microsoftille. Tästä huolimatta, On olemassa vaihtoehto, joka käyttää VSCode-lähdekoodia nimeltä VSCodium, joka ei jaa tietoja kenenkään kanssa. Tuo on version jota käytämme tästä eteenpäin.

VSCodiumin asennus

Voimme asentaa VSCodiumin seuraavilla tavoilla:

Snap Store

sudo snap install codium --classic

litteä pakkaus

flatpak install flathub com.vscodium.codium

Debian ja johdannaiset

Saimme vahvistusavaimet

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg

Lisätään arkisto
echo 'deb [ signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Päivitämme ja asennamme
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Saamme vahvistusavaimet

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

Lisäämme arkistot

Fedora/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

Asennamme seuraavasti:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Voimme käyttää jompaa kumpaa näistä kahdesta komennosta

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papukaija OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

VSCodiumin määrittäminen

Asennustilasta riippuen VSCodium voi olla englanninkielinen. Voimme muuttaa tämän helposti.

  1. Napsauta Tiedostot-valikossa Mieltymykset.
  2. Klikkaa Laajentaminen.
  3. kirjoitamme espanjalainen hakukoneessa.
  4. Napsauta laajennusta Espanjan kieli.
  5. Aloitamme asennuksen napsauttamalla Asenna.
  6. Klikkaa Vaihda kieli ja käynnistä uudelleen.

VSCodella on valtava kokoelma laajennuksia, jotka helpottavat ohjelmointia eri kielillä, ja voimme käyttää niitä myös VSCodiumissa. Asennamme tarvitsemamme:

  1. Klikkaa Mieltymykset.
  2. Klikkaa Laajennukset.
  3. kirjoitamme Bootstrap hakukoneessa.
  4. Valitsemme sen, joka sanoo Bootstrap 5 & Font Mahtavia katkelmia.
  5. Napsauta asennuspainiketta

Näemme tämän laajennuksen käytön, kun alamme kirjoittaa sivustokoodia. Mutta minun on tehtävä selvennys. Jotta se toimisi, sinun on kirjoitettava komennot. Kopioi ja liitä ei tässä tapauksessa toimi.

Bootstrapin hankkiminen

Bootstrap on pohjimmiltaan kokoelma komponentteja. Kun kirjoitamme Bootstrapiin perustuvan verkkosivuston koodin ensimmäinen asia, joka meidän on tehtävä, on kertoa selaimelle, mistä ne löytää.

Bootstrapin hankkimiseen on kaksi vaihtoehtoa. Ensimmäinen on ladata se osoitteesta verkkosivusto ja lisää se projektitiedostoihin ja toinen on laittaa linkki itse projektin palvelimille. Se voidaan ladata myös joillakin paketinhallintaohjelmilla (tarkoitan eri ohjelmointikielten käyttämiä, en jakeluissa käyttämiä), mutta jätämme sen dokumentaation varaan.

Huomaa, että jos haluat työskennellä Bootstrap-tiedostojen kanssa paikallisesti, sinun on ladattava ne palvelimelle muun verkkosivuston kanssa. Jos linkität projektin CDN-palvelimeen, se ei ole tarpeen.

Jos lataat Bootstrap-paketin, näet, että siinä on kaksi kansiota ja sarja tiedostoja. Meitä kiinnostaa vain kaksi. JS-kansiosta bootstrap.bundle.js ja CSS-kansiosta bootstrap.css.

Molempien vaihtoehtojen koodi on lähes sama. Muuta vain sijaintipolkua.

Katsotaanpa esimerkkiä
Bootstrapin käyttö paikallisesti

Bootstrap tallennettu paikallisesti

Bootstrap-komponenttien soittaminen paikallisesti

Käytetään CDN-projektista

Bootstrapin käyttäminen CDN:stä

HTML-koodi, joka lataa Bootstrap-komponentit CDN:stä

Paikallisen tiedoston sijainti on mielivaltainen. Laitoin ne kansioon nimeltä bootrap ja loin kaksi alikansiota nimeltä JS ja CSS.

Älä huoli, jos et ymmärtänyt koodin muuta osaa. Huolehdimme siitä seuraavassa artikkelissa.

Huomata

Artikkelin julkaisemisen jälkeen huomasin, että sisällönhallinta ei näytä HTML-koodia vaan tulosta. Lataan esimerkit Githubiin tai vastaavaan ja laitan kuvakaappauksia tänne.


4 kommenttia, jätä omasi

Jätä kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*

*

  1. Vastaa tiedoista: AB Internet Networks 2008 SL
  2. Tietojen tarkoitus: Roskapostin hallinta, kommenttien hallinta.
  3. Laillistaminen: Suostumuksesi
  4. Tietojen välittäminen: Tietoja ei luovuteta kolmansille osapuolille muutoin kuin lain nojalla.
  5. Tietojen varastointi: Occentus Networks (EU) isännöi tietokantaa
  6. Oikeudet: Voit milloin tahansa rajoittaa, palauttaa ja poistaa tietojasi.

  1.   richo dijo

    Se on minulle erittäin edistynyt, mutta opetusohjelma on erittäin arvostettu, joskus se voisi auttaa minua, kiitos

    1.    Jorge dijo

      Hei rikas. Se näyttää erittäin edistyneeltä, mutta se ei ole (ainakaan käytännön syistä). Sinulla on vain oltava selkeitä käsitteitä: verkkopalvelin, CDN, koodieditorit, verkkosivun perusrakenne ja vähän muuta.

      Olen verkkokehittäjä ja voin kertoa, että Bootstrap on loistava alku. Se pitäisi oppia jokaisen, joka aloittaa verkkokehityksen.

      Merkintä. Sinulla tulee olla perustiedot html css:stä ennen kuin aloitat Bootstrapin käytön ;-)

  2.   Claudia Segovia dijo

    Mikä on CDN-palvelin? paikallisen muodon vastakohta?

    1.    Diego German Gonzalez dijo

      Tarkka.
      Sen sijaan, että tarvittavat tiedostot olisivat itse verkossa, käytetään itse Bootstrapin tiedostoja.