In dit bericht beginnen we met het maken van een site met Bootstrap, het open source-framework dat het voor ons gemakkelijk maakt om het responsief te maken en het te voorzien van enige interactiviteit. Het is een basissjabloon dat automatisch wordt gegenereerd door een plug-in voor de ontwikkelomgeving die we eerder hebben aanbevolen en die we zullen moeten wijzigen.
In de artículoenvio anterieure U vindt de instructies om VS Codium te installeren, de gebruikersinterface naar het Spaans te vertalen en de Bootstrap-plug-in te installeren.
Twee dingen om in gedachten te houden:
- De commando's die we gebruiken zijn sneltoetsen, je moet ze typen. Kopiëren/plakken werkt niet.
- Onze contentmanager staat me niet toe om de HTML-code weer te geven, dus ik moet screenshots gebruiken. Zodat je toegang hebt tot de code van de voorbeelden die ik heb geüpload naar GitHub.
Een GitHub-repository klonen
Wat de groten van ons onderscheidt, is de manier waarop ze op problemen reageren. Richard Stallman hield niet van zijn printerstuurprogramma en omdat ze hem niet wilden laten veranderen, startte hij de beweging voor vrije software. Linus Torvalds was niet overtuigd door een van de code-sharing platforms en creëerde zijn eigen. git.
In tegenstelling tot traditionele softwaredistributiesystemen waarin de enige toegestane gebruikersinteractie downloaden is, met Git kun je de evolutie van het project in de tijd volgen. Andere mensen kunnen de repository klonen, wijzigingen aanbrengen en voorstellen dat de ontwikkelaars van het oorspronkelijke project ze opnemen. Indien geaccepteerd, kunnen ontwikkelaars dit eenvoudig doen zonder de bestanden te hoeven downloaden en opnieuw te uploaden.
Er zijn verschillende services gebaseerd op Git, ik heb gekozen voor GitHub simpelweg omdat het integreert met VS Codium.
Om de voorbeeldbestanden naar uw computer te downloaden, hoeft u alleen maar het git-pakket te installeren volgens de instructies van uw distributie voor het installeren van pakketten in de terminal.
Vervolgens typ je de volgende commando's.
Ik sla de bestanden liever op in de map Documenten, dus ik verander de map met
cd Documentos
Dan kloon ik de bestanden met:
git clone https://github.com/dggonzalez1971/bootstrap.git
Ik ga je aan deze stappen in elk van de overige artikelen herinneren, omdat je op deze manier de voorbeeldbestanden bijwerkt terwijl ze worden geüpload.
Om de bestanden te zien, opent u gewoon de bestandsverkenner en zoekt u naar de map bootstrap.
Een site maken met Bootstrap
Als u de code liever handmatig typt, beginnen we met het maken van een map waarin we de site opslaan. U kunt elke gewenste naam plaatsen.
Dan volgen we de volgende stappen:
- Laten we naar het menu gaan Archief.
- Klik op Nieuw tekstbestand.
- Klik op Opslaan.
- We zoeken naar de map die we hebben gemaakt en plaatsen de naam van het bestand voorbeeld1.html.
- Klik op Opslaan.
Soms kan het Verkenner-venster worden verborgen door het VSCodium-venster.
Laten we de extensie de basissjabloon voor ons laten maken. Hiervoor typen we !b5-$
Dit genereert de code die u in de map met voorbeelden vindt als voorbeeld1.html
We zullen het volgende zien:
Dit is de code die wordt gegenereerd door de Bootstrap-extensie.
We gaan enkele wijzigingen aanbrengen in dit bestand. U vindt de wijzigingen onder de naam voorbeeld2.html
- Op regel 2 veranderen we de taal door eng te vervangen door es. Dit geeft aan zoekmachines aan dat de taal van de site Spaans is.
- In regel 6 veranderen we de tekst die onder de labels staat titel We zetten Mijn eerste Bootstrap-site.
- In regel 12 veranderen we de inhoud tussen de tags h1 door Dit is een site gemaakt met Bootstrap.
Vervolgens zullen we enkele belangrijke wijzigingen aanbrengen. Deze aanpassingen hebben te maken met:
- De ontwikkelaar van de plug-in kan de Bootstrap-versies niet bijhouden en er zijn meer recente versies.
- Er zijn veel opties voor bootstrap-componenten en ik ben geïnteresseerd in een andere.
- Volgens de officiële documentatie moeten de oproepen naar de Javascript-bibliotheken zich binnen de body-tags bevinden.
Bijvoorbeeld 2 hebben we de inhoud van regel 7 aangepast, regel 8 en 9 verwijderd en de resterende inhoud geüpload om de nummering compatibiliteit te behouden. Vervolgens klikken we op het einde van regel 10 om een nieuwe regel 11 aan te maken en de link naar de Javascript-bibliotheken te plaatsen.
Maak je geen zorgen als je de code niet begrijpt. Ik zal de functie van elke regel in het volgende artikel uitleggen.