Типографија
Документација и примери за типографија на Bootstrap, вклучувајќи глобални поставки, наслови, текст на телото, списоци и многу повеќе.
Bootstrap поставува основни глобални стилови на приказ, типографија и врски. Кога е потребна поголема контрола, проверете ги класите за текстуални алатки .
- Користете домашен стек на фонтови што го избира најдоброто
font-family
за секој ОС и уред. - За поинклузивна и попристапна скала на типови, го претпоставуваме стандардниот корен на прелистувачот
font-size
(обично 16 пиксели) за посетителите да можат да ги приспособат стандардните поставки на прелистувачот по потреба. - Користете ги атрибутите
$font-family-base
,$font-size-base
и$line-height-base
како наша типографска основа применета на<body>
. - Поставете ја глобалната боја на врската преку
$link-color
и применувајте ги подвлекувањата на врската само на:hover
. - Користете
$body-bg
за да поставите abackground-color
на<body>
(#fff
стандардно).
Овие стилови може да се најдат во _reboot.scss
, а глобалните променливи се дефинирани во _variables.scss
. Погрижете се да $font-size-base
поставите rem
.
Сите HTML наслови, <h1>
преку <h6>
, се достапни.
Наслов | Пример |
---|---|
|
h1. Заглавие за подигање |
|
h2. Заглавие за подигање |
|
h3. Заглавие за подигање |
|
h4. Заглавие за подигање |
|
h5. Заглавие за подигање |
|
h6. Заглавие за подигање |
.h1
преку .h6
класи се исто така достапни, за кога сакате да одговарате на стилот на фонтот на насловот, но не можете да го користите поврзаниот HTML елемент.
h1. Заглавие за подигање
h2. Заглавие за подигање
h3. Заглавие за подигање
h4. Заглавие за подигање
h5. Заглавие за подигање
h6. Заглавие за подигање
Користете ги вклучените класи на алатки за да го рекреирате малиот секундарен текст за наслов од 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
во кратенка за малку помала големина на фонтот.
attr
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
- Цел број molestie lorem at massa
- Фацилиза во претиум нисл аликет
- Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Енеан седат амет ерат нунц
- Eget porttitor lorem
Отстранете ги точките од списокот и нанесете малку светлина margin
со комбинација од две класи, .list-inline
и .list-inline-item
.
- Лорем Ипсум
- Phasellus iaculis
- Nulla volutpat
Порамнете ги термините и описите хоризонтално со користење на предефинираните класи (или семантички мешавини) на нашиот мрежен систем. За подолги термини, опционално можете да додадете .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.
Одговорната типографија се однесува на скалирање на текстот и компонентите со едноставно прилагодување на основниот елемент font-size
во низа медиумски прашања. Bootstrap не го прави ова за вас, но е прилично лесно да се додаде ако ви треба.
Еве еден пример за тоа во пракса. Изберете какви било font-size
прашања и медиумски прашања што ги сакате.