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



26.10.2020

Nowa wersja nVision

Można już pobierać nową wersję nVision
26.10.2020

Monitorowanie infrastruktury

Vertiv Environet Alert
23.10.2020

Telefonia w chmurze

NFON Cloudya
23.10.2020

Nowości w EDR

Bitdefender GravityZone
23.10.2020

Wykrywanie anomalii

Flowmon ADS11
23.10.2020

Mobilny monitor

AOC 16T2
22.10.2020

HP Pavilion

HP zaprezentowało nowe laptopy z linii Pavilion.
22.10.2020

Inteligentny monitoring

WD Purple SC QD101
22.10.2020

Przełącznik 2,5GbE

QNAP QSW-1105-5T

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"