TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Szablon startowy Bootstrap 5

3

Bootstrap 5 został wydany jako ostateczna wersja publiczna. Zasadniczo oznacza to, że powinieneś przygotować się na migrację z poprzedniej wersji i używać nowej wersji do tworzenia nowych stron internetowych. Niezależnie od tego, czy przeprowadzasz migrację, czy uruchamiasz nową witrynę, powinieneś najpierw nauczyć się podstawowego szablonu lub szablonu startowego. W tym samouczku wyjaśnimy, jak na prostych przykładach stworzyć podstawowy szablon startowy Bootstrap 5 do uruchamiania projektów.

Korzystanie z szablonu startowego Bootstrap 5

  1. Pobieranie plików źródłowych Bootstrapa
  2. Hosting plików Bootstrap 5 na Twoim serwerze
  3. Korzystanie z szablonu startowego Bootstrap 5 z linkami CDN
  4. Dostosowywanie komponentów Bootstrap 5
  5. Idąc dalej z szablonem startowym
  6. Korzystanie z dołączonego pliku skryptu w wersji 5
  7. W tym ikony Bootstrap
  8. Korzystanie ze statycznych generatorów witryn

1 Pobieranie Bootstrap 5 Pliki źródłowe

Jako użytkownik końcowy istnieją dwa sposoby wykorzystania plików Bootstrap CSS i JavaScript. Jednym z nich jest pobranie wstępnie skompilowanych plików i włączenie ich do swoich projektów, a drugim korzystanie z łączy CDN.

Możesz dowiedzieć się więcej o pobieraniu plików Bootstrap w artykule Pierwsze kroki z Bootstrap.

2 Korzystanie z plików Bootstrap na własnym serwerze

Wstępnie skompilowane pliki CSS i JavaScript można pobrać z repozytorium GitHub. Plik zip powinien zawierać foldery CSS i JS. Poniżej znajdują się pliki dostępne w folderach CSS:

Szablon startowy Bootstrap 5

Bootstrap 5 plików

W pobranym pliku źródłowym dostępnych jest wiele wersji CSS:

  • Domyślne i zminimalizowane pliki CSS, których można używać w dowolnym projekcie
  • Plik narzędzi
  • Wersja tylko z siatką
  • Uruchom ponownie tylko wersję

Na serwerze produkcyjnym możesz użyć zminifikowanej wersji „bootstrap.min.css" do wszystkich swoich potrzeb. Pliki map źródłowych pomagają w mapowaniu między źródłem a prekompilowanymi wersjami zminifikowanymi. Nie musisz używać restartu, siatki i pliki map do regularnego użytku w witrynach.

Uwaga: jeśli używasz tylko pliku „bootstrap.min.css” w swojej witrynie, niektóre przeglądarki, takie jak Safari, pokażą błąd lub ostrzeżenie w konsoli programisty, że brakuje pliku mapy źródłowej. Aby naprawić błąd, otwórz plik Bootstrap CSS i usuń ostatnią linię „/ # sourceMappingURL=bootstrap.min.css.map /”.

Podobnie jak w przypadku plików CSS, folder JS będzie zawierał „bootstrap.js” i „bootstrap.bundle.js”. Plik „bootstrap.js” nie zawiera skryptu Popper, ale wersja pakietu zawiera skrypt Popper. We wcześniejszej wersji Bootstrap 4 musisz osobno dołączyć jQuery, aby komponenty JavaScript działały poprawnie. Jednak Bootstrap 5 nie potrzebuje jQuery jako części frameworka i jest zaprojektowany do pracy bez jQuery.

Szablon startowy Bootstrap 5

Pliki Bootstrap 5 JS

Z powyższym zrozumieniem, pliki źródłowe będą miały następującą strukturę zawierającą wiele plików CSS i JS.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Podstawowy szablon startowy powinien wyglądać jak poniżej, gdy powyższe pliki hostujesz na swoim serwerze:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Pamiętaj, że jeśli nie używasz dołączonego pliku JS, musisz dołączyć oddzielne pliki skryptów JS i popper. Jeśli dobrze zauważyłeś, w szablonie startowym znajduje się wiele dodatkowych tagów i skryptów.

  • Bootstrap używa w szablonach HTML5 DOCTYPE. Dlatego upewnij się, że na początku szablonu HTML znajduje się <!DOCTYPE HTML>, aby uniknąć nieoczekiwanego zachowania.
  • Musisz użyć metatagu viewport, aby zapewnić responsywność szablonu na podstawie urządzenia renderującego.
  • W przypadku, gdy dodajesz jQuery, upewnij się, że dodałeś przed skryptami „popper.min.js” i „bootstrap.min.js”.
  • Możesz również pobrać skrypt Poppera ze strony Poppera i przesłać go do folderu „assets/js/” Twojej witryny.
  • Pamiętaj, że skrypt Poppera jest niezbędny do poprawnego działania wtyczek Bootstrap. Popper to biblioteka JavaScript używana głównie do pozycjonowania elementów pływających, takich jak komponent podpowiedzi w Bootstrap.

Zauważ, że jako ścieżek plików użyliśmy „assets/css/bootstrap.min.css” i „assets/js/bootstrap.bundle.min.js”. Dobrym zwyczajem jest przechowywanie wszystkich plików CSS i JS w osobnym folderze, aby łatwo nimi zarządzać. Zasadniczo oznacza to, że powinieneś utworzyć odpowiednie foldery na swoim serwerze i ręcznie przesłać pliki Bootstrap CSS i JS. Przechowuj także obrazy w osobnym folderze „images” i plikach HTML w katalogu głównym witryny. Tak więc cała struktura powinna wyglądać na twoim serwerze mniej więcej tak:

Szablon startowy Bootstrap 5

Struktura pliku motywu Bootstrap 5

„Folder motywu” w powyższym przykładzie to folder główny Twojej witryny, który powinien być Twoją domeną, subdomeną lub podkatalogiem.

3 Korzystanie z szablonu startowego z CDN

Hostowanie wszystkich potrzebnych plików na serwerze jest właściwym sposobem, ale wpłynie to na szybkość ładowania i pojemność hostingu. Dlatego zalecamy korzystanie z łączy CDN dla plików CSS i JS zamiast hostowania ich na własnym serwerze. Zapewni to szybkie dostarczanie tych plików statycznych i przyspieszy ładowanie strony. Poniżej znajduje się szablon startowy Bootstrap 5 z linkami CDN dla CSS i skryptów. Możesz po prostu dodać treść w sekcji treści, aby rozpocząć tworzenie witryny lub motywu. Wcześniej wersja Bootstrap 4 pochodziła z sieci Bootstrap CDN, a najnowsza wersja 5 pochodzi z jsDelivr.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Dostosowywanie plików źródłowych Bootstrap

Korzystanie z pełnych plików szablonów nie jest wymagane we wszystkich przypadkach. Na przykład, jeśli chcesz używać tylko przycisków Bootstrap, możesz użyć tylko odpowiednich stylów dla przycisków. Bootstrap oferuje konfigurator dla poprzedniej wersji 3.4, w którym można wybrać wymagane komponenty i wygenerować prekompilowane pliki.

Szablon startowy Bootstrap 5

Dostosowywanie plików Bootstrap

W tej chwili nie jest dostępny szczegółowy konfigurator dla wersji Bootstrap 5. Możesz jednak zapoznać się z oficjalną stroną z dokumentacją, aby uzyskać więcej informacji na temat dostosowywania Bootstrapa 5.

5 Idąc dalej w szablonie startowym

Teraz, gdy masz gotowy szablon startowy, który jest hostowany na serwerze lub za pomocą łączy CDN. Następnym krokiem jest dodanie treści i rozpoczęcie budowania witryny. Poniżej znajduje się jeden prosty przykład, w którym stworzyliśmy różne przyciski kontekstowe przy użyciu domyślnych klas przycisków Bootstrap.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Wynik powinien wyglądać jak poniżej w przeglądarce:

Szablon startowy Bootstrap 5

Idealnie nie ma potrzeby używania plików skryptów jQuery, popper i Bootstrap do tworzenia prostych przycisków, które są kontrolowane przez CSS. Przykład pokazaliśmy ze względu na kompletność szablonu startowego. Również w przypadku dodawania większej liczby komponentów należy dołączyć dołączony plik skryptu.

6 Korzystanie z dołączonej wersji skryptu Bootstrap

Jak wyjaśniono powyżej, Bootstrap 5 ma dołączony plik skryptu łączący „bootstrap.min.js” i „popper.min.js”. Jeśli więc chcesz użyć wersji dołączonej, zmodyfikuj szablon startowy, jak poniżej, używając pliku „bootstrap.bundle.min.js”.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7, w tym ikony Bootstrap w szablonie

Bootstrap w wersji 5 zawiera ponad 1300 darmowych ikon SVG, które możesz łatwo umieścić na swoich stronach internetowych. Pomaga wyeliminować zależność zewnętrznych ikon, takich jak ikony Font Awesome. Istnieje wiele sposobów na umieszczenie ikon w szablonie startowym, a najlepszą opcją jest użycie CDN CSS, jak poniżej. Pokazaliśmy przykładową ikonę w sekcji ciała z komponentem alertu. Pełną listę klas CSS dla ikon znajdziesz tutaj.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Korzystanie ze statycznych generatorów witryn

Łatwo jest stworzyć statyczną stronę internetową za pomocą szablonu startowego Bootstrap, ale modyfikowanie wielu plików statycznych na większej stronie zajmie dużo czasu. Pojedyncza strona internetowa zawiera różne sekcje, takie jak nagłówek, treść główna, stopka i pasek boczny. Wszystkie sekcje inne niż główna treść są używane w całej witrynie z tymi samymi informacjami. Generatory statyczne wykorzystują koncepcję podszablonów, posiadając szablony bazowe dla każdej z sekcji, takich jak nagłówek, stopka i pasek boczny. Wreszcie wszystkie te szablony bazowe są składane z treścią główną na każdej stronie osobno.

Za każdym razem, gdy wymagana jest zmiana nagłówka, stopki i paska bocznego, możesz modyfikować szablony bazowe zamiast modyfikować każdą stronę z osobna. Gdy witryna jest gotowa, możesz wygenerować pliki HTML, CSS i JavaScript, aby przesłać je na swój serwer. Jednym z popularnych generatorów stron statycznych jest Harp.js, który możesz zainstalować na swoim lokalnym komputerze w celu dalszego rozwoju szablonu startowego. Pamiętaj, że Harp.js potrzebuje Node.js/NPM jako zależności, dlatego powinieneś wcześniej zainstalować te komponenty. Alternatywnie możesz użyć aplikacji generujących, takich jak Mobirise, aby korzystać z frameworka Bootstrap bez konieczności rozumienia kodowania.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów