in English

Typografia

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

Na tej stronie

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

html

<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

html

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

Wyświetlacz 1

Wyświetlacz 2

Wyświetlacz 3

Wyświetlacz 4

Wyświetlacz 5

Wyświetlacz 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Wyświetlane nagłówki są konfigurowane za pomocą $display-font-sizesmapy Sass i dwóch zmiennych $display-font-weightoraz $display-line-height.

Wyświetlane nagłówki można dostosować za pomocą dwóch zmiennych $display-font-familyi $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Prowadzić

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

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

html

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

html

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

Pamiętaj, że te tagi powinny być używane w celach semantycznych:

przedstawia tekst, który jest zaznaczony lub wyróżniony w celach informacyjnych lub notacyjnych.
przedstawia komentarze poboczne i drobnym drukiem, takie jak prawa autorskie i tekst prawny.
<s>reprezentuje element, który nie jest już istotny lub nie jest już dokładny.
reprezentuje zakres tekstu śródliniowego, który powinien być renderowany w sposób wskazujący, że zawiera adnotację nietekstową.

Jeśli chcesz nadać styl swojemu tekstowi, powinieneś zamiast tego użyć następujących klas:

.markzastosuje te same style co .
.smallzastosuje te same style co .
.text-decoration-underlinezastosuje te same style co .
.text-decoration-line-throughzastosuje te same style co <s>.

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

Narzędzia tekstowe

Zmień wyrównanie, przekształcenie, styl, grubość, wysokość linii, dekorację 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

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.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nazywanie źródła

Specyfikacja HTML wymaga, aby przypisanie cytatu blokowego znajdowało się poza domeną <blockquote>. Wprowadzając atrybucję, zapakuj <blockquote>ją w a <figure>i użyj <figcaption>elementu na poziomie bloku (np. ) z .blockquote-footerklasą. Pamiętaj, aby zapakować również nazwę pracy źródłowej <cite>.

Dobrze znany cytat zawarty w elemencie blockquote.

html

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

Wyrównanie

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

Dobrze znany cytat zawarty w elemencie blockquote.

html

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

Dobrze znany cytat zawarty w elemencie blockquote.

html

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

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

html

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

html

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

html

<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

W Bootstrap 5 domyślnie włączyliśmy responsywne rozmiary czcionek, co pozwala na bardziej naturalne skalowanie tekstu w różnych rozmiarach urządzenia i oknach ekranu. Zajrzyj na stronę RFS, aby dowiedzieć się, jak to działa.

Sass

Zmienne

Nagłówki mają kilka dedykowanych zmiennych do określania rozmiaru i odstępów.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Różne elementy typografii omówione tutaj i w Reboot również mają dedykowane zmienne.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mieszanki

Nie ma dedykowanych domieszek dla typografii, ale Bootstrap używa Responsive Font Sizing (RFS) .