آموزش تایپوگرافی در بوت استرپ

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

تنظیمات پیش‌فرض و سراسری بوت استرپ

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

  • اندازه پیش‌فرض فونت در بوت استرپ برابر با 1rem است، که معادل ۱۶ پیکسل می‌باشد.

  • ارتفاع خط (line-height) برای خوانایی بهتر، مقدار 1.5 در نظر گرفته شده است.

  • برای نمایش بهینه متن در تمام دستگاه‌ها و سیستم‌عامل‌ها، بوت استرپ از Native Font Stack استفاده می‌کند.

  • رنگ پس‌زمینه تگ <body> با استفاده از متغیر $body-bg تنظیم می‌شود و مقدار پیش‌فرض آن #fff است.

  • رنگ لینک‌های سراسری از طریق متغیر $link-color تعریف می‌شود و خط زیر لینک‌ها تنها هنگام hover (قرار گرفتن موس) نمایش داده می‌شود.

  • برای اعمال تایپوگرافی پایه روی تگ <body> می‌توان از متغیرهایی مانند $font-family-base، $font-size-base و $line-height-base استفاده کرد.

  • مقدار $font-size-base باید بر اساس rem تنظیم شود. تمام متغیرهای تایپوگرافی در فایل _variables.scss تعریف شده‌اند و سبک‌های نهایی آن‌ها در فایل _reboot.scss اعمال می‌شوند.

هدینگ ها (Headings)

تگ‌های هدینگ HTML یعنی <h1> تا <h6> در بوت استرپ به‌گونه‌ای طراحی شده‌اند که ساختار و اندازه آن‌ها با ظاهر کلی پروژه هماهنگ باشد. در بخش بعدی به نحوه استایل‌دهی این تگ‌ها می‌پردازیم.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

کلاس‌های .h1 تا .h6 نیز در بوت استرپ وجود دارند و این امکان را فراهم می‌کنند که استایل تایپوگرافی هدینگ‌ها را بدون استفاده از تگ‌های HTML مربوطه (مثل <h1> تا <h6>) اعمال کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

سفارشی سازی هدینگ ها در بوت استرپ

برای تغییر ظاهر هدینگ ها در بوت استرپ، می‌توانید از کلاس‌های کاربردی (utility classes) استفاده کنید. این کلاس‌ها به شما اجازه می‌دهند اندازه فونت، رنگ، فاصله و سایر ویژگی‌ها را متناسب با طراحی خود تنظیم کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

زمانی که می‌خواهید هدینگ ها را با اندازه بزرگ‌تر و استایل برجسته‌تری نمایش دهید، می‌توانید از کلاس‌های نمایشی (display heading) در بوت استرپ استفاده کنید. این کلاس‌ها ظاهر هدینگ را چشم‌گیرتر و تأثیرگذارتر می‌کنند.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

متن برجسته (Lead)

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

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

مخفف‌ها (Abbreviations)

در بوت استرپ، تگ HTML <abbr> به‌گونه‌ای استایل‌دهی شده که هنگام قرار گرفتن نشانگر موس روی آن، فرم کامل مخفف یا اختصار نمایش داده می‌شود. همچنین، یک خط‌چین ظریف زیر متن ظاهر می‌شود تا کاربر متوجه شود با یک مخفف روبرو است.

برای نمایش مخفف با اندازه فونت کمی کوچک‌تر، می‌توانید از کلاس .initialism استفاده کنید. این کلاس معمولاً برای مخفف‌های رسمی یا اسامی سازمانی کاربرد دارد.

مثال:

ISRO

WHO

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نقل‌قول (Blockquote)

زمانی که می‌خواهید یک بخش از محتوا را به‌عنوان نقل‌قول در سند قرار دهید، می‌توانید کلاس .blockquote را به همراه تگ HTML <blockquote> استفاده کنید. این کلاس ظاهر نقل‌قول را برجسته‌تر و ساختاریافته‌تر نمایش می‌دهد.

مثال: این یک نقل قول نمونه در بوت استرپ است است.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نام‌گذاری منبع (Naming a Source)

برای مشخص کردن منبع یک نقل‌قول، بوت استرپ کلاس .blockquote-footer را ارائه می‌دهد که درون تگ <footer> قرار می‌گیرد. همچنین برای نمایش نام منبع، از تگ <cite> استفاده می‌شود تا نام اثر یا نویسنده به‌درستی و با استایل مناسب نمایش داده شود.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز بندی (Alignment)

بوت استرپ کلاس‌هایی مانند .text-center و .text-right را برای تغییر جهت تراز متن در نقل‌قول‌ها ارائه می‌دهد. با استفاده از این کلاس‌ها می‌توانید محتوای تگ <blockquote> را در وسط یا سمت راست صفحه قرار دهید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

عناصر متنی درون‌خطی (Inline Text Elements)

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

کلاس .mark

کلاس .mark برای هایلایت یا نشانه‌گذاری بخشی از متن استفاده می‌شود و عملکردی مشابه تگ <mark> دارد. این کلاس معمولاً برای جلب توجه به یک کلمه یا عبارت در میان متن کاربرد دارد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

.small

کلاس .small متن را به‌صورت ریز و کم‌رنگ‌تر نمایش می‌دهد و معمولاً برای متون فرعی مانند کپی‌رایت، توضیحات حقوقی یا پاورقی استفاده می‌شود. این کلاس عملکردی مشابه تگ <small> در HTML دارد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

.text-decoration-underline

کلاس .text-decoration-underline متن را به‌صورت زیرخط‌دار نمایش می‌دهد و عملکردی مشابه تگ <u> در HTML دارد. از این کلاس می‌توان برای تأکید بصری یا مشخص کردن لینک‌های غیرفعال استفاده کرد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

.text-decoration-line-through

کلاس .text-decoration-line-through متن را به‌صورت خط خورده نمایش می‌دهد و نشان می‌دهد که آن بخش از متن دیگر معتبر یا قابل استفاده نیست. این کلاس عملکردی مشابه تگ <s> در HTML دارد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

<del>

تگ <del> برای نمایش متنی که حذف شده است استفاده می‌شود. این تگ معمولاً برای نشان دادن تغییرات یا ویرایش‌هایی به‌کار می‌رود که در نسخه جدید متن دیگر وجود ندارند.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

<strong>

تگ <strong> متن را به‌صورت پررنگ (bold) نمایش می‌دهد و برای تأکید معنایی روی کلمات یا جملات استفاده می‌شود. استفاده از این تگ نشان می‌دهد که آن بخش از متن از نظر محتوا اهمیت بیشتری دارد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

<em>

تگ <em> متن را به‌صورت مورب (italic) نمایش می‌دهد و برای تأکید معنایی با لحن متفاوت در خواندن جمله استفاده می‌شود. این تأکید معمولاً به‌صورت صوتی در خوانش متن نیز قابل درک است.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

لیست ها در بوت استرپ

لیست بدون استایل (Unstyled Lists)

کلاس .list-unstyled در بوت استرپ استایل پیش‌فرض لیست مانند بولت‌ها (نقطه‌های ابتدای آیتم‌ها) و فاصله چپ (left margin) را از آیتم‌های لیست حذف می‌کند.

نکته مهم این است که این کلاس فقط روی آیتم‌های فرزند مستقیم لیست تأثیر می‌گذارد و در صورت وجود لیست‌های تو در تو، باید کلاس را به آن‌ها نیز جداگانه اعمال کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

لیست درون‌خطی (Inline Lists)

بوت استرپ برای ایجاد لیست‌های درون‌خطی، از ترکیب دو کلاس .list-inline و .list-inline-item استفاده می‌کند. این ترکیب باعث می‌شود نشان‌گر بولت از آیتم‌های لیست حذف شود و هر آیتم با کمی فاصله در کنار هم به‌صورت افقی نمایش داده شود.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز لیست‌های توضیحی (Description List Alignment)

بوت استرپ کلاس‌های آماده‌ای برای تگ‌های HTML شامل <dl>، <dt> و <dd> ارائه می‌دهد که امکان تراز افقی بین عبارات و توضیحات را فراهم می‌کند. این ساختار برای زمانی مناسب است که بخواهید عنوان و توضیح را در یک خط نمایش دهید.

در صورت نیاز می‌توانید کلاس .text-truncate را نیز به عناصر اضافه کنید تا متن‌های طولانی با سه‌نقطه (…) کوتاه شوند.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اندازه فونت واکنش گرا (Responsive Font Sizes)

در بوت استرپ ۵، اندازه فونت واکنش گرا به‌صورت پیش‌فرض فعال است. این ویژگی که به اختصار RFS نامیده می‌شود، باعث می‌شود اندازه متن‌ها به‌صورت خودکار با توجه به اندازه صفحه نمایش یا دستگاه تغییر کند.

RFS فقط محدود به فونت نیست، بلکه می‌تواند برای واحدهایی مثل margin، padding، border-radius و حتی box-shadow نیز اندازه متناسب را محاسبه و اعمال کند.

این سیستم به‌طور هوشمند، اندازه مناسب را با توجه به ابعاد ویوپورت (viewport) مرورگر محاسبه کرده و ظاهر متن را در تمام دستگاه‌ها یکنواخت و خوانا نگه می‌دارد. یادگیری این تکنیک برای افرادی که در مسیر آموزش طراحی سایت با بوت استرپ هستند، یک گام ضروری برای ایجاد تجربه کاربری حرفه‌ای محسوب می‌شود.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش صفر تا صد فتوشاپ به زبان فارسی – حرفه ای شوید
  • انتشار: ۳۰ اردیبهشت ۱۴۰۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید