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
i zastosuj podkreślenia linków tylko na:hover
. - 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. 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>
.mark
Dostępne .small
są 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 .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 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.
<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.
<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.
<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-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
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-sizes
zmienną Sass na true
i ponownie kompilując Bootstrap.
Aby wesprzeć RFS , używamy mixin Sass, aby zastąpić nasze normalne font-size
właściwości. Responsywne rozmiary czcionek zostaną skompilowane w calc()
funkcje z mieszanką jednostek rem
i rzutni, aby umożliwić responsywne zachowanie skalowania. Więcej o RFS i jego konfiguracji można znaleźć w jego repozytorium GitHub .