Типография

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>

Inline текст элементтери

Жалпы 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>

Blockquotes

Документиңиздин ичиндеги башка булактан алынган мазмун блокторун цитата кылуу үчүн. <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>а <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>

Тизмелер

Unstyled

Тизмедеги элементтердин демейки 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>

Inline

Тизмедеги маркерлерди алып салыңыз жана 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 баракчасын карап көрүңүз .

Sass

Өзгөрмөлөр

Рубрикаларда өлчөм жана аралык үчүн айрым атайын өзгөрмөлөр бар.

$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 Responsive Font Sizeing (RFS) колдонот .