Typography و Utilities در Bootstrap

بهنام نوبخت · ۱۴۰۵/۷/۱۲

در مقاله قبل با Container و Grid System آشنا شدیم و یاد گرفتیم چگونه ساختار کلی یک صفحه را با Row و Column ایجاد کنیم. اما بعد از ساخت Layout، معمولاً لازم است ظاهر محتوای داخل آن را نیز کنترل کنیم؛ برای مثال اندازه و وزن متن، تراز کردن نوشته‌ها، فاصله بین عناصر، نمایش یا مخفی کردن یک عنصر و بسیاری موارد دیگر. Bootstrap برای این کار مجموعه بزرگی از Utility Classes و ابزارهای آماده در اختیار ما قرار می‌دهد. در این مقاله ابتدا با Typography آشنا می‌شویم و سپس مهم‌ترین Utility Classهای Bootstrap را با مثال‌های عملی بررسی می‌کنیم.

Typography در Bootstrap چیست؟

Typography به مجموعه‌ای از قوانین و تنظیمات مربوط به نمایش و ظاهر متن گفته می‌شود.

مواردی مانند:

جزو Typography محسوب می‌شوند.

Bootstrap برای بسیاری از این موارد کلاس‌های آماده دارد.

برای مثال:

<p class="text-center">
    This text is centered.
</p>

کلاس text-center متن را در مرکز قرار می‌دهد.

بدون Bootstrap باید CSS مخصوص آن را بنویسیم:

.text-center {
    text-align: center;
}

اما Bootstrap این کلاس را از قبل آماده کرده است.

Headingها در Bootstrap

HTML به صورت استاندارد شش Heading دارد:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Bootstrap این Headingها را با استایل مناسب نمایش می‌دهد.

مثلاً:

<h1>Bootstrap Heading 1</h1>
<h2>Bootstrap Heading 2</h2>
<h3>Bootstrap Heading 3</h3>

اما Bootstrap یک امکان دیگر نیز دارد.

می‌توانیم ظاهر یک Heading را روی عنصر دیگری اعمال کنیم.

برای مثال:

<p class="h1">
    This paragraph looks like an H1.
</p>

در اینجا عنصر همچنان <p> است، اما ظاهر آن مانند Heading اول خواهد بود.

این موضوع زمانی مفید است که ساختار معنایی HTML را حفظ کنیم اما به ظاهر متفاوتی نیاز داشته باشیم.

Display Headings

Bootstrap کلاس‌هایی برای Headingهای بزرگ‌تر نیز دارد.

برای مثال:

<h1 class="display-1">
    Welcome
</h1>

کلاس‌های Display از display-1 تا display-6 وجود دارند.

مثال:

<h1 class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>
<h3 class="display-3">Display 3</h3>
<h4 class="display-4">Display 4</h4>
<h5 class="display-5">Display 5</h5>
<h6 class="display-6">Display 6</h6>

این کلاس‌ها برای عنوان‌های بزرگ، Hero Sectionها و Landing Pageها بسیار کاربردی هستند.

Paragraph

برای متن معمولی می‌توانیم از <p> استفاده کنیم:

<p>
    Bootstrap makes frontend development faster and easier.
</p>

Bootstrap به صورت پیش‌فرض برای Paragraph نیز فاصله و ظاهر مناسبی در نظر می‌گیرد.

Lead Text

اگر بخواهیم یک Paragraph مهم‌تر از متن معمولی داشته باشیم، می‌توانیم از lead استفاده کنیم:

<p class="lead">
    Build responsive websites faster with Bootstrap.
</p>

کلاس lead باعث می‌شود متن کمی برجسته‌تر و بزرگ‌تر نمایش داده شود.

این کلاس در بخش‌هایی مانند معرفی سایت بسیار کاربردی است.

Text Alignment

Bootstrap کلاس‌هایی برای تراز کردن متن دارد.

متن در سمت چپ

<p class="text-start">
    Start aligned text.
</p>

متن در مرکز

<p class="text-center">
    Center aligned text.
</p>

متن در سمت راست

<p class="text-end">
    End aligned text.
</p>

این کلاس‌ها باعث می‌شوند بدون نوشتن CSS بتوانیم Alignment متن را کنترل کنیم.

Text Alignment در اندازه‌های مختلف صفحه

یکی از ویژگی‌های مهم Utilityهای Bootstrap این است که بسیاری از آن‌ها می‌توانند Responsive باشند.

برای مثال:

<p class="text-start text-md-center text-lg-end">
    Responsive Text
</p>

یعنی:

در اندازه کوچک متن از ابتدا قرار می‌گیرد.
از md به بعد متن وسط قرار می‌گیرد.
از lg به بعد متن در انتها قرار می‌گیرد.

این قابلیت در طراحی Responsive بسیار کاربردی است.

Font Weight

Bootstrap کلاس‌هایی برای کنترل وزن فونت نیز دارد.

برای مثال:

<p class="fw-bold">
    Bold text
</p>

یا:

<p class="fw-normal">
    Normal text
</p>

کلاس‌های رایج:

fw-light
fw-normal
fw-medium
fw-semibold
fw-bold
fw-bolder

البته پشتیبانی دقیق وزن‌ها به فونت مورد استفاده و CSS پروژه نیز بستگی دارد.

Italic

برای نمایش متن به صورت Italic:

<p class="fst-italic">
    Italic text
</p>

برای حالت Normal:

<p class="fst-normal">
    Normal text
</p>

Text Decoration

Bootstrap کلاس‌هایی برای کنترل Decoration متن نیز دارد.

مثلاً برای حذف Underline:

<a href="#" class="text-decoration-none">
    Learn More
</a>

این کار برای لینک‌هایی که می‌خواهیم ظاهر سفارشی‌تری داشته باشند کاربردی است.

Text Transform

Bootstrap کلاس‌هایی برای تغییر حالت حروف نیز دارد.

حروف بزرگ

<p class="text-uppercase">
    hello bootstrap
</p>

نتیجه:

HELLO BOOTSTRAP

حروف کوچک

<p class="text-lowercase">
    HELLO BOOTSTRAP
</p>

حالت Capitalize

<p class="text-capitalize">
    hello bootstrap
</p>

Text Wrapping

Bootstrap کلاس‌هایی برای کنترل Wrap شدن متن نیز دارد.

برای مثال:

<div class="text-wrap">
    This text can wrap when necessary.
</div>

و برای جلوگیری از Wrap:

<div class="text-nowrap">
    This text will not wrap.
</div>

در صفحات Responsive باید در استفاده از text-nowrap دقت کنیم، چون ممکن است متن در صفحه‌های کوچک از محدوده خود خارج شود.

Text Truncation

اگر متن طولانی باشد، می‌توانیم از text-truncate استفاده کنیم.

مثال:

<div class="text-truncate" style="max-width: 250px;">
    This is a very long text that should be truncated when it becomes too long.
</div>

در پروژه‌های واقعی بهتر است Width را نیز به شکل مناسب مدیریت کنیم.

Text Color

Bootstrap مجموعه‌ای از کلاس‌های آماده برای رنگ متن دارد.

برای مثال:

<p class="text-primary">
    Primary text
</p>

<p class="text-success">
    Success text
</p>

<p class="text-danger">
    Danger text
</p>

<p class="text-warning">
    Warning text
</p>

<p class="text-info">
    Info text
</p>

<p class="text-secondary">
    Secondary text
</p>

<p class="text-dark">
    Dark text
</p>

<p class="text-body">
    Body text
</p>

<p class="text-muted">
    Muted text
</p>

این کلاس‌ها برای طراحی سریع بسیار کاربردی هستند.

Background Color

همان‌طور که برای Text رنگ داریم، برای Background نیز کلاس‌های آماده وجود دارد.

مثال:

<div class="bg-primary text-white p-3">
    Primary Background
</div>

<div class="bg-success text-white p-3">
    Success Background
</div>

<div class="bg-danger text-white p-3">
    Danger Background
</div>

در اینجا:

bg-primary

رنگ Background را تعیین می‌کند.

و:

text-white

رنگ متن را سفید می‌کند.

Utility Class چیست؟

Utility Class یک کلاس کوچک و هدفمند است که معمولاً فقط یک وظیفه مشخص را انجام می‌دهد.

برای مثال:

<div class="p-3">
    Content
</div>

کلاس p-3 برای تنظیم Padding استفاده می‌شود.

یا:

<div class="mt-4">
    Content
</div>

کلاس mt-4 برای Margin Top استفاده می‌شود.

بنابراین به جای نوشتن CSS جداگانه برای هر عنصر، می‌توانیم Utilityهای Bootstrap را ترکیب کنیم.

مزیت Utility Classes

فرض کنید می‌خواهیم یک Box داشته باشیم که:

Padding داشته باشد.
Margin از بالا داشته باشد.
متن وسط باشد.
رنگ Background مشخصی داشته باشد.

بدون Utility Classes ممکن است CSS جداگانه بنویسیم.

اما Bootstrap اجازه می‌دهد:

<div class="p-4 mt-3 text-center bg-light">
    Welcome to Bootstrap
</div>

این یکی از مهم‌ترین مفاهیم Bootstrap است:

کلاس‌های کوچک را می‌توان برای ساخت ظاهر موردنظر با یکدیگر ترکیب کرد.

Margin در Bootstrap

Bootstrap برای Margin از الگوی زیر استفاده می‌کند:

حرف m مخفف Margin است.

مثال:

<div class="m-3">
    Content
</div>

یعنی Margin در تمام جهات اعمال می‌شود.

Margin در جهت خاص

برای Top:

<div class="mt-3">
    Content
</div>

برای Bottom:

<div class="mb-3">
    Content
</div>

برای Start:

<div class="ms-3">
    Content
</div>

برای End:

<div class="me-3">
    Content
</div>

برای محور افقی:

<div class="mx-3">
    Content
</div>

برای محور عمودی:

<div class="my-3">
    Content
</div>

Padding در Bootstrap

Padding نیز ساختاری مشابه Margin دارد.

حرف:

برای Padding استفاده می‌شود.

مثلاً:

<div class="p-3">
    Content
</div>

برای Padding بالا:

<div class="pt-3">
    Content
</div>

برای پایین:

<div class="pb-3">
    Content
</div>

برای Start:

<div class="ps-3">
    Content
</div>

برای End:

<div class="pe-3">
    Content
</div>

برای محور افقی:

<div class="px-3">
    Content
</div>

برای محور عمودی:

<div class="py-3">
    Content
</div>

مقیاس Spacing

Bootstrap برای Spacing معمولاً از مقادیری مانند زیر استفاده می‌کند:

برای مثال:

<div class="p-0">...</div>
<div class="p-1">...</div>
<div class="p-2">...</div>
<div class="p-3">...</div>
<div class="p-4">...</div>
<div class="p-5">...</div>

هرچه مقدار بزرگ‌تر شود، فاصله نیز بیشتر می‌شود.

مقدار Auto

گاهی لازم است Margin را به صورت خودکار تنظیم کنیم.

برای مثال:

<div class="ms-auto">
    Right Side
</div>

این کلاس می‌تواند در Layoutهای Flex بسیار کاربردی باشد.

یک مثال:

<div class="d-flex">

    <div>
        Logo
    </div>

    <div class="ms-auto">
        Login
    </div>

</div>

در اینجا ms-auto باعث می‌شود بخش Login به سمت انتهای Layout حرکت کند.

Display Utilities

Bootstrap کلاس‌هایی برای کنترل display نیز دارد.

برای مثال:

<div class="d-block">
    Block
</div>

برای Flex:

<div class="d-flex">
    Flex Container
</div>

برای Inline:

<div class="d-inline">
    Inline
</div>

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

<div class="d-none">
    Hidden
</div>

نمایش Responsive

می‌توانیم نمایش عنصر را بر اساس اندازه صفحه تغییر دهیم.

مثلاً:

<div class="d-none d-md-block">
    Visible from medium screens
</div>

در اندازه‌های کوچک عنصر مخفی است و از md به بعد نمایش داده می‌شود.

مثال دیگر:

<div class="d-block d-md-none">
    Mobile Only
</div>

در این حالت عنصر در اندازه‌های کوچک نمایش داده می‌شود و از md به بعد مخفی خواهد شد.

Width و Height Utilities

Bootstrap کلاس‌هایی برای Width نیز دارد.

مثلاً:

<div class="w-25">
    25%
</div>

<div class="w-50">
    50%
</div>

<div class="w-75">
    75%
</div>

<div class="w-100">
    100%
</div>

همچنین برای Height:

<div class="h-100">
    Full Height
</div>

مقدار واقعی قابل استفاده به ساختار والد و CSS محیط نیز بستگی دارد.

Border Utilities

Bootstrap برای Border نیز Utility دارد.

برای مثال:

<div class="border">
    Box
</div>

حذف Border:

<div class="border-0">
    Box
</div>

همچنین می‌توان Border را در جهت خاص کنترل کرد:

<div class="border-top">
    Top Border
</div>

یا:

<div class="border-bottom">
    Bottom Border
</div>

Border Radius

برای گرد کردن گوشه‌ها می‌توان از کلاس‌های زیر استفاده کرد:

<div class="rounded">
    Rounded Box
</div>

کلاس‌های دیگری مانند:

rounded-0
rounded-1
rounded-2
rounded-3
rounded-4
rounded-5
rounded-pill
rounded-circle

نیز کاربرد دارند.

مثلاً:

<div class="rounded-pill px-4 py-2">
    Pill Button
</div>

Shadow Utilities

برای ایجاد Shadow می‌توان از کلاس‌های آماده استفاده کرد.

<div class="shadow">
    Box with shadow
</div>

سطوح مختلفی نیز وجود دارد:

shadow-sm
shadow
shadow-lg

Position Utilities

Bootstrap کلاس‌هایی برای Position نیز ارائه می‌کند.

برای مثال:

<div class="position-relative">
    Parent
</div>

و:

<div class="position-absolute">
    Child
</div>

همچنین کلاس‌هایی مانند:

position-static
position-relative
position-absolute
position-fixed
position-sticky

وجود دارند.

در مقالات بعدی هنگام ساخت Navigation و Layoutهای واقعی بیشتر با این Utilityها کار خواهیم کرد.

ترکیب چند Utility

قدرت اصلی Utility Classes زمانی مشخص می‌شود که چند کلاس را با هم ترکیب کنیم.

برای مثال:

<div class="p-4 mt-4 bg-light border rounded shadow">

    <h2 class="text-primary">
        Bootstrap Card
    </h2>

    <p class="text-muted">
        This is a simple component created with utility classes.
    </p>

    <button class="btn btn-primary">
        Read More
    </button>

</div>

بدون نوشتن حتی یک خط CSS اختصاصی، یک Box نسبتاً کامل ایجاد کرده‌ایم.

یک مثال واقعی: Profile Box

حالا یک Profile Box ساده ایجاد کنیم:

<div class="container mt-5">

    <div class="border rounded shadow p-4">

        <h2 class="text-primary">
            John Doe
        </h2>

        <p class="text-muted mb-4">
            Front-End Developer
        </p>

        <p>
            John is a developer who builds modern web applications.
        </p>

        <button class="btn btn-primary mt-2">
            View Profile
        </button>

    </div>

</div>

در این مثال از چند Utility استفاده کرده‌ایم:

container
mt-5
border
rounded
shadow
p-4
text-primary
text-muted
mb-4
mt-2

این دقیقاً همان روشی است که در بسیاری از پروژه‌های واقعی Bootstrap استفاده خواهیم کرد.

نکته مهم درباره Utility Classes

Utilityها بسیار قدرتمند هستند، اما نباید باعث شوند HTML بیش از حد پیچیده و غیرقابل خواندن شود.

برای مثال:

<div class="p-2 m-3 mt-4 mb-5 ms-2 me-3 px-4 py-2 bg-light border rounded shadow text-center text-primary fw-bold">
    Content
</div>

این کد ممکن است کار کند، اما تعداد زیاد Utilityها می‌تواند خوانایی HTML را کاهش دهد.

در پروژه‌های واقعی باید بین استفاده از Utility Classes و CSS اختصاصی تعادل مناسبی ایجاد کنیم.

تمرین عملی

یک Profile Card برای یک کاربر ایجاد کنید.

Card باید شامل موارد زیر باشد:

سعی کنید بدون نوشتن CSS اختصاصی این کار را انجام دهید.

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

p-4
mt-4
mb-3
text-center
text-primary
text-muted
border
rounded
shadow
btn
btn-primary

سپس یک نسخه Responsive ایجاد کنید که در اندازه‌های مختلف صفحه ظاهر مناسبی داشته باشد.

جمع‌بندی

در این مقاله با Typography و Utility Classes در Bootstrap آشنا شدیم.

یاد گرفتیم Bootstrap برای کنترل ظاهر متن، کلاس‌هایی مانند text-center، text-primary، fw-bold، fst-italic و lead در اختیار ما قرار می‌دهد.

سپس با Utilityهای مهمی مانند Margin، Padding، Display، Width، Border، Border Radius، Shadow و Position آشنا شدیم.

همچنین دیدیم که می‌توان چند Utility را با یکدیگر ترکیب کرد و بدون نوشتن CSS اختصاصی، رابط‌های کاربری کاربردی ایجاد کرد.

یکی از مهم‌ترین نکاتی که باید از این مقاله به خاطر بسپاریم این است که Utility Classes ابزارهای کوچکی هستند که هرکدام یک وظیفه مشخص انجام می‌دهند و می‌توان آن‌ها را برای ساخت یک Layout یا Component کامل با یکدیگر ترکیب کرد.

۱۰

نظرات

هنوز نظری ثبت نشده است.