Typografia / Typography
autor: Robert

1 lipca 2013

Nagłówki

Możemy korzystać ze wszystkich nagłówków HTML od <h1> do <h6>

h1, Nagłówek H1

h2, Nagłówek H2

h3, Nagłówek H3

h4, Nagłówek H4

h5, Nagłówek H5

h6, Nagłówek H6

Nagłówki z małym tekstem

Jeśli wewnątrz dowolnego nagłówka od <h1> do <h6> umieścimy znacznik <small>...</small> otrzymamy „dopisek” do tytułu

h1, Nagłówek H1 Dopisek

h2, Nagłówek H2 Dopisek

h3, Nagłówek H3 Dopisek

h4, Nagłówek H4 Dopisek

h5, Nagłówek H5 Dopisek

h6, Nagłówek H6 Dopisek

Paragrafy

Standardowy paragraf w Bootstrapie ma czcionkę wielkości 14px; <p>...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Powiększone paragrafy

Umożliwiają stworzenie paragrafu z większą czcionką niż standardowa <p class="lead">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Elementy liniowe

Pogrubienie tekstu

Pogrubianie tekstu uzyskujemy dzięki znacznikowi <strong>...</strong> ale można stosować również znacznik <b>...</b>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pochylenie tekstu

Tekst pochylony uzyskujemy poprzez znacznik <em>...</em> ale można zastosować również znacznik <i>...</i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pomniejszony tekst

Tekst pomniejszony względem standardowego paragrafu otrzymujemy za pomocą znacznika <small>...</small>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wyrównywanie tekstu

Mamy do dyspozycji 4 klasy które wyrównują tekst do lewej, środka i prawej oraz justują tekst:

Tekst wyrównany do lewej.

Tekst wyrównany do środka.

Tekst wyrównany do prawej

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. TEKST WYJUSTOWANY

Skróty

Implementacja znacznika <abbr title="Rozwinięcie skrótu">Skrót</abbr> posiada teraz własne style dzięki czemu tekst znajdujący się w tym znaczniku jest podkreślony kropkami oraz po najechaniu na niego kursorem rozwija się cały tekst.

Tutaj znajduje sie tekst na którego końcu jest Skrót

Adresy

W przypadku stron firmowych podanie adresu jest praktycznie nieuniknione. Możemy zastosować specjalny blok kodu który nam ów adres ładnie sformatuje. Znajduje się on pod znacznikiem <address>...</address>. Należy pamiętać by w jego przypadku łamać linię tagiem <br>

Kursbootstrap.pl
Ulica Sezamkowa 7
Internet, Polska
Tel: (123) 456-7890

Cytowanie

Gdy chcemy zacytować jakiś tekst bądź zamieścić nasze hasło reklamowe możemy użyć znacznika <blockquote>...</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Cytowanie ze źródłem

Gdy pod naszym cytatem chcemy dodać jego autora wystarczy skorzystać ze znacznika <small>...</small>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Cyceron

Cytowanie z wyrównaniem

Możemy również wyrównać nasz cytat do prawej strony kolumny w której się znajduje. Wykonujemy to poprzez dodanie klasy .blockquote-reverse