Source

Типографи

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

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

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

Үйлдлийн систем болон төхөөрөмж бүрт хамгийн сайныг нь сонгох үндсэн фонтын стекийг ашиглана уу .font-family
Илүү хүртээмжтэй, хүртээмжтэй төрлийн масштабын хувьд бид хөтчийн өгөгдмөл үндэс 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 -г ишлэл болгон ороорой.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

<footer class="blockquote-footer">Эх сурвалжийг тодорхойлохын тулд a нэмнэ үү . Эх сурвалжийн бүтээлийн нэрийг <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

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

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Тохируулга

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

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

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

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

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Жагсаалтууд

Загваргүй

Жагсаалтын зүйлсийн өгөгдмөл list-styleболон зүүн талын зайг арилга (зөвхөн шууд хүүхдүүдэд). Энэ нь зөвхөн хүүхдийн шууд жагсаалтын зүйлд хамаатай бөгөөд та ямар ч үүрлэсэн жагсаалтад анги нэмэх шаардлагатай гэсэн үг юм.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Идээний идээт ундаа
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutp at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Шугаманд

Жагсаалтын сумыг арилгаж , marginхоёр ангиллыг хослуулан бага зэрэг гэрэлтүүлээрэй ..list-inline.list-inline-item

Lorem ipsum
Phasellus iaculis
Үгүй ээ

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Тодорхойлолтын жагсаалтыг зэрэгцүүлэх

Манай сүлжээний системийн урьдчилан тодорхойлсон ангиудыг (эсвэл семантик хольц) ашиглан нэр томьёо, тайлбарыг хэвтээ байдлаар зэрэгцүүлнэ үү. Удаан хугацааны хувьд та .text-truncateтекстийг зуйванаар таслах анги нэмж болно.

Тодорхойлолтын жагсаалтууд

Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Малесуада порта

Etiam porta sem malesuada magna mollis euismod.

Таслагдсан нэр томъёог таслав

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Үүрлэх

Оруулсан тодорхойлолтын жагсаалт: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Хариуцлагатай хэвлэх

Responsive typographyfont-size гэдэг нь хэд хэдэн медиа асуулга дотор үндсэн элементийн тохиргоог хийх замаар текст болон бүрэлдэхүүн хэсгүүдийн масштабыг хэлнэ . Bootstrap нь танд үүнийг хийхгүй, гэхдээ танд хэрэгтэй бол үүнийг нэмэхэд маш хялбар байдаг.

Үүний жишээг практик дээр үзүүлэв. Хүссэн ямар ч font-sizeхэвлэл мэдээллийн хэрэгслээр асуугаарай.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}