in English

Типографи

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

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

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

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

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

Дотор текстийн элементүүд

Нийтлэг inline 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Үсгийн хэмжээг арай бага болгохын тулд товчлол дээр нэмнэ үү .

attr

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">Эх сурвалжийг тодорхойлохын тулд a нэмнэ үү . Эх сурвалжийн бүтээлийн нэрийг <cite>.

Блок ишлэлд агуулагдсан алдартай ишлэл.

Эх сурвалжийн гарчигт алдартай нэгэн

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

Тохируулга

Блок ишлэлийнхээ зэрэгцүүлэлтийг өөрчлөхийн тулд шаардлагатай бол текст хэрэгслүүдийг ашиглана уу.

Блок ишлэлд агуулагдсан алдартай ишлэл.

Эх сурвалжийн гарчигт алдартай нэгэн

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

Блок ишлэлд агуулагдсан алдартай ишлэл.

Эх сурвалжийн гарчигт алдартай нэгэн

<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 нь хариу үйлдэл үзүүлэх үсгийн хэмжээг идэвхжүүлж, текстийг төхөөрөмж болон харах цонхны хэмжээгээр илүү байгалийн байдлаар масштаблах боломжийг олгодог. Sass хувьсагчийг Bootstrap болгон өөрчилж, дахин хөрвүүлснээр RFS -г идэвхжүүлж болно .$enable-responsive-font-sizestrue

RFS - ийг дэмжихийн тулд бид ердийн font-sizeшинж чанараа солихын тулд Sass хольцыг ашигладаг. Хариуцлагатай фонтын хэмжээг хариу үйлдэлтэй масштаблах үйлдлийг идэвхжүүлэхийн тулд харагдац болон харах хэсэг calc()бүхий функц болгон нэгтгэнэ. RFS болон түүний тохиргооны remталаар илүү ихийг GitHub репозитороос олж болно .