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 za pomocą Bootstrapa

Data publikacji: 24-09-2020 Autor: Grzegorz Kubera

Przyciski i grupy przycisków, a także atrakcyjna galeria zdjęć w formie pokazu slajdów – oto kolejne elementy, które są bardzo przydatne przy tworzeniu internetowych witryn. Warto wiedzieć, jak w pełni korzystać z tych zasobów.

 

W  tej części kursu zaczniemy od obiektu multimedialnego Carousel, czyli od pokazu slajdów.
Poniższy przykład zawiera podstawowy pokaz slajdów z kontrolkami i wskaźnikami (można przewijać obrazy w lewo i w prawo, a wskaźniki umieszczone na dole oznaczają ich liczbę). Kod HTML:


<!DOCTYPE html>
<html lang="pl">
<head>
<title>Bootstrap – pokaz slajdów</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>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">

 

<!-- Wskaźniki -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class=
"active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

<!-- Pokaz slajdów -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/07/24/09/55/silk-5433442_960_720.jpg" alt="Zdjęcie nr 1" width="960" height="720">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/07/11/18/07/market-2494520_960_720.jpg" alt="Zdjęcie nr 2" width="960" height="720">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/08/04/13/28/man-5462849_960_720.jpg" alt="Zdjęcie nr 3" width="960" height="720">
</div>
</div>

<!-- Kontrolki w lewo/w prawo -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>


> Klasy w pokazie slajdów

 

Zdjęcia w pokazie slajdów będą automatycznie ulegać zmianie, choć możemy przełączać się między nimi za pomocą kontrolek. W pokazie slajdów korzystamy z wielu nieznanych dotąd klas, dlatego poniżej znajdują się wyjaśnienia, do czego służą poszczególne elementy:

 

  • .carousel – tworzy pokaz slajdów,
  • .carousel-indicators – oznacza wskaźniki (niewielkie kreski na dole) dla każdego slajdu, wskazują one, ile łącznie jest slajdów w danej galerii oraz który slajd aktualnie oglądamy,
  • .carousel-inner – dodaje slajdy do pokazu,
  • .carousel-item – określa zawartość każdego slajdu,
  • .carousel-control-prev – dodaje lewy (poprzedni) przycisk do pokazu slajdów, który umożliwia przełączanie się między slajdami,
  • .carousel-control-next – dodaje prawy (następny) przycisk do pokazu slajdów,
  • .carousel-control-prev-icon – używany razem z .carousel-control-prev w celu utworzenia przycisku „poprzedni”,
  • .carousel-control-next-icon – używany razem z .carousel-control-next, aby stworzyć przycisk „następny”,
  • .slide – dodaje efekt przejścia CSS i animacji podczas przełączania się między slajdami (jeśli nie chcemy tego efektu, wystarczy usunąć klasę .slide).

 

Dodatkowo do pokazu slajdów możemy dodać podpisy dla poszczególnych zdjęć. W tym celu korzystamy z klas <div class="carousel-caption"> oraz <div class="carousel-item">. Poniżej widnieje gotowy przykład HTML:


<body><div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/07/24/09/55/silk-5433442_960_720.jpg" alt="Zdjęcie nr 1" width="960" height="720">
<div class="carousel-caption">
<h3>Jedwab</h3>
<p>Proces wytwarzania jedwabiu.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/07/11/18/07/market-2494520_960_720.jpg" alt="Zdjęcie nr 2" width="960" height="720">
<div class="carousel-caption">
<h3>Wietnam</h3>
<p>Atrakcyjne światła i lampiony w Wietnamie.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/08/04/13/28/man-5462849_960_720.jpg" alt="Zdjęcie nr 3" width="960" height="720">
<div class="carousel-caption">
<h3>Sporty wodne</h3>
<p>Entuzjasta kitesurfingu.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</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"