شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

انواع متون و تایپوگرافی در Bootstrap


نویسنده:
سه شنبه ۲۹ مهر ۱۳۹۹
تایپوگرافی در بوت استرپ

در این قسمت از سری آموزش رایگان بوت‌استرپ به بررسی تایپوگرافی در bootstrap خواهیم پرداخت. بدین‌معنی که یاد می گیریم که چگونه به متن‌هایمان استایل دهیم؟ در این بخش نحوه قالب‌بندی محتوای متنی مانند headingها، پاراگراف‌ها، تگ‌های نقل قول، (blockquote) و … که برای فرمت‌دهی HTML به کار می‌رود را با استفاده از بوت‌استرپ خواهیم آموخت.

برای دسترسی به قسمت‌های قبلی آموزش bootstrap می‌توانید به مقالات زیر مراجعه کنید:

آموزش رایگان bootstrap 4 | نحوه کار و راه‌اندازی بوت‌استرپ
آموزش bootstrap 4 | نحوه کار سیستم Grid در بوت‌استرپ


ساختارهای پیش‌فرض متون در Bootstrap

زمانی‌که از بوت‌استرپ درپروژه طراحی وب استفاده می‌شود،‌ نحوه نمایش پیش‌فرض عناصر در خروجی متفاوت است. در ادامه به ساختار پیش‌فرض بوت‌استرپ می‌پردازیم:

font-size ، line-height

در بوت استرپ اندازه ی پیش فرض فونت، 14 پیکسل بوده و فاصله ی بین خطوط “Line-Height” برابر با 1.428 می‌باشد. این اندازه‌ی قراردادی برای تمامی پاراگراف‌ها و عناصر body اعمال می‌شود.

margin-botto

به علاوه، تمام عناصری که درون تگ “p” قرار می‌گیرند، دارای یک حاشیه‌ی انتهایی “Margin-Bottom” می‌باشند که به صورت پیش‌فرض به صورت 10 پیکسل تعیین شده است. این تنظیمات یک تعریف جهانی هستند که به تمام وب‌سایت‌هایی که در دنیا از بوت‌استرپ استفاده می‌کنند اعمال می‌شود

فونت‌ها

بوت استرپ از فونت های Helvetica Neue ،Helvetica ،Arial و Sans-Serif به عنوان font پیش‌فرض خود استفاده می‌کند. با استفاده از ویژگی تایپوگرافی Bootstrap، ما می‌توانیم عنوان‌ها (heading)، پاراگراف‌ها، لیست‌ها و سایر عناصر درون خطی را ایجاد کنیم.


عناصر قالب‌بندی متون

تگ های heading

تگ های <h1> تا <h6> در Bootstrap 4 دارای وزن و اندازه‌ی مختلفی هستند. به صورت پیش‌فرض بوت‌استرپ تگ‌های heading یا تگ‌های عنوان که <h1> تا <h6> هستند را به طریقی که در زیر نشان داده شده است، فرمت‌بندی می‌کند:

خروجی کد بالا به‌صورت تصویر زیر می‌باشد:

تایپوگرافی در bootstrap


Display heading

تگی به نام Display heading وجود دارد که مانند تگ‌های heading‌ هست. با این تفاوت که اندازه‌ی فونت بزرگتری داشته، اما وزن فونت کمتر است. این نوع تگ‌ها برای قسمت نمایش بزرگتر همراه با تگ‌های عنوان استفاده می‌شوند. تگ‌های heading‌ با یکی از چهار کلاس display-1. و display-2. و display-3. و display-4. مشخص می‌شوند. به تصویر زیر توجه کنید:

تایپوگرافی در bootstrap

تصویر بالا، خروجی کد زیر است:


عنصر <small>

عنصری به نام <small> وجود دارد که وظیفه آن ایجاد متن ثانویه در heading با سایزی کوچکتر و شفاف‌تر است:

تایپوگرافی در bootstrap


همانطور که در مثال بالا مشاهده می‌کنید، این عنصر یک متن ثانویه کوچک در heading ایجاد می‌کند. این قسمت معمولا برای زیباسازی ظاهری و یا اضافه کردن توضیحاتی که اهمیت کمتری نسبت به خود heading دارند، استفاده می‌شود.

عنصر <mark>

تگ mark برای نشانه‌گذاری قسمتی از محتوای شماست. بوت‌استرپ عنصر <mark> را بر اساس سلیقه‌ی خود استایل‌دهی می‌کند. به پس زمینه‌ی آن رنگ زرد کمرنگ و کمی padding می‌دهد. شما می‌توانید این موضوع را در مثال زیر ببینید:

تایپوگرافی در bootstrap


عنصر <abbr>

بوت استرپ 4 عنصر <abbr> را به صورت نقطه چین‌هایی زیر عنصر مربوطه تغییر می‌دهد. در واقع این نوع تگ‌ها برای ایجاد توضیحات بیشتر در متن استفاده می‌شود. به کد این تگ در مثال زیر دقت کنید:

تایپوگرافی در bootstrap


عناصر <blockquote>

همانطور که می‌دانید عنصر <blockquote> برای ذکر نقل قول در صفحه آورده می‌شود. درست زمانی که می‌خواهیم حرف کسی را در نوشته وب‌سایتمان تکرار کنیم. اگر به این عناصر کلاس blockquote. را اضافه کنیم، بوت‌استرپ استایل خاص خودش را به آن می‌دهد:

عناصر<blockquote>

برای نمایش نقل‌قول <blockquote> به صورت راست‌چین از کلاس blockquote-reverse. استفاده کنید.


عنصر <dl>

بوت‌استرپ 4 عناصر <dl> را به شکل زیر استایل‌دهی می کند:

عنصر<dl>


عنصر <code>

کدها (عنصر <code>) در بوت‌استرپ به این شکل استایل‌دهی می‌شود:

عنصر <code>


عنصر <kbd>

عنصر <kbd> که برای توضیح کلید های کیبورد استفاده می شود در بوت استرپ 4 به شکل زیر استایل‌دهی می‌شود

عنصر <kbd>


عنصر <pre>

این عنصر نیز استایل خاص خودش را در بوت استرپ 4 دارد:

عنصر <pre>

موارد بالا مهم ترین موارد در زمینه ی تایپوگرافی bootstrap بود اما شما می توانید کلاس های بیشتر بوت استرپ را از سایت آن مشاهده کنید. امیدوارم از این قسمت لذت برده باشید.

کلاس‌های رنگ در متون و پس‌زمینه

Text Colors

در این بخش از آموزش تایپوگرافی در bootstrap با رنگ‌های متن آشنا می‌شوید.رنگ ها روش قدرتمندی برای نشان دادن اطلاعات مهم در طراحی سایت هستند.

این فریمورک دارای کلاس‌هایی است که می‌توان با استفاده از آن‌ها متن را با رنگ‌های مختلف، جهت نمایش پیام‌ها به رنگ سبز، پیام هشدار به رنگ قرمز و موارد دیگر فرمت‌بندی کرد. کلاس‌ها برای رنگ متون عبارت‌اند از :

  • text-muted.
  • text-primary.
  • text-success.
  • text-inf.
  • text-warning.
  • text-danger.
کلاس‌های رنگ در متون و پس‌زمینه


Background Colors

کلاس‌هایی که از طریق آن‌ها می‌توان رنگ پس‌زمینه متون را مشخص کرد عبارت‌اند از :

  • bg-primary.
  • bg-success.
  • bg-info.
  • bg-warning.
  • bg-danger.
کلاس‌های رنگ در متون و پس‌زمینه

دیدگاهتان را بنویسید

2 پاسخ به “انواع متون و تایپوگرافی در Bootstrap”

  1. امیرمهدی گفت:

    خیلی عالی. ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *