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ą Bootsrapa

Data publikacji: 15-06-2020 Autor: Grzegorz Kubera
Rys. 1. Transparent...

W piątej części kursu skupiamy się na stylach przeznaczonych do modyfikowania typografii stosowanej na stronach internetowych. Bootstrap oferuje w tym zakresie duże możliwości – pora poznać te najważniejsze!

 

Jumbotron to kolejny z elementów wzbogacających stronę WWW opartą na Bootstrapie. Jest to duży szary element blokowy, w którym możemy umieszczać treści mające przyciągać uwagę odbiorców. Rysunek 1 przedstawia przykładowe zastosowanie jumbotrona.


Co ważne, w jego wnętrzu może znajdować się w zasadzie dowolny kod HTML, w tym inne elementy i klasy Bootstrapa.


Aby stworzyć jumbotron, używamy polecenia <div> z klasą .jumbotron.. W praktyce wygląda to tak:


<div class="container">
<div class="jumbotron">
<h1>Kurs Bootstrapa</h1>
<p>Tekst w jumbotronie</p>
</div>
<p>Przykładowy tekst nr 1 wstawiony poza jumbotronem.</p>
<p>Przykładowy tekst nr 2 wstawiony poza jumbotronem.</p>
</div>


Dodatkowo możemy stworzyć jumbotron zajmujący całą szerokość ekranu. W tym celu dodajemy klasę .jumbotron-fluid oraz .container lub .container-fluid wewnątrz kodu. Czyli w praktyce:


<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Kurs Bootstrapa</h1>
<p>Tekst w jumbotronie.</p>
</div>
</div>
<div class="container">
<p>Przykładowy tekst nr 1 wstawiony poza jumbotronem.</p>
<p>Przykładowy tekst nr 2 wstawiony poza jumbotronem.</p>
</div>


Gotowy efekt z jumbotronem na całą szerokość ekranu przedstawia rys. 2.

 

> NAGŁÓWKI W BOOTSTRAPIE


W przypadku każdej strony WWW jednym z jej najważniejszych elementów jest typografia. Stają więc przed nami pytania: Jakie style typograficzne oferuje Bootstrap? Czy możemy dostosowywać je do własnych preferencji? Zacznijmy od podstaw, podkreślając, że Bootstrap zajmuje się za nas doborem typografii. Nie musimy więc wybierać rodziny czcionek, z których chcemy korzystać, aby zachować dobrą czytelność tekstu. Domyślnie Bootstrap ma już dobrze zdefiniowane style typograficzne (ramka Domyślna typografia Bootstrapa).


Podstawowym elementem na stronie, jeśli chodzi o tekst, są nagłówki. Bootstrap oferuje domyślne wielkości czcionek i wysokości wierszy dla wszystkich standardowych nagłówków HTML (od <h1> do <h6>). Na rys. 3 możemy zobaczyć, jak wyglądają nagłówki. Ich kod HTML to:


<!DOCTYPE html>
<html lang="pl">
<head>
<title>Czcionki</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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Nagłówek h1 (40px)</h1>
<h2>Nagłówek h2 (32px)</h2>
<h3>Nagłówek h3 (28px)</h3>
<h4>Nagłówek h4 (24px)</h4>
<h5>Nagłówek h5 (20px)</h5>
<h6>Nagłówek h6 (16px)</h6>
</div>
</body>
</html>


Na bootstrapowej stronie możemy również tworzyć wierszowe nagłówki z tagiem <small>. Dzięki temu jesteśmy w stanie dodawać bloki mniejszego tekstu uzupełniającego nagłówek. Przykład tego formatowania znajdziemy na rys. 4. Jego kod wygląda następująco:


<div class="container">
<h1>Teksty – mały obok dużego.</h1>
<p>Element "small" używamy do tworzenia mniejszego tekstu, tuż obok tekstu głównego. Czyli:</p>
<h1>Nagłówek h1 (40px) <small> z tekstem dodatkowym</small></h1>
<h2>Nagłówek h2 (32px) <small> z tekstem dodatkowym</small></h2>
<h3>Nagłówek h3 (28px) <small> z tekstem dodatkowym</small></h3>
<h4>Nagłówek h4 (24px) <small> z tekstem dodatkowym</small></h4>
<h5>Nagłówek h5 (20px) <small> z tekstem dodatkowym</small></h5>
<h6>Nagłówek h6 (16px) <small> z tekstem dodatkowym</small></h6>
</div>


Poza tym Bootstrap ma jeszcze inny rodzaj nagłówków – typu Display, które wyróżniają się większym rozmiarem czcionki i mniejszą grubością tekstu. Do wyboru mamy cztery klasy: .display-1, .display-2, .display-3 oraz .display-4. Nagłówki te widoczne są na rys. 5, a ich kod to:


<div class="container">
<h1>Nagłówki Display</h1>
<p>Nagłówki Display mogą dodatkowo wyróżniać treść.:</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>


Poza nagłówkami warto znać jeszcze inne elementy typografii WWW, które związane są już bezpośrednio z treścią tekstową.

 

[...]

 

Dziennikarz z ponad 13-letnim doświadczeniem i autor książek nt. start-upów i przedsiębiorczości.

Artykuł pochodzi z miesięcznika: IT Professional

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"