in English

Типография

Bootstrap типографиясы үчүн документтер жана мисалдар, анын ичинде глобалдык жөндөөлөр, аталыштар, негизги текст, тизмелер жана башкалар.

Глобалдык орнотуулар

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

Ар бир ОС жана түзмөк үчүн эң жакшысын тандаган түпнуска шрифт стектерин колдонуңуз .font-family
Көбүрөөк камтылган жана жеткиликтүү типтеги шкала үчүн биз браузердин демейки тамырын font-size(адатта 16px) колдонобуз, андыктан зыяратчылар өздөрүнүн браузеринин демейки параметрлерин керектүү учурда ыңгайлаштыра алышат.
$font-family-base, $font-size-baseжана $line-height-baseатрибуттарын биздин типографиялык база катары колдонуңуз <body>.
Шилтеменин глобалдык түсүн коюңуз $link-colorжана шилтеменин астын сызууну бир гана жерге колдонуңуз :hover.
( демейки боюнча) боюнча $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 аталышы

<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Бир аз кичирээк шрифт өлчөмү үчүн аббревиатурага кошуңуз .

аттр

HTML

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

Blockquotes

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

Тизмелер

Unstyled

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

Inline

Тизмедеги маркерлерди алып салыңыз жана 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 жооп берүүчү шрифт өлчөмдөрүн иштетүү опциясы менен жөнөтүлөт, бул текстти түзмөктүн жана көрүү терезесинин өлчөмдөрү боюнча табигый масштабдалатууга мүмкүндүк берет. RFSди$enable-responsive-font-sizes Sass өзгөрмөсүнө өзгөртүү trueжана Bootstrap кайра компиляциялоо аркылуу иштетүүгө болот .

RFSти колдоо үчүн биз кадимки font-sizeкасиеттерибизди алмаштыруу үчүн Sass аралашмасын колдонобуз. Жооптуу шрифт өлчөмдөрү жооп берүүчү масштабдоо жүрүм-турумун иштетүү үчүн жана көрүү порту бирдиктеринин calc()аралашмасы менен функцияларга түзүлөт . RFSrem жана анын конфигурациясы жөнүндө көбүрөөк маалыматты анын GitHub репозиторийинен тапса болот .