Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęSzybki start
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Mamy przed sobą długą i fascynującą podróż. Jednak zanim przejdziemy do poszczególnych aspektów naszej zaplanowanej trasy, chciałbym dać Ci teraz możliwość poczucia potencjału, jaki daje Ci MDB.
W związku z tym w tej krótkiej i zwięzłej lekcji pokażę Ci, jak niesamowicie szybko i łatwo możesz uruchomić MDB i stworzyć swój pierwszy mały projekt.
Krok 1 - Pobierz i skonfiguruj MDB
Skorzystamy z najprostszego sposobu instalacji MDB, czyli pobrania paczki .zip.
Przejdź na stronę instalacji i kliknij duży, czerwony przycisk "MDB 5 download".
Następnie rozpakuj pobraną paczkę i otwórz go w swoim ulubionym edytorze kodu.
Uwaga: Wybór edytora kodu to kwestia preferencji, ale jeśli ktoś by mnie zapytał, co polecam, moja odpowiedź brzmi Visual Studio Code.
Jest darmowy i możesz go pobrać tutaj.
Krok 2 - Otwórz plik index.html
W rozpakowanym katalogu MDB znajdź plik index.html a następnie przeciągnij go i upuść do okna przeglądarki. Zobaczysz wiadomość powitalną od MDB.
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 sporo kodu, i może wydawać się to trochę przytłaczające na początek. Ale teraz się tym nie martw, w przyszłych lekcjach szczegółowo wyjaśnimy, co oznacza i robi każda z tych linii.
Krok 3 - Przygotowanie pliku index.html dla nowego projektu
Usuńmy niepotrzebny kod, aby mieć miejsce na nasz nowy projekt.
Na linii 25 znajdziesz komentarz Start your project here, a na linii 46 End your project here. Pomiędzy nimi znajduje się kod z wiadomością powitalną od MDB:
<!-- 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ć całkowicie pusty, biały ekran. Teraz jesteśmy gotowi, aby rozpocząć nasz projekt.
Krok 4 - Dodaj pasek nawigacyjny
Przejdź na stronę dokumentacji paska nawigacyjnego i znajdź sekcję "Basic example" na samym początku tej strony. Kliknij "show code" i skopiuj kod.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar brand -->
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<img
src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
height="15"
alt="MDB Logo"
loading="lazy"
/>
</a>
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
<!-- Right elements -->
<div class="d-flex align-items-center">
<!-- Icon -->
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<!-- Notifications -->
<div class="dropdown">
<a
class="text-reset me-3 dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
>
<li>
<a class="dropdown-item" href="#">Some news</a>
</li>
<li>
<a class="dropdown-item" href="#">Another news</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<!-- Avatar -->
<div class="dropdown">
<a
class="dropdown-toggle d-flex align-items-center hidden-arrow"
href="#"
id="navbarDropdownMenuAvatar"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
class="rounded-circle"
height="25"
alt="Black and White Portrait of a Man"
loading="lazy"
/>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuAvatar"
>
<li>
<a class="dropdown-item" href="#">My profile</a>
</li>
<li>
<a class="dropdown-item" href="#">Settings</a>
</li>
<li>
<a class="dropdown-item" href="#">Logout</a>
</li>
</ul>
</div>
</div>
<!-- Right elements -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
Następnie wklej go do pliku index.html i zapisz. Po odświeżeniu przeglądarki powinieneś zobaczyć ładny, interaktywny pasek nawigacyjny.
Właśnie skutecznie wykorzystałeś pierwszy komponent MDB. Dobra robota!
Mimochodem - widzisz klasę bg-light w pierwszej linii komponentu paska nawigacyjnego? Ustawia ona szare tło dla paska nawigacyjnego. Zmienimy ją na bg-white, aby uzyskać
całkowicie biały pasek nawigacyjny.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<!-- [...the rest of the code] -->
Krok 5 - Dodaj jumbotron
Dobrze byłoby dodać jakiś element, który wyróżni się od początku.
Takim elementem może być jumbotron, który powszechnie jest postrzegany jako baner z istotnymi informacjami dla naszej witryny.
Bezpośrednio pod paskiem nawigacyjnym dodaj poniższy kod:
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">I am learning MDB</h1>
<h4 class="mb-4">...and it's awesome!</h4>
<a class="btn btn-primary btn-lg" href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"
role="button">Learn with me</a>
</div>
<!-- Jumbotron -->
Zapisz plik i odśwież przeglądarkę. Nasza strona zaczyna nabierać kształtu!
Krok 6 - Dodaj siatkę
Istnieje bardzo ładny komponent o nazwie "card". Karty są nie tylko atrakcyjne wizualnie, ale również świetne do prezentacji różnych rodzajów treści.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCzy nie byłoby wspaniale mieć takie ładne karty w naszym projekcie? Oczywiście, że tak!
Jednak jest pewien problem - jak je umieścić w naszym układzie tak, aby wyświetlały się poprawnie zarówno na dużych ekranach, jak i na telefonach? Oczywiście, na dużych ekranach chcemy, żeby były obok siebie, powiedzmy po 3 w rzędzie. Z drugiej strony na telefonach powinny być ułożone jeden nad drugim.
W tym miejscu przydaje się siatka bootstrapa, która jest potężnym narzędziem do tworzenia responsywnego układu.
Siatkę poznamy dokładniej w przyszłych lekcjach. Teraz zaufaj mi i po prostu postępuj zgodnie z podanymi krokami.
Przejdź na stronę dokumentacji siatki i skopiuj kod ze sekcji "Basic example".
Następnie wklej go poniżej komponentu jumbotron.
<div class="container">
<div class="row">
<div class="col-md">
One of three columns
</div>
<div class="col-md">
One of three columns
</div>
<div class="col-md">
One of three columns
</div>
</div>
</div>
Po zapisaniu pliku i odświeżeniu przeglądarki, powinieneś zobaczyć akapity wskazujące na każdą z trzech kolumn.
Krok 7 - Dodaj karty
Teraz jesteśmy gotowi, aby dodać karty.
Przejdź na stronę dokumentacji kart i skopiuj kod ze sekcji "Image with ripple".
Czym jest efekt falowania (ripple)? Efekt falowania to efekt Material Design polegający na propagacji okrężnych fal po interakcji z danym elementem. W przykładzie dokumentacji, kliknij obraz lub przycisk w karcie, aby go zobaczyć.
Następnie wklej kod karty do każdej kolumny w naszym projekcie w pliku index.html.
Jeśli chcesz, możesz zmienić obrazy i teksty w kartach na cokolwiek chcesz.
<div class="container">
<div class="row">
<!-- First column -->
<div class="col-md">
<!-- Card -->
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card -->
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-md">
<!-- Card -->
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/112.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card -->
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-md">
<!-- Card -->
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/113.webp" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card -->
</div>
<!-- Third column -->
</div>
</div>
Zapisz plik i odśwież przeglądarkę. Och! Nasza strona teraz wygląda naprawdę świetnie.
Jest jedna mała rzecz, którą warto poprawić. Jeśli przyjrzysz się uważnie, zobaczysz, że dolna krawędź jumbotronu styka się z górną krawędzią kart. Wyglądałyby lepiej, gdyby między nimi była przestrzeń.
To bardzo łatwe do naprawienia. Wystarczy dodać klasę mb-5 (która oznacza "margin-bottom 5 jednostek wielkości") do jumbotronu. Poznamy to bardziej szczegółowo w przyszłych lekcjach, ale teraz po
prostu dodaj to do swojego projektu:
<!-- Jumbotron -->
<div class="p-5 text-center bg-light mb-5">
<!-- [...the rest of the code] -->
Krok 8 - Dodaj stopkę
Ostatnim krokiem naszego małego projektu będzie dodanie stopki.
Stopka to dodatkowy komponent nawigacji. Może zawierać odnośniki, przyciski, informacje o firmie, prawa autorskie, formularze i wiele innych elementów.
Przejdź na stronę dokumentacji stopki i skopiuj kod z Basic example.
Następnie wklej go poniżej siatki z kartami:
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Zapisz plik i odśwież przeglądarkę. Powinieneś zobaczyć obszerną szarą stopkę pod zakładkami.
Jednak mamy podobny problem, jak w poprzednim kroku - dolna krawędź kart styka się z górną krawędzią stopki. Naprawmy to, dodając klasę mb-5 do każdego z komponentów kart.
<div class="card mb-5">
<!-- [...the rest of the code] -->
Dobrze, nasz pierwszy projekt MDB jest gotowy!
I patrz, wyświetla się poprawnie na dowolnym ekranie. Zmień rozmiar okna przeglądarki, aby zobaczyć to na własne oczy. Nie jest to piękne?
Dobra robota!
Jeśli coś nie działało tak, jak powinno, lub jeśli chcesz się upewnić, że wszystko zrobiłeś poprawnie - kliknij poniższy przycisk, aby zobaczyć ostateczny rezultat.
ostateczne demo i kod źródłowy
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.
