Типография
Ҳуҷҷатҳо ва намунаҳо барои типографияи Bootstrap, аз ҷумла танзимоти глобалӣ, сарлавҳаҳо, матни асосӣ, рӯйхатҳо ва ғайра.
Танзимоти глобалӣ
Bootstrap намоиши асосии глобалӣ, типография ва услубҳои истинодро муқаррар мекунад. Вақте ки назорати бештар лозим аст, синфҳои утилитаҳои матниро тафтиш кунед .
- Стеки шрифти ватаниро истифода баред, ки
font-family
барои ҳар як ОС ва дастгоҳ беҳтаринро интихоб мекунад . - Барои миқёси навъи бештар фарогир ва дастрас, мо решаи пешфарзии браузерро
font-size
(одатан 16px) ба даст меорем, то меҳмонон метавонанд пешфарзҳои браузери худро дар ҳолати зарурӣ танзим кунанд. $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. Сарлавҳаи 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 comodo luctus.
Унсурҳои матни дохилӣ
Тарҳ барои унсурҳои умумии HTML5.
Шумо метавонед барчаспро истифода баредтаъкид карданматн.
Ин сатри матн ҳамчун матни ҳазфшуда баррасӣ карда мешавад.
Ин сатри матн барои дигар дақиқ нест.
Ин сатри матн бояд ҳамчун илова ба ҳуҷҷат баррасӣ карда шавад.
Ин сатри матн ҳамчун зери хат кашида мешавад
Ин сатри матн бояд ҳамчун чопи хуб баррасӣ карда шавад.
Ин сатр ҳамчун матни ғафс дода шудааст.
Ин сатр ҳамчун матни курсив дода шудааст.
.mark
ва .small
синфҳо инчунин барои татбиқи ҳамон услубҳо дастрасанд <mark>
ва <small>
дар ҳоле ки аз ҳар гуна оқибатҳои семантикии номатлуб, ки тегҳо ба вуҷуд меоранд, пешгирӣ мекунанд.
Гарчанде ки дар боло нишон дода нашудааст, озодона истифода баред <b>
ва <i>
дар HTML5. <b>
Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>
ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.
Утилитҳои матнӣ
Ҳамоҳангсозии матн, табдил, услуб, вазн ва рангро бо утилитаҳои матн ва рангҳои мо тағир диҳед .
Ихтисорот
Татбиқи услубии <abbr>
унсури HTML барои ихтисорот ва ихтисоротҳо барои нишон додани версияи васеъшуда дар болои нишона. Ихтисоротҳо дорои хатти пешфарз мебошанд ва курсори ёриро ба даст меоранд, то контексти иловагиро дар боло ва ба истифодабарандагони технологияҳои ёрирасон таъмин кунанд.
Ба .initialism
ихтисорот барои андозаи шрифти каме хурдтар илова кунед.
аттр
HTML
Нохунакҳо
Барои иқтибос кардани блокҳои мундариҷа аз манбаи дигар дар ҳуҷҷати шумо. <blockquote class="blockquote">
Дар атрофи ҳама гуна HTML ҳамчун иқтибос печонед .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Номгузории манбаъ
Барои <footer class="blockquote-footer">
муайян кардани манбаъ, илова кунед. Номи кори сарчашмаро дар <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Ҳамоҳангсозӣ
Ҳангоми зарурат утилитаҳои матниро барои тағир додани ҳамоҳангии блоки иқтибосатон истифода баред.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Рӯйхатҳо
Бесабз
Маржаи пешфарз list-style
ва чапи ҷузъҳои рӯйхатро хориҷ кунед (танҳо кӯдакони фаврӣ). Ин танҳо ба ҷузъҳои рӯйхати кӯдакони фаврӣ дахл дорад , яъне ба шумо лозим меояд, ки синфро барои ҳама рӯйхатҳои дохилшуда низ илова кунед.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Молести бутуни дар масса
- Facilisis дар aliquet nisl pretium
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ба таври ройгон озодона возеҳ кунед
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor loem
Дар мувофиқат
Тирҳои рӯйхатро хориҷ кунед ва каме нурро 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 ва дар вақти дилхоҳ.
- Порта Малесуада
- Этиам порта семина любовь любвие.
- Истилоҳи буридашуда бурида мешавад
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass justo sit amet risus.
- Лона кардан
-
- Рӯйхати таърифи дохилшуда
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Андозаи шрифтҳои ҷавобӣ
Аз v4.3.0, Bootstrap имкон медиҳад, ки андозаҳои шрифти ҷавобгӯро фаъол созанд ва имкон медиҳад, ки матн дар миқёси дастгоҳ ва андозаи намоишгоҳ табиатан васеътар шавад. RFS -ро тавассути тағир додани $enable-responsive-font-sizes
тағирёбандаи Sass ба true
ва аз нав тартиб додани Bootstrap фаъол кардан мумкин аст.
Барои дастгирии RFS , мо як омехтаи Sass-ро барои иваз кардани font-size
хосиятҳои муқаррарии худ истифода мебарем. Андозаи шрифтҳои ҷавобгӯ ба calc()
функсияҳо бо омехтаи rem
воҳидҳои намоишӣ ва намоишӣ мураттаб карда мешаванд, то рафтори миқёси ҷавобиро фаъол созанд. Маълумоти бештарро дар бораи RFS ва конфигуратсияи он дар анбори GitHub пайдо кардан мумкин аст .