Jak zrobić elegancką i prostą stronę internetową za pomocą Bootstrap 4: 7 kroków?

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Celem tej instrukcji jest przedstawienie osobom zaznajomionym z programowaniem - HTML lub innym - prostego wprowadzenia do tworzenia portfolio online za pomocą Bootstrap 4. Przeprowadzę Cię przez początkową konfigurację witryny, jak utworzyć kilka różnych bloków treści i kilka problemów, które możesz napotkać.

Portfolio jest podzielone na kilka mniejszych kroków, aby uczynić je łatwiejszym w zarządzaniu: ramka HTML, ramka CSS, ramka JavaScript, pasek nawigacyjny i strona główna (z blokami treści).

Jeśli moje wyjaśnienia dotyczące czegoś nadal pozostawiają Cię zdezorientowanym, możesz zostawić komentarz ze swoimi pytaniami, sugestiami lub wygooglować element, co do którego jesteś zdezorientowany. Dostępnych jest wiele zasobów do programowania stron internetowych i Bootstrapa.

Uwaga: ten przewodnik nie jest wyczerpujący i nie powinien być używany jako substytut nauki programowania w HTML, CSS lub JavaScript.

Wymaganych zasobów

• Bootstrap 4
• jZapytanie 3.3.1

Zasoby opcjonalne

• CzcionkaAwesome
• Czcionki Google
• highlight.js

Jeśli chcesz przejść do pełnego przykładu lub zajrzeć do repozytorium:

• Pełny przykład
• Magazyn

Uwaga: Będę używał Sublime na zdjęciach dla moich przykładów, jeśli chcesz śledzić wraz z tym samym edytorem tekstu.

Krok 1: Konfiguracja

Konfiguracja folderu

1. Utwórz folder w miejscu, w którym możesz przechowywać wszystko, co będziemy pobierać. To będzie twój katalog główny dla portfela.
2. Utwórz folder wewnątrz tego o nazwie „bootstrap”
3. Utwórz kolejny folder w głównym folderze portfolio o nazwie „jquery”

Folder portfela

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

Bootstrap 4

1. Odwiedź ich stronę internetową i kliknij przycisk „Pobierz” pod sekcją „Skompilowany CSS i JS”.
2. Zapisz plik.zip w folderze „Pobrane” lub w innej dogodnej lokalizacji.
3. Otwórz plik.zip i wyodrębnij foldery „css” i „js” do utworzonego wcześniej folderu „bootstrap”.

jQuery

1. Odwiedź ich stronę internetową i pobierz „nieskompresowany, programistyczny jQuery 3.3.1”
2. Zapisz ten plik w utworzonym wcześniej folderze „jquery”.

Wszystkie frameworki są teraz gotowe do rozpoczęcia pracy nad faktycznym portfolio.

Krok 2: Ramka HTML (index.html)

Twoje imię

Ta rama nie jest zbyt skomplikowana, ale chcę wyjaśnić ogólne cele konfiguracji.

Bootstrap JS po jQuery

Wydaje się, że plik JavaScript Bootstrap nakłada się na siebie i plik jQuery. Nie testowałem, jak rozległe jest to nakładanie się, ale jednym z przykładów jest funkcja rozwijana, której używam na pasku nawigacyjnym. Jeśli najpierw załadujesz Bootstrap, przycisk rozwijany nie działa.

CzcionkaAwesome

Jeśli zajmowałeś się tworzeniem stron internetowych, prawdopodobnie wiesz, czym jest FontAwesome. Jeśli jednak tak nie jest, jest to zestaw ikon, który zawiera zestaw narzędzi do dodatkowej personalizacji. Jest to niesamowicie przydatne, jeśli jesteś taki jak ja i nie masz absolutnie żadnego talentu artystycznego.

wyróżnienie.js

Ten framework pozwala na dynamiczne podświetlanie kodu na stronach internetowych. Możesz go zaimportować, podobnie jak pozostałe frameworki, których używam, jeśli używasz tylko popularnych języków programowania, ale istnieje również opcja pobrania niestandardowego zestawu języków. Wybrałem tę drugą opcję ze względu na kilka języków makro i ini, ale to zależy wyłącznie od Ciebie.

Uwaga: bądź świadomy miejsc, w których używam zakodowanych linków do plików, takich jak dwie ikony i highlight.js. Ponadto, ponieważ wymagane są tylko Bootstrap i jQuery, możesz dodawać lub usuwać wszelkie inne frameworki. Jeśli je usuniesz, pamiętaj, aby usunąć te wiersze kodu, które później odpowiadają.

Krok 3: Ramka CSS (style.css)

/* * Miejmy nadzieję, że stonowanie koloru bg do szarego i zmiana stylu czcionki ułatwi korzystanie z serwisu */ body { background: gray; rodzina czcionek: 'Open Sans', bezszeryfowa; }

/*

* Dzięki temu pasek nawigacji znajduje się nad wszystkim */ nav { z-index: 9999; }

/*

* Powinno to uczynić tekst akapitu bardziej czytelnym */ p { font-size: 18px; margines górny: 5px; margines-dolny: 5px; }

/*

* Dzięki temu wszystkie moje bloki kodu są poprawnie sformatowane */ code { text-align: left; }

/*

* Nie chcę, aby listy miały punktory */ li { list-style-type: none; }

/*

* Linki są domyślnie niebieskie i chcę, aby pasowały do stylu Bootstrapa */ li a, a{ color: white; }

/*

* Łączę znacznik klasy z elementem div zawierającym pasek nawigacyjny, aby upewnić się, że zawartość nie nakłada się */.navFix { padding-bottom: 70px; }

/*

* Zwiększony rozmiar rozciąga pasek nawigacyjny */.social-media { font-size: 1.3em; }

/*

* Domyślny kolor podświetlenia linków rozwijanych to biały */.dropdown-menu a:hover { background-color: #212529; }

/*

* Wymuś wyświetlanie plików div na określonej wysokości */.pdfFill { height: 45rem; }

/*

* Dodaj trochę odstępów między przyciskami i blokami kodu */.codeStyle { padding-top: 30px; }

Umieściłem w tej ramce elementy CSS oparte na treści, aby spróbować zaoszczędzić ci trochę czasu później. Wszystkie są bardzo proste i w większości są to zmiany poprawiające jakość życia, które ułatwiają czytelnikom interakcję z portfolio.

nav z-indeks

Mam bardzo ograniczone doświadczenie w tworzeniu stron internetowych, więc nie jestem pewien, czy jest to częsty problem podczas wdrażania paska nawigacyjnego Bootstrap, ale bez specyfikacji orientacji od przodu do tyłu pasek nawigacyjny pojawi się pod innymi treściami, takimi jak Karty Bootstrapa. Jest to najbardziej zauważalne przy składanym pasku nawigacyjnym, ale i tak uwzględniłem zmianę indeksu dla bezpieczeństwa.

wyrównanie kodu

Ponieważ zazwyczaj używam klas „justify-content-center” i „text-center” Bootstrapa do wyrównywania elementów, nie chcę, aby mój kod dziedziczył tę wyśrodkowaną naturę. Można to łatwo naprawić, nadpisując wszelkie zmiany wyrównania i wyrównując znaczniki kodu do lewej: zachowuje to odstępy tabulacji w kodzie.

Wypełnienie navFix

Gdy pasek nawigacyjny Bootstrap przyklei się do górnej części strony, zawartość zostanie załadowana pod nim. Uważam, że dzieje się tak, ponieważ pasek nawigacyjny jest faktycznie przyklejony do górnej części widocznego obszaru, a nie do samej strony. Niezależnie od tego jest to naprawione poprzez zwiększenie odstępu między paskiem nawigacyjnym a resztą treści.

wysokość pdf

Domyślna wysokość plików pdf jest niewiarygodnie mała. Zasadniczo jest nieczytelny, więc zmieniłem wysokość, aby zapewnić wystarczająco dużo miejsca na mniej więcej jedną stronę na raz.

Krok 4: Ramka JavaScript (javascript.js)

/* * Wyszukuje dowolny element z klasą 'toggle' i ukrywa go lub odkrywa */ 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 = "brak"; }

divID.style.display = "blok";

}

zwróć fałsz;

}

/*

* Kod, który należy uruchomić w określonej kolejności */ $(document).ready(function() { /* * Wczytywanie treści z plików */

/*

* Wymuś niewielkie opóźnienie w załadowaniu danych */ setTimeout(function() { /* * Zaznacz cały kod, który został załadowany w */ $('pre code').each(function(i, block) { hljs.highlightBlock(blok); }); }, 1000); });

Aby to portfolio było łatwe w modyfikowaniu i zarządzaniu, zdecydowałem się na użycie formatu jednostronicowego. W większości zachowuje wszystko lokalnie i przyspiesza ładowanie treści.

przełącz sekcję

Użyłem wartości klas do zarządzania treścią, która ma być pokazana lub ukryta, ponieważ przez większość czasu używam div do oddzielania i grupowania wielu elementów. Możesz użyć tego do grupowania pojedynczych przycisków, ale wymaga to dodatkowego sprawdzenia przed ustawieniem wyświetlania „bloku”, aby nie wyświetlać żadnej treści.

ładowanie dokumentu

Dołączyłem to, ponieważ generalnie jest bałagan w umieszczaniu kilku niezależnych kodów programistycznych w zwykłych plikach HTML. Możemy użyć tej metody dynamicznego wyróżniania, aby wymusić proces, który nastąpi po załadowaniu treści z innych plików.

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

To jest przykład tego, jak będziemy ładować zawartość.

Krok 5: Pasek nawigacyjny

Inicjały

• Dom
• O mnie
• Projekty Poradniki
• Skontaktuj się ze mną

• Pasek nawigacyjny to najbardziej złożony element ze wszystkiego w portfolio. Sama kombinacja klas sprawia, że jest to coś w rodzaju łamigłówki, która wymaga ciągłego przeglądania księgi zasad.

  Funkcjonalność Bootstrapa

  Bootstrap działa zasadniczo poprzez różne wartości klas. Patrząc na sam element „nav”, nie jest trudno ustalić przeznaczenie każdej klasy:

  Nasz "pasek nawigacyjny" to opcja "md" (średnia), "rozszerzalna", "ciemna". I „naprawiliśmy” go do „szczytu”. Wygląda to dezorientująco, ponieważ jest mieszanką identyfikatorów, ale jeśli spojrzysz na nie jako na przymiotniki dla elementu, znacznie łatwiej jest zrozumieć, co się dzieje.

  Marka

  Marka to typowe logo i nazwa, które widzisz na każdej stronie w lewym górnym rogu. To wypróbowany i prawdziwy element projektu, którego w tym momencie oczekuje każdy użytkownik.

  Uwaga: Tagi „i” to w rzeczywistości ikony FontAwesome, które otrzymujesz ze strony dowolnej ikony.

  Przełącznik/składany przycisk (mobilny)

  Ten przycisk pojawia się tylko na urządzeniach mobilnych. Ale ponieważ w deklaracji „nav” zawarliśmy, że pasek nawigacyjny musi być rozwijalny, elementy te łączą się ze sobą za pomocą identyfikatorów i identyfikatorów „data-toggle”.

  Łącza paska nawigacyjnego (lewa strona)

  Te linki całkowicie zależą od kategorii, których potrzebujesz do swojego portfolio. Jako punkt wyjścia podałem kilka typowych przykładów, ale żaden nie jest taki sam. Możesz nie potrzebować sekcji „Samouczki”, ponieważ koncentrujesz się na tworzeniu rzeźb artystycznych. Każdy element „li” można skopiować i wkleić, więc gdy już zorientujesz się, czego potrzebujesz, łatwo jest ustawić nawigację.

  Uwaga: technicznie możesz tworzyć rozwijane menu w innych rozwijanych menu, ale nie polecam tego, chyba że chcesz dodać więcej CSS i JavaScript, aby interfejs wyglądał czysto.

  Łącza paska nawigacyjnego (prawa strona)

  Nadając właściwej liście linków klasę „ml-auto”, Bootstrap równomiernie rozdziela obie listy. Tworzy to czysty podział na lewą i prawą stronę. Zdecydowałem się wykorzystać tę przestrzeń na linki do mediów społecznościowych, ponieważ jest to bardzo powszechna i popularna metoda na zwiększenie Twojej obecności. Jeśli to nie jest istotne, możesz usunąć te linki do paska wyszukiwania, informacji logowania itp. Pamiętaj jednak, że jest to ważna przestrzeń do wykorzystania. Podobnie jak w przypadku linków paska nawigacyjnego po lewej stronie, możesz je również kopiować i wklejać.

  Uwaga: Jeśli planujesz używać już skonfigurowanych przeze mnie linków, zmień „nazwę użytkownika” w samych linkach „href”.

  Krok 6: Strona główna

  

  

  

  Twoje imię

  Programista Pisarz Gracz

  Ta sekcja i kolejne strony treści będą zależeć od tego, co chcesz umieścić w swoim portfolio. Oczywiście nie mogę zająć się każdym typem treści, ale starałem się dołączyć obrazy, pdfy, filmy, bloki kodu, niektóre typowe wtrącenia.

  Format tabeli

  Strona główna jest skonfigurowana jako tabela. Nie polegałbym na moich niesamowitych umiejętnościach projektowych, aby stworzyć Twój produkt końcowy, ale dodałem różne warianty kombinacji wierszy i kolumn, aby pokazać, że jest bardzo dynamiczny i elastyczny. Możesz utworzyć 3 wiersze i 2 kolumny, aby mieć przyciski po lewej stronie i zawartość po prawej stronie, lub możesz zrobić coś zupełnie innego. Wystarczy trochę poeksperymentować.

  guziki

  Działają one zasadniczo tak, jak zwykłe przyciski. Jedyna prawdziwa integracja Bootstrap tutaj wynika ze stylizacji, która pasuje do reszty motywu. W przeciwnym razie utwórz tyle lub najmniej przycisków, ile potrzebujesz, aby zaprezentować swoje treści, a następnie upewnij się, że łączysz linki href z identyfikatorami div.

  Zawartość kodu programowania

  Tagi „code” są domyślnymi tagami, których używa Highlight.js do zarządzania wszystkimi wyróżnieniami. Jeśli pamiętasz z pliku javascript.js, istnieje sekcja do załadowania treści z innych plików.

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

  • Pierwsza część tego szuka "id" elementu, do którego chcesz wstawić zawartość.
  • Druga część to lokalizacja pliku, który chcesz załadować.

  Uwaga: zawartość nie zostanie w rzeczywistości załadowana w całości, ponieważ istnieje duża szansa, że edytujesz tę stronę lokalnie, a nie na serwerze. Można to rozwiązać na wiele różnych sposobów, które omówię na końcu Instructable.

  Film z YouTube

  Osadzony element „iframe” w rzeczywistości pochodzi z samego YouTube. Nie będę szczegółowo wyjaśniał, jak je zdobyć, ale kiedy przejdziesz do "Udostępnij" wideo, istnieje opcja "Umieść", która pomoże Ci wygenerować kod niezbędny do wyświetlenia Twojego wideo na stronie internetowej.

  Krok 7: Patrząc w przyszłość

  Istnieje bardzo duża szansa, że nie opisałem jakiegoś elementu lub typu treści, który chcesz umieścić na swojej stronie. Na szczęście istnieje wiele dobrych opcji, aby samemu podjąć kolejne kroki.

  Dokumentacja Bootstrapa

  Dokumentacja Bootstrapa jest świetnym miejscem do rozpoczęcia, jeśli szukasz elementów, które są wstępnie zaprogramowane i mają przykłady, które możesz skopiować i wkleić do swojego portfolio, z którymi możesz eksperymentować. Nie dotknąłem kart, karuzeli ani formularzy. Gorąco polecam przejrzenie sekcji „Komponenty”, aby zobaczyć opcje.

  Szkoły W3

  W3Schools to wspaniała strona internetowa, na której możesz dowiedzieć się wszystkiego o programowaniu i rozwoju sieci. Są znacznie mądrzejsi ode mnie i obejmują prawie każdą funkcjonalność HTML, CSS i Javascript, o której możesz pomyśleć.

  Hosting swojego portfolio

  Ta instrukcja uczy, jak hostować witrynę na kilku różnych platformach. Oto kroki, które musisz podjąć, jeśli chcesz pokazać ludziom, rekruterom itp. swoje portfolio.

  Eksperymentuj i baw się dobrze

  Jedynym sposobem na stworzenie świetnego portfolio jest eksperymentowanie i próbowanie wszystkiego, co wygląda interesująco. Wiele fantazyjnych portfolio projektowych i stron internetowych wykorzystuje świetne efekty przejścia lub dynamiczne tła, ale żadna z nich nie została przygotowana.