Style tekstowe

Style tekstowe w Bootstrap to zbiór klas CSS, które umożliwiają formatowanie tekstu na stronie internetowej. Bootstrap oferuje wiele klas, które umożliwiają dodanie stylów do elementów tekstowych, takich jak nagłówki, akapity, cytaty i wiele innych. Można zastosować różne style tekstu, takie jak rozmiar, waga, kolor, tło, obramowanie, wyrównanie, zaokrąglenie i wiele innych.

Stylowanie tekstu w Bootstrap odbywa się poprzez dodanie odpowiedniej klasy CSS do elementu tekstowego, na przykład <h1>, <p>, <blockquot> itp. Klasa CSS może być dodana bezpośrednio do elementu HTML lub do arkusza stylów CSS. Bootstrap oferuje szereg stylów tekstowych, które można zastosować do różnych elementów na stronie internetowej. Oto kilka przykładów:

Bootstrap oferuje 6 poziomów nagłówków, które można stylizować przy użyciu klas

h1 h2 h3 h4 h5 h6

								
<h1 class="h1">Nagłówek pierwszego poziomu</h1>

<h2 class="h2">Nagłówek drugiego poziomu</h2>

<h3 class="h3">Nagłówek trzeciego poziomu</h3>

<h4 class="h4">Nagłówek czwartego poziomu</h4>

<h5 class="h5">Nagłówek piątego poziomu</h5>

<h6 class="h6">Nagłówek szóstego poziomu</h6>
								
						

Uruchom kod

Nagłówek h1

Nagłówek h2

Nagłówek h3

Nagłówek h4

Nagłówek h5

Nagłówek h6

								
<p class="lead">To jest wiodący tekst.</p>
<h1 class="display-1">To jest tekst z dużą czcionką.</h1>
<p class="font-weight-bold">To jest pogrubiony tekst.</p>
<p class="text-muted">To jest tekst w kolorze szarym.</p>
<p class="text-primary">To jest tekst w kolorze głównym (domyślnie niebieskim).</p>
<p class="text-success">To jest tekst w kolorze zielonym.</p>
<p class="text-danger">To jest tekst w kolorze czerwonym.</p>
<p class="text-warning">To jest tekst w kolorze żółtym.</p>
<p class="text-info">To jest tekst w kolorze niebieskim (odpowiadającym kolorowi informacji).</p>
<p class="text-dark">To jest tekst w ciemnym kolorze.</p>
<p class="text-white bg-dark">To jest tekst w białym kolorze na ciemnym tle.</p>
								
						

Uruchom kod

To jest wiodący tekst.

To jest tekst z dużą czcionką.

To jest pogrubiony tekst.

To jest tekst w kolorze szarym.

To jest tekst w kolorze głównym (domyślnie niebieskim).

To jest tekst w kolorze zielonym.

To jest tekst w kolorze czerwonym.

To jest tekst w kolorze żółtym.

To jest tekst w kolorze niebieskim (odpowiadającym kolorowi informacji).

To jest tekst w ciemnym kolorze.

To jest tekst w białym kolorze na ciemnym tle.

Lista punktowana oraz Lista numerowana Bootstrap oferuje klasę list-unstyled , która usuwa domyślne style CSS z listy punktowanej lub numerowanej. Można również użyć klas list-inline i list-inline-item do tworzenia list poziomych. list-inline oraz list-inline-item

								
<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>

<ol class="list-unstyled">
  <li>Numer 1</li>
  <li>Numer 2</li>
  <li>Numer 3</li>
</ol>

<ul class="list-inline">
  <li class="list-inline-item">Element 1</li>
  <li class="list-inline-item">Element 2</li>
  <li class="list-inline-item">Element 3</li>
</ul>
								
						

Bootstrap oferuje klasę blockquote , która umożliwia tworzenie bloków z cytatem. Można również dodać autorstwo cytatu przy użyciu klasy takiej jak blockquote-footer .

								
<blockquote class="blockquote">
<p>"Programowanie to nie tylko pisanie instrukcji, to tworzenie rozwiązania."</p>
</blockquote>

<blockquote class="blockquote">
<p>"Kod jest jak humor. Jeśli trzeba go tłumaczyć, to jest zły."</p>
<footer class="blockquote-footer">Cory House</footer>
</blockquote>
								
						

Uruchom kod

"Programowanie to nie tylko pisanie instrukcji, to tworzenie rozwiązania."

"Kod jest jak humor. Jeśli trzeba go tłumaczyć, to jest zły."

Notatka

Dzięki stylom tekstowym w Bootstrap 5 można szybko i łatwo zmienić wygląd tekstu na stronie internetowej, bez konieczności pisania dużo kodu CSS.

Ważne

To tylko kilka przykładów stylów tekstowych oferowanych przez Bootstrap. Można również zastosować wiele innych, aby uzyskać różne style tekstu na stronie internetowej.

Więcej znajdziesz tutaj: Bootstrap Docs