Jak zainstalować Bootstrap?
Bootstrap to jedna z najpopularniejszych i największych bibliotek CSS. Jest używana w bardzo wielu miejscach w internecie, w tym na blogu webporady.pl.
O ile Bootstrapa tak naprawdę nie trzeba w żaden sposób “instalować”, w tym poradniku pokażę w jaki sposób podpiąć go do swojego projektu i zacząć z niego korzystać.
Podpinanie Bootstrapa do swojego projektu
Przede wszystkim, na samym początku warto zadać sobie pytanie, czy chcemy hostować pliki Bootstrapa na swoim serwerze, czy używać jednego z CDNów. W zależności od zastosowania, jedno lub drugie wyjście może okazać się dla nas lepsze. CDNy są odrobinę łatwiejsze w implementacji, oszczędzamy z nimi trochę mocy naszego serwera, a użytkownicy z różnych zakątków świata mogą komunikować się z nimi zwykle nieco szybciej.
Nie mówię, że to rozwiązanie jest lepsze, bo nie zawsze, ale w tym poradniku skupię się właśnie na nim.
W sekcji Quick Start na stronie Bootstrap znajdziemy gotowe szkielety stron z wykorzystaniem CDN. Wystarczy skopiować jeden z nich, lub po prostu skopiować odniesienia do CDNów i zaimplementować je do własnego projektu.
Przykładowy szkielet może wyglądać na przykład tak:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strona w Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<h1>Treść strony</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>Po zaimplementowaniu tych funkcji będziemy mogli używać Bootstrap.
Możemy więc odnosić się do elementów z dokumentacji Bootstrapa i stworzyć sobie na przykład taką, prostą stronę:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strona w Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Strona Główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Podstrona</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="alert alert-success">Witaj na testowej stronie!</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
Oto testowy sidebar
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>Wygląda to mniej więcej tak:
Jak widzisz, klasy Bootstrapa już w pełni działają, działają też elementy JavaScript (jak np. rozwijane Menu na urządzeniach mobilnych).
Teraz pozostaje Ci już tylko stworzyć stronę, która będzie odpowiadała Twoim potrzebom. Wszystkie niezbędne informacje na temat komponentów Bootstrap możesz znaleźć w oficjalnej dokumentacji. Powodzenia!
