Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików Cookies.



01.06.2021

Monitory interaktywne Newline...

Na rynek trafiły nowe monitory interaktywne Newline MIRA stanowiące kompletne narzędzia...
27.05.2021

Anywhere Workspace

VMware wprowadza rozwiązanie Anywhere Workspace
27.05.2021

Narzędzie SaaS

Lenovo Device Intelligence Plus
27.05.2021

Nowa fala przetwarzania edge

Red Hat Edge
27.05.2021

Wirtualny router od QNAP-a

QuWAN vRouter
27.05.2021

Ochrona endpointów

Cisco SASE
27.05.2021

Monitor graficzny

Monitor graficzny PD2725U od BenQ zaprojektowany jest z myślą o wygodnej pracy...
27.05.2021

Monitoring wizyjny

D-Link Vigilance
27.05.2021

Moc i elastyczność

Liebert EXM2

Tworzenie stron WWW z użyciem Bootstrapa

Data publikacji: 22-10-2020 Autor: Grzegorz Kubera

W kolejnej części kursu tworzenia stron WWW z użyciem Bootstrapa zajmiemy się dwoma bardzo ważnymi elementami na praktycznie każdej stronie internetowej. Są to menu, czy też pasek nawigacyjny, oraz funkcja paginacji stron.

 

Jeśli chodzi o tworzenie paska nawigacyjnego i paginacji stron, Bootstrap oferuje w tym zakresie dość szerokie możliwości. Przedstawiamy te najważniejsze i najbardziej przydatne. Zacznijmy od paska nawigacyjnego.


> PASEK NAWIGACYJNY NA RÓŻNE SPOSOBY


Na górze strony najczęściej umieszcza się pasek nawigacyjny, który zawiera takie elementy jak logo, linki czy wyszukiwarkę. Kiedy budujemy stronę z użyciem Bootstrapa, pasek nawigacji może się automatycznie wydłużać lub zwijać, w zależności od rozmiaru ekranu. Mamy też do dyspozycji wiele możliwości, które rozszerzają jego funkcjonalność.


Podstawowy pasek nawigacyjny tworzony jest za pomocą klasy .navbar, po której następuje responsywna klasa zwijająca: .navbar-expand-xl|lg|md|sm. Może ona przestawić pasek do pozycji pionowej na bardzo dużych, dużych, średnich i małych ekranach.


Chcąc dodać do paska linki, używamy z kolei elementu ul z klasą class="navbar-nav". Następnie dodajemy elementy li z klasą .nav-item, jak i element a z klasą .nav-link. Gotowy kod HTML wygląda następująco:


<!DOCTYPE html>
<html lang="pl">
<head>
<title>Przykładowa strona Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3>Pasek nawigacyjny widać powyżej</h3>
<p>Przykładowy tekst.</p>
<p>W zależności od tego, na jakim ekranie wyświetlamy stronę, pasek odpowiednio się do niego dostosuje - zmieni orientację z pionowej na poziomą i odwrotnie.</p>
</div>
</body>
</html>


Efekt prezentujemy na rys. 1 (orientacja pozioma i pionowa). Tu warto dodać, że jeśli usuniemy klasę .navbar-expand-xl|lg|md|sm, pasek będzie dostępny wyłącznie w pozycji pionowej niezależnie od wielkości ekranu. Jeśli zaś chcemy umieścić pasek na środku strony, możemy zastosować klasę .justify-content-center.


Kolejna z możliwości to tworzenie paska z wybranym kolorem tła. W tym celu możemy wykorzystać dowolną z klas .bg-color (rys. 2). Kod HTML:


<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Link aktywny</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Link nieaktywny</a></li>
</ul>
</nav>
</body>


[...]

 

Założyciel firmy doradczo-technologicznej; pełnił funkcję redaktora naczelnego w magazynach i serwisach informacyjnych z branży ICT. Dziennikarz z ponad 13-letnim doświadczeniem i autor książek nt. start-upów i przedsiębiorczości.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma.

.

Transmisje online zapewnia: StreamOnline

All rights reserved © 2019 Presscom / Miesięcznik "IT Professional"