Typografia
Dokumentácia a príklady typografie Bootstrap vrátane globálnych nastavení, nadpisov, hlavného textu, zoznamov a ďalších.
Globálne nastavenia
Bootstrap nastavuje základné globálne štýly zobrazenia, typografie a odkazov. Ak je potrebná väčšia kontrola, pozrite si textové pomocné triedy .
- Použite natívny zásobník písiem , ktorý vyberie to najlepšie
font-family
pre každý operačný systém a zariadenie. - Pre komplexnejšiu a dostupnejšiu škálu typov predpokladáme predvolený koreňový adresár prehliadača
font-size
(zvyčajne 16 pixelov), aby si návštevníci mohli podľa potreby prispôsobiť predvolené nastavenia prehliadača. - Použite atribúty
$font-family-base
,$font-size-base
a$line-height-base
ako náš typografický základ aplikovaný na<body>
. - Nastavte globálnu farbu odkazu pomocou
$link-color
a použite podčiarknutie odkazu iba na:hover
. - Použite
$body-bg
na nastavenie abackground-color
na<body>
(#fff
predvolene).
Tieto štýly možno nájsť v _reboot.scss
a globálne premenné sú definované v _variables.scss
. Uistite sa, že ste $font-size-base
zadali rem
.
Nadpisy
K dispozícii sú všetky nadpisy HTML <h1>
až po <h6>
.
Smerovanie | Príklad |
---|---|
|
h1. Bootstrap nadpis |
|
h2. Bootstrap nadpis |
|
h3. Bootstrap nadpis |
|
h4. Bootstrap nadpis |
|
h5. Bootstrap nadpis |
|
h6. Bootstrap nadpis |
.h1
K dispozícii sú aj triedy through .h6
, keď chcete prispôsobiť štýl písma nadpisu, ale nemôžete použiť súvisiaci prvok HTML.
h1. Bootstrap nadpis
h2. Bootstrap nadpis
h3. Bootstrap nadpis
h4. Bootstrap nadpis
h5. Bootstrap nadpis
h6. Bootstrap nadpis
Prispôsobenie nadpisov
Použite zahrnuté pomocné triedy na opätovné vytvorenie malého sekundárneho textu nadpisu z Bootstrapu 3.
Efektný zobrazovaný nadpis S vyblednutým sekundárnym textom
Zobraziť nadpisy
Tradičné prvky nadpisov sú navrhnuté tak, aby čo najlepšie fungovali v obsahu vašej stránky. Keď potrebujete, aby nadpis vynikol, zvážte použitie zobrazovaného nadpisu — väčšieho, trochu viac názorového štýlu nadpisu. Majte na pamäti, že tieto nadpisy v predvolenom nastavení nereagujú, ale je možné povoliť responzívne veľkosti písma .
Displej 1 |
Displej 2 |
Displej 3 |
Displej 4 |
Viesť
Nechajte odsek vyniknúť pridaním .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Vložené textové prvky
Štýl pre bežné vložené prvky HTML5.
Môžete použiť značku značkyZlatý klinectext.
Tento riadok textu sa má považovať za vymazaný text.
Tento riadok textu sa má považovať za už nepresný.
Tento riadok textu má byť považovaný za doplnok k dokumentu.
Tento riadok textu sa vykreslí ako podčiarknutý
S týmto riadkom textu sa má zaobchádzať ako s drobným písmom.
Tento riadok sa vykreslí ako tučný text.
Tento riadok sa vykreslí ako text kurzívou.
.mark
a .small
triedy sú tiež k dispozícii na použitie rovnakých štýlov ako <mark>
a <small>
bez akýchkoľvek nežiaducich sémantických dôsledkov, ktoré by značky priniesli.
Hoci to nie je zobrazené vyššie, pokojne použite <b>
a <i>
v HTML5. <b>
je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo <i>
väčšinou ide o hlas, technické výrazy atď.
Textové pomôcky
Zmeňte zarovnanie textu, transformáciu, štýl, váhu a farbu pomocou našich textových a farebných pomôcok .
Skratky
Štylizovaná implementácia <abbr>
prvku HTML pre skratky a akronymy na zobrazenie rozšírenej verzie pri umiestnení kurzora myši. Skratky majú predvolené podčiarknutie a získajú pomocný kurzor, ktorý poskytuje dodatočný kontext pri umiestnení kurzora myši a používateľom asistenčných technológií.
Pridajte .initialism
skratku pre trochu menšiu veľkosť písma.
attr
HTML
Blokové úvodzovky
Na citovanie blokov obsahu z iného zdroja vo vašom dokumente. Ako citáciu obtočte <blockquote class="blockquote">
ľubovoľný kód HTML .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.
Pomenovanie zdroja
Pridajte a <footer class="blockquote-footer">
na identifikáciu zdroja. Názov zdrojového diela zabaľte do <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.
Zarovnanie
Podľa potreby použite textové nástroje na zmenu zarovnania vašej blokovej ponuky.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.
zoznamy
Neštylizované
Odstráňte predvolený list-style
a ľavý okraj na položkách zoznamu (iba okamžité deti). Týka sa to len položiek zoznamu okamžitých potomkov , čo znamená, že triedu budete musieť pridať aj pre všetky vnorené zoznamy.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elita
- Integer molestie lorem at massa
- Facilisis v pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla veľ
- Aenean sit amet erat nunc
- Eget porttitor lorem
V rade
Odstráňte odrážky zoznamu a použite trochu svetla margin
s kombináciou dvoch tried .list-inline
a .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Zarovnanie zoznamu popisov
Zarovnajte pojmy a popisy vodorovne pomocou preddefinovaných tried nášho mriežkového systému (alebo sémantických mixov). Pre dlhšie výrazy môžete voliteľne pridať .text-truncate
triedu na skrátenie textu pomocou troch bodiek.
- Popisné zoznamy
- Zoznam popisov je ideálny na definovanie výrazov.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Porta Malesuada
- Etiam porta sem malesuada magna mollis euismod.
- Skrátený výraz je skrátený
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Hniezdenie
-
- Vnorený zoznam definícií
- Aeneovský posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responzívne veľkosti písma
Od verzie 4.3.0 sa Bootstrap dodáva s možnosťou povoliť responzívne veľkosti písma, čo umožňuje prirodzenejšie škálovanie textu naprieč zariadeniami a veľkosťami výrezu. RFS je možné povoliť zmenou $enable-responsive-font-sizes
premennej Sass na true
a opätovnou kompiláciou Bootstrap.
Na podporu RFS používame mixin Sass, ktorý nahrádza naše bežné font-size
vlastnosti. Responzívne veľkosti písma budú skompilované do calc()
funkcií s kombináciou rem
jednotiek zobrazenia a výrezu, aby sa umožnilo citlivé škálovanie. Viac o RFS a jeho konfigurácii nájdete v jeho úložisku GitHub .