Hur man gör en snygg och enkel webbplats med Bootstrap 4: 7 -steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:41

Syftet med denna Instructable är att ge dem som är bekanta med programmering - HTML eller på annat sätt - en enkel introduktion till att göra en online -portfölj med Bootstrap 4. Jag kommer att leda dig genom den första installationen av webbplatsen, hur du skapar några olika innehållsblock, och några problem som du kan stöta på.

Portföljen är uppdelad i ett antal mindre steg för att försöka göra den mer hanterbar: HTML -ram, CSS -ram, Javascript -ram, navigeringsfält och hemsidan (med innehållsblock).

Om mina förklaringar till något fortfarande gör dig förvirrad, lämna gärna en kommentar med dina frågor, förslag eller googla elementet du är förvirrad över. Det finns många resurser tillgängliga för programmering av webbplatser och Bootstrap.

Obs! Den här guiden är inte alltomfattande och bör inte användas som ett substitut för att lära dig programmera i HTML, CSS eller Javascript.

Obligatoriska resurser

• Bootstrap 4
• jQuery 3.3.1

Valfria resurser

• FontAwesome
• Google Fonts
• highlight.js

Om du vill hoppa till hela exemplet eller ta en titt på förvaret:

• Fullt exempel
• Förvar

Obs! Jag kommer att använda Sublime i bilderna för mina exempel om du vill följa med samma textredigerare.

Steg 1: Konfigurera

Mappinställning

1. Skapa en mapp någonstans där du kan lagra allt vi ska ladda ner. Detta kommer att vara din rotkatalog för portföljen.
2. Skapa en mapp inuti den som heter "bootstrap"
3. Skapa en annan mapp i din rotportföljmapp som heter "jquery"

Portföljmapp

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Besök deras webbplats och klicka på knappen "Ladda ner" under avsnittet "Kompilerad CSS och JS".
2. Spara.zip -filen i mappen "Nedladdningar" eller på en annan lämplig plats.
3. Öppna.zip -filen och extrahera mapparna "css" och "js" till mappen "bootstrap" som du gjorde tidigare.

jQuery

1. Besök deras webbplats och ladda ner "okomprimerad, utveckling jQuery 3.3.1"
2. Spara filen i mappen "jquery" som du gjorde tidigare.

Alla ramar är nu klara när vi börjar arbeta med själva portföljen.

Steg 2: HTML -ram (index.html)

Ditt namn

Denna ram är inget alltför komplex, men jag vill förklara de allmänna syftena med installationen.

Bootstrap JS Efter jQuery

Det verkar finnas någon form av överlappning mellan Bootstraps Javascript -fil och jQuery's. Jag testade inte hur omfattande denna överlappning är, men ett exempel är rullgardinsfunktionen som jag använder i navigeringsfältet. Om du laddar i Bootstrap först fungerar inte rullgardinsmenyn.

FontAwesome

Om du har gjort någon webbutveckling är chansen stor att du vet vad FontAwesome är. Men om så inte är fallet är det en ikonuppsättning som innehåller en verktygslåda för extra anpassning. Det är otroligt användbart om du är som jag och absolut inte har någon konstnärlig talang.

hightlight.js

Detta ramverk möjliggör dynamisk kodmarkering på webbsidor. Du kan importera det som resten av ramarna jag använder om du bara använder vanliga programmeringsspråk, men det finns också ett alternativ för att ladda ner en anpassad uppsättning språk. Jag valde det senare alternativet på grund av några makro- och ini -språk, men det är helt upp till dig.

Obs: Var medveten om de platser där jag använder hårdkodade länkar till filer som de två ikonerna och highlight.js. Eftersom bara Bootstrap och jQuery krävs kan du lägga till eller ta bort andra ramar. Om du tar bort något, kom ihåg att ta bort kodraderna som motsvarar senare.

Steg 3: CSS Frame (style.css)

/ * * Förhoppningsvis tonas ned bg -färgen till grå och ändrar teckensnittsstilen gör webbplatsen lättare att konsumera */ body {bakgrund: grå; font-family: 'Open Sans', sans-serif; }

/*

* Detta säkerställer att navfältet är ovanpå allt */ nav {z-index: 9999; }

/*

* Detta borde göra paragraftexten mer läsbar */ p {font-size: 18px; marginal-topp: 5px; marginal-botten: 5px; }

/*

* Detta säkerställer att alla mina kodblock är korrekt formaterade */ code {text-align: left; }

/*

* Jag vill inte att listor ska ha kulorna */ li {list-style-type: none; }

/*

* Länkar är blå som standard, och jag vill att de ska stämma överens med Bootstraps stil */ li a, a {color: white; }

/*

* Jag knyter en klasstagg till en div som innehåller navfältet för att se till att innehållet inte överlappar */.navFix {padding-bottom: 70px; }

/*

* Ökad storlek sträcker sig navbar */.social-media {font-size: 1.3em; }

/*

* Standardmarkeringsfärgen för rullgardinsmenyerna är vit */.dropdown-meny a: sväng {bakgrund-färg: #212529; }

/*

* Tvinga divs som visar PDF -filer till en viss höjd */.pdfFill {height: 45rem; }

/*

* Lägg till lite avstånd mellan knapparna och kodblocken */.codeStyle {padding-top: 30px; }

Jag inkluderade de innehållsbaserade CSS-elementen i den här ramen för att försöka spara lite tid senare. De är alla väldigt enkla och är mestadels livskvalitetsförändringar som gör det lättare för läsarna att interagera med portföljen.

nav z-index

Jag har en mycket begränsad mängd webbutvecklingserfarenhet, så jag är inte säker på om detta är ett vanligt problem vid implementering av Bootstraps navigeringsfält, men utan någon orienteringsspecifikation fram och bak kommer navigeringsfältet faktiskt att visas under annat innehåll som Bootstraps kort. Detta är mest märkbart med den hopfällbara navstången, men jag inkluderade indexändringen ändå för säkerhets skull.

kodjustering

Eftersom jag vanligtvis använder Bootstraps "justify-content-center" och "text-center" klasser för att justera element, vill jag inte att min kod ska ärva den centrerade naturen. Detta åtgärdas enkelt genom att skriva över alla justeringsändringar och göra kodtaggar vänsterjusterade: detta bevarar flikavståndet i koden.

navFix vaddering

När Bootstraps navigeringsfält har fastnat högst upp på sidan laddas innehållet under det. Jag tror att detta händer eftersom navigeringsfältet faktiskt fastnar högst upp i visningsporten istället för själva sidan. Oavsett detta åtgärdas detta genom att öka utrymmet mellan navstången och resten av innehållet.

pdf höjd

Standardhöjden för pdf -filer är otroligt liten. Det är i grunden oläsligt, så jag ändrade höjden för att försöka ge tillräckligt med utrymme för ungefär en sida i taget.

Steg 4: Javascript Frame (javascript.js)

/ * * Detta söker efter något element i klassen "växla" och antingen döljer eller döljer det */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

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

divID.style.display = "block";

}

return falsk;

}

/*

* Kod som måste köras i en viss ordning */ $ (dokument). Ready (function () {/ * * Ladda in innehåll från filer */

/*

* Tvinga fram en liten fördröjning för att ladda in data */ setTimeout (funktion () {/ * * Markera all kod som har laddats i */ $ ("förkod"). Varje (funktion (i, block) { hljs.highlightBlock (block);});}, 1000); });

För att göra den här portföljen enkel att modifiera och hantera bestämde jag mig för att använda ett format på en sida. Det håller allt lokalt för det mesta och gör att innehållet laddas snabbare.

toggleSection

Jag använde klassvärden för att hantera vilket innehåll som måste visas eller döljas eftersom jag för det mesta använder divs för att separera och gruppera flera element tillsammans. Du kan också använda detta för att gruppera enskilda knappar, men det kräver en extra kontroll innan du ställer in "block" -skärmen så att inget innehåll kan visas.

dokumentladdning

Jag inkluderade detta eftersom det i allmänhet är rörigt att inkludera en massa oberoende programmeringskod i vanliga HTML -filer. Vi kan använda denna metod för dynamisk markering för att tvinga processen att äga rum efter att vi har laddat in innehåll från andra filer.

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

Detta är ett exempel på hur vi läser in innehåll.

Steg 5: Navigeringsfält

Initialer

• Hem
• Om mig
• Projektstudier
• Kontakta mig

Navigationsfältet är det mest komplexa elementet av allt i portföljen. Den stora kombinationen av klasser gör det ungefär som ett pussel som kräver att du kontinuerligt tittar på regelboken.

Bootstrap -funktionalitet

Bootstrap fungerar i huvudsak genom olika klassvärden. När man tittar på själva "nav" -elementet är det inte så svårt att fastställa syftet med varje klass:

Vår "navbar" är alternativet "md" (medium), "expand", "dark". Och vi "fixade" det till "toppen". Det ser förvirrande ut eftersom det är ett virrvarr av identifierare, men om du ser dem som adjektiv för elementet blir det mycket lättare att förstå vad som händer.

varumärke

Varumärket är den typiska logotypen och namnet som du ser på varje webbplats längst upp till vänster. Det är ett beprövat designelement som varje användare förväntar sig vid denna tidpunkt.

Obs: "i" -taggarna är faktiskt FontAwesome -ikonerna, och du får dessa taggar från valfri ikons sida.

Toggler/hopfällbar knapp (mobil)

Den här knappen visas bara på mobila enheter. Men eftersom vi inkluderade i "nav" -deklarationen att navigeringsfältet måste vara utbyggbart, ansluter dessa element till varandra genom sina ID och "data-toggle" -identifierare.

Navbar -länkar (vänster sida)

Dessa länkar beror helt på vilka kategorier du behöver för din portfölj. Jag tog med några av de typiska exemplen som utgångspunkt, men ingen är densamma. Du kanske inte behöver en sektion "Handledning" eftersom du fokuserar på att skapa konstskulpturer. Varje "li" -objekt kan kopieras och klistras in, så när du väl fattat vad du behöver är det enkelt att ställa in navigeringen.

Obs: Du kan tekniskt skapa rullgardinsmenyer inom andra rullgardinsmenyer, men jag skulle inte rekommendera det om du inte vill lägga till mer CSS och Javascript för att få gränssnittet att se rent ut.

Navbar -länkar (höger sida)

Genom att ge rätt lista med länkar "ml-auto" -klassen separerar Bootstrap de två listorna jämnt. Detta skapar en ren vänster och höger sidodelning. Jag bestämde mig för att använda detta utrymme för länkar till sociala medier eftersom det är en mycket vanlig och populär metod för att öka din närvaro. Om det inte är relevant kan du skrapa dessa länkar för en sökfält, inloggningsinformation etc. Men kom bara ihåg att det är viktigt utrymme att använda. Och i likhet med navbarlänkarna på vänster sida kan du också kopiera och klistra in dessa.

Obs! Om du planerar att använda de länkar som jag redan har konfigurerat ändrar du "användarnamn" i själva "href" -länkarna själva.

Steg 6: Hemsida

Ditt namn

Programmerare Writer Gamer

Det här avsnittet och dina efterföljande innehållssidor beror på vad du vill lägga i din portfölj. Jag kan uppenbarligen inte ta upp varje innehållstyp, men jag försökte inkludera bilder, PDF -filer, videor, kodblock, några av de typiska inkluderingarna.

Tabellformat

Hemsidan är inställd för att fungera som en tabell. Jag skulle inte lita på mina fantastiska designkunskaper för att skapa din slutprodukt, men jag lade till de olika varianterna av rad- och kolumnkombinationer för att visa att den är väldigt dynamisk och flexibel. Du kan skapa 3 rader och 2 kolumner för att ha knappar till vänster och innehåll till höger, eller så kan du göra något helt annat. Det tar bara lite experiment.

Knappar

Dessa fungerar i huvudsak som vanliga knappar. Den enda riktiga Bootstrap -integrationen här härrör från stylingen för att matcha med resten av temat. Annars kan du skapa så många eller så små knappar som du behöver för att visa upp ditt innehåll och se till att matcha href -länkarna med ID: erna för divs.

Programmeringskodinnehåll

"Kod" -taggarna är standardtaggarna som highlight.js använder för att hantera all markering. Om du kommer ihåg från javascript.js -filen finns det ett avsnitt att ladda in innehåll från andra filer.

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

• Den första delen av detta söker efter "id" för elementet du vill infoga innehållet i.
• Den andra delen är platsen för filen du vill ladda in.

Obs! Innehållet laddas inte in helt eftersom det finns en god chans att du redigerar den här webbsidan lokalt istället för på en server. Detta kan hanteras på ett antal olika sätt som jag kommer att ta upp i slutet av instruktionsboken.

YouTube -video

Den inbäddade "iframe" kommer faktiskt från YouTube själv. Jag kommer inte att förklara utförligt hur man får dem, men när du går till "Dela" en video finns det ett "Bädda in" -alternativ som hjälper dig att generera den kod som är nödvändig för att visa din video på webbsidan.

Steg 7: Se framåt

Det finns en mycket god chans att jag inte täckte något element eller innehållstyp som du vill inkludera på din webbplats. Tack och lov finns det många bra alternativ för dig att ta nästa steg själv.

Bootstraps dokumentation

Bootstraps dokumentation är ett bra ställe att börja om du letar efter element som är förprogrammerade och har exempel som du kan kopiera och klistra in i din portfölj att experimentera med. Jag berörde inte kort, karuseller eller formulär. Jag rekommenderar starkt att du tittar igenom avsnittet "Komponenter" för att se alternativen.

W3Skolor

W3Schools är en underbar webbplats där du kan lära dig nästan allt som rör webbprogrammering och utveckling. De är mycket smartare än jag, och de täcker nästan alla HTML-, CSS- och Javascript -funktioner du kan tänka dig.

Värd din portfölj

Denna instruktionsbok lär dig hur du värdar din webbplats på några olika plattformar. Det här är stegen du måste ta om du vill kunna visa människor, rekryterare etc. din portfölj.

Experimentera och ha kul

Det enda sättet att göra en bra portfölj är genom att experimentera och prova allt som ser intressant ut. Många snygga designportföljer och webbplatser använder fantastiska övergångseffekter eller dynamiska bakgrunder, men ingen av dem kom i förväg.