Ako vytvoriť elegantný a jednoduchý web s bootstrapom 4: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Cieľom tohto Instructable je poskytnúť osobám oboznámeným s programovaním - HTML alebo iným spôsobom - jednoduchý úvod do vytvárania online portfólia s nástrojom Bootstrap 4. Prevediem vás počiatočným nastavením webovej stránky a vytvorením niekoľkých rôznych blokov obsahu., a niekoľko problémov, s ktorými sa môžete stretnúť.

Portfólio je rozdelené do niekoľkých menších krokov, aby sa pokúsil zaistiť lepšie spravovanie: rámec HTML, rámec CSS, rámec Javascript, navigačný panel a domovská stránka (s blokmi obsahu).

Ak vo vás moje vysvetlenia niečoho stále vyvolávajú zmätok, neváhajte zanechať komentár so svojimi otázkami, návrhmi alebo vygoogliť prvok, v ktorom ste zmätení. Existuje veľa zdrojov na programovanie webových stránok a programu Bootstrap.

Poznámka: Táto príručka nie je všeobjímajúca a nemala by slúžiť ako alternatíva k naučeniu sa programovať v HTML, CSS alebo Javascript.

Požadované zdroje

• Bootstrap 4
• jQuery 3.3.1

Voliteľné zdroje

• FontAwesome
• Fonty Google
• highlight.js

Ak by ste chceli preskočiť na celý príklad alebo sa pozrieť na úložisko:

• Úplný príklad
• Úložisko

Poznámka: Na svojich príkladoch budem používať Sublime na obrázkoch, ak by ste chceli postupovať spolu s rovnakým textovým editorom.

Krok 1: Nastavenie

Nastavenie priečinka

1. Vytvorte priečinok, kde budete môcť uložiť všetko, čo budeme sťahovať. Toto bude váš koreňový adresár pre portfólio.
2. Vytvorte v ňom priečinok s názvom „bootstrap“
3. Vytvorte vo svojom koreňovom priečinku portfólia ďalší priečinok s názvom „jquery“

Priečinok portfólia

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

Bootstrap 4

1. Navštívte ich webovú stránku a kliknite na tlačidlo „Stiahnuť“pod sekciou „Kompilované CSS a JS“.
2. Uložte súbor.zip do priečinka „Stiahnuté súbory“alebo na iné vhodné miesto.
3. Otvorte súbor.zip a rozbaľte priečinky „css“a „js“do priečinka „bootstrap“, ktorý ste vytvorili predtým.

jQuery

1. Navštívte ich webovú stránku a stiahnite si „nekomprimovaný, vývojový jQuery 3.3.1“
2. Uložte tento súbor do priečinka „jquery“, ktorý ste vytvorili predtým.

Všetky rámce sú teraz pripravené, keď začneme pracovať na skutočnom portfóliu.

Krok 2: Rámček HTML (index.html)

Tvoje meno

Tento rámec nie je ničím príliš zložitým, ale chcem vysvetliť všeobecné účely nastavenia.

Bootstrap JS po jQuery

Zdá sa, že medzi súborom Javascript programu Bootstrap a súborom jQuery dochádza k určitému prekrývaniu. Netestoval som, aby som zistil, aké rozsiahle je toto prekrytie, ale jedným z príkladov je rozbaľovacia funkcia, ktorú používam na navigačnom paneli. Ak najskôr načítate Bootstrap, rozbaľovacie tlačidlo nefunguje.

FontAwesome

Ak ste urobili nejaký vývoj webových aplikácií, je pravdepodobné, že viete, čo je FontAwesome. Ak to tak nie je, je to sada ikon, ktorá obsahuje sadu nástrojov na ďalšie prispôsobenie. Je to neuveriteľne užitočné, ak ste ako ja a nemáte absolútne žiadny umelecký talent.

hightlight.js

Tento rámec umožňuje dynamické zvýraznenie kódu na webových stránkach. Môžete ho importovať ako ostatné rámce, ktoré používam, ak používate iba bežné programovacie jazyky, ale existuje aj možnosť stiahnuť si vlastnú sadu jazykov. Vybral som si druhú možnosť z dôvodu niekoľkých jazykov makro a ini, ale je to úplne na vás.

Poznámka: Dávajte si pozor na miesta, kde používam pevne kódované odkazy na súbory, ako sú dve ikony a zvýraznenie.js. Pretože sú požadované iba nástroje Bootstrap a jQuery, môžete pridať alebo odstrániť akékoľvek ďalšie rámce. Ak nejaký odstránite, nezabudnite odstrániť riadky kódu, ktoré neskôr zodpovedajú.

Krok 3: Rámček CSS (style.css)

/ * * Našťastie zmiernenie farby bg na sivú a zmena štýlu písma uľahčuje používanie webovej stránky */ body {background: grey; rodina fontov: 'Open Sans', sans-serif; }

/*

* Vďaka tomu je navigačný panel nad všetkým */ nav {z-index: 9999; }

/*

* Vďaka tomu bude odsek textu čitateľnejší */ p {veľkosť písma: 18 pixlov; okraj hore: 5 pixelov; okrajové dno: 5 pixelov; }

/*

* Tým je zaistené, že všetky moje bloky kódu sú správne naformátované */ code {text-align: left; }

/*

* Nechcem, aby zoznamy obsahovali odrážky */ li {list-style-type: none; }

/*

* Odkazy sú predvolene modré a chcem, aby boli v súlade so štýlom Bootstrapu */ li a, a {color: white; }

/*

* Pripájam značku triedy k div, ktorý obsahuje navbar, aby som sa uistil, že sa obsah neprekrýva */.navFix {padding-bottom: 70px; }

/*

* Zväčšená veľkosť natiahne navbar */.social-media {font-size: 1.3em; }

/*

* Predvolená farba zvýraznenia pre rozbaľovacie odkazy je biela */.rozbaľovacia ponuka a: hover {farba-pozadia: #212529; }

/*

* Vynútiť zobrazenie divov vo formáte pdf do určitej výšky */.pdfFill {výška: 45rem; }

/*

* Pridajte medzi tlačidlá a bloky kódu medzery */.codeStyle {padding-top: 30px; }

Do tohto rámca som zahrnul prvky CSS založené na obsahu, aby som sa pokúsil ušetriť vás neskôr. Všetky sú veľmi jednoduché a väčšinou ide o zmeny kvality života, ktoré čitateľom uľahčujú interakciu s portfóliom.

nav z-index

Mám veľmi obmedzené množstvo skúseností s vývojom webu, takže si nie som istý, či je to bežný problém pri implementácii navigačného panela Bootstrap, ale bez špecifikácie orientácie spredu dozadu sa navigačný panel v skutočnosti zobrazí pod iným obsahom, ako je Karty bootstrapu. Toto je najpozoruhodnejšie na skladacom navbar, ale kvôli bezpečnosti som napriek tomu zahrnul zmenu indexu.

zarovnanie kódu

Pretože na zarovnanie prvkov zvyčajne používam triedy „justify-content-center“a „text-center“spoločnosti Bootstrap, nechcem, aby môj kód zdedil túto povahu zarovnanú na stred. To sa dá ľahko opraviť prepísaním všetkých zmien zarovnania a vytvorením značiek kódu zarovnaných doľava: zachovajú sa tak medzery medzi kartami v kóde.

polstrovanie navFix

Keď je navigačný panel Bootstrap prilepený k hornej časti stránky, načíta sa pod ním obsah. Verím, že k tomu dochádza, pretože navbar je v skutočnosti prilepený k hornej časti výrezu namiesto samotnej stránky. Bez ohľadu na to je to vyriešené zväčšením priestoru medzi navbarom a zvyškom obsahu.

výška pdf

Predvolená výška súborov PDF je neuveriteľne malá. Je v podstate nečitateľný, preto som zmenil výšku, aby som sa pokúsil poskytnúť dostatok priestoru zhruba na jednu stránku súčasne.

Krok 4: Rámec JavaScriptu (javascript.js)

/ * * Hľadá akýkoľvek prvok s triedou 'toggle' a buď ho skryje alebo odkryje */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

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

divID.style.display = "block";

}

return false;

}

/*

* Kód, ktorý je potrebné spustiť v určitom poradí */ $ (dokument).ready (funkcia () {/ * * Načítať obsah zo súborov */

/*

* Vynútiť malé oneskorenie načítania údajov */ setTimeout (function () {/ * * Zvýraznite všetok kód, ktorý bol načítaný do */ $ ('pred kód'). Každý (funkcia (i, blok) { hljs.highlightBlock (block);});}, 1000); });

Aby bolo možné toto portfólio ľahko upravovať a spravovať, rozhodol som sa použiť jednostránkový formát. Z väčšej časti uchováva všetko lokálne a urýchľuje načítanie obsahu.

toggleSection

Hodnoty triedy som použil na správu toho, aký obsah je potrebné zobraziť alebo skryť, pretože väčšinu času používam divy na oddelenie a zoskupenie viacerých prvkov dohromady. Môžete to použiť aj na zoskupenie jednotlivých tlačidiel, ale vyžaduje to dodatočnú kontrolu pred nastavením „blokového“zobrazenia, aby sa nezobrazoval žiadny obsah.

načítanie dokumentu

Zahrnul som to, pretože zahrnúť veľa nezávislých programovacích kódov do bežných súborov HTML je vo všeobecnosti náročné. Túto metódu dynamického zvýraznenia môžeme použiť na vynútenie postupu po načítaní obsahu z iných súborov.

$ ('#mq2-intro'). load ("súbory/návody/mq2/mq2-intro/content.html");

Toto je príklad, ako načítame obsah.

Krok 5: Navigačný panel

Iniciály

• Domov
• O mne
• Návody na projekty
• Kontaktujte ma

Navigačný panel je najkomplexnejším prvkom zo všetkého v portfóliu. Samotná kombinácia tried z neho robí niečo ako puzzle, ktoré vyžaduje, aby ste sa neustále pozerali do knihy pravidiel.

Funkcia bootstrapu

Bootstrap funguje v podstate prostredníctvom rôznych hodnôt triedy. Pri pohľade na samotný prvok „nav“nie je príliš ťažké zistiť účel každej triedy:

Náš „navbar“je možnosť „md“(stredná), „rozbaliť“a „tmavá“. A „opravili“sme to na „vrchol“. Vyzerá to mätúco, pretože je to spleť identifikátorov, ale ak sa na ne pozriete ako na prídavné mená k prvku, je oveľa jednoduchšie porozumieť tomu, čo sa deje.

Značka

Značka je typickým logom a názvom, ktorý nájdete na každej webovej stránke vľavo hore. Je to osvedčený dizajnový prvok, ktorý v tomto bode každý používateľ očakáva.

Poznámka: Značky „i“sú v skutočnosti ikony FontAwesome a tieto značky získate z ľubovoľnej stránky ikony.

Prepínač/skladacie tlačidlo (mobil)

Toto tlačidlo sa zobrazuje iba na mobilných zariadeniach. Keďže sme však do vyhlásenia „nav“zahrnuli, že navigačnú lištu je potrebné rozšíriť, tieto prvky sa k sebe navzájom pripájajú pomocou svojich identifikátorov a identifikátorov „prepínania údajov“.

Odkazy na Navbar (ľavá strana)

Tieto odkazy úplne závisia od toho, aké kategórie potrebujete pre svoje portfólio. Ako východisko som uviedol niekoľko typických príkladov, ale nikto nie je rovnaký. Možno nebudete potrebovať sekciu „Návody“, pretože sa zameriavate na tvorbu umeleckých sôch. Každú položku „li“je možné skopírovať a prilepiť, takže akonáhle prídete na to, čo potrebujete, navigáciu ľahko nastavíte.

Poznámka: Rozbaľovacie ponuky môžete technicky vytvárať v rámci iných rozbaľovacích ponúk, ale neodporúčal by som to, pokiaľ nie ste ochotní pridať ďalšie CSS a Javascript, aby bolo rozhranie čisté.

Odkazy na Navbar (pravá strana)

Vďaka správnemu zoznamu odkazov na triedu „ml-auto“Bootstrap rovnomerne oddeľuje tieto dva zoznamy rovnomerne. To vytvára čisté rozdelenie ľavej a pravej strany. Rozhodol som sa využiť tento priestor na odkazy na sociálne siete, pretože je to veľmi bežný a populárny spôsob, ako zvýšiť vašu prítomnosť. Ak to nie je relevantné, môžete tieto odkazy zošrotovať na vyhľadávací panel, prihlasovacie údaje atď. Nezabudnite však, že je to dôležité miesto na použitie. A podobne ako odkazy na navigačnom paneli na ľavej strane, môžete ich skopírovať a prilepiť.

Poznámka: Ak plánujete používať odkazy, ktoré som už nastavil, zmeňte „používateľské meno“v samotných odkazoch „href“.

Krok 6: Domovská stránka

Tvoje meno

Hráč programátora a spisovateľa

Táto sekcia a vaše ďalšie stránky s obsahom budú závisieť od toho, čo chcete vložiť do svojho portfólia. Očividne nemôžem riešiť každý jeden typ obsahu, ale pokúsil som sa zahrnúť obrázky, súbory PDF, videá, bloky kódu a niektoré typické inklúzie.

Formát tabuľky

Domovská stránka je nastavená tak, aby fungovala ako tabuľka. Pri vytváraní konečného produktu by som sa nespoliehal na svoje úžasné dizajnérske schopnosti, ale pridal som rôzne variácie kombinácií riadkov a stĺpcov, aby som ukázal, že je veľmi dynamický a flexibilný. Môžete vytvoriť 3 riadky a 2 stĺpce, v ktorých budú mať tlačidlá vľavo a obsah vpravo, alebo môžete urobiť niečo úplne iné. Chce to len malé experimentovanie.

Gombíky

Fungujú v podstate ako bežné tlačidlá. Jediná skutočná integrácia programu Bootstrap tu pochádza zo štýlu, ktorý sa zhoduje so zvyškom témy. V opačnom prípade vytvorte toľko alebo málo tlačidiel, koľko potrebujete na predvádzanie svojho obsahu, a potom sa uistite, že odkazy href zodpovedajú identifikátorom div.

Obsah programovacieho kódu

Značky „kódu“sú predvolené značky, ktoré zvýraznenie.js používa na správu celého zvýraznenia. Ak si pamätáte zo súboru javascript.js, existuje sekcia na načítanie obsahu z iných súborov.

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

• V prvej časti sa hľadá „id“prvku, do ktorého chcete vložiť obsah.
• Druhá časť je umiestnenie súboru, do ktorého chcete načítať.

Poznámka: Obsah sa v skutočnosti nenačíta úplne, pretože je veľká pravdepodobnosť, že túto webovú stránku upravujete lokálne namiesto na serveri. Toto je možné vyriešiť niekoľkými rôznymi spôsobmi, ktorými sa budem zaoberať na konci Pokynu.

Video na YouTube

Vložený „iframe“skutočne pochádza zo samotného YouTube. Nebudem podrobne vysvetľovať, ako ich získať, ale keď prejdete na položku „Zdieľať“video, existuje možnosť „Vložiť“, ktorá vám pomôže vygenerovať kód potrebný na zobrazenie videa na webovej stránke.

Krok 7: Hľadieť dopredu

Je veľmi pravdepodobné, že som nepokryl nejaký prvok alebo typ obsahu, ktoré chcete zahrnúť na svoj web. Našťastie existuje veľa dobrých možností, ako urobiť ďalšie kroky sami.

Dokumentácia bootstrapu

Dokumentácia Bootstrap je skvelým miestom na začiatok, ak hľadáte prvky, ktoré sú vopred naprogramované a majú príklady, ktoré môžete skopírovať a prilepiť do svojho portfólia a experimentovať s nimi. Nedotkol som sa kariet, kolotočov ani formulárov. Vrelo odporúčam, aby ste si možnosti prezreli v časti „Komponenty“.

W3Školy

W3Schools je úžasná webová stránka, kde sa môžete dozvedieť všetko o programovaní a vývoji webu. Sú oveľa múdrejší ako ja a pokrývajú takmer všetky funkcie HTML, CSS a Javascript, na ktoré si spomeniete.

Hostiteľ vášho portfólia

Tento návod vás naučí, ako hostiť svoje webové stránky na niekoľkých rôznych platformách. Toto sú kroky, ktoré musíte urobiť, ak chcete byť schopní ukázať ľuďom, náborovým pracovníkom atď. Svoje portfólio.

Experimentujte a bavte sa

Jediný spôsob, ako vytvoriť skvelé portfólio, je experimentovať a skúšať čokoľvek a všetko, čo vyzerá zaujímavo. Mnoho efektných portfólií dizajnu a webových stránok používa skvelé prechodové efekty alebo dynamické pozadia, ale žiadne nebolo pripravené.