Source

Typografia

Dokumentacja i przykłady typografii Bootstrap, w tym ustawienia globalne, nagłówki, tekst podstawowy, listy i nie tylko.

Ustawienia ogólne

Bootstrap ustawia podstawowe globalne style wyświetlania, typografii i łączy. Gdy potrzebna jest większa kontrola, zapoznaj się z tekstowymi klasami narzędziowymi .

Użyj natywnego stosu czcionek, który wybiera najlepsze font-familydla każdego systemu operacyjnego i urządzenia.
Aby uzyskać bardziej inkluzywną i dostępną skalę typów, zakładamy domyślny katalog główny przeglądarki font-size(zazwyczaj 16 pikseli), aby odwiedzający mogli dostosować ustawienia domyślne przeglądarki w razie potrzeby.
Użyj atrybutów $font-family-base, $font-size-basei $line-height-basejako naszej bazy typograficznej zastosowanej do <body>.
Ustaw globalny kolor linku za pomocą $link-colori zastosuj podkreślenia linków tylko na :hover.
Użyj $body-bg, aby ustawić background-colorna <body>( #fffdomyślnie).

Style te można znaleźć w _reboot.scss, a zmienne globalne są zdefiniowane w _variables.scss. Upewnij się, że ustawiłeś $font-size-base.rem

Nagłówki

Dostępne są wszystkie nagłówki HTML <h1>od <h6>.

Nagłówek	Przykład
`<h1></h1>`	h1. Nagłówek Bootstrapa
`<h2></h2>`	h2. Nagłówek Bootstrapa
`<h3></h3>`	h3. Nagłówek Bootstrapa
`<h4></h4>`	h4. Nagłówek Bootstrapa
`<h5></h5>`	h5. Nagłówek Bootstrapa
`<h6></h6>`	h6. Nagłówek Bootstrapa

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1Dostępne są również klasy through .h6, gdy chcesz dopasować styl czcionki nagłówka, ale nie możesz użyć skojarzonego elementu HTML.

h1. Nagłówek Bootstrapa

h2. Nagłówek Bootstrapa

h3. Nagłówek Bootstrapa

h4. Nagłówek Bootstrapa

h5. Nagłówek Bootstrapa

h6. Nagłówek Bootstrapa

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

Dostosowywanie nagłówków

Użyj dołączonych klas narzędziowych, aby odtworzyć mały tekst nagłówka dodatkowego z Bootstrap 3.

Fantazyjny nagłówek wyświetlacza Z wyblakłym tekstem wtórnym

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Wyświetl nagłówki

Tradycyjne elementy nagłówków są zaprojektowane tak, aby działały najlepiej w treści strony. Jeśli chcesz, aby nagłówek się wyróżniał, rozważ użycie nagłówka wyświetlanego — większego, nieco bardziej zdecydowanego stylu nagłówka. Pamiętaj, że te nagłówki domyślnie nie są responsywne, ale możesz włączyć responsywne rozmiary czcionek .

Wyświetlacz 1

Wyświetlacz 2

Wyświetlacz 3

Wyświetlacz 4

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

Prowadzić

Wyróżnij akapit, dodając .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commododo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Wbudowane elementy tekstowe

Stylizacja typowych wbudowanych elementów HTML5.

Możesz użyć znacznika znaku, abyatrakcjatekst.

~~Ten wiersz tekstu ma być traktowany jako tekst usunięty.~~

~~Ta linia tekstu ma być traktowana jako nieaktualna.~~

Ta linia tekstu ma być traktowana jako dodatek do dokumentu.

Ten wiersz tekstu zostanie wyświetlony jako podkreślony

Ta linia tekstu ma być traktowana jako drobny druk.

Ta linia jest renderowana jako tekst pogrubiony.

Ten wiersz jest renderowany jako tekst pisany kursywą.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markDostępne .smallsą również klasy umożliwiające zastosowanie tych samych stylów, co <mark>i <small>przy jednoczesnym uniknięciu niepożądanych konsekwencji semantycznych, jakie przyniosą znaczniki.

Chociaż nie pokazano powyżej, możesz używać <b>i <i>w HTML5. <b>ma na celu podkreślenie słów lub fraz bez przekazywania dodatkowego znaczenia, podczas gdy <i>dotyczy głównie głosu, terminów technicznych itp.

Narzędzia tekstowe

Zmień wyrównanie, przekształcenie, styl, grubość i kolor tekstu za pomocą naszych narzędzi tekstowych i narzędzi do kolorowania .

Skróty

Stylizowana implementacja elementu HTML <abbr>dla skrótów i akronimów, aby wyświetlić rozszerzoną wersję po najechaniu myszą. Skróty mają domyślne podkreślenie i zyskują kursor pomocy, aby zapewnić dodatkowy kontekst po najechaniu kursorem oraz użytkownikom technologii wspomagających.

Dodaj .initialismdo skrótu, aby uzyskać nieco mniejszy rozmiar czcionki.

przyciągać

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Cytaty blokowe

Do cytowania bloków treści z innego źródła w Twoim dokumencie. Owiń <blockquote class="blockquote">dowolny kod HTML jako cytat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

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

Nazywanie źródła

Dodaj a, <footer class="blockquote-footer">aby zidentyfikować źródło. Zawijaj nazwę pracy źródłowej w <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

Ktoś sławny w tytule źródła

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Wyrównanie

W razie potrzeby użyj narzędzi tekstowych, aby zmienić wyrównanie cytatu blokowego.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

Ktoś sławny w tytule źródła

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

Ktoś sławny w tytule źródła

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Listy

Bez stylu

Usuń domyślny list-stylei lewy margines na elementach listy (tylko bezpośrednie dzieci). Dotyczy to tylko elementów list podrzędnych , co oznacza, że musisz dodać klasę również dla wszystkich list zagnieżdżonych.

Lorem ipsum dolor sit amet
Consectetur adipisująca elita
Integer molestie lorem w massa
Facilisis w pretium nisl aliquet
Nulla volutpat aliquam velit
- Fasellus 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

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

W linii

Usuń punktory z listy i zastosuj trochę światła marginza pomocą kombinacji dwóch klas .list-inlinei .list-inline-item.

Lorem ipsum
Fazallus iaculis
Nulla volutpat

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

Wyrównanie listy opisów

Wyrównaj terminy i opisy w poziomie, korzystając z predefiniowanych klas naszego systemu siatek (lub domieszek semantycznych). W przypadku dłuższych terminów możesz opcjonalnie dodać .text-truncateklasę, aby obciąć tekst za pomocą wielokropka.

Listy opisów

Lista opisowa jest idealna do definiowania terminów.

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.

Termin obcięty jest obcięty

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Zagnieżdżanie

Zagnieżdżona lista definicji: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </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">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Responsywne rozmiary czcionek

Bootstrap v4.3 jest dostarczany z opcją włączenia responsywnych rozmiarów czcionek, co pozwala na bardziej naturalne skalowanie tekstu w różnych rozmiarach urządzenia i oknach ekranu. RFS można włączyć, zmieniając $enable-responsive-font-sizeszmienną Sass na truei ponownie kompilując Bootstrap.

Aby wesprzeć RFS , używamy mixin Sass, aby zastąpić nasze normalne font-sizewłaściwości. Responsywne rozmiary czcionek zostaną skompilowane w calc()funkcje z mieszanką jednostek remi rzutni, aby umożliwić responsywne zachowanie skalowania. Więcej o RFS i jego konfiguracji można znaleźć w jego repozytorium GitHub .