Source

Типография

Жаһандық параметрлерді, тақырыптарды, негізгі мәтінді, тізімдерді және т.б. қоса, 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.

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>

Кірістірілген мәтін элементтері

Жалпы кірістірілген 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>

Тырнақшалар

Құжатта басқа көзден алынған мазмұн блоктарын цитаталау үшін. <blockquote class="blockquote">Кез келген HTML -ді дәйексөз ретінде орап алыңыз .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

<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">Дереккөзді анықтау үшін қосыңыз . Дереккөз жұмысының атын ораңыз <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу 
<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. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу 
<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. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу 
<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
  • Массадағы бүтін molestie lorem
  • Pretium nisl aliquet ішіндегі жеңілдету
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Іріңді сода
    • Vestibulum laoreet porttitor sem
    • Тіріссіз еркіндікке ие болыңыз
  • 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.

Doec id elit non mi porta gravida және 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>

Жауапты типография

Жауапты типографияfont-size мультимедиа сұрауларының қатарында түбір элементін жай ғана реттеу арқылы мәтін мен құрамдас бөліктерді масштабтауды білдіреді . Bootstrap мұны сіз үшін жасамайды, бірақ қажет болса, оны қосу өте оңай.

Міне, оның практикалық мысалы. Қалаған кез келген font-sizes және медиа сұрауларын таңдаңыз.

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