I dette indlæg vil vi starte med at lave en side med Bootstrap, open source-rammeværket, der gør det nemt for os at gøre det responsivt og give det noget interaktivitet. Det er en grundlæggende skabelon, der automatisk genereres af et udviklingsmiljø-plugin, som vi anbefalede før, og som vi bliver nødt til at ændre.
I tidligere artikel Du finder instruktionerne til at installere VS Codium, oversætte dens brugergrænseflade til spansk og installere Bootstrap-plugin'et.
To ting at huske på:
- De kommandoer, vi bruger, er tastaturgenveje, du skal skrive dem. Copy/paste virker ikke.
- Vores indholdsadministrator tillader mig ikke at vise HTML-koden, så jeg er nødt til at bruge skærmbilleder. Så du har adgang til koden for de eksempler, jeg har uploadet dem til GitHub.
Sådan klones et GitHub-lager
Det, der adskiller de store fra os andre, er måden, de reagerer på problemer på. Richard Stallman kunne ikke lide sin printerdriver, og da de ikke ville lade ham ændre den, startede han den frie softwarebevægelse. Linus Torvalds blev ikke overbevist af nogen af kodedelingsplatformene og skabte sin egen. git.
I modsætning til traditionelle softwaredistributionssystemer, hvor den eneste tilladte brugerinteraktion er download, med Git kan du følge projektets udvikling over tid. Andre mennesker kan klone depotet, foretage ændringer og foreslå, at det oprindelige projekts udviklere inkorporerer dem. Hvis det accepteres, kan udviklere nemt gøre det uden at skulle downloade og genuploade filerne.
Der er flere tjenester baseret på Git, jeg valgte GitHub simpelthen fordi det integreres med VS Codium.
For at downloade eksempelfilerne til din computer skal du blot installere git-pakken ved at følge din distributions instruktioner til installation af pakker i terminalen.
Derefter skriver du følgende kommandoer.
Jeg foretrækker at gemme filerne i mappen Dokumenter, så jeg ændrer mappen med
cd Documentos
Så kloner jeg filerne med:
git clone https://github.com/dggonzalez1971/bootstrap.git
Jeg vil minde dig om disse trin i hver af de resterende artikler, da du på denne måde vil opdatere eksempelfilerne, efterhånden som de uploades.
For at se filerne skal du blot åbne filstifinderen og se efter mappen bootstrap.
Oprettelse af et websted med Bootstrap
Hvis du foretrækker at indtaste koden manuelt, starter vi med at oprette en mappe, hvor vi gemmer siden. Du kan sætte hvilket navn du vil.
Så følger vi de næste trin:
- Lad os gå til menuen Arkiv.
- Klik på Ny tekstfil.
- Klik på Gem.
- Vi leder efter den mappe, vi har oprettet, og sætter navnet på filen eksempel1.html.
- Klik på Gem.
Nogle gange kan File Explorer-vinduet være skjult af VSCodium-en.
Lad os få udvidelsen til at lave den grundlæggende skabelon for os. Til dette skriver vi !b5-$
Dette vil generere koden, som du finder i mappen eksempler som eksempel1.html
Vi vil se følgende:
Dette er koden, der genereres af Bootstrap-udvidelsen.
Vi vil lave nogle ændringer i denne fil. Du finder ændringerne under navnet eksempel2.html
- På linje 2 ændrer vi sproget ved at erstatte eng med es. Dette indikerer for søgemaskiner, at sproget på webstedet er spansk.
- I linje 6 ændrer vi den tekst, der er under etiketterne titel. Vi putter Min første Bootstrap-side.
- I linje 12 ændrer vi indholdet mellem tags h1 af Dette er en side lavet med Bootstrap.
Dernæst vil vi foretage nogle vigtige ændringer. Disse ændringer har at gøre med:
- Plugin-udvikleren kan ikke følge med Bootstrap-versioner, og der er mere aktuelle.
- Der er mange muligheder for bootstrap-komponenter, og jeg er interesseret i en anden.
- Ifølge den officielle dokumentation skal opkaldene til Javascript-bibliotekerne være inde i body-tags.
For eksempel 2 ændrede vi indholdet af linje 7, slettede linje 8 og 9 og uploadede det resterende indhold for at bevare nummerkompatibiliteten. Så klikker vi på slutningen af linje 10 for at oprette en ny linje 11 og sætter linket til Javascript-bibliotekerne.
Bare rolig, hvis du ikke forstår koden. Jeg vil forklare funktionen af hver linje i den næste artikel.