Типография

Bootstrap типографиясе өчен документлар һәм мисаллар, глобаль көйләүләр, рубрикалар, тән тексты, исемлекләр һ.б.

Бу биттә

Глобаль көйләүләр

Bootstrap төп глобаль дисплей, типография һәм сылтама стильләрен куя. Күбрәк контроль кирәк булганда, текст ярдәмендә классларны карагыз .

OSәр җайланма һәм җайланма өчен иң яхшысын сайлаган туган шрифт стакасын кулланыгыз .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. Ботстрап башы
`<h2></h2>`	h2. Ботстрап башы
`<h3></h3>`	h3. Ботстрап башы
`<h4></h4>`	h4. Ботстрап башы
`<h5></h5>`	h5. Ботстрап башы
`<h6></h6>`	h6. Ботстрап башы

<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. Ботстрап башы

h2. Ботстрап башы

h3. Ботстрап башы

h4. Ботстрап башы

h5. Ботстрап башы

h6. Ботстрап башы

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

Aboveгарыда күрсәтелмәсә дә , HTML5 кулланырга ирек бирегез . өстәмә әһәмият бирмичә сүзләрне яки сүзтезмәләрне яктырту өчен, шул ук вакытта тавыш, техник терминнар һ.б.

Текст ярдәмендә

Текстны тигезләү, үзгәртү, стиль, авырлык, сызык биеклеге, бизәлеш һәм төсне безнең текст ярдәмендә һәм төс ярдәмендә кулланыгыз .

Кыскартулар

HTML <abbr>элементын кыскартулар һәм кыскартулар өчен стилизацияләнгән киңәйтү версиясен күрсәтү өчен. Кыскартуларның төп сызыгы бар һәм ярдәмче курсорны алу һәм өстәмә технологияләр кулланучыларга өстәмә контекст бирү өчен.

.initialismБераз кечерәк шрифт өчен кыскартуга өстәгез .

атт

HTML

html

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

Блоккотлар

Документыгыздагы бүтән чыганактан эчтәлек блокларын китерү өчен. <blockquote class="blockquote">Anyитата итеп теләсә нинди HTML тирәсен урыгыз .

Блоккот элементында булган билгеле цитата.

html

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

Чыганакны атау

HTML спекы блоккот атрибутикасын читтә урнаштыруны таләп итә <blockquote>. Атрибутны биргәндә <blockquote>, а белән урап, класс белән блок дәрәҗәсен <figure>кулланыгыз (мәсәлән, ) . Чыганак эшенең исемен дә урап алыгыз .<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текстны эллипс белән кисәр өчен класс өсти аласыз.

Тасвирлау исемлекләре

Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.

Термин

Термин өчен аңлатма.

Moreәм тагын берничә урынны билгеләү тексты.

Тагын бер термин

Бу билгеләмә кыска, шуңа күрә өстәмә абзацлар яки бернәрсә дә юк.

Киселгән термин киселгән

Бу урын кыска булганда файдалы булырга мөмкин. Ахырда эллипс өсти.

Оя ясау

Ояланган билгеләмә исемлеге: Сезнең билгеләмә исемлеге ошаганын ишеттем. Сезнең билгеләмә исемлегенә билгеләмә исемлеген куярга рөхсәт итегез.

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>

Onsаваплы шрифт зурлыклары

Bootstrap 5-та без шрифтларның зурлыкларын рөхсәт иттек, текстны җайланма һәм күренеш портлары аша табигый масштабларга мөмкинлек бирәбез. Моның ничек эшләвен белү өчен , RFS битен карагыз.

Сасс

Variзгәрешләр

Башлыкларның зурлыгы һәм аралыгы өчен кайбер үзгәрүчәннәр бар.

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

Төрле типография элементлары монда һәм Reboot'та да үзгәртелгән.

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