Типографија
Документација и примери за Боотстрап типографију, укључујући глобална подешавања, наслове, основни текст, листе и још много тога.
Глобална подешавања
Боотстрап поставља основне глобалне стилове приказа, типографије и линкова. Када је потребна већа контрола, погледајте текстуалне услужне класе .
- Користите изворни скуп фонтова који бира најбоље
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
Наслови
Сви ХТМЛ наслови, <h1>
до <h6>
, су доступни.
Наслов | Пример |
---|---|
|
х1. Боотстрап наслов |
|
х2. Боотстрап наслов |
|
х3. Боотстрап наслов |
|
х4. Боотстрап наслов |
|
х5. Боотстрап наслов |
|
х6. Боотстрап наслов |
.h1
низ .h6
класе су такође доступне, када желите да ускладите стил фонта наслова, али не можете да користите повезани ХТМЛ елемент.
х1. Боотстрап наслов
х2. Боотстрап наслов
х3. Боотстрап наслов
х4. Боотстрап наслов
х5. Боотстрап наслов
х6. Боотстрап наслов
Прилагођавање наслова
Користите укључене услужне класе да поново направите мали секундарни текст наслова из Боотстрапа 3.
Фантастичан наслов екрана Са избледелим секундарним текстом
Прикажи наслове
Традиционални елементи наслова су дизајнирани да најбоље функционишу у садржају ваше странице. Када вам је потребан наслов да бисте се истакли, размислите о коришћењу наслова за приказ — већег, мало више упорног стила наслова. Имајте на уму да ови наслови не реагују подразумевано, али је могуће омогућити прилагодљиве величине фонта .
Дисплеј 1 |
Дисплеј 2 |
Дисплеј 3 |
Дисплеј 4 |
Олово
Истакните пасус додавањем .lead
.
Вивамус сагиттис лацус вел аугуе лаореет рутрум фауцибус долор ауцтор. Дуис моллис, ест нон цоммодо луцтус.
Инлине текстуални елементи
Стилизација за уобичајене уграђене ХТМЛ5 елементе.
Ознаку за означавање можете користити заистакнутитекст.
Овај ред текста треба да се третира као избрисан текст.
Овај ред текста треба да се третира као више нетачан.
Овај ред текста треба да се третира као додатак документу.
Овај ред текста ће се приказати као подвучен
Овај ред текста треба да се третира као ситна слова.
Овај ред је приказан као подебљани текст.
Овај ред је приказан као курзив текст.
.mark
и .small
класе су такође доступне за примену истих стилова као <mark>
и <small>
уз избегавање било каквих нежељених семантичких импликација које би ознаке донеле.
Иако није приказано изнад, слободно користите <b>
и <i>
у ХТМЛ5. <b>
има за циљ да истакне речи или фразе без преношења додатне важности, док <i>
је углавном за глас, техничке термине итд.
Текстуални услужни програми
Промените поравнавање текста, трансформишите, стил, тежину и боју помоћу наших текстуалних услужних програма и боја .
Скраћенице
Стилизована имплементација ХТМЛ <abbr>
елемента за скраћенице и акрониме за приказ проширене верзије при лебдењу. Скраћенице имају подразумевану подвучену линију и добијају курсор помоћи за пружање додатног контекста при лебдењу и корисницима помоћних технологија.
Додајте .initialism
скраћеници за мало мању величину фонта.
аттр
ХТМЛ
Блоцккуотес
За цитирање блокова садржаја из другог извора унутар вашег документа. Замотајте <blockquote class="blockquote">
било који ХТМЛ као цитат.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Именовање извора
Додајте а <footer class="blockquote-footer">
за идентификацију извора. Умотајте име изворног дела у <cite>
.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Поравнање
Користите текстуалне услужне програме по потреби да промените поравнање вашег блок цитата.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Листе
Унстилед
Уклоните подразумевану list-style
и леву маргину на ставкама листе (само за непосредну децу). Ово се односи само на непосредне подређене ставке листе , што значи да ћете морати да додате класу и за све угнежђене листе.
- Лорем ипсум долор сит амет
- Цонсецтетур адиписцинг елит
- Интегер молестие лорем ат масса
- Фацилисис ин претиум нисл аликует
- Нулла волутпат аликуам велит
- Пхаселлус иацулис некуе
- Пурус содалес ултрициес
- Вестибулум лаореет порттитор сем
- Ац тристикуе либеро волутпат ат
- Фауцибус порта лацус фрингилла вел
- Аенеан сит амет ерат нунц
- Егет порттитор лорем
У реду
Уклоните ознаке са листе и примените мало светла margin
комбинацијом две класе .list-inline
и .list-inline-item
.
- Лорем ипсум
- Пхаселлус иацулис
- Нулла волутпат
Поравнање листе описа
Поравнајте термине и описе хоризонтално користећи унапред дефинисане класе нашег система мреже (или семантичке мешавине). За дуже термине, опционо можете да додате .text-truncate
класу да бисте скратили текст троточком.
- Листе описа
- Листа описа је савршена за дефинисање појмова.
- Еуисмод
-
Вестибулум ид лигула порта фелис еуисмод семпер егет лациниа одио сем нец елит.
Донец ид елит нон ми порта гравида ат егет метус.
- Малесуада порта
- Етиам порта сем малесуада магна моллис еуисмод.
- Скраћени термин је скраћен
- Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис цондиментум нибх, ут ферментум масса јусто сит амет рисус.
- Нестинг
-
- Листа угнежђених дефиниција
- Аенеан посуере, тортор сед цурсус феугиат, нунц аугуе бландит нунц.
Прилагодљиве величине фонта
Од верзије 4.3.0, Боотстрап се испоручује са опцијом за омогућавање прилагодљивих величина фонта, омогућавајући тексту да се природније скалира на различитим уређајима и величинама поља за приказ. РФС се може омогућити променом променљиве $enable-responsive-font-sizes
Сасс у true
и поновним компајлирањем Боотстрап-а.
Да бисмо подржали РФС , користимо Сасс микин да заменимо наша нормална font-size
својства. Респонзивне величине фонтова ће бити компајлиране у calc()
функције са мешавином јединица rem
и јединица за приказ како би се омогућило прилагодљиво понашање скалирања. Више о РФС -у и његовој конфигурацији можете пронаћи у његовом ГитХуб спремишту .