Sprawdź najnowszą wersję typografii zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Twórz własny kompozycję tekstu w dokumentach za pomocą generatora typografiiy.

W poprzednich wpisach opisałem jak działa Bootstrapowy grid i jak z niego korzystać. Teraz przyszedł czas na opisywanie poszczególnych elementów treści naszej strony. Skupimy się na typografii, obrazach czy tabelach.

Nagłówki

Język HTML udostępnia nam sześć nagłówków od <h1> do <h6>. Nagłówki te nie służą, a przynajmniej nie powinny służyć do definiowania nimi wielkości tekstu na naszej witrynie. Są one renderowane jako font o różnej wielkości przez przeglądarki gdyż mają służyć za tytuły i podtytuły na naszej stronie a jak wiemy HTML służył na początku do tworzenia dokumentów tekstowych. Tak są też odbierane przez roboty Google. Dlatego jeśli chcecie umieścić tekst napisany wielkimi literami, który nie jest tytułem jakiejś sekcji a jedynie ozdobnikiem to nie korzystajcie ze znaczników H a ostylujcie sobie zwykły paragraf na przykład poprzez poprzez font-size: 3rem;. Tyle słowem wstępu.

Znaczniki H są już ostylowane w Bootstrapie poprzez dodanie im dolnego marginesu oraz font-weight: 500;. Dodanie większych odstępów, zmiana grubości fonta, jego koloru itp należy do was.

<h1>h1. nagłówek Bootstrap</h1>
<h2>h2. nagłówek Bootstrap</h2>
<h3>h3. nagłówek Bootstrap</h3>
<h4>h4. nagłówek Bootstrap</h4>
<h5>h5. nagłówek Bootstrap</h5>
<h6>h6. nagłówek Bootstrap</h6>

Pisałem wyżej o tym, żeby ostylować sobie paragraf gdy nie musimy używać H. Oczywiście twórcy Bootstrapa zrobili to za Nas:) Jedyne co musimy zrobić by uzyskać duży font to dodać odpowiednią klasę od .h1 do .h6. Każda z nich odpowiada wielkości wybranego nagłówka.

<p class="h1">h1. paragraf Bootstrap</p>
<p class="h2">h2. paragraf Bootstrap</p>
<p class="h3">h3. paragraf Bootstrap</p>
<p class="h4">h4. paragraf Bootstrap</p>
<p class="h5">h5. paragraf Bootstrap</p>
<p class="h6">h6. paragraf Bootstrap</p>

Nagłówek z dodatkowym tekstem

Do dyspozycji mamy również gotowy element, który pozwala stworzyć nam nagłówek z mniejszym przypisem. Jedynie co trzeba zrobić to wewnątrz znacznika <h3> umieścić znacznik <small class="text-muted"> Tekst przypisu </small>.

<h3>
  Taki sobie nagłówek
  <small class="text-muted">Z mniejszym dopiskiem</small>
</h3>

Klasa .text-muted odpowiada za ten szary kolor tekstu. Tych klas jest więcej ale o nich później.

Jeszcze większe nagłówki

Może się zdarzyć tak, że font o wielkości 36px jest jednak za mały i nie pasuje do naszego projektu. Tutaj możemy, jak wyżej skorzystać z font-size: 50px; lub z gotowej klasy. Klasy te mają nazwy od .display-1 do .display-4. I możemy je stosować zarówno do nagłówków jak i paragrafów

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>

Większy paragraf

Powyższe klasy oferują różne rozmiary naszego tekstu. Ale trzeba pamiętać, która z nich oferuje jaką wielkość. Gdy chcemy zwyczajnie zrobić trochę większy paragraf to możemy skorzystać z dedykowanej klasy .lead.

<p class="lead">Paragraf z klasą lead</p>

Style elementów liniowych

Jak wiecie w HTMLu mamy elementy blokowe czyli takie, które użyte w kodzie bez żadnego CSSa układają się pod sobą (jak na przykład paragraf czy div) oraz elementy liniowe czyli takie, które użyte obok siebie układają się liniowo (jak na przykład span czy strong). Bootstrap oferuje nam stylowanie tych elementów bez użycia klas.

<p>Użycie znacznika mark pozwala na <mark>podświetlenie</mark> tekstu.</p>
<p><del>Znacznik del oznacza, że tekst jest już nie ważny.</del></p>
<p><s>Znacznik s oznacza, że tekst nie jest już aktualny.</s></p>
<p><ins>Znacznika ins używamy dla dodatkowych informacji.</ins></p>
<p><u>Znacznik u powoduje podkreślenie tekstu.</u></p>
<p><small>Znacznik small wyświetli mniejszy tekst i jego "ważność".</small></p>
<p><strong>Znacznik strong powoduje pogrubienie tekstu i zwiększa jego "ważność".</strong></p>
<p><em>Znacznik em wyświetli tekst pochylony.</em></p>

Tutaj znów musimy wrócić do początków HTMLa i pamiętać, że wyżej wymienione znaczniki, podobnie jak nagłówki mają swoje znaczenie w układzie dokumentu. Dlatego jeśli chcecie na przykład pogrubić tekst ale nie jest on wcale ważniejszą częścią zdania to używajcie do tego CSSa a nie znacznika <strong>.

Oczywiście Bootstrap przygotował klasy, które spowodują na przykład podświetlenie wyrazu ale nie zmienią jego sensu w dokumencie. Takie klasy to:

• .mark zamiast znacznika mark
• .small zamiast znacznika small

Dodatkowo, możecie używać znacznika <b> zamiast <strong> w celu pogrubienia tekstu oraz <i> zamiast znacznika <em> np. dla definicji.

Manipulacja tekstem

Bootstrap oferuje gotowe klasy służące do wyrównywania tekstu, zmiany małych liter na DUŻE itp. Ale o tym w innym wpisie. (Jak stworzę wpis to podepnę tutaj linka).

Skróty w tekscie

Tworząc jakiś tekst zdarza się nam używać różnych skrótów jak na przykład HTML. Gdy zajdzie taka potrzeba i chcemy aby po najechaniu kursorem na owy skrót pojawiało nam się jego rozwinięcie, możemy skorzystać ze znacznika <abbr> z atrybutem title="Rozwinięcie naszego skrótu".

<abbr title="Kaskadowe arkusze stylów">CSS</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Dodanie klasy .initialism powoduje wyświetlenie tekstu o minimalnie mniejszej wielkości.

Cytat

Czy jest cytat wie każdy. Cytując czyjeś słowa dobrze jest wyróżnić je wizualnie. Do cytowania służy znacznik <blockquote> i jest on wstępnie ostylowany w Bootstrapie za pomocą klasy .blockquote

<blockquote class="blockquote">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Zauważcie, że paragraf ma klasę .m-b-0, która oznacza margin-bottom: 0;, o tych klasach również powstanie wpis. (podepnij linka!).

Cytat z podpisem

Używając cytatu wypadało by wyróżnić autora i źródło. ten efekt osiągniemy poprzez dodanie wewnątrz <blockquote> znacznika <footer class="blockquote-footer">, natomiast źródło podajmy wewnątrz znacznika <cite>. Przykład i kod wyglądają następująco:

<blockquote class="blockquote">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Ktoś sławny w <cite title="Tytuł książki, strona 25">Tytuł książki</cite></footer>
</blockquote>

Cytat wyrównany do prawej

Jeśli chcemy by nasz cytat był wyrównany do prawej to wystarczy do klasy .blockquote dodać klasę .blockquote-reverse

<blockquote class="blockquote blockquote-reverse">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Ktoś sławny w <cite title="Tytuł książki, strona 25">Tytuł książki</cite></footer>
</blockquote>

Listy

Z list korzystamy bardzo często, gdy chcemy wypunktować nasze mocne strony, gdy chcemy podać składniki przepisu, gdy podajemy kroki jakiejś czynności. Bootstrap daje nam dwie klasy do użycia z listami. Jedna z nich .list-unstyled wyłącza „kropki” przy elemencie listy. Druga .list-inline wyświetla elementy listy nie pod sobą a obok siebie.

Lista bez wypunktowań

Głównemu elementowi listy, czyli <ul> dodajemy klasę .list-unstyled. Jeśli zagnieżdzamy listy to wewnętrzny element <ul> również musi mieć dodaną klasę, w przeciwnym wypadku, w zagnieżdżonej liście wyświetlą się „kropki”.

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Lista liniowa

Jeśli z jakiegoś powodu chcemy by kolejne punkty naszej listy wyświetlały się obok a nie pod sobą to najpierw elementowi <ul> dodajemy klasę .list-inline a każdemu elementowi <li> dodajemy klasę .list-inline-item

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Lista z opisem

HTML posiada znaczniki <dl>, <dt>, <dd>. Można je opisać mniej więcej tak: dl – description list, czyli wrapper naszej listy. dt – description title – tytuł listy. dd – description definition – opis elementu na liście. Tak samo jak przy listach ul oznacza „unordered list” czyli lista nieuporządkowana tj. z kropkami. ol – ordered list – lista z numerkami. li – list item – element listy:). Ale przejdźmy do konkretów.

Listę z opisem tworzymy od otwarcia znacznika <dl> z klasą .row. Każdy element listy składa się z tytułu i opisu, więc korzystamy z <dt> z klasą col-sm-* gdzie pod gwiazdkę podstawiamy wybraną przez nas szerokość kolumny. Kolejnym elementem jest opis, tutaj użyjemy <dd> z klasą col-sm-* pamiętając by szerokość dt po zsumowaniu z szerokością dd nie przekroczyło 12 kolumn. Zagnieżdżanie realizujemy tak samo, wstawiając nowy dl wewnątrz dd.

<dl class="row">
  <dt class="col-sm-3">Tytuł elementu listy</dt>
  <dd class="col-sm-9">Opis tego co zawarliśmy w tytule elementu listy.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Zagnieżdzanie</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Zagnieżdżony tytuł elementu listy</dt>
      <dd class="col-sm-8">Opis tego co zawarliśmy w zagnieżdzonym tytule elementu listy.</dd>
    </dl>
  </dd>
</dl>

Dodanie klasy .text-truncate do dt spowoduje, że długi tytuł zamiast przejść do kolejnej linii zostanie skrócony i dodane będą na końcu trzy kropki.