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-family
dla 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-base
i$line-height-base
jako naszej bazy typograficznej zastosowanej do<body>
. - Ustaw globalny kolor linku za pomocą
$link-color
. - Użyj
$body-bg
, aby ustawićbackground-color
na<body>
(#fff
domyś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>
.h1
Dostę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.
<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-sizes
mapy Sass i dwóch zmiennych $display-font-weight
oraz $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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>
Pamiętaj, że te tagi powinny być używane w celach semantycznych:
<mark>
przedstawia tekst, który jest zaznaczony lub wyróżniony w celach informacyjnych lub notacyjnych.<small>
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.<u>
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:
.mark
zastosuje te same style co<mark>
..small
zastosuje te same style co<small>
..text-decoration-underline
zastosuje te same style co<u>
..text-decoration-line-through
zastosuje te same style co<s>
.
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ść, 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 .initialism
do 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>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. <p>
) z .blockquote-footer
klasą. Pamiętaj, aby zapakować również nazwę pracy źródłowej <cite>
.
<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.
<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>
<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-style
i 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 margin
za pomocą kombinacji dwóch klas .list-inline
i .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-truncate
klasę, 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
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mieszanki
Nie ma dedykowanych domieszek dla typografii, ale Bootstrap używa Responsive Font Sizing (RFS) .