Hoe om 'n slanke en eenvoudige webwerf te maak met Bootstrap 4: 7 -stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Die doel van hierdie instruksies is om diegene wat vertroud is met programmering - HTML of andersins - 'n eenvoudige inleiding te gee tot die maak van 'n aanlyn portefeulje met Bootstrap 4. Ek lei u deur die aanvanklike opstelling van die webwerf, hoe om 'n paar verskillende inhoudsblokke te skep, en 'n paar probleme wat u moontlik teëkom.

Die portefeulje is verdeel in 'n aantal kleiner stappe om dit meer hanteerbaar te maak: HTML -raam, CSS -raam, Javascript -raam, navigasiebalk en die tuisblad (met inhoudsblokke).

As my verduidelikings vir iets u nog steeds deurmekaar laat, laat gerus 'n opmerking met u vrae, voorstelle, of google die element waaroor u verward is. Daar is baie hulpbronne beskikbaar vir die programmering van webwerwe en Bootstrap.

Opmerking: hierdie gids is nie allesomvattend nie en moet nie as plaasvervanger gebruik word om te leer hoe om in HTML, CSS of Javascript te programmeer nie.

Vereiste hulpbronne

• Bootstrap 4
• jQuery 3.3.1

Opsionele hulpbronne

• FontAwesome
• Google lettertipes
• highlight.js

As u na die volledige voorbeeld wil gaan, of na die bewaarplek kyk:

• Volledige voorbeeld
• Bewaarplek

Nota: ek sal Sublime in die foto's gebruik vir my voorbeelde as u dieselfde teksredakteur wil volg.

Stap 1: Opstel

Voueropstelling

1. Skep êrens 'n gids waar u alles kan stoor wat ons gaan aflaai. Dit sal u wortelgids vir die portefeulje wees.
2. Skep 'n gids binne die een met die naam "bootstrap"
3. Skep 'n ander gids in u wortelportefeuljemap met die naam "jquery"

Portefeuljemap

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

Bootstrap 4

1. Besoek hul webwerf en klik op die 'Download' knoppie onder die 'Compiled CSS and JS' afdeling.
2. Stoor die.zip -lêer in u gids "Downloads" of op 'n ander gerieflike plek.
3. Maak die.zip -lêer oop en pak die vouers "css" en "js" uit na die "bootstrap" -vouer wat u vroeër gemaak het.

jQuery

1. Besoek hul webwerf en laai die 'ongekomprimeerde, ontwikkeling jQuery 3.3.1' af
2. Stoor die lêer in die "jquery" -vouer wat u vroeër gemaak het.

Al die raamwerke is nou gereed wanneer ons aan die werklike portefeulje begin werk.

Stap 2: HTML -raam (index.html)

Jou naam

Hierdie raam is niks te ingewikkeld nie, maar ek wil die algemene doelwitte van die opstelling verduidelik.

Bootstrap JS Na jQuery

Dit lyk asof daar 'n soort oorvleueling is tussen Bootstrap se Javascript -lêer en jQuery's. Ek het nie getoets om te sien hoe uitgebreid hierdie oorvleueling is nie, maar 'n voorbeeld is die aftrekfunksie wat ek in die navigasiebalk gebruik. As u eers Bootstrap laai, werk die aftrekknoppie nie.

FontAwesome

As u enige webontwikkeling gedoen het, is die kans goed dat u weet wat FontAwesome is. As dit egter nie die geval is nie, is dit 'n ikoonstel wat 'n gereedskapstel bevat vir ekstra aanpassing. Dit is ongelooflik handig as u soos ek is en absoluut geen artistieke talent het nie.

hightlight.js

Hierdie raamwerk maak voorsiening vir dinamiese kodeverligting op webblaaie. U kan dit invoer soos die res van die raamwerke wat ek gebruik as u slegs gewone programmeertale gebruik, maar daar is ook 'n opsie om 'n pasgemaakte stel tale af te laai. Ek het laasgenoemde opsie gekies as gevolg van 'n paar makro- en ini -tale, maar dit is heeltemal aan u.

Let wel: Let op die plekke waar ek hardgekodeerde skakels na lêers soos die twee ikone en highlight.js gebruik. Aangesien slegs Bootstrap en jQuery nodig is, kan u ook ander raamwerke byvoeg of verwyder. As u dit wel verwyder, moet u die kodereëls wat later ooreenstem, verwyder.

Stap 3: CSS Frame (style.css)

/ * * Hopelik kan die afwerking van die bg -kleur tot grys en die verandering van die lettertipe die webwerf makliker maak om te gebruik */ body {background: grey; font-familie: 'Open Sans', sans-serif; }

/*

* Dit maak seker dat die nav-balk bo alles */ nav {z-index: 9999; }

/*

* Dit moet die paragraafteks meer leesbaar maak */ p {lettergrootte: 18px; marge-top: 5 px; marge-onderkant: 5 px; }

/*

* Dit maak seker dat al my kodeblokke korrek geformateer is */ code {text-align: left; }

/*

* Ek wil nie hê dat lyste die bullets moet bevat nie */ li {list-style-type: none; }

/*

* Skakels is standaard blou, en ek wil hê hulle moet in lyn wees met die styl van Bootstrap */ li a, a {kleur: wit; }

/*

* Ek bind 'n klasplaatjie aan 'n div wat die navbar bevat om seker te maak dat die inhoud nie oorvleuel nie */.navFix {padding-bottom: 70px; }

/*

* Verhoogde grootte strek navbar */.social-media {font-size: 1.3em; }

/*

* Die standaard hoogtepuntkleur vir die aftrekskakels is wit */. Dropdown-menu a: hou {agtergrondkleur: #212529; }

/*

* Dwing divs wat pdfs wys tot 'n sekere hoogte */.pdfFill {hoogte: 45rem; }

/*

* Voeg 'n bietjie afstand tussen die knoppies en kodeblokke */.codeStyle {padding-top: 30px; }

Ek het die inhoudsgebaseerde CSS-elemente in hierdie raam ingesluit om u later te probeer spaar. Hulle is almal baie eenvoudig en is meestal lewensgehalte-veranderinge wat die interaksie met die portefeulje makliker maak vir lesers.

nav z-indeks

Ek het 'n baie beperkte hoeveelheid webontwikkelingservaring, so ek is nie seker of dit 'n algemene probleem is by die implementering van die navigasiebalk van Bootstrap nie, maar sonder 'n voor-tot-agter-oriëntasie-spesifikasie, sal die navigasiebalk eintlik onder ander inhoud verskyn, soos Bootstrap se kaarte. Dit is die opvallendste met die opvoubare navbar, maar ek het die indeksverandering in elk geval ingesluit vir veiligheid.

kodebelyning

Aangesien ek gewoonlik die klasse "justify-content-center" en "text-center" van Bootstrap gebruik om elemente in lyn te bring, wil ek nie hê dat my kode die sentrale belyning moet erf nie. Dit word maklik opgelos deur enige veranderings in die belyning te oorskryf en kode-etikette links te laat val: dit behou die spasie tussen die oortjies in die kode.

navFix -vulling

As die navigasiebalk van Bootstrap bo -aan die bladsy vas is, laai die inhoud daaronder. Ek glo dit gebeur omdat die navbar eintlik bo -aan die viewport vas is in plaas van die bladsy self. Dit word egter opgelos deur die ruimte tussen die navbar en die res van die inhoud te vergroot.

pdf hoogte

Die standaardhoogte van pdf -lêers is ongelooflik klein. Dit is in wese onleesbaar, so ek het die hoogte verander om genoeg ruimte vir ongeveer een bladsy op 'n slag te gee.

Stap 4: Javascript Frame (javascript.js)

/ * * Dit soek na enige element in die 'toggle' -klas en verberg of verberg dit// function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

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

divID.style.display = "blok";

}

terugkeer vals;

}

/*

* Kode wat in 'n sekere volgorde uitgevoer moet word */ $ (dokument).ready (function () {/ * * Laai inhoud uit lêers */

/*

* Dwing 'n klein vertraging om die data */ setTimeout (funksie () {/ * * in te laai, merk al die kode wat in */ $ ('voorkode') gelaai is. Elk (funksie (i, blok) { hljs.highlightBlock (blok);});}, 1000); });

Om hierdie portefeulje maklik te verander en te bestuur, het ek besluit om 'n eenbladsy-formaat te gebruik. Dit hou alles meestal plaaslik en laat die inhoud vinniger laai.

toggleSection

Ek het klaswaardes gebruik om te bestuur watter inhoud vertoon of versteek moet word, omdat ek meestal divs gebruik om verskeie elemente te skei en te groepeer. U kan dit ook gebruik om individuele knoppies saam te voeg, maar dit verg 'n ekstra ondersoek voordat u die 'blok' -skerm instel sodat geen inhoud kan verskyn nie.

laai dokument

Ek het dit ingesluit omdat dit oor die algemeen morsig is om 'n klomp onafhanklike programmeringskode in gewone HTML -lêers op te neem. Ons kan hierdie metode van dinamiese verligting gebruik om die proses te dwing om plaas te vind nadat ons inhoud van ander lêers afgelaai het.

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

Dit is 'n voorbeeld van hoe ons inhoud kan laai.

Stap 5: Navigasiebalk

Voorletters

• Tuis
• Oor my
• Tutoriale vir projekte
• Kontak my

• Die navigasiebalk is die mees komplekse element uit alles in die portefeulje. Die blote kombinasie van klasse maak dit soos 'n raaisel wat vereis dat u voortdurend na die reëlboek moet kyk.

  Bootstrap -funksionaliteit

  Bootstrap funksioneer in wese deur verskillende klaswaardes. As ons na die "nav" -element self kyk, is dit nie te moeilik om die doel van elke klas vas te stel nie:

  Ons 'navbar' is die opsie 'md' (medium), 'uitbreid', 'donker'. En ons het dit aan die bokant "reggemaak". Dit lyk verwarrend omdat dit 'n warboel van identifiseerders is, maar as u dit as byvoeglike naamwoorde vir die element beskou, word dit baie makliker om te verstaan wat gebeur.

  Merk

  Die handelsmerk is die tipiese logo en naam wat u op elke webwerf links bo sien. Dit is 'n beproefde ontwerpelement wat elke gebruiker op hierdie stadium verwag.

  Let wel: Die "i" -merke is eintlik die FontAwesome -ikone, en u kry hierdie etikette vanaf enige ikoon se bladsy.

  Toggler/opvoubare knoppie (selfoon)

  Hierdie knoppie verskyn slegs op mobiele toestelle. Maar aangesien ons in die "nav" -verklaring ingesluit het dat die navigasiebalk uitbreidbaar moet wees, verbind hierdie elemente met mekaar via hul ID's en "data-switch" identifiseerders.

  Navbar links (linkerkant)

  Hierdie skakels hang heeltemal af van watter kategorieë u vir u portefeulje benodig. Ek het 'n paar van die tipiese voorbeelde as 'n beginpunt ingesluit, maar niemand is dieselfde nie. U het moontlik nie 'n 'Tutoriale' afdeling nodig nie, want u fokus op die maak van kunsbeelde. Elke "li" -item kan gekopieer en geplak word, so as u eers agterkom wat u nodig het, is dit maklik om die navigasie op te stel.

  Opmerking: u kan tegnies aftreklyskeuse in ander keuselys maak, maar ek sal dit nie aanbeveel nie, tensy u meer CSS en Javascript wil byvoeg om die koppelvlak skoon te laat lyk.

  Navbar links (regterkant)

  Deur die regte lys skakels die 'ml-auto'-klas te gee, skei Bootstrap die twee lyste eweredig. Dit skep die skoon linker- en regterkantse verdeling. Ek het besluit om hierdie ruimte te gebruik vir skakels na sosiale media, want dit is 'n baie algemene en gewilde metode om u teenwoordigheid te verhoog. As dit nie relevant is nie, kan u hierdie skakels na 'n soekbalk, aanmeldingsinligting, ens., Maar onthou dat dit 'n belangrike ruimte is om te gebruik. En soortgelyk aan die navbar -skakels aan die linkerkant, kan u dit ook kopieer en plak.

  Let wel: As u van plan is om die skakels wat ek reeds opgestel het te gebruik, verander dan die 'gebruikersnaam' in die werklike 'href' skakels self.

  Stap 6: tuisblad

  

  

  

  Jou naam

  Programmeur Skrywer Gamer

  Hierdie afdeling, en u daaropvolgende inhoudsblaaie, sal afhang van wat u in u portefeulje wil plaas. Ek kan natuurlik nie elke inhoudstipe aanspreek nie, maar ek het probeer om beelde, PDF's, video's, kodeblokke, enkele van die tipiese insluite in te sluit.

  Tabelformaat

  Die tuisblad is opgestel om as 'n tabel te dien. Ek sou nie op my wonderlike ontwerpvaardighede staatmaak om u eindproduk te skep nie, maar ek het die verskillende variasies van ry- en kolomkombinasies bygevoeg om aan te toon dat dit baie dinamies en buigbaar is. U kan 3 rye en 2 kolomme skep met knoppies aan die linkerkant en inhoud aan die regterkant, of u kan iets heeltemal anders doen. Dit verg net 'n bietjie eksperimentering.

  Knoppies

  Hierdie funksies werk in wese soos gewone knoppies. Die enigste werklike Bootstrap -integrasie hier spruit uit die styl wat by die res van die tema pas. Andersins, skep soveel of so min knoppies as wat u nodig het om u inhoud ten toon te stel, en pas dan die href -skakels by die ID's vir die divs.

  Inhoud van programmeerkode

  Die 'kode' -etikette is die standaard -etikette wat highlight.js gebruik om al die hoogtepunte te bestuur. As u van die javascript.js -lêer onthou, is daar 'n afdeling om inhoud van ander lêers in te laai.

  $ ('#tuisprogrammeerder-makro'). laai ("files/home/watchLoot.mac");

  • Die eerste deel hiervan soek na die 'id' van die element waarin u die inhoud wil invoeg.
  • Die tweede deel is die ligging van die lêer waarin u wil laai.

  Let wel: die inhoud word nie heeltemal gelaai nie, want die kans is goed dat u hierdie webwerf plaaslik redigeer in plaas van op 'n bediener. Dit kan op verskillende maniere aangespreek word, wat ek aan die einde van die instruksies sal aanspreek.

  YouTube -video

  Die ingebedde 'iframe' kom eintlik van YouTube self. Ek sal nie breedvoerig verduidelik hoe u dit moet kry nie, maar as u na 'n video 'Deel' gaan, is daar 'n 'Embed' opsie wat u sal help om die kode te genereer om u video op die webblad te wys.

  Stap 7: vorentoe kyk

  Die kans is goed dat ek nie een of ander element of tipe inhoud wat u op u webwerf wil insluit, behandel nie. Gelukkig is daar baie goeie opsies om self die volgende stappe te neem.

  Bootstrap se dokumentasie

  Bootstrap se dokumentasie is 'n goeie plek om te begin as u op soek is na elemente wat vooraf geprogrammeer is en voorbeelde het wat u kan kopieer en in u portefeulje plak om mee te eksperimenteer. Ek het nie geraak aan kaarte, karrousels of vorms nie. Ek beveel sterk aan dat u deur die afdeling "Komponente" kyk om die opsies te sien.

  W3Skole

  W3Schools is 'n wonderlike webwerf waar u omtrent alles kan leer wat verband hou met webprogrammering en -ontwikkeling. Hulle is baie slimmer as ek, en dek omtrent elke HTML-, CSS- en Javascript -funksie waaraan u kan dink.

  Beheer u portefeulje

  Hierdie instruksies leer u hoe u u webwerf op 'n paar verskillende platforms kan huisves. Dit is die stappe wat u moet neem om u portefeulje aan mense, werwers, ens. Te kan wys.

  Eksperimenteer en geniet dit

  Die enigste manier om 'n goeie portefeulje te maak, is deur te eksperimenteer en alles wat interessant lyk, te probeer. Baie spoggerige ontwerpportefeuljes en webwerwe gebruik uitstekende oorgangseffekte of dinamiese agtergronde, maar nie een daarvan is vooraf gemaak nie.