تایپوگرافی

مستندات و نمونه‌هایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصل‌ها، متن متن، فهرست‌ها و موارد دیگر.

تنظیمات جهانی

بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاس‌های ابزار متنی را بررسی کنید .

از یک پشته فونت بومی استفاده کنید که بهترین ها را font-familyبرای هر سیستم عامل و دستگاه انتخاب می کند.
برای یک مقیاس نوع جامع تر و در دسترس تر، از ریشه پیش فرض مرورگر font-size(معمولاً 16 پیکسل) استفاده می کنیم تا بازدیدکنندگان بتوانند پیش فرض های مرورگر خود را در صورت نیاز سفارشی کنند.
از صفات $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. عنوان بوت استرپ
`<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کلاس های through .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>

عناصر متن درون خطی

یک ظاهر طراحی برای عناصر رایج 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.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

نام بردن از یک منبع

<footer class="blockquote-footer">برای شناسایی منبع یک علامت اضافه کنید. نام کار منبع را در بپیچید <cite>.

یک نقل قول شناخته شده، موجود در یک عنصر blockquote.

شخصی معروف در عنوان منبع

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

شخصی معروف در عنوان منبع

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

شخصی معروف در عنوان منبع

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

اندازه فونت پاسخگو

از نسخه 4.3.0، Bootstrap با گزینه ای برای فعال کردن اندازه فونت های پاسخگو ارائه می شود، که به متن اجازه می دهد تا به طور طبیعی در اندازه دستگاه و درگاه نمایش مقیاس شود. RFS را می توان با تغییر $enable-responsive-font-sizesمتغیر Sass به trueBootstrap و کامپایل مجدد آن فعال کرد.

برای پشتیبانی از RFS ، ما از Sass mixin برای جایگزینی font-sizeخواص معمولی خود استفاده می کنیم. اندازه فونت های پاسخگو به calc()توابع با ترکیبی از remواحدهای نمای و درگاه کامپایل می شود تا رفتار مقیاس پذیری پاسخگو را فعال کند. اطلاعات بیشتر در مورد RFS و پیکربندی آن را می توانید در مخزن GitHub آن بیابید .