Hogyan készítsünk elegáns és egyszerű weboldalt a Bootstrap 4: 7 lépéssel

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

Ennek az útmutatónak az a célja, hogy a Bootstrap 4 programmal ismerkedjen meg a programozással - HTML vagy más módon - jártasokkal egy egyszerű bevezetéssel az online portfólió elkészítéséhez. Végigvezetem Önt a webhely kezdeti beállításán, hogyan hozhat létre néhány különböző tartalomblokkot, és néhány probléma, amibe beleütközhet.

A portfólió számos kisebb lépésre oszlik, hogy kezelhetőbbé tegye: HTML keret, CSS keret, Javascript keret, navigációs sáv és a kezdőlap (tartalomblokkokkal).

Ha valaminek a magyarázata továbbra is zavarba ejt, nyugodtan hagyjon megjegyzést kérdéseivel, javaslataival, vagy google -olja a zavart elemet. Sok forrás áll rendelkezésre a weboldalak és a Bootstrap programozásához.

Megjegyzés: Ez az útmutató nem mindenre kiterjedő, és nem helyettesítheti a HTML, CSS vagy Javascript programozást.

Szükséges források

• Bootstrap 4
• jQuery 3.3.1

Opcionális források

• FontAwesome
• Google betűtípusok
• highlight.js

Ha átugorja a teljes példát, vagy megnézi a tárolót:

• Teljes példa
• Adattár

Megjegyzés: A Sublime -t fogom használni a képeken a példáimhoz, ha ugyanazt a szövegszerkesztőt szeretné követni.

1. lépés: Beállítás

Mappa beállítása

1. Hozzon létre egy mappát valahol, ahol tárolhat mindent, amit letölteni fogunk. Ez lesz a portfólió gyökérkönyvtára.
2. Hozzon létre egy „bootstrap” nevű mappát
3. Hozzon létre egy másik mappát a gyökér portfólió mappájában, amelynek neve „jquery”

Portfólió mappa

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

Bootstrap 4

1. Látogasson el a webhelyükre, és kattintson a „Letöltés” gombra a „Fordított CSS és JS” szakasz alatt.
2. Mentse a.zip fájlt a „Letöltések” mappába vagy más kényelmes helyre.
3. Nyissa meg a.zip fájlt, és bontsa ki a „css” és „js” mappákat a korábban készített „bootstrap” mappába.

jQuery

1. Látogasson el a webhelyükre, és töltse le a „tömörítetlen, fejlesztési jQuery 3.3.1” -t.
2. Mentse el a fájlt a korábban létrehozott „jquery” mappába.

Az összes keretrendszer készen áll arra, amikor elkezdünk dolgozni a tényleges portfólión.

2. lépés: HTML -keret (index.html)

A neved

Ez a keret nem túl bonyolult, de szeretném elmagyarázni a beállítás általános céljait.

Bootstrap JS A jQuery után

Úgy tűnik, valamiféle átfedés van a Bootstrap Javascript -fájlja és a jQuery -fájl között. Nem teszteltem, hogy mennyire kiterjedt ez az átfedés, de az egyik példa a navigációs sávban használt legördülő menü. Ha először a Bootstrap alkalmazásban tölt be, a legördülő gomb nem működik.

FontAwesome

Ha bármilyen webfejlesztést végzett, akkor valószínűleg tudja, mi az a FontAwesome. Ha azonban nem ez a helyzet, akkor ez egy ikonkészlet, amely tartalmaz egy eszközkészletet az extra testreszabáshoz. Hihetetlenül hasznos, ha olyan vagy, mint én, és egyáltalán nincs művészi tehetséged.

hightlight.js

Ez a keretrendszer lehetővé teszi a dinamikus kód kiemelést a weboldalakon. Az általam használt keretrendszerekhez hasonlóan importálhatja, ha csak a gyakori programozási nyelveket használja, de van lehetőség egyéni nyelvkészlet letöltésére is. Az utóbbi lehetőséget választottam néhány makró és ini nyelv miatt, de ez teljesen rajtad múlik.

Megjegyzés: Legyen tudatában azoknak a helyeknek, ahol kemény kódolású hivatkozásokat használok a fájlokhoz, mint például a két ikon és a highlight.js. Továbbá, mivel csak a Bootstrap és a jQuery szükséges, nyugodtan adjon hozzá vagy távolítson el minden egyéb keretrendszert. Ha eltávolít egyet, ne felejtse el eltávolítani a későbbiekben megfelelő kódsorokat.

3. lépés: CSS keret (style.css)

/ * * Remélhetőleg a bg színének szürke színűre állítása és a betűtípus megváltoztatása megkönnyíti a webhely fogyasztását */ body {background: szürke; font-family: 'Open Sans', sans-serif; }

/*

* Ez biztosítja, hogy a navigációs sáv mindenen felül legyen */ nav {z-index: 9999; }

/*

* Így jobban olvashatóvá kell tenni a bekezdés szövegét */ p {font-size: 18px; margin-top: 5 képpont; margin-bottom: 5 képpont; }

/*

* Ez biztosítja, hogy az összes kódblokk helyesen van formázva */ code {text-align: left; }

/*

* Nem akarom, hogy a listákon szerepeljenek a felsorolásjelek */ li {list-style-type: none; }

/*

* A linkek alapértelmezés szerint kék színűek, és azt szeretném, hogy illeszkedjenek a Bootstrap stílusához */ li a, a {szín: fehér; }

/*

* Egy osztálycímkét a navigációs sávot tartalmazó div-hez kötök, hogy a tartalom ne legyen átfedésben */.navFix {padding-bottom: 70px; }

/*

* A megnövelt méret kiterjeszti a navigációs sávot */.social-media {font-size: 1.3em; }

/*

* A legördülő linkek alapértelmezett kiemelési színe a fehér */.dropdown-a a: hover {background-color: #212529; }

/*

* A pdf -ek megjelenítését egy bizonyos magasságra kényszeríti */.pdfFill {magasság: 45rem; }

/*

* Adjon hozzá bizonyos távolságot a gombok és a kódblokkok között */.codeStyle {padding-top: 30px; }

A tartalom-alapú CSS-elemeket ebbe a keretbe foglaltam, hogy megpróbálhassak egy kis időt később megspórolni. Ezek mind nagyon egyszerűek, és többnyire életminőségbeli változások, amelyek megkönnyítik a portfólióval való interakciót az olvasók számára.

nav z-index

Nagyon korlátozott mennyiségű webfejlesztési tapasztalattal rendelkezem, ezért nem vagyok biztos abban, hogy ez gyakori probléma-e a Bootstrap navigációs sávjának megvalósításakor, de elölről-hátra tájolási specifikáció nélkül a navigációs sáv valójában más tartalmak alatt jelenik meg, mint pl. Bootstrap kártyái. Ez leginkább az összecsukható navigációs sávon figyelhető meg, de a biztonság kedvéért mindenesetre belefoglaltam az indexváltozást.

kód igazítása

Mivel jellemzően a Bootstrap "igazol-tartalom-központ" és "szöveg-központ" osztályait használom az elemek igazításához, nem szeretném, ha a kódom örökölné ezt a középre igazított jelleget. Ez könnyen megoldható, ha felülírja az igazítási változtatásokat, és a kódcímkéket balra igazítja: ez megőrzi a tabulátorok közötti távolságot a kódban.

navFix párnázás

Ha a Bootstrap navigációs sávja az oldal tetejéhez ragad, a tartalom betöltődik alatta. Úgy gondolom, hogy ez azért történik, mert a navigációs sáv valójában a nézetablak tetejére ragadt, nem pedig az oldalra. Ettől függetlenül ez megoldható a navigációs sáv és a tartalom többi része közötti tér növelésével.

pdf magasság

A pdf fájlok alapértelmezett magassága hihetetlenül kicsi. Lényegében olvashatatlan, ezért megváltoztattam a magasságot, hogy megpróbálhassak elegendő helyet adni egyszerre nagyjából egy oldalnak.

4. lépés: Javascript keret (javascript.js)

/ * * Ez megkeresi a „toggle” osztályú elemeket, és elrejti vagy elrejti azokat. */ 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 = "nincs"; }

divID.style.display = "blokk";

}

hamis visszatérés;

}

/*

* Kód, amelyet bizonyos sorrendben kell futtatni */ $ (dokumentum).ready (function () {/ * * Tartalom betöltése fájlokból */

/*

* Kicsit késleltetni az adatok betöltését */ setTimeout (function () {/ * * Jelölje ki az összes kódot, amelyet betöltöttek a */ $ ('pre code') fájlba. Mindegyik (function (i, block) { hljs.highlightBlock (blokk);});}, 1000); });

Annak érdekében, hogy ezt a portfóliót könnyen lehessen módosítani és kezelni, úgy döntöttem, hogy egyoldalas formátumot használok. Nagyrészt mindent helyben tart, és gyorsítja a tartalom betöltését.

toggleSekció

Osztályértékeket használtam annak kezelésére, hogy milyen tartalmat kell megjeleníteni vagy elrejteni, mert legtöbbször divs -t használok több elem elkülönítésére és csoportosítására. Ezt használhatja az egyes gombok csoportosítására is, de további ellenőrzést igényel a "blokk" kijelző beállítása előtt, hogy ne jelenjen meg tartalom.

dokumentum betöltése

Ezt azért vettem be, mert általában rendetlenség egy csomó független programozási kódot belefoglalni a szokásos HTML -fájlokba. A dinamikus kiemelés ezen módszerével kényszeríthetjük a folyamatot a más fájlokból származó tartalom betöltése után.

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

Ez egy példa arra, hogyan töltünk be tartalmat.

5. lépés: Navigációs sáv

Monogram

• itthon
• Rólam
• Projekt oktatóanyagok
• Keress meg

• A navigációs sáv a legösszetettebb elem a portfólióból. Az osztályok puszta kombinációja olyan, mint egy rejtvény, amely megköveteli, hogy folyamatosan nézd a szabálykönyvet.

  Bootstrap funkció

  A Bootstrap lényegében különböző osztályértékeken keresztül működik. Magát a "nav" elemet tekintve nem túl nehéz megállapítani az egyes osztályok célját:

  A "navbar" a "md" (közepes), "expand" képes, "sötét" opció. És "rögzítettük" a "csúcsra". Zavarosnak tűnik, mert az azonosítók összekeveredése, de ha úgy tekint rájuk, mint az elem mellékneveire, sokkal könnyebb megérteni, mi történik.

  Márka

  A márka az a tipikus logó és név, amelyet minden webhelyen a bal felső sarokban lát. Ez egy bevált tervezési elem, amelyet minden felhasználó elvár ezen a ponton.

  Megjegyzés: Az "i" címkék valójában a FontAwesome ikonok, és ezeket a címkéket bármelyik ikon oldaláról kaphatja meg.

  Váltó/összecsukható gomb (mobil)

  Ez a gomb csak mobileszközökön jelenik meg. De mivel a "nav" nyilatkozatba belefoglaltuk, hogy a navigációs sávnak bővíthetőnek kell lennie, ezek az elemek azonosítóikon és "adatváltó" azonosítókon keresztül kapcsolódnak egymáshoz.

  Navigációs linkek (bal oldalon)

  Ezek a linkek teljes mértékben attól függnek, hogy milyen kategóriákra van szüksége a portfólióhoz. Kiindulópontként néhány tipikus példát vettem fel, de senki sem egyforma. Lehet, hogy nincs szüksége az „Oktatóanyagok” szakaszra, mert művészeti szobrok készítésére összpontosít. Minden "li" elem másolható és beilleszthető, így ha egyszer rájött, mire van szüksége, könnyen beállíthatja a navigációt.

  Megjegyzés: Technikailag létrehozhat legördülő menüket más legördülő menükben, de nem ajánlom, hacsak nem hajlandó további CSS -t és Javascriptet hozzáadni, hogy a felület tiszta legyen.

  Navigációs linkek (jobb oldalon)

  Az "ml-auto" osztály megfelelő linklistájának megadásával a Bootstrap egyenletesen elkülöníti a két listát. Ez létrehozza a tiszta bal és jobb oldali felosztást. Úgy döntöttem, hogy ezt a teret közösségi média linkekre használom, mert ez egy nagyon gyakori és népszerű módszer a jelenlét növelésére. Ha ez nem releváns, törölheti ezeket a linkeket egy keresősávhoz, bejelentkezési adatokhoz stb. De ne feledje, hogy ez fontos terület. És a bal oldali navigációs linkekhez hasonlóan ezeket is másolhatja és beillesztheti.

  Megjegyzés: Ha a már beállított hivatkozások használatát tervezi, módosítsa a "felhasználónevet" a tényleges "href" linkeken.

  6. lépés: Kezdőlap

  

  

  

  A neved

  Programozó író játékos

  Ez a szakasz és az azt követő tartalomoldalak attól függnek, hogy mit szeretne elhelyezni a portfóliójában. Nyilván nem tudok minden egyes tartalomtípussal foglalkozni, de megpróbáltam képeket, pdf -eket, videókat, kódblokkokat és néhány tipikus zárványt beilleszteni.

  Táblázat formátuma

  A kezdőlap úgy van beállítva, hogy asztalként működjön. Nem hagyatkoznék elképesztő tervezési készségeimre a végtermék létrehozásakor, de hozzáadtam a sor- és oszlopkombinációk különböző variációit, hogy megmutassam, hogy nagyon dinamikus és rugalmas. Létrehozhat 3 sort és 2 oszlopot, hogy a gombok a bal oldalon, a tartalom pedig a jobb oldalon legyen, vagy csinálhat valami teljesen mást. Csak egy kis kísérletezés szükséges.

  Gombok

  Ezek alapvetően úgy működnek, mint a hagyományos gombok. Az egyetlen igazi Bootstrap integráció itt a stílus többi stílusához illeszkedő stílusból fakad. Ellenkező esetben hozzon létre annyi vagy kevés gombot, amennyi szükséges a tartalom bemutatásához, majd győződjön meg arról, hogy a href linkek illeszkednek a div -ek azonosítóihoz.

  Programozási kód tartalma

  A "kód" címkék azok az alapértelmezett címkék, amelyeket a highlight.js használ az összes kiemelés kezelésére. Ha emlékszik a javascript.js fájlból, van egy szakasz, ahol más fájlok tartalmát kell betölteni.

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

  • Ennek első része annak az elemnek az "azonosítóját" keresi, amelybe a tartalmat be szeretné illeszteni.
  • A második rész a betölteni kívánt fájl helye.

  Megjegyzés: A tartalom valójában nem töltődik be teljesen, mert jó eséllyel ezt a weboldalt szerver helyett, helyben szerkeszti. Ezt számos különböző módon lehet kezelni, amelyeket az Instructable végén fogok tárgyalni.

  Youtube videó

  A beágyazott "iframe" valójában magából a YouTube -ból származik. Nem fogom részletesen elmagyarázni, hogyan lehet hozzájutni hozzájuk, de amikor a "Megosztás" videóra lép, van egy "Beágyazás" opció, amely segít létrehozni a kódot, amely szükséges a videó megjelenítéséhez a weboldalon.

  7. lépés: Előretekintés

  Nagyon jó esély van arra, hogy nem fedeztem fel olyan elemet vagy tartalomtípust, amelyet fel szeretne venni a webhelyére. Szerencsére sok jó lehetőség áll rendelkezésére, hogy maga tegye meg a következő lépéseket.

  Bootstrap dokumentációja

  A Bootstrap dokumentációja remek kiindulópont, ha előre programozott elemeket keres, és példákkal rendelkezik, amelyeket másolhat és beilleszthet portfóliójába kísérletezéshez. Nem nyúltam a kártyákhoz, körhintákhoz vagy űrlapokhoz. Erősen ajánlom, hogy nézze át a "Komponensek" részt a lehetőségek megtekintéséhez.

  W3Iskolák

  A W3Schools egy csodálatos webhely, ahol szinte mindent megtudhat a webes programozással és fejlesztéssel kapcsolatban. Sokkal okosabbak, mint én, és szinte minden HTML, CSS és Javascript funkciót lefednek, amire gondolhat.

  Portfólió tárolása

  Ez az oktatható tanítja meg, hogyan tárolja webhelyét néhány különböző platformon. Ezeket a lépéseket kell megtenni, ha meg akarja mutatni az embereknek, toborzóknak stb.

  Kísérletezzen és érezze jól magát

  Az egyetlen módja annak, hogy nagyszerű portfóliót készítsen, ha kísérletezik és kipróbál bármit és mindent, ami érdekesnek tűnik. Sok divatos tervezési portfólió és webhely nagyszerű átmeneti effektusokat vagy dinamikus háttereket használ, de egyik sem előre elkészített.