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: 22-01-2020 Autor: Grzegorz Kubera
Rys. Dostępne warianty...
W kolejnej części kursu opisujemy elementy wzbogacające wygląd stron WWW. Dzięki nim możemy wyróżniać wybrane treści i sprawić, że odbiorca w bardziej przystępny sposób zapozna się z publikowanymi przez nas informacjami.
 
Korzystając z możliwości oferowanych przez Bootstrapa, możemy umieszczać na stronach dodatkowe informacje, używając etykiet i plakietek, jak również wstawiać treści w panelach i prostokątnych tzw. wstawkach. Wszystkie te elementy pozwalają na zmianę wyglądu strony na wiele sposobów – są specjalnymi narzędziami, które służą do tworzenia osobnych sekcji z treściami. Jeśli chcemy wzbogacić wygląd swojej strony, warto postarać się o obecność tego typu dodatkowych elementów. Zacznijmy od etykiet i plakietek.
 
> ETYKIETY
 
Pierwszym elementem, który poznamy w tej części kursu, są etykiety, które przypominają nieco formularze, jednak możemy je wstawiać niemal w dowolnym miejscu na stronie. Z kolei plakietki to głównie obrazkowe etykiety służące do wyświetlania wskaźników i liczb.
 
Etykieta (label) jest przede wszystkim elementem wierszowym, który osadzamy w innym elemencie. Przykładowy nagłówek z etykietą pokazano na rys. 1. Żeby uzyskać podobny efekt, stosujemy klasę .label w elemencie <span> obejmującym tekst, który chcemy w ten sposób wyróżnić. Następnie kolejno określamy wariant etykiety – mamy do dyspozycji:
 
  • .label-danger – ma sygnalizować niebezpieczeństwo,
  • .label-warning – ostrzeżenie,
  • .label-info – informacja,
  • .label-success – sukces,
  • .label-primary – wygląd podstawowy,
  • .label-default – wygląd domyślny.

 

Na rys. 2 przedstawiono wszystkie warianty z domyślnymi kolorami. Idąc dalej, w trakcie projektowania strony WWW możemy uznać, że etykiety są przydatnym elementem, jednak nie pasuje nam ich kolorystyka (np. nie współgra z grafikami wykorzystywanymi na stronie). Co wtedy? Twórcy Boot­strapa pozwalają na zmianę kolorów etykiet – w tym celu musimy stworzyć własne style. Jeśli się na to zdecydujemy, trzeba pamiętać o tym, aby odnośnik do arkusza stylów umieścić w ostatnim wierszu sekcji <head> kodu strony. Musi on być załadowany po stylach Bootstrapa. Dodatkowo własne style CSS zawsze powinniśmy definiować możliwie najbardziej precyzyjnie. Im dokładniej to zrobimy, tym większa jest szansa, że zostaną one poprawnie wyświetlone na stronie.
 
Załóżmy, że chcemy ustawić gradientowe tło dla domyślnego wariantu etykiety (default) oraz dodać ramki i cienie do wszystkich etykiet. W tym celu możemy wprowadzić odpowiednie modyfikacje w kodzie HTML strony opartej na Bootstrapie. Umieszczamy w kodzie następujące informacje: 
 
<p>
<span class="label label-default">Domyślna</span>
<span class="label label-primary">Podstawowa</span>
<span class="label label-success">Sukces</span>
<span class="label label-info">Informacja</span>
<span class="label label-warning">Ostrzeżenie</span>
<span class="label label-danger">Niebezpieczeństwo</span>
</p>
 
[...]
 
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"