تایپوگرافی (Typography)

اینجا با «تایپوگرافی بوت استرپ 5» آشنا می شوی. «تایپوگرافی (Typography)» یعنی چیدمان و ظاهر متن. همچنین اندازه، فاصله و سبک نوشته ها را تنظیم می کند. پس با مثال های ساده جلو می رویم.

تنظیمات پیش فرض تایپوگرافی

اندازه متن پیش فرض 1rem است. خط قد 1.5 است. همچنین تگ <p> بالا 0 و پایین 1rem فاصله دارد. این تنظیم ها خوانایی را بهتر می کنند.

سربرگ ها h1 تا h6

سربرگ ها در بوت استرپ ضخیم تر و واکنش گرا هستند. اگر تگ سربرگ نمی خواهی، کلاس های کمکی .h1 تا .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>

مشاهده در ادیتور

نمایشی ها (Display Headings)

برای تیترهای خیلی بزرگ از .display-1 تا .display-6 استفاده کن. سبک شان سبک تر و چشمگیرتر است.

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

مشاهده در ادیتور

متن کوچک با <small>

برای زیرعنوان کوچک در تیتر از <small> یا کلاس .small کمک بگیر.

<h1>Title <small class="text-muted">subtitle</small></h1>

مشاهده در ادیتور

هایلایت متن با <mark>

تگ <mark> متن را مثل ماژیک زرد هایلایت می کند. برای جلب توجه عالی است.

<p>Use <mark>highlight</mark> for important words.</p>

مشاهده در ادیتور

مخفف ها با <abbr>

تگ <abbr> مخفف را با خط چین زیر نشان می دهد. عنوان کامل را در title بنویس.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

مشاهده در ادیتور

نقل قول با blockquote

برای نقل قول از <blockquote> با کلاس .blockquote استفاده کن. منبع را با .blockquote-footer بنویس.

<blockquote class="blockquote">
  <p>Knowledge is power.</p>
  <footer class="blockquote-footer">from WWF website</footer>
</blockquote>

مشاهده در ادیتور

فهرست توضیحی <dl>

برای اصطلاح و تعریف از <dl> همراه <dt> و <dd> استفاده کن.

<dl>
  <dt>HTML</dt>
  <dd>Markup language for the web.</dd>
  <dt>CSS</dt>
  <dd>Styles for HTML elements.</dd>
</dl>

مشاهده در ادیتور

کد، کلید و متن چندخطی

نمایش کد با <code>

برای قطعه های کوتاه برنامه از <code> استفاده کن.

<p>Use <code>&lt;span&gt;</code> for inline code.</p>

مشاهده در ادیتور

نمایش کلید با <kbd>

برای میانبرهای صفحه کلید از <kbd> کمک بگیر.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

مشاهده در ادیتور

متن چندخطی با <pre>

برای متن های قالب مند از <pre> استفاده کن. فاصله ها حفظ می شوند.

<pre>
Line 1
  Line 2
    Line 3
</pre>

مشاهده در ادیتور

کلاس های پرکاربرد تایپوگرافی

برای متن توضیحی از .lead استفاده کن. همچنین ترازبندی با .text-start، .text-center و .text-end انجام می شود. برای تبدیل حروف از .text-uppercase و دوستانش کمک بگیر.

<p class="lead text-center text-uppercase">important intro text</p>

مشاهده در ادیتور

گام های عملی

1. یک تیتر نمایشی با .display-4 بساز.
2. زیرعنوان را با <small> اضافه کن.
3. یک پاراگراف .lead مرکزچین بنویس.

جمع بندی سریع

• تایپوگرافی بوت استرپ 5 خوانایی را بهتر می کند.
• سربرگ ها واکنش گرا و قابل جایگزینی با کلاس هستند.
• نمایشی ها برای تیترهای بزرگ عالی اند.
• mark، abbr، blockquote ابزارهای متنی مفیدند.

نکته: برای چیدمان صفحه، از کانتینرها و گرید پایه کمک بگیر. سپس برای رنگ ها به رنگ ها برو.