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: 27-08-2020 Autor: Grzegorz Kubera

W kolejnej części kursu wyjaśnimy, jak tworzyć niestandardowe i bardziej zaawansowane formularze, a dodatkowo poznamy podstawy wstawiania obrazków na stronie internetowej.

 

Poza podstawowymi formularzami Bootstrap ma również kilka dodatkowych, które możemy tworzyć według włas­nych wymagań. Zacznijmy od pola wyboru checkbox. W tym celu tworzymy kontener <div> z klasą .custom-control i .custom-checkbox. Dodajemy .custom-control-input dla danych wejściowych wraz z rodzajem type="checkbox".


> Elementy menu


Poniżej prezentujemy kod zawierający standardowe pole wyboru, jak również pole wyboru przygotowane przez nas. Różnica widoczna jest także na rys. 1 – niestandardowe pole jest wyraźnie atrakcyjniejsze.


<!DOCTYPE html>
<html lang="pl">
<head>
<title>Przykład – 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Niestandardowe pole wyboru</h2>
<p>Informacja na temat tego, co możemy wybrać.</p>
<p><strong>Porada:</strong> Możesz wybrać więcej niż jedną opcję!</p>
<form action="/action_page.php">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="przyklad1">
<label class="custom-control-label" for="customCheck">Nasze pole wyboru</label>
</div>
<input type="checkbox" id="defaultCheck" name="przyklad2">
<label for="defaultCheck">Domyślne pole wyboru</label>
<br>
<button type="submit" class="btn btn-primary">Wyślij
</button>
</form>
</div>
</body>
</html>


Kolejny element, jaki warto znać, to przełącznik toogle switch. Aby go stworzyć, korzystamy z klasy .custom-control oraz .custom-switch, jak i .custom-control-input. Gotowy kod wygląda tak:


<body>
<div class="container">
<h2>Niestandardowy przełącznik</h2>
<p>Tu informacja o tym, czego dotyczy przełącznik.</p>
<form action="/action_page.php">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1" name="przyklad">
<label class="custom-control-label" for="switch1">Włącz lub wyłącz</label>
</div>
<br>
<button type="submit" class="btn btn-primary">Wyślij
</button>
</form>
</div>
</body>


Na rys. 2 możemy zobaczyć, jak wygląda przełącznik na stronie. Następnie tworzymy kontrolki, które można dodawać do strony – zarówno w wersji niestandardowej, jak i domyślnej (dla porównania) oraz w wersji jednoliniowej – prezentowane tuż obok siebie. Są to przydatne elementy do zaznaczania wybranych treści na stronie. Kod HTML prezentuje się tak:


<body>
<div class="container mt-3">
<h2>Niestandardowe kontrolki</h2>
<p>Czego dotyczy kontrolka – tutaj opis.</p>
<p><strong>Wskazówka:</strong> dodatkowe informacje na temat kontrolki.</p>
<form action="/action_page.php">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input"
id="customRadio" name="przyklad1">
<label class="custom-control-label"
for="customRadio">Niestandardowa kontrolka</label>
</div>
<input type="radio" id="defaultRadio" name="przyklad2">
<label for="defaultRadio">Domyślna kontrolka</label>
<br>
<button type="submit" class="btn btn-primary">Wyślij
</button>
</form>
</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.

prenumerata Numer niedostępny Spis treści

.

Transmisje online zapewnia: StreamOnline

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