Jak vytvořit elegantní a jednoduchý web s Bootstrap 4: 7 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Účelem tohoto Instructable je poskytnout těm, kteří jsou obeznámeni s programováním - HTML nebo jiným způsobem - jednoduchý úvod do vytváření online portfolia pomocí Bootstrap 4. Provedu vás počátečním nastavením webu, jak vytvořit několik různých bloků obsahu, a několik problémů, se kterými se můžete setkat.

Portfolio je rozděleno do několika menších kroků, které je třeba zkusit a lépe spravovat: rámec HTML, rámec CSS, rámec Javascript, navigační lišta a domovská stránka (s bloky obsahu).

Pokud vás moje vysvětlení něčeho stále nechává zmatenými, klidně zanechte komentář se svými dotazy, návrhy nebo vygooglete prvek, ze kterého jste zmatení. Pro programování webových stránek a Bootstrap je k dispozici mnoho zdrojů.

Poznámka: Tato příručka není všeobjímající a neměla by být používána jako náhrada za programování v HTML, CSS nebo Javascriptu.

Požadované zdroje

• Bootstrap 4
• jQuery 3.3.1

Volitelné zdroje

• Písmo Úžasné
• Fonty Google
• highlight.js

Pokud byste chtěli přeskočit na celý příklad nebo se podívat na úložiště:

• Úplný příklad
• Úložiště

Poznámka: Pro své příklady budu na obrázcích používat Sublime, pokud byste chtěli sledovat stejný textový editor.

Krok 1: Nastavení

Nastavení složky

1. Vytvořte složku, kam můžete uložit vše, co budeme stahovat. Toto bude váš kořenový adresář pro portfolio.
2. Vytvořte v něm složku s názvem „bootstrap“
3. Ve své kořenové složce portfolia vytvořte další složku s názvem „jquery“

Složka portfolia

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

Bootstrap 4

1. Navštivte jejich webové stránky a klikněte na tlačítko „Stáhnout“pod sekcí „Kompilované CSS a JS“.
2. Uložte soubor.zip do složky „Stahování“nebo na jiné vhodné místo.
3. Otevřete soubor.zip a rozbalte složky „css“a „js“do složky „bootstrap“, kterou jste vytvořili dříve.

jQuery

1. Navštivte jejich webové stránky a stáhněte si „nekomprimovaný, vývojový jQuery 3.3.1“
2. Uložte tento soubor do složky „jquery“, kterou jste vytvořili dříve.

Všechny rámce jsou nyní připraveny, až začneme pracovat na skutečném portfoliu.

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

Tvé jméno

Tento rámec není nic příliš složitého, ale chci vysvětlit obecné účely nastavení.

Bootstrap JS po jQuery

Zdá se, že mezi souborem Javascript Bootstrapu a souborem jQuery existuje nějaké překrývání. Netestoval jsem, abych zjistil, jak rozsáhlé je toto překrývání, ale jedním příkladem je rozevírací funkce, kterou používám na navigačním panelu. Pokud nejprve načtete Bootstrap, tlačítko rozevíracího seznamu nefunguje.

Písmo Úžasné

Pokud jste provedli nějaký webový vývoj, je pravděpodobné, že víte, co je FontAwesome. Pokud tomu tak není, je to sada ikon, která obsahuje sadu nástrojů pro další přizpůsobení. Je to neuvěřitelně užitečné, pokud jste jako já a nemáte absolutně žádný umělecký talent.

hightlight.js

Tento framework umožňuje dynamické zvýrazňování kódu na webových stránkách. Můžete jej importovat jako ostatní rámce, které používám, pokud používáte pouze běžné programovací jazyky, ale existuje také možnost stáhnout si vlastní sadu jazyků. Zvolil jsem druhou možnost kvůli několika jazykům makro a ini, ale je to zcela na vás.

Poznámka: Dávejte pozor na místa, kde používám pevně kódované odkazy na soubory, jako jsou dvě ikony a zvýraznění.js. Protože jsou vyžadovány pouze nástroje Bootstrap a jQuery, můžete přidat nebo odebrat jakékoli další rámce. Pokud některý odstraníte, nezapomeňte odstranit řádky kódu, které později odpovídají.

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

/ * * Doufejme, že zeslabení barvy bg na šedou a změna stylu písma usnadní používání webu */ body {background: grey; font-family: 'Open Sans', bezpatkové; }

/*

* Tím je zajištěno, že navigační lišta je nad vším */ nav {z-index: 9999; }

/*

* Tím by měl být odstavcový text čitelnější */ p {velikost písma: 18px; margin-top: 5px; margin-bottom: 5px; }

/*

* Tím je zajištěno, že všechny mé bloky kódu jsou správně formátovány */ code {text-align: left; }

/*

* Nechci, aby seznamy obsahovaly odrážky */ li {list-style-type: none; }

/*

* Odkazy jsou ve výchozím nastavení modré a chci, aby byly v souladu se stylem Bootstrap */ li a, a {color: white; }

/*

* Připojuji značku třídy k div, který obsahuje navigační lištu, aby se zajistilo, že se obsah nepřekrývá */.navFix {padding-bottom: 70px; }

/*

* Zvětšená velikost natáhne navbar */.social-media {font-size: 1.3em; }

/*

* Výchozí barva zvýraznění pro rozevírací odkazy je bílá */.dropdown-menu a: hover {background-color: #212529; }

/*

* Vynutit zobrazení divů ve formátu pdf do určité výšky */.pdfFill {výška: 45rem; }

/*

* Přidejte mezery mezi tlačítka a bloky kódu */.codeStyle {padding-top: 30px; }

Do tohoto rámce jsem vložil prvky CSS založené na obsahu, abych se vám později pokusil ušetřit čas. Všechny jsou velmi jednoduché a většinou se jedná o změny kvality života, které čtenářům usnadňují interakci s portfoliem.

nav z-index

Mám velmi omezené množství zkušeností s vývojem webu, takže si nejsem jistý, zda je to běžný problém při implementaci navigačního panelu Bootstrap, ale bez jakékoli orientační orientace zepředu dozadu se navigační panel ve skutečnosti objeví pod jiným obsahem, jako je Karty bootstrapu. To je nejnápadnější u skládacího navbaru, ale kvůli bezpečnosti jsem změnu indexu zahrnul.

zarovnání kódu

Protože k zarovnání prvků obvykle používám třídy „justify-content-center“a „text-center“společnosti Bootstrap, nechci, aby můj kód zdědil tuto povahu zarovnanou na střed. To lze snadno opravit přepsáním všech změn zarovnání a vytvořením značek kódu zarovnaných doleva: zachová se mezera mezi tabulátory v kódu.

polstrování navFix

Když je navigační panel Bootstrap přilepený k horní části stránky, načte se pod něj obsah. Věřím, že k tomu dochází, protože navbar je ve skutečnosti přilepený k horní části výřezu namísto samotné stránky. Bez ohledu na to je to vyřešeno zvětšením prostoru mezi navbarem a zbytkem obsahu.

výška pdf

Výchozí výška souborů PDF je neuvěřitelně malá. Je to v podstatě nečitelné, takže jsem změnil výšku, abych se pokusil poskytnout dostatek prostoru zhruba pro jednu stránku najednou.

Krok 4: Javascript Frame (javascript.js)

/ * * Vyhledá jakýkoli prvek se třídou 'toggle' a buď ho skryje nebo odkryje */ funkce 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 = "none"; }

divID.style.display = "block";

}

return false;

}

/*

* Kód, který je třeba spustit v určitém pořadí */ $ (dokument).ready (funkce () {/ * * Načíst obsah ze souborů */

/*

* Vynutit malé zpoždění při načítání dat */ setTimeout (funkce () {/ * * Zvýrazněte celý kód, který byl načten do */ $ ('před kód'). Každý (funkce (i, blok) { hljs.highlightBlock (block);});}, 1000); });

Aby bylo možné toto portfolio snadno upravovat a spravovat, rozhodl jsem se použít jednostránkový formát. Z větší části udržuje vše lokální a zrychluje načítání obsahu.

toggleSection

Pomocí hodnot třídy jsem spravoval, jaký obsah je třeba zobrazit nebo skrýt, protože většinu času používám divy k oddělení a seskupení více prvků dohromady. Můžete to použít také ke seskupení jednotlivých tlačítek, ale vyžaduje to dodatečnou kontrolu před nastavením „blokového“zobrazení, aby se nezobrazoval žádný obsah.

načítání dokumentu

Zahrnul jsem to, protože je obecně nepohodlné zahrnout spoustu nezávislých programovacích kódů do běžných souborů HTML. Tuto metodu dynamického zvýraznění můžeme použít k vynucení procesu po načtení obsahu z jiných souborů.

$ ('#mq2-intro'). load ("soubory/výukové programy/mq2/mq2-intro/content.html");

Toto je příklad toho, jak načteme obsah.

Krok 5: Navigační panel

Iniciály

• Domov
• O mně
• Návody k projektům
• Kontaktujte mě

• Navigační lišta je nejsložitějším prvkem ze všeho v portfoliu. Pouhá kombinace tříd z něj dělá něco jako puzzle, které vyžaduje, abyste se neustále dívali do knihy pravidel.

  Funkce bootstrapu

  Bootstrap funguje v podstatě prostřednictvím různých hodnot třídy. Při pohledu na samotný prvek „nav“není příliš obtížné zjistit účel každé třídy:

  Náš „navbar“je možnost „md“(střední), „rozbalit“a „tmavý“. A „opravili“jsme to na „vrchol“. Vypadá to matoucí, protože je to spleť identifikátorů, ale když se na ně podíváte jako na přídavná jména prvku, je mnohem snazší pochopit, co se děje.

  Značka

  Značka je typickým logem a názvem, který vidíte na všech webových stránkách vlevo nahoře. Je to osvědčený designový prvek, který v tuto chvíli každý uživatel očekává.

  Poznámka: Značky „i“jsou ve skutečnosti ikony FontAwesome a tyto značky získáte ze stránky jakékoli ikony.

  Přepínací/skládací tlačítko (mobilní)

  Toto tlačítko se zobrazuje pouze na mobilních zařízeních. Ale protože jsme do prohlášení „nav“zahrnuli, že navigační lištu je třeba rozšířit, tyto prvky se k sobě navzájem připojují prostřednictvím svých ID a identifikátorů „přepínání dat“.

  Odkazy na Navbar (levá strana)

  Tyto odkazy zcela závisí na tom, jaké kategorie potřebujete pro své portfolio. Jako výchozí bod jsem uvedl několik typických příkladů, ale nikdo není stejný. Možná nebudete potřebovat sekci „Návody“, protože se soustředíte na tvorbu uměleckých soch. Každou položku „li“lze zkopírovat a vložit, takže jakmile zjistíte, co potřebujete, navigaci snadno nastavíte.

  Poznámka: Rozbalovací nabídky můžete technicky vytvářet v jiných rozevíracích nabídkách, ale nedoporučoval bych to, pokud nejste ochotni přidat další CSS a Javascript, aby rozhraní vypadalo čistě.

  Odkazy na Navbar (pravá strana)

  Díky správnému seznamu odkazů na třídu „ml-auto“Bootstrap rovnoměrně odděluje dva seznamy rovnoměrně. Tím se vytvoří čisté rozdělení na levou a pravou stranu. Rozhodl jsem se využít tento prostor pro odkazy na sociální média, protože je to velmi běžná a oblíbená metoda ke zvýšení vaší přítomnosti. Pokud to není relevantní, můžete tyto odkazy sešrotovat pro vyhledávací lištu, přihlašovací údaje atd. Nezapomeňte však, že je to důležité místo k použití. A podobně jako odkazy na navigačním panelu na levé straně je můžete také zkopírovat a vložit.

  Poznámka: Pokud plánujete používat odkazy, které jsem již nastavil, změňte „uživatelské jméno“v samotných odkazech „href“.

  Krok 6: Domovská stránka

  

  

  

  Tvé jméno

  Programátor, spisovatel, hráč

  Tato část a vaše další stránky s obsahem budou záviset na tom, co chcete do svého portfolia vložit. Očividně nemohu řešit každý jeden typ obsahu, ale snažil jsem se zahrnout obrázky, soubory PDF, videa, bloky kódu, některé typické inkluze.

  Formát tabulky

  Domovská stránka je nastavena tak, aby fungovala jako tabulka. Při vytváření konečného produktu bych nespoléhal na své úžasné designérské schopnosti, ale přidal jsem různé variace kombinací řádků a sloupců, abych ukázal, že je velmi dynamický a flexibilní. Můžete vytvořit 3 řádky a 2 sloupce, které budou mít tlačítka vlevo a obsah vpravo, nebo můžete udělat něco úplně jiného. Chce to jen trochu experimentovat.

  Tlačítka

  Tyto funkce fungují v podstatě jako běžná tlačítka. Jediná skutečná integrace Bootstrap zde vychází ze stylu, který odpovídá zbytku tématu. V opačném případě vytvořte tolik nebo tolik tlačítek, kolik potřebujete k předvedení svého obsahu, a poté zajistěte, aby odkazy href odpovídaly ID divů.

  Obsah programovacího kódu

  Značky „kód“jsou výchozí značky, které zvýraznění.js používá ke správě veškerého zvýraznění. Pokud si pamatujete ze souboru javascript.js, existuje sekce pro načtení obsahu z jiných souborů.

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

  • V první části se hledá „id“prvku, do kterého chcete vložit obsah.
  • Druhá část je umístění souboru, do kterého chcete načíst.

  Poznámka: Obsah se ve skutečnosti nenačte úplně, protože je velká šance, že tuto webovou stránku upravujete lokálně místo na serveru. To lze vyřešit několika různými způsoby, kterým se budu věnovat na konci Instructable.

  Video z YouTube

  Vložený „iframe“ve skutečnosti pochází ze samotného YouTube. Nebudu podrobně vysvětlovat, jak je získat, ale když přejdete na „Sdílet“video, existuje možnost „Vložit“, která vám pomůže vygenerovat kód nezbytný k zobrazení vašeho videa na webové stránce.

  Krok 7: Pohled vpřed

  Je velmi pravděpodobné, že jsem nepokryl nějaký prvek nebo typ obsahu, který chcete na svůj web zahrnout. Naštěstí existuje mnoho dobrých možností, jak podniknout další kroky sami.

  Dokumentace bootstrapu

  Dokumentace Bootstrap je skvělým místem pro začátek, pokud hledáte prvky, které jsou předem naprogramovány a mají příklady, které můžete zkopírovat a vložit do svého portfolia, abyste s nimi mohli experimentovat. Nedotkl jsem se karet, kolotočů ani formulářů. Důrazně doporučuji, abyste si možnosti prohlédli v části „Komponenty“.

  W3Školy

  W3Schools je úžasný web, kde se můžete dozvědět téměř cokoli, co souvisí s webovým programováním a vývojem. Jsou mnohem chytřejší než já a pokrývají téměř všechny funkce HTML, CSS a Javascript, na které si vzpomenete.

  Hostování vašeho portfolia

  Tento Instructable vás naučí hostovat váš web na několika různých platformách. Toto jsou kroky, které musíte udělat, pokud chcete být schopni ukázat lidem, náborářům atd. Své portfolio.

  Experimentujte a bavte se

  Jediný způsob, jak vytvořit skvělé portfolio, je experimentovat a zkoušet cokoli a vše, co vypadá zajímavě. Mnoho efektních designových portfolií a webových stránek používá skvělé přechodové efekty nebo dynamické pozadí, ale žádný z nich nebyl předem vytvořen.