Типография

Жаһандық параметрлерді, тақырыптарды, негізгі мәтінді, тізімдерді және т.б. қоса, 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></h1>`	h1. Bootstrap тақырыбы
`<h2></h2>`	h2. Bootstrap тақырыбы
`<h3></h3>`	h3. Bootstrap тақырыбы
`<h4></h4>`	h4. Bootstrap тақырыбы
`<h5></h5>`	h5. Bootstrap тақырыбы
`<h6></h6>`	h6. Bootstrap тақырыбы

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1.h6Тақырыптың қаріп стиліне сәйкес келгіңіз келсе, бірақ байланысты HTML элементін пайдалана алмасаңыз, сыныптар арқылы да қол жетімді.

h1. Bootstrap тақырыбы

h2. Bootstrap тақырыбы

h3. Bootstrap тақырыбы

h4. Bootstrap тақырыбы

h5. Bootstrap тақырыбы

h6. Bootstrap тақырыбы

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Тақырыптарды теңшеу

Bootstrap 3 қолданбасынан шағын қосымша тақырып мәтінін қайта жасау үшін қосылған утилита сыныптарын пайдаланыңыз.

Әдемі дисплей тақырыбы Өшірілген қосымша мәтіні бар

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Тақырыптарды көрсету

Дәстүрлі тақырып элементтері бет мазмұнының ең жақсы жұмыс істеуі үшін жасалған. Бөлек болу үшін тақырып қажет болғанда, дисплей тақырыбын — үлкенірек, сәл көбірек пікір білдіретін тақырып стилін пайдалануды қарастырыңыз. Бұл тақырыптар әдепкі бойынша жауап бермейтінін есте сақтаңыз, бірақ жауап беретін қаріп өлшемдерін қосуға болады .

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Қорғасын

Қосу арқылы абзацты ерекшелендіріңіз .lead.

Бұл жетекші абзац. Ол кәдімгі абзацтардан ерекшеленеді.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Кірістірілген мәтін элементтері

Жалпы кірістірілген HTML5 элементтері үшін стильдеу.

Белгі тегін пайдалана аласызбөлектеумәтін.

~~Мәтіннің бұл жолы жойылған мәтін ретінде қарастырылады.~~

~~Мәтіннің бұл жолы енді дәл емес деп есептелуі керек.~~

Мәтіннің бұл жолы құжатқа қосымша ретінде қарастырылады.

Мәтіннің бұл жолы асты сызылған түрде көрсетіледі

Мәтіннің бұл жолы жақсы басып шығару ретінде қарастырылады.

Бұл жол қалың мәтін ретінде көрсетілді.

Бұл жол курсив мәтін ретінде көрсетілді.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markжәне сыныптар тегтер әкелетін кез келген қажетсіз семантикалық салдарларды болдырмай , .smallбірдей стильдерді қолдану үшін қол жетімді .<mark><small>

Жоғарыда көрсетілмегенімен, HTML5 форматында пайдалануға <b>болады <i>. <b>Бұл қосымша маңыздылықсыз сөздерді немесе сөз тіркестерін ерекшелеуге арналған, ал <i>көбінесе дауыс, техникалық терминдер және т.б.

Мәтіндік утилиталар

Мәтінді туралауды, түрлендіруді, мәнерді, салмақты және түсті мәтіндік утилиталарымыз бен түс утилиталарымен өзгертіңіз .

Қысқартулар

<abbr>Меңзердегі кеңейтілген нұсқаны көрсету үшін аббревиатуралар мен аббревиатуралар үшін HTML элементінің стильдендірілген орындалуы . Аббревиатураларда әдепкі асты сызылады және меңзерді жылжытқанда және көмекші технологияларды пайдаланушыларға қосымша мәтінмән беру үшін анықтама курсорын алады.

.initialismҚаріп өлшемін сәл кішірек ету үшін аббревиатураға қосыңыз .

аттр

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Тырнақшалар

Құжатта басқа көзден алынған мазмұн блоктарын цитаталау үшін. <blockquote class="blockquote">Кез келген HTML -ді дәйексөз ретінде орап алыңыз .

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Дереккөзді атау

<footer class="blockquote-footer">Дереккөзді анықтау үшін қосыңыз . Дереккөз жұмысының атын ораңыз <cite>.

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

Source Title бойынша танымал біреу

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Туралау

Блоктауыштың туралануын өзгерту үшін қажетінше мәтіндік утилиталарды пайдаланыңыз.

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

Source Title бойынша танымал біреу

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

Source Title бойынша танымал біреу

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Тізімдер

Стильсіз

Тізім элементтеріндегі әдепкі list-styleжәне сол жақ жиекті алып тастаңыз (тек тікелей балалар үшін). Бұл тек тікелей балалар тізімінің элементтеріне қатысты , яғни кез келген кірістірілген тізімдер үшін де сыныпты қосу қажет болады.

Бұл тізім.
Ол мүлдем стильсіз болып көрінеді.
Құрылымдық жағынан бұл әлі де тізім.
Дегенмен, бұл стиль тек тікелей еншілес элементтерге қолданылады.
Кірістірілген тізімдер:
- бұл стиль әсер етпейді
- әлі де оқ көрсетеді
- және тиісті сол жақ жиегі бар
Бұл кейбір жағдайларда әлі де пайдалы болуы мүмкін.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Кезекте

Тізім таңбаларын алып тастап, marginекі сыныптың .list-inlineжәне .list-inline-item.

Бұл тізім элементі.
Және тағы біреуі.
Бірақ олар кірістірілген түрде көрсетіледі.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Сипаттама тізімін туралау

Тор жүйеміздің алдын ала анықталған сыныптарын (немесе семантикалық қоспаларды) пайдалану арқылы терминдер мен сипаттамаларды көлденеңінен туралаңыз. Ұзағырақ терминдер .text-truncateүшін мәтінді эллипспен қысқарту үшін қосымша сынып қосуға болады.

Сипаттама тізімдері

Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.

Мерзімі

Терминге анықтама.

Тағы біраз толтырғыш анықтамасының мәтіні.

Басқа термин

Бұл анықтама қысқа, сондықтан қосымша абзацтар немесе ештеңе жоқ.

Қысқартылған термин қысқартылды

Бұл кеңістік тар болған кезде пайдалы болуы мүмкін. Соңында эллипс қосады.

Ұя салу

Кірістірілген анықтамалар тізімі: Сізге анықтамалар тізімі ұнайтынын естідім. Анықтамалар тізіміне анықтамалар тізімін қоюға рұқсат етіңіз.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Жауапты қаріп өлшемдері

v4.3.0 нұсқасы бойынша Bootstrap жауап беретін қаріп өлшемдерін қосу опциясымен жеткізіледі, бұл мәтінді құрылғы мен көру терезесі өлшемдері бойынша табиғи түрде масштабтауға мүмкіндік береді. RFS$enable-responsive-font-sizes мүмкіндігін Sass айнымалы мәнін trueBootstrap түріне өзгерту және қайта құрастыру арқылы қосуға болады .

RFS қолдауы үшін біз қалыпты font-sizeқасиеттерімізді ауыстыру үшін Sass араластырғышын қолданамыз. Жауапты қаріп өлшемдері жауап беретін масштабтау әрекетін қосу үшін және көру порты бірліктерінің calc()араласуы бар функцияларға жинақталады. RFS және оның конфигурациясы remтуралы толығырақ оның GitHub репозиторийінен табуға болады .