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



25.10.2019

Skalowalna infrastruktura

Red Hat OpenStack Platform 15
25.10.2019

Cienki klient 2.0

Windows Virtual Desktop
25.10.2019

Nowy sprzęt Microsoftu

Rodzina Surface się powiększa
24.10.2019

Serwery ARM

Oracle stawia na Ampere Computing
24.10.2019

Wszechstronny i elegancki

Dell XPS 15
10.10.2019

CYBERSEC EXPO - największe w...

Bezpieczeństwo cyfrowe nie jest problemem dotyczącym jedynie działów IT. Obecnie stanowi...
30.09.2019

Nowości w wirtualizacji

VMware World 2019
30.09.2019

Bezpieczeństwo mobile-first

Android 10

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.

prenumerata Numer niedostępny Spis treści

.

Transmisje online zapewnia: StreamOnline

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