Типографи

Глобал тохиргоо, гарчиг, үндсэн текст, жагсаалт болон бусад зүйлийг багтаасан Bootstrap typography-д зориулсан баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Глобал тохиргоо

Bootstrap нь дэлхийн үндсэн дэлгэц, хэвлэх болон холбоосын хэв маягийг тохируулдаг. Илүү их хяналт шаардлагатай бол текстийн хэрэглээний ангиудыг шалгана уу .

Үйлдлийн систем болон төхөөрөмж бүрт хамгийн сайныг нь сонгох үндсэн фонтын стекийг ашиглана уу .font-family
Илүү хүртээмжтэй, хүртээмжтэй төрлийн масштабын хувьд бид хөтчийн өгөгдмөл root font-size(ихэвчлэн 16px) ашигладаг тул зочдод шаардлагатай бол хөтчийнхөө өгөгдмөл тохиргоог өөрчлөх боломжтой.
$font-family-base, $font-size-base, болон $line-height-baseшинж чанаруудыг манай хэвлэх суурь болгон ашиглах <body>.
Глобал холбоосын өнгийг тохируулна уу $link-color.
( анхдагчаар) дээр $body-bga-г тохируулахын тулд ашиглана уу.background-color<body>#fff

Эдгээр хэв маягийг дотроос олж _reboot.scssболох ба глобал хувьсагчдыг -д тодорхойлсон _variables.scss. Оруулсан эсэхээ шалгаарай $font-size-base.rem

Гарчиг

<h1>-ээр дамжуулан бүх HTML гарчиг <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-sizesSass газрын зураг болон хоёр хувьсагчаар тохируулсан $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Үсгийн хэмжээг арай бага болгохын тулд товчлол дээр нэмнэ үү .

attr

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>. Атрибут өгөхдөө a-д боож <blockquote>, ангид <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 нь Responsive Font Sizeing (RFS) ашигладаг.