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-10-2019 Autor: Grzegorz Kubera
Rys. 1. Bootstrap...

W drugiej części kursu z Bootstrapa poznajemy i edytujemy style CSS. Dodatkowo tworzymy atrakcyjniejszą stronę WWW, która zawiera responsywne menu nawigacyjne.

 

Strona przygotowana w poprzedniej części kursu jest maksymalnie prosta i zawiera wyłącznie tekst. Warto w następnym kroku stworzyć nieco bardziej rozbudowany szablon startowy, który będzie zawierał pasek nawigacyjny i trochę więcej kodu HTML. Jest to zarazem szablon, który możemy wykorzystywać do późniejszego tworzenia stron WWW dla kontrahentów czy na potrzeby własnej firmy.

> STRONA HTML

Tworzymy plik z rozszerzeniem .html i nazywamy go np. strona.html. Następnie otwieramy go w Atomie (program do edycji kodu polecany w ramce) i wprowadzamy kod szablonu:

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Kurs IT Professional</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.1.0/
css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/
bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Pasek nawigacyjny</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Strona z kursu IT Professional</h3>
<p>Pasek nawigacyjny będzie się ukrywał na małych
ekranach i wtedy trzeba go rozwinąć. Na dużych ekranach
wszystkie linki z paska są widoczne od razu. Warto
zmienić wielkość okna i przetestować działanie paska.</p>
<p>Pasek rozwija się tylko wtedy, gdy w niego
klikniemy.</p>
<p>Wskazówka: Usuń styl .navbar-expand-md class
i wtedy linki na pasku będą ZAWSZE ukryte i trzeba
będzie klikać w ikonę menu, by je zobaczyć.</p>
<p>Wejdź na <a href="http://www.it-professional.pl">
it-professional.pl</a>, aby poznać szczegóły.
</div>
</body>
</html>

Zapisujemy zmiany i otwieramy plik w przeglądarce internetowej.

Na tym etapie taka wiedza wystarczy, jeśli chodzi o samo tworzenie stron HTML. Teraz przejdźmy do stylów CSS, zaczynając od pliku Normalize.css.

> PLIK NORMALIZE.CSS I STYLE CSS

Do Bootstrapa domyślnie jest dołączany niewielki plik Normalize.css, który służy do resetowania stylów CSS, aby elementy HTML były w przeglądarkach wyświetlane w spójny sposób. Ale dlaczego style CSS należy resetować i czy rzeczywiście warto to robić?

Obecnie użytkownicy używają wielu przeglądarek internetowych, w dodatku w różnych wersjach. Z tego powodu tworzone strony WWW mogą się różnie wyświetlać na poszczególnych przeglądarkach, które np. stosują inne odstępy dolne i górne w nagłówkach czy wcięcia we wstawkach i wysokościach wierszy. Jeśli zresetujemy style CSS, wykorzystujemy w praktyce jeden plik CSS, który nadaje wszystkim elementom HTML spójny wygląd. Dzięki temu każdy styl zdefiniowany po resecie będzie przez każdą przeglądarkę stosowany w taki sam sposób.

Kiedy zresetujemy style CSS metodą standardową, wszystkie czcionki będą mieć tę samą wielkość, wysokość wierszy będzie taka sama na całej stronie, a treść zostanie maksymalnie dosunięta do lewej krawędzi okna przeglądarki. Wówczas konieczne będzie poprawienie czytelności strony i trzeba będzie ponownie zdefiniować style określające np. typografię nagłówków czy szerokość marginesów.

 

Plik Normalize.css jest swojego rodzaju alternatywą dla standardowego resetowania stylów CSS, ponieważ pozwala zachować pewne elementy i przez to kodowanie stron staje się mniej męczące. Przykładowo Normalize.css pozostawia bez zmian style typograficzne, a także ujednolica stosowanie stylów w różnych przeglądarkach i zamiast np. ustalać taką samą wielkość wszystkich czcionek, w pliku tym określane są ich spójne parametry. Normalize.css poprawia też błędy przeglądarek na komputerach i smartfonach, których nie koryguje zwykły reset stylów CSS. Jeśli więc będziemy tworzyć stronę lub poprawiać czyjąś witrynę, warto używać tego pliku. Dzięki temu takie elementy jak nagłówki czy kolory zostaną zachowane, a style będą w jednakowy sposób stosowane we wszystkich przeglądarkach.

 

[...]

 

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"