Тыпаграфіка
Дакументацыя і прыклады тыпаграфікі Bootstrap, уключаючы глабальныя налады, загалоўкі, асноўны тэкст, спісы і многае іншае.
Глабальныя налады
Bootstrap задае асноўныя глабальныя стылі адлюстравання, тыпаграфікі і спасылак. Калі неабходны дадатковы кантроль, праверце тэкставыя класы ўтыліт .
- Выкарыстоўвайце ўласны стэк шрыфтоў , які выбірае лепшае
font-family
для кожнай АС і прылады. - Для больш інклюзіўнай і даступнай шкалы тыпаў мы прымаем стандартны корань браўзера
font-size
(звычайна 16 пікселяў), каб наведвальнікі маглі наладзіць стандартныя параметры браўзера па меры неабходнасці. - Выкарыстоўвайце атрыбуты
$font-family-base
,$font-size-base
, і$line-height-base
ў якасці нашай друкарскай асновы для<body>
. - Усталюйце глабальны колер спасылкі праз
$link-color
і прымяніце падкрэсліванне спасылкі толькі на:hover
. - Выкарыстоўвайце
$body-bg
для ўстаноўкіbackground-color
на<body>
(#fff
па змаўчанні).
Гэтыя стылі можна знайсці ў _reboot.scss
, а глабальныя зменныя вызначаны ў _variables.scss
. Пераканайцеся ў тым, каб $font-size-base
усталяваць rem
.
Загалоўкі
Усе загалоўкі HTML, <h1>
да <h6>
, даступныя.
Загаловак | Прыклад |
---|---|
|
h1. Загаловак Bootstrap |
|
h2. Загаловак Bootstrap |
|
h3. Загаловак Bootstrap |
|
h4. Загаловак Bootstrap |
|
h5. Загаловак Bootstrap |
|
h6. Загаловак Bootstrap |
.h1
скразныя .h6
класы таксама даступныя, калі вы хочаце адпавядаць стылю шрыфта загалоўка, але не можаце выкарыстоўваць звязаны элемент HTML.
h1. Загаловак Bootstrap
h2. Загаловак Bootstrap
h3. Загаловак Bootstrap
h4. Загаловак Bootstrap
h5. Загаловак Bootstrap
h6. Загаловак Bootstrap
Настройка загалоўкаў
Выкарыстоўвайце дапаможныя класы, каб узнавіць маленькі другасны тэкст загалоўка з Bootstrap 3.
Прыгожы загаловак з бляклым другасным тэкстам
Адлюстраванне загалоўкаў
Традыцыйныя элементы загалоўкаў распрацаваны, каб лепш за ўсё працаваць у асноўнай частцы зместу вашай старонкі. Калі вам патрэбен загаловак, каб вылучыцца, падумайце аб выкарыстанні адлюстравання загалоўка — большага, крыху больш упэўненага стылю загалоўка. Майце на ўвазе, што гэтыя загалоўкі не рэагуюць па змаўчанні, але можна ўключыць адаптыўныя памеры шрыфтоў .
Дысплей 1 |
Дысплей 2 |
Дысплей 3 |
Дысплей 4 |
Свінец
Вылучыце абзац, дадаўшы .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Убудаваныя тэкставыя элементы
Стылі для звычайных убудаваных элементаў HTML5.
Вы можаце выкарыстоўваць пазнаку длявылучыцьтэкст.
Гэты радок тэксту павінен разглядацца як выдалены тэкст.
Гэты радок тэксту павінен разглядацца як недакладны.
Гэты радок тэксту павінен разглядацца як дадатак да дакумента.
Гэты радок тэксту будзе адлюстроўвацца як падкрэслены
Гэты радок тэксту павінен разглядацца як дробны шрыфт.
Гэты радок адлюстроўваецца тлустым шрыфтам.
Гэты радок выдзелены курсівам.
.mark
і .small
класы таксама даступныя для прымянення тых жа стыляў, што <mark>
і <small>
пазбягаючы любых непажаданых семантычных наступстваў, якія могуць прынесці тэгі.
Пакуль гэта не паказана вышэй, не саромейцеся выкарыстоўваць <b>
і <i>
ў HTML5. <b>
прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>
у асноўным для голасу, тэхнічных тэрмінаў і г.д.
Тэкставыя ўтыліты
Змяняйце выраўноўванне тэксту, трансфармацыю, стыль, вагу і колер з дапамогай нашых тэкставых і каляровых утыліт .
Скарачэнні
Стылізаваная рэалізацыя элемента HTML <abbr>
для абрэвіятур і абрэвіятур для паказу разгорнутай версіі пры навядзенні курсора. Скарачэнні маюць падкрэсліванне па змаўчанні і атрымліваюць курсор даведкі, каб забяспечыць дадатковы кантэкст пры навядзенні і для карыстальнікаў дапаможных тэхналогій.
Дадайце .initialism
да абрэвіятуры крыху меншы памер шрыфта.
атр
HTML
Цытаты
Для цытавання блокаў кантэнту з іншай крыніцы ў вашым дакуменце. Абгарніце <blockquote class="blockquote">
любы HTML у якасці цытаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Называнне крыніцы
Дадайце <footer class="blockquote-footer">
для ідэнтыфікацыі крыніцы. Абгарніце назву зыходнага твора ў <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Выраўноўванне
Пры неабходнасці выкарыстоўвайце тэкставыя ўтыліты, каб змяніць выраўноўванне вашай цытаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Спісы
Нестыляваны
Выдаліце стандартнае list-style
і левае поле для элементаў спісу (толькі для непасрэдных даччыных элементаў). Гэта адносіцца толькі да непасрэдных даччыных элементаў спісу , што азначае, што вам таксама трэба будзе дадаць клас для любых укладзеных спісаў.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цэлы лік нападаў lorem і маса
- Facilisis in 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 vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
У радку
Выдаліце маркеры спісу і прымяніце трохі святла margin
з дапамогай камбінацыі двух класаў .list-inline
і .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Нула волютпат
Выраўноўванне спісу апісанняў
Выраўняйце тэрміны і апісанні па гарызанталі, выкарыстоўваючы загадзя вызначаныя класы нашай сістэмы сеткі (або семантычныя міксіны). Для больш працяглых тэрмінаў вы можаце дадаткова дадаць .text-truncate
клас, каб абрэзаць тэкст шматкроп'ем.
- Спісы апісанняў
- Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
- Эўізмод
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Порта Малесуада
- Etiam porta sem malesuada magna mollis euismod.
- Усечаны тэрмін усечаны
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Гняздаванне
-
- Укладзены спіс азначэнняў
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Адаптыўныя памеры шрыфтоў
Пачынаючы з версіі 4.3.0, Bootstrap пастаўляецца з опцыяй уключэння адаптыўных памераў шрыфтоў, што дазваляе тэксту больш натуральна маштабавацца на розных прыладах і ў акне прагляду. RFS можна ўключыць, змяніўшы $enable-responsive-font-sizes
зменную Sass на true
і перакампіляваўшы Bootstrap.
Для падтрымкі RFS мы выкарыстоўваем міксін Sass, каб замяніць нашы звычайныя font-size
ўласцівасці. Адаптыўныя памеры шрыфтоў будуць скампіляваны ў calc()
функцыі з камбінацыяй rem
адзінак і адзінак прагляду, каб уключыць адаптыўнае маштабаванне. Больш падрабязна аб RFS і яго канфігурацыі можна знайсці ў рэпазітары GitHub .