Tyylikkään ja yksinkertaisen verkkosivuston luominen Bootstrap 4: 7 -vaiheilla

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Tämän Instructable -ohjelman tarkoitus on antaa yksinkertainen opetus ohjelmointiin perehtyneille - HTML tai muu - Bootstrap 4 -verkkosalkun tekemiseen. Opastan sinut verkkosivuston alkuasetusten kautta, kuinka luodaan muutamia erilaisia sisältölohkoja, ja muutamia ongelmia, joihin saatat törmätä.

Portfolio on jaettu useisiin pienempiin vaiheisiin sen parantamiseksi hallittaviksi: HTML -kehys, CSS -kehys, Javascript -kehys, navigointipalkki ja kotisivu (sisältölohkoineen).

Jos selitykseni johonkin asiaan saavat sinut edelleen hämmentymään, jätä kommenttisi kysymyksiin, ehdotuksiin tai googlettamalla seikka, josta olet hämmentynyt. Verkkosivustojen ja Bootstrapin ohjelmointiin on saatavana monia resursseja.

Huomautus: Tämä opas ei ole kaikenkattava, eikä sitä tule käyttää HTML-, CSS- tai Javascript-ohjelmoinnin oppimisen korvikkeena.

Tarvittavat resurssit

• Käynnistysnauha 4
• jQuery 3.3.1

Valinnaiset resurssit

• FonttiAwesome
• Google -fontit
• highlight.js

Jos haluat ohittaa koko esimerkin tai katsoa arkistoa:

• Täysi esimerkki
• Varasto

Huomautus: Käytän Sublimea kuvissani esimerkeihini, jos haluat seurata samaa tekstieditoria.

Vaihe 1: Asennus

Kansion asetukset

1. Luo jonnekin kansio, johon voit tallentaa kaiken, mitä lataamme. Tämä on salkun juurihakemisto.
2. Luo kansio sen sisään nimeltä "bootstrap"
3. Luo toinen kansio pääkansioon, jonka nimi on "jquery"

Salkun kansio

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

Käynnistysnauha 4

1. Käy heidän verkkosivustollaan ja napsauta "Lataa" -painiketta "Käännetyt CSS ja JS" -osion alla.
2. Tallenna.zip -tiedosto Lataukset -kansioon tai muuhun kätevään paikkaan.
3. Avaa.zip -tiedosto ja poista css- ja js -kansiot aiemmin tekemääsi bootstrap -kansioon.

jQuery

1. Käy heidän verkkosivustollaan ja lataa "pakkaamaton, kehitys jQuery 3.3.1"
2. Tallenna tiedosto aiemmin tekemääsi jquery -kansioon.

Kaikki kehykset ovat nyt valmiita, kun alamme työskennellä varsinaisen salkun parissa.

Vaihe 2: HTML -kehys (index.html)

Sinun nimesi

Tämä kehys ei ole mikään liian monimutkainen, mutta haluan selittää asennuksen yleiset tarkoitukset.

Bootstrap JS jQueryn jälkeen

Näyttää siltä, että Bootstrapin Javascript -tiedoston ja jQueryn välillä on jonkinlainen päällekkäisyys. En testannut nähdäkseni kuinka laaja tämä päällekkäisyys on, mutta yksi esimerkki on navigointipalkissa käytettävä avattava toiminto. Jos lataat Bootstrapin ensin, pudotusvalikko ei toimi.

FonttiAwesome

Jos olet tehnyt jotain verkkokehitystä, tiedät todennäköisesti mitä FontAwesome on. Jos näin ei kuitenkaan ole, se on kuvakesarja, joka sisältää työkalupakin ylimääräistä mukauttamista varten. Se on uskomattoman hyödyllistä, jos olet kuin minä ja sinulla ei ole lainkaan taiteellista lahjakkuutta.

hightlight.js

Tämä kehys mahdollistaa dynaamisen koodin korostamisen verkkosivuilla. Voit tuoda sen kuten muutkin käyttämäni kehykset, jos käytät vain yleisiä ohjelmointikieliä, mutta on myös mahdollisuus ladata mukautettu kielijoukko. Valitsin jälkimmäisen vaihtoehdon muutaman makro- ja ini -kielen takia, mutta se on täysin sinun.

Huomautus: Ole tietoinen paikoista, joissa käytän koodattuja linkkejä tiedostoihin, kuten kaksi kuvaketta ja highlight.js. Lisäksi koska vain Bootstrap ja jQuery vaaditaan, voit lisätä tai poistaa muita kehyksiä. Jos poistat ne, muista poistaa koodirivit, jotka vastaavat myöhemmin.

Vaihe 3: CSS -kehys (style.css)

/ * * Toivottavasti bg -värin muuttaminen harmaaksi ja kirjasintyylin muuttaminen helpottavat verkkosivuston käyttöä */ body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Tämä varmistaa, että navigointipalkki on kaiken päällä */ nav {z-index: 9999; }

/*

* Tämän pitäisi tehdä kappaleen tekstistä luettavampi */ p {font-size: 18px; marginaali-5px; marginaali-pohja: 5 kuvapistettä; }

/*

* Tämä varmistaa, että kaikki koodilohkoni on muotoiltu oikein */ code {text-align: left; }

/*

* En halua, että luetteloissa on luettelomerkkejä */ li {list-style-type: none; }

/*

* Linkit ovat oletuksena sinisiä, ja haluan niiden vastaavan Bootstrapin tyyliä */ li a, a {väri: valkoinen; }

/*

* Sidon luokkatunnisteen diviin, joka sisältää navigointipalkin varmistaakseni, että sisältö ei ole päällekkäistä */.navFix {padding-bottom: 70px; }

/*

* Suurempi koko venyttää navigointipalkkia */.social-media {font-size: 1.3em; }

/*

* Avattavien linkkien oletusarvoinen korostusväri on valkoinen */.pudotusvalikko a: hover {background-color: #212529; }

/*

* Pakota divit näyttämään pdf -tiedostot tiettyyn korkeuteen */.pdfFill {korkeus: 45rem; }

/*

* Lisää väli välilehtien ja koodilohkojen väliin */.codeStyle {padding-top: 30px; }

Lisäsin sisältöpohjaiset CSS-elementit tähän kehykseen yrittääkseni säästää sinua myöhemmin. Ne ovat kaikki hyvin yksinkertaisia ja ovat enimmäkseen elämänlaadun muutoksia, jotka helpottavat vuorovaikutusta salkun kanssa lukijoille.

nav z-indeksi

Minulla on hyvin rajallinen kokemus verkkokehityksestä, joten en ole varma, onko tämä yleinen ongelma Bootstrapin navigointipalkin käyttöönotossa, mutta ilman mitään edestä-taakse -suunnittelumäärityksiä siirtymispalkki näkyy itse asiassa muun sisällön alla, kuten Bootstrapin kortit. Tämä näkyy parhaiten kokoontaitettavan navigointipalkin kanssa, mutta sisällytin indeksin muutoksen joka tapauksessa turvallisuuden vuoksi.

koodin kohdistus

Koska käytän tyypillisesti Bootstrapin "align-content-center" ja "text-center" -luokkia elementtien kohdistamiseen, en halua koodini perivän tätä keskelle kohdistettua luonnetta. Tämä on helppo korjata korvaamalla kaikki kohdistusmuutokset ja tekemällä kooditunnisteet vasemmalle tasatuksi: tämä säilyttää sarkainväli koodissa.

navFix -pehmuste

Kun Bootstrapin navigointipalkki on juuttunut sivun yläosaan, sisältö latautuu sen alle. Uskon, että näin tapahtuu, koska navigointipalkki on todella juuttunut näkymän yläosaan sivun sijaan. Siitä huolimatta tämä korjataan lisäämällä navigointipalkin ja muun sisällön välistä tilaa.

pdf korkeus

PDF -tiedostojen oletuskorkeus on uskomattoman pieni. Se on pohjimmiltaan lukukelvoton, joten muutin korkeutta yrittääkseni antaa tarpeeksi tilaa suunnilleen yhdelle sivulle kerrallaan.

Vaihe 4: Javascript -kehys (javascript.js)

/ * * Tämä etsii mitä tahansa elementtiä, jolla on toggle -luokka, ja joko piilottaa tai näyttää sen pois */ 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 = "ei mitään"; }

divID.style.display = "lohko";

}

palauta epätosi;

}

/*

* Koodi, joka on suoritettava tietyssä järjestyksessä */ $ (asiakirja).ready (function () {/ * * Lataa sisältöä tiedostoista */

/*

* Pakota pieni viive tietojen lataamiseen */ setTimeout (function () {/ * * Korosta kaikki koodi, joka on ladattu */ $ ('pre code') -kohtaan. Jokainen (function (i, block) { hljs.highlightBlock (lohko);});}, 1000); });

Jotta tätä salkkua olisi helppo muokata ja hallita, päätin käyttää yhden sivun muotoa. Se pitää kaiken paikallisena suurimmaksi osaksi ja nopeuttaa sisällön lataamista.

toggleSektio

Käytin luokan arvoja hallitakseni, mitä sisältöä on näytettävä tai piilotettava, koska useimmiten käytän div -tiedostoja useiden elementtien erottamiseen ja ryhmittelyyn. Voit käyttää tätä myös yksittäisten painikkeiden ryhmittelyyn, mutta se vaatii ylimääräisen tarkistuksen ennen "lohkonäytön" asettamista, jotta sisältöä ei voida näyttää.

asiakirjojen lataaminen

Lisäsin tämän, koska on yleensä sotkuista sisällyttää joukko itsenäistä ohjelmointikoodia tavallisiin HTML -tiedostoihin. Voimme käyttää tätä dynaamisen korostuksen menetelmää pakottaaksemme prosessin tapahtumaan sen jälkeen, kun olemme ladanneet sisältöä muista tiedostoista.

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

Tämä on esimerkki siitä, miten lataamme sisältöä.

Vaihe 5: Navigointipalkki

Nimikirjaimet

• Koti
• Minusta
• Projektien opetusohjelmat
• Ota yhteyttä minuun

• Navigointipalkki on monimutkaisin elementti kaikesta portfoliosta. Pelkkä luokkien yhdistelmä tekee siitä eräänlaisen palapelin, joka vaatii sinua jatkuvasti katsomaan sääntökirjoja.

  Bootstrap -toiminnallisuus

  Bootstrap toimii olennaisesti eri luokka -arvojen kautta. Itse "nav" -elementtiä tarkasteltaessa ei ole liian vaikeaa selvittää kunkin luokan tarkoitusta:

  "Navbar -palkkimme" on vaihtoehto "md" (keskikokoinen), "laajenna", "tumma". Ja "kiinnitimme" sen "huipulle". Se näyttää hämmentävältä, koska se on tunnisteiden sekoitus, mutta jos katsot niitä elementin adjektiiveiksi, on paljon helpompi ymmärtää, mitä tapahtuu.

  Brändi

  Brändi on tyypillinen logo ja nimi, jotka näet jokaisella verkkosivustolla vasemmassa yläkulmassa. Se on kokeiltu ja todellinen suunnitteluelementti, jota jokainen käyttäjä odottaa tässä vaiheessa.

  Huomautus: "i" -tunnisteet ovat itse asiassa FontAwesome -kuvakkeita, ja saat nämä tunnisteet minkä tahansa kuvakkeen sivulta.

  Vaihtaja/kokoontaitettava painike (mobiili)

  Tämä painike näkyy vain mobiililaitteissa. Mutta koska sisällytimme "nav" -ilmoitukseen, että navigointipalkin on oltava laajennettavissa, nämä elementit muodostavat yhteyden toisiinsa tunnustensa ja "tietojen vaihtamisen" tunnisteiden kautta.

  Navigointilinkin linkit (vasen puoli)

  Nämä linkit riippuvat täysin siitä, mitä luokkia tarvitset salkkuusi. Otin muutamia tyypillisiä esimerkkejä lähtökohdaksi, mutta kukaan ei ole sama. Et ehkä tarvitse "Opetusohjelmat" -osaa, koska keskityt taideveistosten tekemiseen. Jokainen "li" -kohde voidaan kopioida ja liittää, joten kun olet selvittänyt, mitä tarvitset, navigoinnin asettaminen on helppoa.

  Huomautus: Voit luoda teknisesti pudotusvalikoita muissa pudotusvalikoissa, mutta en suosittele sitä, ellet ole valmis lisäämään CSS: ää ja Javascriptiä, jotta käyttöliittymä näyttää siistiltä.

  Navigointilinkin linkit (oikea puoli)

  Kun annat oikean linkkilistan "ml-auto" -luokan, Bootstrap erottaa nämä kaksi luetteloa tasaisesti. Tämä luo puhtaan jaon vasemmalle ja oikealle puolelle. Päätin käyttää tätä tilaa sosiaalisen median linkkeihin, koska se on hyvin yleinen ja suosittu tapa lisätä läsnäoloasi. Jos tämä ei ole merkityksellistä, voit poistaa nämä linkit hakupalkista, kirjautumistiedoista jne. Mutta muista vain, että se on tärkeä tila käyttää. Samoin kuin vasemmalla puolella olevien navigointipalkkien linkit, voit kopioida ja liittää myös nämä.

  Huomautus: Jos aiot käyttää linkkejä, jotka olen jo määrittänyt, muuta "käyttäjänimi" itse "href" -linkissä.

  Vaihe 6: Kotisivu

  

  

  

  Sinun nimesi

  Ohjelmoija Writer Gamer

  Tämä osio ja sitä seuraavat sisältösivut riippuvat siitä, mitä haluat sisällyttää portfolioosi. En tietenkään voi käsitellä jokaista sisältötyyppiä, mutta yritin sisällyttää kuvia, pdf -tiedostoja, videoita, koodilohkoja ja joitain tyypillisiä sisällytyksiä.

  Taulukon muoto

  Kotisivu on määritetty toimimaan taulukkona. En luottaisi hämmästyttäviin suunnittelutaitoihini lopputuotteen luomisessa, mutta lisäsin rivi- ja sarakeyhdistelmien eri muunnelmia osoittaakseni, että se on erittäin dynaaminen ja joustava. Voit luoda 3 riviä ja 2 saraketta, joiden painikkeet ovat vasemmalla ja sisältö oikealla, tai voit tehdä jotain aivan muuta. Se vaatii vain pientä kokeilua.

  Painikkeet

  Nämä toimivat olennaisesti kuten tavalliset painikkeet. Ainoa todellinen Bootstrap -integraatio johtuu siitä, että muotoilu sopii yhteen muun teeman kanssa. Muussa tapauksessa luo niin monta tai niin vähän painiketta kuin haluat esitellä sisältöäsi ja varmista sitten, että href -linkit vastaavat divien tunnuksia.

  Ohjelmointikoodin sisältö

  Kooditunnisteet ovat oletustunnisteita, joita korostus.js käyttää kaikkien korostusten hallintaan. Jos muistat sen javascript.js -tiedostosta, siellä on osa muiden tiedostojen sisällön lataamiseen.

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

  • Ensimmäisessä osassa etsitään sen elementin "id", johon haluat lisätä sisällön.
  • Toinen osa on ladattavan tiedoston sijainti.

  Huomautus: Sisältö ei lataudu kokonaan, koska muokkaat tätä verkkosivua paikallisesti palvelimen sijaan. Tämä voidaan ratkaista useilla eri tavoilla, joita käsittelen Instructable -luvun lopussa.

  YouTube -video

  Upotettu "iframe" tulee itse YouTubesta. En selitä laajasti, miten ne hankitaan, mutta kun siirryt "Jaa" -videoon, on olemassa "Upota" -vaihtoehto, joka auttaa sinua luomaan tarvittavan koodin videosi näyttämiseksi verkkosivulla.

  Vaihe 7: Katse eteenpäin

  On erittäin hyvä mahdollisuus, että en käsitellyt jotain elementtiä tai sisältötyyppiä, jonka haluat sisällyttää verkkosivustollesi. Onneksi sinulla on monia hyviä vaihtoehtoja ottaa seuraavat askeleet itse.

  Bootstrapin dokumentaatio

  Bootstrapin dokumentaatio on hyvä paikka aloittaa, jos etsit elementtejä, jotka on esiohjelmoitu ja joissa on esimerkkejä, joita voit kopioida ja liittää portfolioon kokeiltavaksi. En koskenut kortteihin, karuselleihin tai lomakkeisiin. Suosittelen, että katsot vaihtoehdot "Komponentit" -osiosta.

  W3Koulut

  W3Schools on upea sivusto, jossa voit oppia lähes kaikkea web -ohjelmointiin ja -kehitykseen liittyvää. He ovat paljon älykkäämpiä kuin minä, ja ne kattavat lähes kaikki HTML-, CSS- ja Javascript -toiminnot, joita voit ajatella.

  Salkun isännöinti

  Tämä Instructable opettaa kuinka isännöidä verkkosivustoasi muutamalla eri alustalla. Nämä vaiheet sinun on suoritettava, jos haluat näyttää ihmisille, rekrytoijille jne. Portfoliosi.

  Kokeile ja pidä hauskaa

  Ainoa tapa tehdä suuri portfolio on kokeilla ja kokeilla kaikkea ja kaikkea, mikä näyttää mielenkiintoiselta. Monet hienot suunnittelusalkut ja verkkosivustot käyttävät suuria siirtymätehosteita tai dynaamisia taustoja, mutta yksikään niistä ei ole valmiiksi tehty.