Een strakke en eenvoudige website maken met Bootstrap 4: 7 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Het doel van deze Instructable is om degenen die bekend zijn met programmeren - HTML of anderszins - een eenvoudige inleiding te geven tot het maken van een online portfolio met Bootstrap 4. Ik zal u door de eerste installatie van de website leiden, hoe u een paar verschillende inhoudsblokken kunt maken, en een paar problemen die u tegen kunt komen.

Het portfolio is opgedeeld in een aantal kleinere stappen om het beter beheersbaar te maken: HTML-frame, CSS-frame, Javascript-frame, navigatiebalk en de homepage (met inhoudsblokken).

Als mijn uitleg voor iets je nog steeds in de war brengt, laat dan gerust een opmerking achter met je vragen, suggesties of google het element waarover je in de war bent. Er zijn veel bronnen beschikbaar voor het programmeren van websites en Bootstrap.

Opmerking: deze handleiding is niet allesomvattend en mag niet worden gebruikt als vervanging om te leren programmeren in HTML, CSS of Javascript.

Vereiste bronnen

• Bootstrap 4
• jQuery 3.3.1

Optionele bronnen

• Lettertype Geweldig
• Google-lettertypen
• highlight.js

Als u naar het volledige voorbeeld wilt gaan of de repository wilt bekijken:

• Volledig voorbeeld
• Opslagplaats

Opmerking: ik zal Sublime gebruiken in de afbeeldingen voor mijn voorbeelden als je dezelfde teksteditor wilt volgen.

Stap 1: Instellen

Map instellen

1. Maak ergens een map waar je alles kunt opslaan wat we gaan downloaden. Dit wordt uw hoofdmap voor de portfolio.
2. Maak een map in die map met de naam "bootstrap"
3. Maak een andere map in uw rootportfoliomap met de naam "jQuery"

Portfoliomap

|----- bootstrap |----- jQuery

Bootstrap 4

1. Bezoek hun website en klik op de knop "Downloaden" onder het gedeelte "Gecompileerde CSS en JS".
2. Sla het.zip-bestand op in uw map "Downloads" of op een andere handige locatie.
3. Open het.zip-bestand en pak de mappen "css" en "js" uit naar de map "bootstrap" die u eerder hebt gemaakt.

jQuery

1. Bezoek hun website en download de "uncompressed, development jQuery 3.3.1"
2. Sla dat bestand op in de map "jQuery" die u eerder hebt gemaakt.

Alle kaders zijn nu klaar voor als we aan het eigenlijke portfolio gaan werken.

Stap 2: HTML-frame (index.html)

Uw naam

Dit frame is niet al te ingewikkeld, maar ik wil de algemene doeleinden van de opstelling uitleggen.

Bootstrap JS na jQuery

Er lijkt een soort overlap te zijn tussen het Javascript-bestand van Bootstrap en dat van jQuery. Ik heb niet getest hoe groot deze overlap is, maar een voorbeeld is de dropdown-functionaliteit die ik gebruik in de navigatiebalk. Als u eerst in Bootstrap laadt, werkt de vervolgkeuzeknop niet.

Lettertype Geweldig

Als je aan webontwikkeling hebt gedaan, is de kans groot dat je weet wat FontAwesome is. Als dat echter niet het geval is, is het een pictogrammenset met een toolkit voor extra maatwerk. Het is ongelooflijk handig als je zoals ik bent en absoluut geen artistiek talent hebt.

highlight.js

Dit raamwerk maakt dynamische codemarkering op webpagina's mogelijk. Je kunt het importeren zoals de rest van de frameworks die ik gebruik als je alleen algemene programmeertalen gebruikt, maar er is ook een optie om een aangepaste set talen te downloaden. Ik koos voor de laatste optie vanwege een paar macro- en ini-talen, maar het is helemaal aan jou.

Opmerking: let op de plaatsen waar ik hardgecodeerde koppelingen naar bestanden zoals de twee pictogrammen en highlight.js gebruik. Aangezien alleen Bootstrap en jQuery vereist zijn, kunt u gerust andere frameworks toevoegen of verwijderen. Als u er toch een verwijdert, vergeet dan niet om de coderegels die overeenkomen, later te verwijderen.

Stap 3: CSS-frame (style.css)

/* * Hopelijk maakt het afzwakken van de bg-kleur naar grijs en het wijzigen van de lettertypestijl de website gemakkelijker te consumeren */ body { background: grey; font-familie: 'Open Sans', schreefloos; }

/*

* Dit zorgt ervoor dat de navigatiebalk overal bovenop zit */ nav { z-index: 9999; }

/*

* Dit zou de alineatekst leesbaarder moeten maken */ p { font-size: 18px; marge-top: 5px; marge-onder: 5px; }

/*

* Dit zorgt ervoor dat al mijn codeblokken correct zijn opgemaakt */ code { text-align: left; }

/*

* Ik wil niet dat lijsten de opsommingstekens hebben */ li { list-style-type: none; }

/*

* Links zijn standaard blauw en ik wil dat ze overeenkomen met Bootstrap's stijl */ li a, a{ color: white; }

/*

* Ik koppel een class-tag aan een div die de navigatiebalk bevat om ervoor te zorgen dat de inhoud niet overlapt */.navFix { padding-bottom: 70px; }

/*

* Grotere grootte rekt navigatiebalk uit */.social-media { font-size: 1.3em; }

/*

* De standaard markeringskleur voor de dropdown-links is wit */.dropdown-menu a:hover { background-color: #212529; }

/*

* Forceer divs die pdf's tot een bepaalde hoogte tonen */.pdfFill { height: 45rem; }

/*

* Voeg wat afstand toe tussen de knoppen en codeblokken */.codeStyle { padding-top: 30px; }

Ik heb de op inhoud gebaseerde CSS-elementen in dit frame opgenomen om je wat tijd later te besparen. Ze zijn allemaal heel eenvoudig en zijn meestal veranderingen in de kwaliteit van leven die de interactie met de portfolio voor lezers gemakkelijker maken.

nav z-index

Ik heb een zeer beperkte hoeveelheid ervaring met webontwikkeling, dus ik weet niet zeker of dit een veelvoorkomend probleem is bij het implementeren van de navigatiebalk van Bootstrap, maar zonder enige specificatie van de oriëntatie van voren naar achteren, zal de navigatiebalk daadwerkelijk onder andere inhoud verschijnen, zoals Bootstrap-kaarten. Dit is het meest merkbaar met de inklapbare navigatiebalk, maar ik heb de indexwijziging toch opgenomen voor de veiligheid.

code uitlijning

Aangezien ik meestal de klassen "justify-content-center" en "text-center" van Bootstrap gebruik om elementen uit te lijnen, wil ik niet dat mijn code dat gecentreerde karakter overneemt. Dit is eenvoudig op te lossen door eventuele uitlijningswijzigingen te overschrijven en codetags links uitgelijnd te maken: hierdoor blijft de tab-afstand in de code behouden.

navFix opvulling

Wanneer de navigatiebalk van Bootstrap aan de bovenkant van de pagina wordt geplakt, wordt de inhoud eronder geladen. Ik geloof dat dit gebeurt omdat de navigatiebalk eigenlijk aan de bovenkant van de viewport vastzit in plaats van aan de pagina zelf. Dit wordt hoe dan ook opgelost door de ruimte tussen de navigatiebalk en de rest van de inhoud te vergroten.

pdf hoogte

De standaardhoogte van pdf-bestanden is ongelooflijk klein. Het is in wezen onleesbaar, dus ik heb de hoogte veranderd om te proberen genoeg ruimte te geven voor ongeveer één pagina per keer.

Stap 4: Javascript-frame (javascript.js)

/* * Dit zoekt naar elk element met de klasse 'toggle' en verbergt of maakt het zichtbaar */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

for (var i = 0; i < divArray.length; i++) { divArray.style.display = "none"; }

divID.style.display = "blokkeren";

}

onwaar retourneren;

}

/*

* Code die in een bepaalde volgorde moet worden uitgevoerd */ $(document).ready(function() { /* * Inhoud laden vanuit bestanden */

/*

* Forceer een kleine vertraging om de gegevens te laden */ setTimeout(function() { /* * Markeer alle code die is geladen in */ $('pre code').each(function(i, block) { hljs.highlightBlock (blok); }); }, 1000); });

Om dit portfolio gemakkelijk aan te passen en te beheren, heb ik besloten om een formaat van één pagina te gebruiken. Het houdt alles grotendeels lokaal en zorgt ervoor dat de inhoud sneller wordt geladen.

toggleSectie

Ik heb klassewaarden gebruikt om te beheren welke inhoud moet worden weergegeven of verborgen, omdat ik meestal divs gebruik om meerdere elementen te scheiden en te groeperen. U kunt dit ook gebruiken om individuele knoppen te groeperen, maar het vereist een extra controle voordat u de "blok"-weergave instelt om toe te staan dat er geen inhoud wordt weergegeven.

document laden

Ik heb dit toegevoegd omdat het over het algemeen rommelig is om een heleboel onafhankelijke programmeercode in gewone HTML-bestanden op te nemen. We kunnen deze methode van dynamische markering gebruiken om het proces te forceren nadat we inhoud uit andere bestanden hebben geladen.

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

Dit is een voorbeeld van hoe we inhoud laden.

Stap 5: Navigatiebalk

initialen

• Huis
• Over mij
• Projecten Tutorials
• Neem contact met mij op

• De navigatiebalk is het meest complexe element van alles in de portfolio. De pure combinatie van klassen maakt het een soort puzzel waarbij je voortdurend naar het regelboek moet kijken.

  Bootstrap-functionaliteit

  Bootstrap functioneert in wezen via verschillende klassewaarden. Kijkend naar het "nav" -element zelf, is het niet zo moeilijk om het doel van elke klasse vast te stellen:

  Onze "navbar" is de "md" (medium), "expand"able, "dark" optie. En we hebben het "vastgemaakt" aan de "top". Het ziet er verwarrend uit omdat het een wirwar van identifiers is, maar als je ze bekijkt als bijvoeglijke naamwoorden voor het element, wordt het veel gemakkelijker om te begrijpen wat er gebeurt.

  Merk

  Het merk is het typische logo en de naam die je linksboven op elke website ziet. Het is een beproefd ontwerpelement dat elke gebruiker op dit moment verwacht.

  Opmerking: de "i"-tags zijn eigenlijk de FontAwesome-pictogrammen en u krijgt deze tags van elke pictogrampagina.

  Toggler/inklapbare knop (mobiel)

  Deze knop wordt alleen weergegeven op mobiele apparaten. Maar aangezien we in de "nav"-verklaring hebben opgenomen dat de navigatiebalk uitbreidbaar moet zijn, maken deze elementen verbinding met elkaar via hun ID's en "data-toggle"-ID's.

  Navbar-links (linkerkant)

  Deze links zijn volledig afhankelijk van de categorieën die u nodig heeft voor uw portfolio. Ik heb een paar van de typische voorbeelden als uitgangspunt genomen, maar niemand is hetzelfde. Je hebt misschien geen sectie 'Tutorials' nodig omdat je je concentreert op het maken van kunstsculpturen. Elk "li"-item kan worden gekopieerd en geplakt, dus als je eenmaal weet wat je nodig hebt, is het gemakkelijk om de navigatie in te stellen.

  Opmerking: technisch gezien kun je vervolgkeuzemenu's maken in andere vervolgkeuzemenu's, maar ik zou het niet aanraden, tenzij je bereid bent meer CSS en Javascript toe te voegen om de interface er schoon uit te laten zien.

  Navbar-links (rechterkant)

  Door de juiste lijst met links de klasse "ml-auto" te geven, scheidt Bootstrap de twee lijsten gelijkmatig. Dit zorgt voor de schone linker- en rechterkantverdeling. Ik heb besloten om deze ruimte te gebruiken voor links naar sociale media omdat het een veelgebruikte en populaire methode is om uw aanwezigheid te vergroten. Als dat niet relevant is, kun je deze links schrappen voor een zoekbalk, inloggegevens, enz. Maar onthoud dat het een belangrijke ruimte is om te gebruiken. En vergelijkbaar met de navigatiebalklinks aan de linkerkant, kunt u deze ook kopiëren en plakken.

  Opmerking: als je van plan bent de links te gebruiken die ik al heb ingesteld, verander dan de "gebruikersnaam" in de eigenlijke "href"-links zelf.

  Stap 6: Startpagina

  

  

  

  Uw naam

  Programmeur Schrijver Gamer

  Dit gedeelte en uw volgende pagina's met inhoud zijn afhankelijk van wat u in uw portfolio wilt opnemen. Ik kan natuurlijk niet elk inhoudstype behandelen, maar ik heb geprobeerd afbeeldingen, pdf's, video's, codeblokken en enkele van de typische insluitsels op te nemen.

  Tabelindeling

  De homepage is ingesteld om als tabel te fungeren. Ik zou niet vertrouwen op mijn geweldige ontwerpvaardigheden om uw eindproduct te maken, maar ik heb de verschillende variaties van rij- en kolomcombinaties toegevoegd om te laten zien dat het zeer dynamisch en flexibel is. U kunt 3 rijen en 2 kolommen maken met links en inhoud aan de rechterkant, of u kunt iets heel anders doen. Het vergt alleen een beetje experimenteren.

  Toetsen

  Deze werken in wezen zoals gewone knoppen. De enige echte Bootstrap-integratie hier komt voort uit de styling die overeenkomt met de rest van het thema. Maak anders zoveel of zo weinig knoppen als je nodig hebt om je inhoud te laten zien en zorg er vervolgens voor dat de href-links overeenkomen met de ID's voor de divs.

  Inhoud programmeercode

  De "code"-tags zijn de standaardtags die highlight.js gebruikt om alle markeringen te beheren. Als je het je herinnert uit het bestand javascript.js, is er een sectie om inhoud uit andere bestanden in te laden.

  $('#home-programmer-macro').load("files/home/watchLoot.mac");

  • Het eerste deel hiervan zoekt naar de "id" van het element waarin u de inhoud wilt invoegen.
  • Het tweede deel is de locatie van het bestand dat u wilt laden.

  Opmerking: de inhoud wordt niet volledig geladen, omdat de kans groot is dat u deze webpagina lokaal bewerkt in plaats van op een server. Dit kan op verschillende manieren worden aangepakt, die ik aan het einde van de Instructable zal behandelen.

  Youtube video

  Het ingebedde "iframe" komt eigenlijk van YouTube zelf. Ik zal niet uitgebreid uitleggen hoe je ze kunt krijgen, maar wanneer je naar "Delen" van een video gaat, is er een "Insluiten"-optie die je zal helpen de code te genereren die nodig is om je video op de webpagina te tonen.

  Stap 7: Vooruitkijken

  De kans is groot dat ik een element of inhoudstype dat u in uw website wilt opnemen, niet heb behandeld. Gelukkig zijn er veel goede mogelijkheden om zelf de volgende stappen te zetten.

  Bootstrap's documentatie

  De documentatie van Bootstrap is een geweldige plek om te beginnen als u op zoek bent naar elementen die voorgeprogrammeerd zijn en voorbeelden hebben die u kunt kopiëren en plakken in uw portfolio om mee te experimenteren. Ik heb kaarten, carrousels of formulieren niet aangeraakt. Ik raad u ten zeerste aan om door de sectie "Componenten" te kijken om de opties te zien.

  W3Schools

  W3Schools is een prachtige website waar u zo ongeveer alles kunt leren over webprogrammering en -ontwikkeling. Ze zijn veel slimmer dan ik, en ze dekken zowat elke HTML-, CSS- en Javascript-functionaliteit die je maar kunt bedenken.

  Uw portfolio hosten

  Deze Instructable leert u hoe u uw website op een paar verschillende platforms kunt hosten. Dit zijn de stappen die je moet nemen als je mensen, recruiters, etc. je portfolio wilt kunnen laten zien.

  Experimenteer en heb plezier

  De enige manier waarop u een geweldige portfolio kunt maken, is door te experimenteren en alles te proberen wat er interessant uitziet. Veel mooie ontwerpportfolio's en websites gebruiken geweldige overgangseffecten of dynamische achtergronden, maar geen van hen was vooraf gemaakt.