Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęPobieranie, instalacja i konfiguracja
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
W tej lekcji dowiesz się, jak pobrać, zainstalować i skonfigurować Bootstrap w najprostszy możliwy sposób, dosłownie w mgnieniu oka.
Będziemy korzystać z wersji Bootstrapa od MDBootstrap. Dlaczego?
Możesz spojrzeć na MDBootstrap jak na wersję Bootstrapa na sterydach. I to jest całkowicie darmowe.
MDBootstrap zawiera wszystkie funkcje Bootstrapa oraz dodatkowo dostarcza Ci:
- Setki dodatkowych komponentów, bloków projektowych i szablonów najwyższej jakości
- Znacznie lepszy design niż Bootstrap
- Zdecydowanie szersze możliwości dostosowania, tworzenia motywów oraz optymalizacji niż Bootstrap
- Integrację z Material Design (systemem projektowania stworzonym przez Google)
- Integrację z najpopularniejszymi bibliotekami JavaScript, takimi jak React, Angular czy Vue
- Integrację z najpopularniejszymi technologiami backendowymi i CMS, takimi jak WordPress, Node.js, PHP i wiele innych
- Integrację z TypeScript
- Dziesiątki wysokiej jakości darmowych samouczków (takich jak ten, który właśnie czytasz)
- Miejsce, gdzie możesz swobodnie eksperymentować z kodem bezpośrednio w przeglądarce
- Integrację z MDB GO i MDB CLI, czyli darmowym hostingiem i platformą wdrożeniową open-source, dzięki której możesz opublikować swoją stronę internetową za darmo w Internecie w kilka sekund
- O wiele, wiele więcej, czego się dowiesz w tym kursie
Krok 1 - pobieranie i konfiguracja
Skorzystamy z najprostszego sposobu instalacji, czyli pobrania paczki .zip.
Przejdź na stronę instalacji i kliknij duży, czerwony przycisk "MDB 5 download".
Następnie wypakuj pobrany pakiet i otwórz go w swoim ulubionym edytorze kodu.
Uwaga: Wybór edytora kodu to kwestia preferencji, ale jeśli ktoś zapyta mnie o rekomendację, moja odpowiedź brzmi Visual Studio Code.
Jest darmowy i możesz go pobrać tutaj.
Krok 2 - otwórz plik index.html
W rozpakowanym katalogu MDBootstrap znajdź plik index.html a następnie przeciągnij i upuść go w okno przeglądarki. Zobaczysz wiadomość powitalną od MDBootstrap.
Następnie otwórz plik index.html w edytorze kodu. Zobaczysz kod podobny do tego:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">
<div class="text-center">
<img
class="mb-4"
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
style="width: 250px; height: 90px"
/>
<h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
<p class="mb-3">MDB Team</p>
<a
class="btn btn-primary btn-lg"
href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"
target="_blank"
role="button"
>Start MDB tutorial</a
>
</div>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>
To całkiem sporo kodu i może wydawać się trochę przytłaczający na początek. Ale nie martw się, tak naprawdę jest bardzo prosty, a teraz wszystko wytłumaczymy krok po kroku.
Poniżej przedstawiony fragment kodu zawiera tak zwane metadane, umieszczone w elemencie head.
To nie są rzeczy, które musisz wnikliwie rozumieć. W skrócie, dostarczają one podstawowych informacji dla przeglądarek i zazwyczaj są ustawiane raz, po czym można o nich zapomnieć bez wyrzutów sumienia.
Jeśli chcesz trochę więcej o nich wiedzieć, znajdziesz wyjaśnienia w komentarzach poniżej.
<!DOCTYPE html>
<html lang="en">
<!-- Opening tag of <head> element. -->
<head>
<!-- This tells the browser to use the UTF-8 character encoding when translating machine code into human-readable text. -->
<meta charset="UTF-8" />
<!-- This tells the browser how should it render this HTML document. -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- This meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<!-- This is simply the title of this HTML document. You can enter whatever you want here. -->
<title>Material Design for Bootstrap</title>
<!-- This is the icon you see in the page tab. It currently shows the MDB logo, but you can replace it with whatever you want. -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
Ten odnośnik importuje ikony, znane jako Font Awesome, do Twojego projektu.
Są one niezwykle przydatne i szeroko używane w różnych komponentach. Na stronie dokumentacji ikon, możesz przeglądać wszystkie z nich, a następnie używać je według własnych upodobań.
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
Ten odnośnik importuje czcionkę Roboto. Jest to krój pisma charakterystyczny dla Material Design, bardzo estetyczny, czytelny i praktyczny.
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
/>
To jest kluczowy odnośnik, który importuje style CSS MDBootstrap.
Zawiera on Bootstrap, dzięki czemu możesz w pełni korzystać z wszystkich jego funkcji. Dodatkowo dostarcza on funkcje niedostępne w samym Bootstrapie, ale dostępne w MDBootstrap.
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
Uwaga: Jak widzisz, tutaj nie ma oddzielnego pliku dla Bootstrapa. Dzieje się tak dlatego, że cały kod Bootstrapa jest zawarty razem z kodem MDBootstrap w jednym pliku mdb.min.css (na dole dokumentu znajdziesz odnośnik do pliku mdb.min.js dla JavaScript).
To podejście zapewnia lepszą optymalizację i użyteczność.
Krok 3 - przygotuj plik index.html dla nowego projektu
Usuńmy zbędny kod, aby mieć miejsce na nasz nowy projekt.
Poniżej otwierającego znacznika <body> znajdziesz komentarz Start your project here a w linii 46 znajdziesz End your project here. Pomiędzy nimi znajduje się kod z wiadomością powitalną od MDBootstrap:
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">
<div class="text-center">
<img
class="mb-4"
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
style="width: 250px; height: 90px"
/>
<h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
<p class="mb-3">MDB Team</p>
<a
class="btn btn-primary btn-lg"
href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"
target="_blank"
role="button"
>Start MDB tutorial</a
>
</div>
</div>
</div>
<!-- End your project here-->
Usuń to, zapisz plik i odśwież przeglądarkę. Powinieneś zobaczyć zupełnie pusty, biały ekran. Teraz jesteśmy gotowi rozpocząć nowy projekt.
O autorze
Michal Szymanski
Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.
Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.
