Jak dodać Bootstrap do HTML?
Jeżeli samodzielnie kodujesz swoją stronę internetową, prawdopodobnie zastanawiasz się nad użyciem jakiegoś frameworka lub biblioteki.
Takie narzędzia potrafią skutecznie poprawić efektywność naszej pracy i dostarczyć nam wiele gotowych rozwiązań i komponentów.
Przykładowo, dzięki Bootstrap możesz np. stworzyć taki alert w zaledwie jednej linijce kodu — nie musisz samodzielnie go stylować, bo wszystko jest już gotowe:
Dodawanie Bootstrap do projektu HTML
Aby dodać Bootstrap, wystarczy podpiąć jego plik CSS w sekcji head naszej strony. Dla pełnej funkcjonalności warto też dorzucić plik JS na dole strony (wówczas poprawnie będą działały także interaktywne elementy, jak na przykład rozwijane menu).
Jeżeli nie macie pobranych plików Bootstrap, najprościej będzie skorzystać z CDNów i podpiąć następujące zasoby (dla wersji 5.2.2):
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Przykładowy szablon strony z podpiętymi plikami powinien wyglądać mniej więcej tak:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strona HTML z Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<h1>Testowa strona</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>Więcej informacji na ten temat możecie znaleźć w oficjalnej dokumentacji Bootstrap w sekcji “Get started”.
