Типография
Ҳуҷҷатҳо ва намунаҳо барои типографияи 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.
Типографияи ҷавобӣ
Типографияи ҷавобӣ ба миқёси матн ва ҷузъҳо тавассути танзими унсури реша font-size
дар як қатор дархостҳои медиа дахл дорад. Bootstrap ин корро барои шумо намекунад, аммо агар ба шумо лозим бошад, илова кардан хеле осон аст.
Ана як мисоли онро дар амал. Ҳар гуна font-size
дархостҳои с ва медиаро, ки мехоҳед, интихоб кунед.