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



26.05.2020

Cloud Native Universe

Jako patron medialny zapraszamy programistów wdrażających lub integrujących się z dowolną...
26.03.2020

Koniec certyfikatów...

MCSA, MCSD i MCSA
26.03.2020

Odświeżony OS

FortiOS 6.4
26.03.2020

Bezpieczeństwo w chmurze

Cisco SecureX
26.03.2020

Modernizacja IT

Nowości w VMware Tanzu
26.03.2020

Krytyczne zagrożenie dla...

Nowa groźna podatność
26.03.2020

Laptopy dla wymagających

Nowe ThinkPady T, X i L
26.03.2020

Serwerowe ARM-y

Ampere Altra
26.03.2020

Energooszczędny monitor

Philips 243B1

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.

prenumerata Numer niedostępny Spis treści

.

Transmisje online zapewnia: StreamOnline

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