Типография

Жаһандық параметрлерді, тақырыптарды, негізгі мәтінді, тізімдерді және т.б. қоса, Bootstrap типографиясына арналған құжаттама және мысалдар.

Бұл бетте

Ғаламдық параметрлер

Bootstrap негізгі жаһандық дисплейді, типографияны және сілтеме мәнерлерін орнатады. Қосымша бақылау қажет болғанда, мәтіндік қызметтік сыныптарды тексеріңіз .

Әрбір ОЖ және құрылғы үшін ең жақсысын таңдайтын жергілікті қаріптер сағын пайдаланыңыз .font-family
Неғұрлым инклюзивті және қолжетімді тип шкаласы үшін біз браузердің әдепкі түбірін font-size(әдетте 16px) пайдаланамыз, осылайша келушілер браузерінің әдепкі параметрлерін қажетінше реттей алады.
$font-family-base, $font-size-baseжәне атрибуттарын $line-height-baseбіздің типографиялық негіз ретінде пайдаланыңыз <body>.
арқылы ғаламдық сілтеме түсін орнатыңыз $link-color.
( әдепкі бойынша) параметрін $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 тақырыбы

html

<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 қолданбасынан шағын қосымша тақырып мәтінін қайта жасау үшін қосылған утилита сыныптарын пайдаланыңыз.

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

html

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

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

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Көрсеткіш 5

Дисплей 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizesДисплей тақырыптары Sass картасы және екі айнымалы арқылы конфигурацияланады $display-font-weightжәне $display-line-height.

Дисплей тақырыптары екі айнымалы арқылы реттеледі $display-font-familyжәне $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Қорғасын

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

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

html

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

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

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

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

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

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

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

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

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

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

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

html

<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>

Бұл тегтерді семантикалық мақсатта пайдалану керек екенін ескеріңіз:

сілтеме немесе белгілеу мақсатында белгіленген немесе бөлектелген мәтінді білдіреді.
авторлық құқық және заңды мәтін сияқты жанама түсініктемелерді және шағын баспаны білдіреді.
<s>қатысты емес немесе дәл емес элементті білдіреді.
мәтіндік емес аннотация бар екенін көрсететін етіп көрсетілуі тиіс кірістірілген мәтіннің аралығын білдіреді.

Мәтінді стильдеуді қаласаңыз, оның орнына келесі сыныптарды пайдалануыңыз керек:

.markсияқты стильдерді қолданады .
.smallсияқты стильдерді қолданады .
.text-decoration-underlineсияқты стильдерді қолданады .
.text-decoration-line-throughсияқты стильдерді қолданады <s>.

Жоғарыда көрсетілмегенімен, HTML5 - де қолдануға болады. қосымша маңыздылығын көрсетпестен сөздерді немесе сөз тіркестерін бөлектеуге арналған, ал көбінесе дауыс, техникалық терминдер және т.б.

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

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

Қысқартулар

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

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

аттр

HTML

html

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

Тырнақшалар

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

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

html

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

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

HTML спецификациясы блок тырнақша атрибуты сыртқа орналастырылуын талап етеді <blockquote>. <blockquote>Атрибуцияны берген кезде, өзіңізді a ішіне орап , сыныппен бірге <figure>a <figcaption>немесе блок деңгейі элементін (мысалы, ) пайдаланыңыз . .blockquote-footerДереккөз жұмысының атын да орап қоюды ұмытпаңыз <cite>.

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

html

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

Туралау

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

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

html

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

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

html

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

Тізімдер

Стильсіз

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

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

html

<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.

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

html

<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үшін мәтінді эллипспен қысқарту үшін қосымша сынып қосуға болады.

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

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

Мерзімі

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

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

Басқа термин

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

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

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

Ұя салу

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

html

<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>

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

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

Сасс

Айнымалылар

Тақырыптарда өлшемдер мен аралықтар үшін арнайы айнымалылар бар.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Мұнда және Қайта жүктеуде қарастырылатын басқа типография элементтерінің де арнайы айнымалылары бар.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Миксиндер

Типография үшін арнайы миксиндер жоқ, бірақ Bootstrap жауап беретін қаріп өлшемін (RFS) пайдаланады .