آزمایشی
آموزش

آموزش بوت استرپ 4 (قسمت سوم)

آموزش بوت استرپ 4 (قسمت سوم)

فصل سوم


تایپوگرافی


تایپوگرافی چیست؟

به مجموعه سبک های نوشتاری غالب و فورمت بندی شده یک صفحه تایپوگرافی می گویند. برای مثال در یک متن خبری در یک وب سایت قالبا تیتر خبر با فونت درشت و توپر(Bold) و متن خبر با فونت ریزتر و کلمات مهم معمولا بولد یا ایتالیک و در پایان یا ابتدا اطلاعات مربوط به خبر و نویسنده با سایز دیگر نمایش داده می شود که در کل سایت به صورت استاندارد رعایت می شود که به آن تایپوگرافی سایت گفته می شود.

در بوت استرپ 4 به صورت پیش فرض از فونت سایز 16 پیکسل که ارتفاع بالاترین محلی که می تواند باشد تا پایین ترین نقطه را بیان می کند البته در بعضی فونت ها به دلیل اینکه در ساخت آنها استاندارد رعایت نشده دیده می شود که در مقابل فونت های استاندارد با همان سایز ارتفاع کمتر یا بیشتری را دارند.

فونت های پیشفرض استفاده شده در بوت استرپ 4 عبارتند از :
Helvetica Neue, Helvetica, Arial, sans-serif 
همچنین
در تگ <p> که به معنی پاراگراف می باشد مقدار حاشیه بالایی از شی کناری margin-top برابر صفر پیکسل و حاشیه پایینی مقدار 1 rem که به صورت پیش فرض 16 پیکسل می باشد را داراست.

margin-top: 0 and margin-bottom: 1rem (16px by default)

در مورد سبک نوشتار تیتر ها یا Heading ها  که تگ H1 تا H6 می باشد در این نسخه بولد تر و سنگین تر شده است.

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)


همچنین کلاس هایی برای همین منظور اضافه شده که نازک تر و سبک تر می باشند که از .display-1 تا .display-4 می باشند.
برای تست این کلاس ها می توانید به این لینک مراجعه فرمایید.


تگ های مخصوص تایپو گرافی

<small> برای ریز تر کردن هدینگ ها و به منظور استفاده از زیر تیتر ها

<abbr> برای زیر خط دار کردن به صورت نقطه چین.

<blockquote> برای ایجاد نقل قول و نوشتن نام صاحب نظر.

<dl> برای ایجاد یک تو رفتگی در خط که به مفهوم زیر شاخه بودن یا توضیح از خط بالا  می باشد.

<code> برای نشان دادن یک قسمت از کد در متن به صورت زیر

<kbd> برای نمایش دادن یک Hot Key مانند

<mark> برای نمایش دادن قسمتی از متن به صورت های لایت شده

<pre> برای نمایش متن به همان صورتی که در داخل تگ نوشته شد به صورتی که فاصله ها و سر خط رفتن ها به همان شکل اجرا می شوند.

برای مثال به این کد ها توجه کنید.


و خروجی دو مدل بالا.



برای اطلاعات بیشتر به این لینک مراجعه فرمایید