Typografia strony

Szczególną rolę niektórych elementów treści sygnalizuje ich formatowanie (stylizacja). Poniżej prezentujemy przykłady, objaśnienia i - w razie potrzeby - instrukcje stosowania.

Obramowanie obrazków

W prezentacji obrazków można zastosować trzy klasy opisujące ich obramowanie: img-rounded, img-circle, img-polaroid.

Obrazek przykładowy z zaokrąglonymi narożnikammi

Położenie grafiki

Ilustrację, którą chcemy wyświetlić po lewej stronie tekstu, oznaczamy atrybutem klasy: pull-left.

Ilustrację, którą chcemy wyświetlić po prawej stronie tekstu, oznaczamy atrybutem klasy: pull-right.

Obrazek przykładowy po lewej stronie tekstu Obrazek przykładowy po prawej stronie tekstu tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Nagłówki

Nagłówki opisują strukturę zawartości stron. Nagłówki I i II poziomu generowane są przez system, w dodawanej zawartości używamy ich wyjątkowo. Do oznaczenia śródtytułów w artykułach i innych treściach stosujemy nagłówki h3, h4, h5 i h6.

Nagłówek I poziomu

Nagłówki najwyższego I poziomu (

) opisują główną zawartość strony. Są generowane przez system.

Nagłówek II poziomu

Nagłówki II poziomu oznaczają tytuły pozycji - artykułów, przeglądów artykułów, list pozycji w komponentach. Rownież są generowane przez system.

Nagłówek III poziomu

Nagłówka

używamy do oznaczenia śródtytułów oraz do oznakowania tytułów modułów, generowanych automatycznie. W tytułach modułów dodatkowym wyróżnikiem nagłówka bywa kolor czcionki, niekiedy tło.

Nagłówki IV, V i VI poziomu - śródtytuły

Nagłówków IV, V i VI poziomu również używamy jako śródtytułów.

Nagłówek IV poziomu

Akapit tekstu pod tytułem oznaczonym nagłówkiem

. Fragment z tytułem oznaczonym nagłówkiem

powinien następować po fragmentach oznaczonych nagłówkiem

lub tuż za nagłówkiem

Tytuł V poziomu

Akapit tekstu pod tytułem oznaczonym nagłówkiem

. Fragment z tytułem oznaczonym nagłówkiem

powinien następować po fragmentach oznaczonych nagłówkiem

lub tuż za nagłówkiem

Tytuł VI poziomu

Akapit tekstu pod tytułem oznaczonym nagłówkiem

. Fragment z tytułem oznaczonym nagłówkiem

powinien następować po fragmentach oznaczonych nagłówkiem

lub tuż za nagłówkiem

Blok numerowany

W przedstawianiu procedur wymagających szerszego objaśniania kolejne kroki można oznaczać numerowanymi blokami tekstu. Stosujemy wówczas atrybut klasy jm-block lub jm-block second opisujący akapit, a oznaczenie kolejności umieszczammy w znaczniku 01 .

01Numerowany blok tekstu.

01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

aNumerowany blok tekstu.

aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

Bloki kolorowane

Wyróżnienia niektórych rodzajów informacji można dokonać za pomocą kolorowanych bloków tekstu

Istotne informacje istotne, których nie można pominąć.

Informacje, na które koniecznie chcemy zwrócić uwagę, np. o błędach.

Wiadomość i inna informacja przeznaczona np. do zapamiętania

Ciekawostka, informacja rozszerzające, uzupełniająca tekst zasadniczy

Blok z ikoną

Dla oznaczenia różnego typu informacji można również stosować bloki z ikoną umieszczaną po lewej stronie tektu, jak w tym opisie. Znacznik bloku, np. akapitu, wzbogacamy wówczas o atrybut klasy z nazwą ikony, np.

Tu umieszczony tekst

Cytaty - blockquote

Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie.

Autor i źródło cytatu

Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj.

Autor i źródło cytatu

Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj

Autor i źródło cytatu

Listy nieuporządkowane

Listy nieuporządkowane -

....- z punktorami stosowane są do wyszczególnienia elementów lub czynności w przypadkach, gdy ich kolejność nie ma większego znaczenia.

<-- tu elementy listy -->

jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt

<-- tu elementy listy -->

jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt

<-- tu elementy listy -->

jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt
  - również element wykazu - podpunkt

Listy numerowane

Listy numerowane-

....wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.

<-- tu elementy listy -->

Wykonaj najpierw tę czynność.

Potem wykonaj czynność kolejną.

Później wykonaj czynność trzecią, na którą złożą się

Działanie pierwsze

Działanie drugie złożone z trzech kroków

Krok 1 - polecenie

Krok 2 - polecenie

Krok 3 - polecenie

<-- tu elementy listy -->

Wykonaj najpierw tę czynność.

Potem wykonaj czynność kolejną.

Później wykonaj czynność trzecią, na którą złożą się

Działanie pierwsze

Działanie drugie złożone z trzech kroków

Krok 1 - polecenie

Krok 2 - polecenie

Krok 3 - polecenie

<-- tu elementy listy -->

Wykonaj najpierw tę czynność.

Potem wykonaj czynność kolejną.

Później wykonaj czynność trzecią, na którą złożą się

Działanie pierwsze

Działanie drugie złożone z trzech kroków

Krok 1 - polecenie

Krok 2 - polecenie

Krok 3 - polecenie

Listy definicji

Listy definicji -

- mogą być stosowane do prezentacji słowników terminów, kalendariów

Joomla!,: Najlepszy CMS na świecie!; Najpopularniejszy obok WordPressa,
Definiowany termin: Definicja terminu; Kolejny element definicji
Rok 2015: Pierwsze ważne wydarzenie; Drugie ważne wydarzenie

Czytaj więcej / Przycisk

Czytaj więcej

Przycisk

Ikony z fontów (Glyphicon)

icon-asterisk

icon-plus

icon-euro

icon-minus

icon-cloud

icon-envelope

icon-pencil

icon-glass

icon-music

icon-search

icon-heart

icon-star

icon-star-empty

icon-user

icon-film

icon-th-large

icon-th

icon-th-list

icon-ok

icon-remove

icon-zoom-in

icon-zoom-out

icon-off

icon-signal

icon-cog

icon-trash

icon-home

icon-file

icon-time

icon-road

icon-download-alt

icon-download

icon-upload

icon-inbox

icon-play-circle

icon-repeat

icon-refresh

icon-list-alt

icon-lock

icon-flag

icon-headphones

icon-volume-off

icon-volume-down

icon-volume-up

icon-qrcode

icon-barcode

icon-tag

icon-tags

icon-book

icon-bookmark

icon-print

icon-camera

icon-font

icon-bold

icon-italic

icon-text-height

icon-text-width

icon-align-left

icon-align-center

icon-align-right

icon-align-justify

icon-list

icon-indent-left

icon-indent-right

icon-facetime-video

icon-picture

icon-map-marker

icon-adjust

icon-tint

icon-edit

icon-share

icon-check

icon-move

icon-step-backward

icon-fast-backward

icon-backward

icon-play

icon-pause

icon-stop

icon-forward

icon-fast-forward

icon-step-forward

icon-eject

icon-chevron-left

icon-chevron-right

icon-plus-sign

icon-minus-sign

icon-remove-sign

icon-ok-sign

icon-question-sign

icon-info-sign

icon-screenshot

icon-remove-circle

icon-ok-circle

icon-ban-circle

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-arrow-down

icon-share-alt

icon-resize-full

icon-resize-small

icon-exclamation-sign

icon-gift

icon-leaf

icon-fire

icon-eye-open

icon-eye-close

icon-warning-sign

icon-plane

icon-calendar

icon-random

icon-comment

icon-magnet

icon-chevron-up

icon-chevron-down

icon-retweet

icon-shopping-cart

icon-folder-close

icon-folder-open

icon-resize-vertical

icon-resize-horizontal

icon-hdd

icon-bullhorn

icon-bell

icon-certificate

icon-thumbs-up

icon-thumbs-down

icon-hand-right

icon-hand-left

icon-hand-up

icon-hand-down

icon-circle-arrow-right

icon-circle-arrow-left

icon-circle-arrow-up

icon-circle-arrow-down

icon-globe

icon-wrench

icon-tasks

icon-filter

icon-briefcase

icon-fullscreen

icon-dashboard

icon-paperclip

icon-heart-empty

icon-link

icon-phone

icon-pushpin

icon-usd

icon-gbp

icon-sort

icon-sort-by-alphabet

icon-sort-by-alphabet-alt

icon-sort-by-order

icon-sort-by-order-alt

icon-sort-by-attributes

icon-sort-by-attributes-alt

icon-unchecked

icon-expand

icon-collapse-down

icon-collapse-up

icon-log-in

icon-flash

icon-log-out

icon-new-window

icon-record

icon-save

icon-open

icon-saved

icon-import

icon-export

icon-send

icon-floppy-disk

icon-floppy-saved

icon-floppy-remove

icon-floppy-save

icon-floppy-open

icon-credit-card

icon-transfer

icon-cutlery

icon-header

icon-compressed

icon-earphone

icon-phone-alt

icon-tower

icon-stats

icon-sd-video

icon-hd-video

icon-subtitles

icon-sound-stereo

icon-sound-dolby

icon-sound-5-1

icon-sound-6-1

icon-sound-7-1

icon-copyright-mark

icon-registration-mark

icon-cloud-download

icon-cloud-upload

icon-tree-conifer

icon-tree-deciduous

Przycisk modułu na ukrywanej kanwie (Offcanvas)

Przełącznik bocznego ukrywanego modułu menu użytecznego w urządzeniach przenośnych umieszczamy za pomocą kodu

Łącza społecznościowe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..