Typografia / Typography

6 915 0

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.

Przykład

h1. nagłówek Bootstrap

Semibold 36px

h2. nagłówek Bootstrap

Semibold 30px

h3. nagłówek Bootstrap

Semibold 24px

h4. nagłówek Bootstrap

Semibold 18px
h5. nagłówek Bootstrap
Semibold 14px
h6. nagłówek Bootstrap
Semibold 12px

Kod

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.

Przykład

h1. paragraf Bootstrap

h2. paragraf Bootstrap

h3. paragraf Bootstrap

h4. paragraf Bootstrap

h5. paragraf Bootstrap

h6. paragraf Bootstrap

Kod

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

Przykład

Taki sobie nagłówek Z mniejszym dopiskiem

Kod

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

Przykład

Display 1

Display 2

Display 3

Display 4

Display 1

Display 2

Display 3

Display 4

Kod

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.

Przykład

Paragraf z klasą lead

Kod

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.

Przykład

Użycie znacznika mark pozwala na podświetlenie tekstu.

Znacznik del oznacza, że tekst jest już nie ważny.

Znacznik s oznacza, że tekst nie jest już aktualny.

Znacznika ins używamy dla dodatkowych informacji.

Znacznik u powoduje podświetlenie tekstu.

Znacznik small wyświetli mniejszy tekst.

Znacznik strong powoduje pogrubienie tekstu.

Znacznik em wyświetli tekst pochylony.

Kod

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".

Przykład

CSS

HTML

Kod

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

Przykład

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

Kod

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:

Przykład

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

Ktoś sławny w Tytuł książki

Kod

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

Przykład

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

Ktoś sławny w Tytuł książki

Kod

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”.

Przykład

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Kod

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

Przykład

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Kod

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.

Przykład

Tytuł elementu listy
Opis tego co zawarliśmy w tytule elementu listy.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Zagnieżdzanie
Zagnieżdżony tytuł elementu listy
Opis tego co zawarliśmy w zagnieżdzonym tytule elementu listy.

Kod

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.

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (24 głosów, średnia: 4,79 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*