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, używamy domyślnego katalogu głównego przeglądarki font-size(zazwyczaj 16 pikseli), aby odwiedzający mogli dostosować domyślne ustawienia 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.

To jest główny akapit. Wyróżnia się od zwykłych akapitów.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Dobrze znany cytat zawarty w elemencie blockquote.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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>.

Dobrze znany cytat zawarty w elemencie blockquote.

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

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Dobrze znany cytat zawarty w elemencie blockquote.

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

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Dobrze znany cytat zawarty w elemencie blockquote.

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

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

To jest lista.
Wygląda na zupełnie niestylizowane.
Strukturalnie to wciąż lista.
Jednak ten styl dotyczy tylko bezpośrednich elementów podrzędnych.
Listy zagnieżdżone:
- nie ma wpływu na ten styl
- nadal będzie pokazywać punktor
- i mieć odpowiedni lewy margines
W niektórych sytuacjach może się to przydać.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

W linii

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

To jest pozycja na liście.
I kolejny.
Ale są wyświetlane w tekście.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</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.

Termin

Definicja terminu.

I jeszcze trochę tekstu definicji zastępczej.

Inny termin

Ta definicja jest krótka, więc nie ma dodatkowych akapitów ani niczego.

Termin obcięty jest obcięty

Może to być przydatne, gdy przestrzeń jest ciasna. Dodaje na końcu wielokropek.

Zagnieżdżanie

Zagnieżdżona lista definicji: Słyszałem, że lubisz listy definicji. Pozwól, że wstawię listę definicji do twojej listy definicji.

<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Responsywne rozmiary czcionek

Od wersji 4.3.0 Bootstrap 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 .