I det här inlägget börjar vi med att göra en sajt med Bootstrap, ramverket med öppen källkod som gör det enkelt för oss att göra det responsivt och ge det lite interaktivitet. Det är en grundläggande mall som genereras automatiskt av ett plugin för utvecklingsmiljö som vi rekommenderade tidigare och som vi måste modifiera.
I tidigare artikel Du hittar instruktionerna för att installera VS Codium, översätta dess användargränssnitt till spanska och installera Bootstrap-plugin.
Två saker att tänka på:
- Kommandona vi använder är kortkommandon, du måste skriva in dem. Kopiera/klistra in fungerar inte.
- Vår innehållshanterare tillåter mig inte att visa HTML-koden så jag måste använda skärmdumpar. Så att du har tillgång till koden för de exempel jag laddade upp dem till GitHub.
Hur man klona ett GitHub-förråd
Det som skiljer de stora från oss andra är hur de reagerar på problem. Richard Stallman gillade inte sin skrivardrivrutin och eftersom de inte ville låta honom ändra den, startade han rörelsen för fri programvara. Linus Torvalds övertygades inte av någon av koddelningsplattformarna och skapade sin egen. git.
Till skillnad från traditionella programvarudistributionssystem där den enda tillåtna användarinteraktionen är nedladdning, med Git kan du följa projektets utveckling över tid. Andra personer kan klona förvaret, göra ändringar och föreslå att det ursprungliga projektets utvecklare införlivar dem. Om det accepteras kan utvecklare enkelt göra det utan att behöva ladda ner och ladda upp filerna igen.
Det finns flera tjänster baserade på Git, jag valde GitHub helt enkelt för att den integreras med VS Codium.
För att ladda ner exempelfilerna till din dator behöver du bara installera git-paketet enligt din distributions instruktioner för att installera paket i terminalen.
Sedan skriver du följande kommandon.
Jag föredrar att spara filerna i mappen Dokument så jag byter katalog med
cd Documentos
Sedan klona jag filerna med:
git clone https://github.com/dggonzalez1971/bootstrap.git
Jag kommer att påminna dig om dessa steg i var och en av de återstående artiklarna, eftersom du på detta sätt kommer att uppdatera exempelfilerna när de laddas upp.
För att se filerna öppnar du bara filutforskaren och letar efter mappen bootstrap.
Skapa en webbplats med Bootstrap
Om du föredrar att skriva koden manuellt börjar vi med att skapa en mapp där vi sparar sidan. Du kan ange vilket namn du vill.
Sedan följer vi nästa steg:
- Låt oss gå till menyn Arkivera.
- Klicka på Ny textfil.
- Klicka på Spara.
- Vi letar efter mappen vi skapade och lägger namnet på filen exempel1.html.
- Klicka på Spara.
Ibland kan File Explorer-fönstret döljas av VSCodium.
Låt oss låta tillägget skapa den grundläggande mallen åt oss. För detta skriver vi !b5-$
Detta kommer att generera koden som du hittar i exempelmappen som example1.html
Vi kommer att se följande:
Detta är koden som genereras av Bootstrap-tillägget.
Vi kommer att göra några ändringar i den här filen. Du hittar ändringarna under namnet exempel2.html
- På rad 2 byter vi språk genom att ersätta eng med es. Detta indikerar för sökmotorer att språket på webbplatsen är spanska.
- På rad 6 ändrar vi texten som står under etiketterna rubricerade. Vi sätter Min första Bootstrap-sajt.
- På rad 12 ändrar vi innehållet mellan taggarna h1 av Detta är en sida gjord med Bootstrap.
Därefter kommer vi att göra några viktiga ändringar. Dessa ändringar har att göra med:
- Plugin-utvecklaren kan inte hänga med i Bootstrap-versioner och det finns fler aktuella.
- Det finns många alternativ för bootstrap-komponenter och jag är intresserad av en annan.
- Enligt den officiella dokumentationen måste anropen till Javascript-biblioteken finnas inuti body-taggarna.
Till exempel 2 modifierade vi innehållet på rad 7, tog bort rader 8 och 9 och laddade upp det återstående innehållet för att bibehålla numreringskompatibiliteten. Sedan klickar vi på slutet av rad 10 för att skapa en ny rad 11 och lägger länken till Javascript-biblioteken.
Oroa dig inte om du inte förstår koden. Jag kommer att förklara funktionen för varje rad i nästa artikel.