Типография
Bootstrap типографиясы үчүн документтер жана мисалдар, анын ичинде глобалдык жөндөөлөр, аталыштар, негизги текст, тизмелер жана башкалар.
Глобалдык орнотуулар
Bootstrap негизги глобалдык дисплейди, типографияны жана шилтеме стилдерин орнотот. Көбүрөөк көзөмөл керек болгондо, тексттик пайдалуу класстарды текшериңиз .
- Ар бир ОС жана түзмөк үчүн эң жакшысын тандаган түпнуска шрифт стектерин колдонуңуз .
font-family
- Көбүрөөк камтылган жана жеткиликтүү типтеги шкала үчүн биз браузердин демейки тамырын
font-size
(адатта 16px) кабыл алабыз, андыктан зыяратчылар өздөрүнүн браузеринин демейки параметрлерин керектүү учурда ыңгайлаштыра алышат. $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.
Inline текст элементтери
Жалпы HTML5 элементтери үчүн стилдөө.
Сиз белги белгисин колдоно аласызбөлүп көрсөтүүтекст.
Тексттин бул сабы жок кылынган текст катары каралышы керек.
Тексттин бул сабы так эмес деп эсептелинет.
Тексттин бул сабы документке кошумча катары каралышы керек.
Тексттин бул сабы асты сызылгандай көрсөтүлөт
Тексттин бул сабы жакшы басуу катары каралышы керек.
Бул сап калың текст катары берилген.
Бул сап курсивдик текст катары көрсөтүлгөн.
.mark
жана класстар, ошондой эле тегдер алып келе турган ар кандай керексиз семантикалык кесепеттерден качуу .small
үчүн бирдей стилдерди колдонуу үчүн жеткиликтүү <mark>
.<small>
Жогоруда көрсөтүлбөсө да, HTML5те <b>
колдонуңуз <i>
. <b>
кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>
негизинен үн, техникалык терминдер ж.б.у.с.
Текст утилиталары
Тексттин тегиздөөсүн, трансформациясын, стилин, салмагын жана түсүн биздин тексттин утилиталары жана түстүү программалары менен өзгөртүңүз .
Аббревиатуралар
<abbr>
Аббревиатуралар жана аббревиатуралар үчүн HTML элементинин стилдештирилген ишке ашырылышы . Аббревиатуралардын демейки асты сызылат жана жардам курсоруна ээ болуп, курсорду кармап турганда жана жардамчы технологияларды колдонуучуларга кошумча контекстти камсыз кылат.
.initialism
Бир аз кичирээк шрифт өлчөмү үчүн аббревиатурага кошуңуз .
аттр
HTML
Blockquotes
Документиңиздин ичиндеги башка булактан алынган мазмун блокторун цитата кылуу үчүн. Цитата катары <blockquote class="blockquote">
каалаган HTMLди ороп алыңыз .
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Булакты атоо
<footer class="blockquote-footer">
Булакты аныктоо үчүн а кошуңуз . Булактын атын ороп алыңыз <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Тегиздөө
Блок тырмакчаңыздын тегиздөөсүн өзгөртүү үчүн зарыл болгон тексттик утилиттерди колдонуңуз.
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Тизмелер
Unstyled
Тизмедеги элементтердин демейки list-style
жана сол четтерин алып салыңыз (дароо балдар үчүн гана). Бул дароо балдардын тизмесинин элементтерине гана тиешелүү , демек, сиз каалаган уя салынган тизмелер үчүн классты да кошушуңуз керек болот.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- претиум nisl aliquet жылы Facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Анеан сит амет эрат нунц
- Eget porttitor lorem
Inline
Тизмедеги маркерлерди алып салыңыз жана margin
эки класстын айкалышы менен жарыкты колдонуңуз .list-inline
жана .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Сүрөттөмө тизмесин тегиздөө
Тор тутумубуздун алдын ала аныкталган класстарын (же семантикалык аралашмаларды) колдонуу менен терминдерди жана сүрөттөмөлөрдү туурасынан тегиздеңиз. Узак мөөнөттөр үчүн .text-truncate
, текстти эллипс менен кыскартуу үчүн класс кошо аласыз.
- Сүрөттөмө тизмелери
- Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- 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.
Жооптуу шрифт өлчөмдөрү
Bootstrap v4.3 шайкеш шрифт өлчөмдөрүн иштетүү опциясы менен жөнөтүлөт, бул текстти түзмөктүн жана көрүү терезесинин өлчөмдөрү боюнча табигый масштабдалатууга мүмкүндүк берет. RFSди$enable-responsive-font-sizes
Sass өзгөрмөсүнө өзгөртүү true
жана Bootstrap кайра компиляциялоо аркылуу иштетүүгө болот .
RFSти колдоо үчүн биз кадимки font-size
касиеттерибизди алмаштыруу үчүн Sass аралашмасын колдонобуз. Жооптуу шрифт өлчөмдөрү жооп берүүчү масштабдоо жүрүм-турумун иштетүү үчүн көрүнүш бирдиктери calc()
менен функцияларга түзүлөт . RFSrem
жана анын конфигурациясы жөнүндө көбүрөөк маалыматты анын GitHub репозиторийинен тапса болот .