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.

<img class="img-rounded" src="/image.jpg" />
Obrazek przykładowy prostokątny

 

<img class="img-circle" src="/image.jpg" />
Obrazek przykładowy wpisanny w koło

 

<img class="img-polaroid" src="/image.jpg" />
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.

<img src="/..." class="pull-left" />

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

<img src="/..." class="pull-right" />

Obrazek przykładowy po lewej stronie tekstuObrazek przykładowy po prawej stronie tekstutekst 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

<p><img class="pull-left" src="/images/demo/article.jpg" border="0" alt="Obrazek przykładowy po lewej stronie tekstu" /><img class="pull-right" src="/images/demo/article.jpg" border="0" alt="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</p>

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, h5h6.

Nagłówek I poziomu

Nagłówki najwyższego I poziomu (<h1>) 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 <h3> 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 <h4>. Fragment z tytułem oznaczonym nagłówkiem <h4>powinien następować po fragmentach oznaczonych nagłówkiem <h3> lub tuż za nagłówkiem <h3>.

Tytuł V poziomu

Akapit tekstu pod tytułem oznaczonym nagłówkiem <h5>. Fragment z tytułem oznaczonym nagłówkiem <h5>powinien następować po fragmentach oznaczonych nagłówkiem <h4> lub tuż za nagłówkiem <h4>.

Tytuł VI poziomu

Akapit tekstu pod tytułem oznaczonym nagłówkiem <h6>. Fragment z tytułem oznaczonym nagłówkiem <h6>powinien następować po fragmentach oznaczonych nagłówkiem <h5> lub tuż za nagłówkiem <h5>.

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 <span class="jm">01</span> .

<p class="jm-block"><span class="jm">01</span>Numerowany blok tekstu.</p>

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.

<p class="jm-block second"><span class="jm">a</span>Numerowany blok tekstu. </p>

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

<div class="alert">Istotne informacje istotne, których nie można pominąć.</div>
<div class="alert alert-error">Informacje, na które koniecznie chcemy zwrócić uwagę, np. o błędach.</div>
<div class="alert alert-success">Wiadomość i inna informacja przeznaczona np. do zapamiętania</div>
<div class="alert alert-info">Ciekawostka, informacja rozszerzające, uzupełniająca tekst zasadniczy</div>

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. <p class="jminfo" >.

<p class="jmbadge" >Tu umieszczony tekst</p>

<p class="jmcalendar" >Tu umieszczony tekst</p>

<p class="jmchat" >Tu umieszczony tekst</p>

<p class="jmcheck" >Tu umieszczony tekst</p>

<p class="jmcloud" >Tu umieszczony tekst</p>

<p class="jmdirection" >Tu umieszczony tekst</p>

<p class="jmdivide" >Tu umieszczony tekst</p>

<p class="jmerror" >Tu umieszczony tekst</p>

<p class="jmfire" >Tu umieszczony tekst</p>

<p class="jmflag" >Tu umieszczony tekst</p>

<p class="jmheart" >Tu umieszczony tekst</p>

<p class="jmhome" >Tu umieszczony tekst</p>

<p class="jminfo" >Tu umieszczony tekst</p>

<p class="jmlist" >Tu umieszczony tekst</p>

<p class="jmmail" >Tu umieszczony tekst</p>

<p class="jmpeople" >Tu umieszczony tekst</p>

<p class="jmstar" >Tu umieszczony tekst</p>

<p class="jmstat" >Tu umieszczony tekst</p>

Cytaty - blockquote

<blockquote>
<p>Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie. </p>
<footer><cite>Autor i źródło cytatu</cite></footer>
</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
<blockquote class="pull-right">
<p>Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj.</p>
<footer class="pull-right"><cite>Autor i źródło cytatu</cite></footer>
</blockquote>

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 -<ul><li>....</li></ul>- z punktorami stosowane są do wyszczególnienia elementów lub czynności w przypadkach, gdy ich kolejność nie ma większego znaczenia.

<ul>
<-- tu elementy listy -->
</ul>
  • 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
<ul class="jm-arrow">
<-- tu elementy listy -->
</ul>
  • 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
<ul class="jm-arrow2">
<-- tu elementy listy -->
</ul>
  • 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- <ol><li>....</li></ol>wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.

<ol>
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie
<ol class="jm-roman">
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie
<ol class="jm-alpha">
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie

Listy definicji

Listy definicji -<dl><dt></dt><dd></dd></dl>- mogą być stosowane do prezentacji słowników terminów, kalendariów

<dl>
<-- tutaj umieszczamy listę -->
</dl>
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

<p class="readmore" href="#">Czytaj więcej</a>

Czytaj więcej

<p class="btn" href="#">Przycisk</a>

Przycisk

Ikony z fontów (Glyphicon)

<span class="icon-joomla">&nbsp</span>
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 <p><a class="toggle-nav menu"><span class="icon-align-justify"></span></a></p>

<p><a class="toggle-nav menu"><span class="icon-align-justify"></span></a></p>

Łącza społecznościowe

<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</em>.</p>
<p> </p>
<div class="jm-social">
<a href="/#" class="jm-facebook" target="_blank">facebook</a>
<a href="/#" class="jm-twitter" target="_blank">twitter</a>
<a href="/#" class="jm-link" target="_blank">linkedin</a>
<a href="/#" class="jm-skype" target="_blank">skype</a>
</div>

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

 

Kontakt z nami

<p><span class="icon-map-marker jm-color"> </span>7 Green Lane<br /><span>Pe1 3ba, Peterborough<br /> Cambridgeshire</span></p>
<p><span class="icon-earphone jm-color"> </span>+44 7853 658 965</p>
<p><span class="icon-envelope jm-color"> </span>Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.</p>
<p><span class="icon-check jm-color"> </span>8.00 am to 6.00 pm</p>

7 Green Lane
Pe1 3ba, Peterborough
Cambridgeshire

+44 7853 658 965

Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.

8.00 am to 6.00 pm

Licznik

Aby umieścić na stronie animowany licznik z prostą statystyką, używamy kodu:

<div class="jm-counter">
<div class="row-fluid">
<div class="box span3"><span class="icon-ok"> </span> <span class="number jm-count" data-from="0" data-to="34">34</span> <a href="/#" class="title">Zakończone projekty</a></div>
<div class="box span3"><span class="icon-road"> </span> <span class="number jm-count" data-from="0" data-to="20">20</span> <a href="/#" class="title">Nowe mapy rozwoju</a></div>
<div class="box span3"><span class="icon-thumbs-up"> </span> <span class="number jm-count" data-from="0" data-to="45">45</span> <a href="/#" class="title">Nowe pomysły</a></div>
<div class="box span3"><span class="icon-user"> </span> <span class="number jm-count" data-from="0" data-to="233">233</span> <a href="/#" class="title">Kwalifikowani eksperci</a></div>
</div>
</div>

Tabela z cennikiem

<div class="jm-pricing clearfix col3">
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">29.95</span>
<span class="down">miesiąc</span></div>
<div class="title">Kultura</div>
<div class="content">
<div class="subtitle">Artystyczna spotkanie spełnią najwyższe oczekiwania.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/#">Przyłącz się</a></div>
</div>
</div>
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">39.85</span>
<span class="down">miesiąc</span></div>
<div class="title">Edukacja</div>
<div class="content">
<div class="subtitle">Świetna lokalizacja, serwis i mieszkanie.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/#">Przyłącz się</a></div>
</div>
</div>
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">99.95</span>
<span class="down">miesiąc</span></div>
<div class="title">Strata</div>
<div class="content">
<div class="subtitle">Zobacz różnicę w mieszkaniu.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/#">Przyłącz się</a></div>
</div>
</div>
</div>
już od 29.95 miesiąc
Kultura
Artystyczna spotkanie spełnią najwyższe oczekiwania.
  • Lorem ipsum dolor sit amet
  • Morbi rhoncus diam quis augue
  • Proin non finibus diam
  • Pellentesque varius
  • Vivamus quis leo
  • Donec ut elit maximus
już od 39.85 miesiąc
Edukacja
Świetna lokalizacja, serwis i mieszkanie.
  • Lorem ipsum dolor sit amet
  • Morbi rhoncus diam quis augue
  • Proin non finibus diam
  • Pellentesque varius
  • Vivamus quis leo
  • Donec ut elit maximus
już od 99.95 miesiac
Strata
Zobacz różnicę w mieszkaniu.
  • Lorem ipsum dolor sit amet
  • Morbi rhoncus diam quis augue
  • Proin non finibus diam
  • Pellentesque varius
  • Vivamus quis leo
  • Donec ut elit maximus