BenoService

آکادمی بنو/آموزش Bootstrap

رنگ‌ها، فاصله‌ها و Layout در Bootstrap

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

در دو مقاله قبلی با Grid، Typography و Utility Classes آشنا شدیم. حالا وقت آن است که کنترل بیشتری روی ظاهر و چیدمان عناصر صفحه داشته باشیم. در Bootstrap ابزارهای آماده‌ای برای رنگ متن، رنگ پس‌زمینه، فاصله‌ها، Display، Flexbox، Alignment، Position و اندازه عناصر وجود دارد. این ابزارها به ما اجازه می‌دهند بسیاری از Layoutهای رایج را بدون نوشتن CSS اختصاصی ایجاد کنیم. در این مقاله ابتدا سیستم رنگ Bootstrap را بررسی می‌کنیم، سپس Spacing و در ادامه ابزارهای Layout را با مثال‌های عملی یاد می‌گیریم.

سیستم رنگ Bootstrap

Bootstrap یک سیستم رنگ استاندارد در اختیار ما قرار می‌دهد که برای بسیاری از قسمت‌های رابط کاربری قابل استفاده است.

رنگ‌های رایج Bootstrap عبارت‌اند از:

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

هر رنگ معمولاً یک مفهوم مشخص دارد.

برای مثال:

  • primary برای رنگ اصلی رابط کاربری

  • success برای عملیات موفق

  • danger برای خطا یا عملیات خطرناک

  • warning برای هشدار

  • info برای اطلاعات

  • secondary برای محتوای ثانویه

استفاده از این سیستم باعث می‌شود طراحی رابط کاربری منظم‌تر باشد.

رنگ متن

برای تغییر رنگ متن می‌توانیم از کلاس‌های text-* استفاده کنیم.

مثال:

<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">
    Information Text
</p>

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

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

این روش بسیار ساده‌تر از نوشتن CSS جداگانه برای هر رنگ است.

رنگ پس‌زمینه

برای تغییر Background از کلاس‌های bg-* استفاده می‌کنیم.

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

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

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

<div class="bg-warning p-3">
    Warning Background
</div>

در بعضی موارد برای خوانایی بهتر باید رنگ متن را نیز تغییر دهیم:

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

ترکیب رنگ متن و Background

یکی از کاربردهای مهم Utilityها، ترکیب چند کلاس است.

برای مثال:

<div class="bg-dark text-white p-4">
    <h2>Dark Section</h2>

    <p>
        This is a dark section with white text.
    </p>
</div>

در این مثال:

  • bg-dark رنگ پس‌زمینه را مشخص می‌کند.

  • text-white رنگ متن را سفید می‌کند.

  • p-4 فاصله داخلی ایجاد می‌کند.

رنگ‌های Subtle

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

برای مثال:

<div class="bg-primary-subtle p-3">
    Subtle Primary Background
</div>

<div class="bg-success-subtle p-3">
    Subtle Success Background
</div>

<div class="bg-danger-subtle p-3">
    Subtle Danger Background
</div>

این رنگ‌ها برای Alertها، Boxها، Notificationها و بخش‌های اطلاع‌رسانی بسیار کاربردی هستند.

Border Color

می‌توانیم رنگ Border را نیز کنترل کنیم.

<div class="border border-primary p-3">
    Primary Border
</div>

<div class="border border-success p-3">
    Success Border
</div>

<div class="border border-danger p-3">
    Danger Border
</div>

در اینجا:

border

Border را ایجاد می‌کند و:

border-primary

رنگ آن را مشخص می‌کند.

Opacity

Bootstrap Utilityهایی برای کنترل Opacity نیز دارد.

برای مثال:

<div class="opacity-25">
    25% Opacity
</div>

<div class="opacity-50">
    50% Opacity
</div>

<div class="opacity-75">
    75% Opacity
</div>

<div class="opacity-100">
    100% Opacity
</div>

این قابلیت برای ایجاد عناصر کم‌رنگ یا حالت‌های Disabled کاربردی است.

Spacing در Bootstrap

یکی از پرکاربردترین بخش‌های Bootstrap، سیستم Spacing است.

Spacing شامل:

  • Margin

  • Padding

است.

در مقاله قبل با این کلاس‌ها آشنا شدیم. در این مقاله آن‌ها را دقیق‌تر بررسی می‌کنیم.

ساختار کلاس‌های Spacing

ساختار کلی کلاس‌ها به صورت زیر است:

{property}{side}-{size}

Property می‌تواند:

m = margin
p = padding

باشد.

Side نیز می‌تواند:

t = top
b = bottom
s = start
e = end
x = horizontal
y = vertical

باشد.

مثلاً:

mt-3

یعنی:

Margin Top

و:

px-4

یعنی:

Padding Horizontal

مثال‌های Margin

Margin در تمام جهات:

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

Margin بالا:

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

Margin پایین:

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

Margin سمت Start:

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

Margin سمت End:

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

Margin افقی:

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

Margin عمودی:

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

مثال‌های Padding

Padding در تمام جهات:

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

Padding بالا:

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

Padding پایین:

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

Padding افقی:

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

Padding عمودی:

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

Spacing با مقدار Auto

یکی از کاربردهای مهم auto در Layout است.

مثلاً:

<div class="d-flex">

    <div>
        Logo
    </div>

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

</div>

ms-auto باعث می‌شود فضای خالی موجود قبل از عنصر دوم قرار بگیرد و آن را به سمت انتهای Flex Container منتقل کند.

ساختار:

+------------------------------------------------+
| Logo                              Login        |
+------------------------------------------------+

این الگو در Headerها و Navigationها بسیار کاربردی است.

Display Utilities

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

مهم‌ترین آن‌ها عبارت‌اند از:

d-none
d-inline
d-inline-block
d-block
d-flex
d-inline-flex

مخفی کردن عنصر

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

این عنصر نمایش داده نمی‌شود.

Block

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

Inline

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

Inline Block

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

Flex

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

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

با d-flex عنصر به یک Flex Container تبدیل می‌شود.

Flexbox در Bootstrap

Flexbox یکی از مهم‌ترین ابزارهای Layout در CSS است و Bootstrap Utilityهای زیادی برای آن فراهم کرده است.

برای مثال:

<div class="d-flex">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

به صورت پیش‌فرض عناصر در یک ردیف قرار می‌گیرند.

+---------+---------+---------+
| Item 1  | Item 2  | Item 3  |
+---------+---------+---------+

Flex Direction

می‌توان جهت Flex را تغییر داد.

برای Row:

<div class="d-flex flex-row">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

برای Column:

<div class="d-flex flex-column">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

نتیجه حالت Column:

+----------------+
| Item 1         |
+----------------+
| Item 2         |
+----------------+

Justify Content

برای کنترل نحوه قرار گرفتن عناصر در محور اصلی می‌توان از justify-content-* استفاده کرد.

Start

<div class="d-flex justify-content-start">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Center

<div class="d-flex justify-content-center">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

End

<div class="d-flex justify-content-end">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Between

<div class="d-flex justify-content-between">
    <div>Left</div>
    <div>Right</div>
</div>

نتیجه:

+------------------------------------------------+
| Left                              Right        |
+------------------------------------------------+

Around

<div class="d-flex justify-content-around">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

Evenly

<div class="d-flex justify-content-evenly">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

Align Items

برای کنترل عناصر در محور Cross می‌توانیم از align-items-* استفاده کنیم.

مثلاً:

<div class="d-flex align-items-center">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

یکی از کاربردهای بسیار رایج این کلاس، Center کردن عمودی عناصر است.

ترکیب Justify و Align

برای قرار دادن یک عنصر دقیقاً در مرکز یک Box:

<div class="d-flex justify-content-center align-items-center"
     style="height: 200px;">

    <div>
        Centered Content
    </div>

</div>

ساختار:

+--------------------------------+
|                                |
|                                |
|        Centered Content        |
|                                |
|                                |
+--------------------------------+

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

Flex Wrap

اگر تعداد عناصر زیاد باشد، ممکن است لازم باشد عناصر به خط بعد منتقل شوند.

برای این کار:

<div class="d-flex flex-wrap">

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

</div>

با flex-wrap عناصر در صورت نیاز به خط بعد منتقل می‌شوند.

Gap در Flex

برای ایجاد فاصله بین عناصر Flex می‌توان از gap استفاده کرد.

مثلاً:

<div class="d-flex gap-3">

    <button class="btn btn-primary">
        Save
    </button>

    <button class="btn btn-secondary">
        Cancel
    </button>

</div>

این روش معمولاً از اضافه کردن Margin جداگانه به هر عنصر ساده‌تر است.

Gap در Grid

Gap فقط برای Flex نیست.

می‌توانیم در بعضی Layoutها از:

<div class="row g-4">

نیز استفاده کنیم.

در Grid، g-* برای کنترل فاصله بین ستون‌ها کاربرد دارد.

Position Utilities

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

مهم‌ترین آن‌ها:

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

Position Relative

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

این کلاس معمولاً زمانی استفاده می‌شود که یک عنصر Absolute داخل آن قرار داشته باشد.

Position Absolute

<div class="position-relative">

    <div class="position-absolute top-0 end-0">
        Badge
    </div>

</div>

در این مثال عنصر دوم در قسمت بالای سمت End والد قرار می‌گیرد.

ساختار:

+--------------------------------+
|                         Badge  |
|                                |
|          Content               |
|                                |
+--------------------------------+

استفاده از start و end به جای left و right باعث می‌شود این Utilityها با جهت‌های مختلف رابط کاربری سازگارتر باشند.

Position Fixed

برای ثابت کردن یک عنصر نسبت به Viewport:

<div class="position-fixed bottom-0 end-0 p-3">
    Fixed Button
</div>

این روش برای مواردی مانند دکمه‌های شناور کاربرد دارد.

Position Sticky

برای Sticky کردن یک عنصر:

<div class="position-sticky top-0">
    Sticky Header
</div>

این قابلیت برای Header یا بخش‌هایی که باید هنگام Scroll در دسترس بمانند کاربردی است.

Overflow Utilities

گاهی محتوای داخل یک عنصر از محدوده آن خارج می‌شود.

Bootstrap برای کنترل Overflow نیز Utility دارد.

مثلاً:

<div class="overflow-hidden">
    Content
</div>

یا:

<div class="overflow-auto">
    Content
</div>

کلاس overflow-auto در صورت نیاز Scroll ایجاد می‌کند.

Float Utilities

Bootstrap کلاس‌هایی برای Float نیز دارد:

<div class="float-start">
    Start
</div>

<div class="float-end">
    End
</div>

در پروژه‌های مدرن معمولاً Flexbox و Grid انتخاب‌های بهتری برای بسیاری از Layoutها هستند، اما آشنایی با این Utilityها همچنان مفید است.

Vertical Alignment

برای کنترل Vertical Alignment در برخی شرایط می‌توان از کلاس‌هایی مانند:

align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom

استفاده کرد.

برای مثال:

<span class="align-middle">
    Middle
</span>

کاربرد این کلاس‌ها به نوع عنصر و Layout والد نیز بستگی دارد.

ساخت یک Header ساده با Utilityها

حالا یک مثال واقعی ایجاد کنیم.

<div class="container">

    <header class="d-flex align-items-center py-3">

        <div>
            <h2 class="mb-0">
                My Website
            </h2>
        </div>

        <nav class="ms-auto d-flex gap-3">

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

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

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

        </nav>

    </header>

</div>

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

d-flex
align-items-center
py-3
mb-0
ms-auto
gap-3
text-decoration-none

این ترکیب یکی از الگوهای رایج برای ساخت Header است.

ساخت یک Hero Section

حالا یک Hero Section ساده ایجاد کنیم:

<section class="bg-dark text-white py-5">

    <div class="container">

        <div class="row">

            <div class="col-12 text-center">

                <h1 class="display-4 fw-bold">
                    Build Better Websites
                </h1>

                <p class="lead mt-3">
                    Create responsive interfaces with Bootstrap.
                </p>

                <div class="d-flex justify-content-center gap-3 mt-4">

                    <button class="btn btn-primary">
                        Get Started
                    </button>

                    <button class="btn btn-outline-light">
                        Learn More
                    </button>

                </div>

            </div>

        </div>

    </div>

</section>

در این مثال تقریباً تمام چیزهایی که در این مقاله یاد گرفتیم با هم ترکیب شده‌اند.

ساخت یک Alert Box با Utilityها

<div class="bg-success-subtle border border-success rounded p-4">

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

    <p class="mb-0">
        Your operation was completed successfully.
    </p>

</div>

این Box بدون CSS اختصاصی ساخته شده است.

Responsive Utilities

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

مثلاً:

<div class="d-none d-md-block">
    Desktop Content
</div>

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

مثال دیگر:

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

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

همچنین می‌توان برای Flex رفتار متفاوتی تعیین کرد:

<div class="d-flex flex-column flex-md-row">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

در موبایل:

Item 1
Item 2
Item 3

و در صفحه‌های بزرگ‌تر:

Item 1 | Item 2 | Item 3

این الگو در Responsive Design بسیار مهم است.

یک مثال کامل Responsive

در این مثال یک بخش معرفی محصول ایجاد می‌کنیم:

<section class="py-5 bg-light">

    <div class="container">

        <div class="row align-items-center g-4">

            <div class="col-12 col-lg-6">

                <h1 class="display-5 fw-bold">
                    Modern Web Development
                </h1>

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

                <div class="d-flex flex-column flex-sm-row gap-2">

                    <button class="btn btn-primary">
                        Start Now
                    </button>

                    <button class="btn btn-outline-dark">
                        Learn More
                    </button>

                </div>

            </div>

            <div class="col-12 col-lg-6">

                <div class="bg-dark text-white rounded p-5 text-center">
                    Product Image
                </div>

            </div>

        </div>

    </div>

</section>

این مثال نشان می‌دهد چگونه می‌توان Grid، Flexbox، Typography، Spacing، Colors و Responsive Utilities را با یکدیگر ترکیب کرد.

چه زمانی Utility استفاده کنیم؟

Utility Classes زمانی بسیار مفید هستند که:

  • تغییر ساده و مشخصی نیاز داریم.

  • می‌خواهیم فاصله‌ای به عنصر اضافه کنیم.

  • می‌خواهیم Alignment را تغییر دهیم.

  • می‌خواهیم عنصر را Flex کنیم.

  • می‌خواهیم رنگ متن یا Background را تغییر دهیم.

  • می‌خواهیم Border یا Shadow اضافه کنیم.

  • می‌خواهیم عنصر را در یک Breakpoint نمایش یا مخفی کنیم.

اما اگر یک Component دارای طراحی کاملاً اختصاصی و پیچیده باشد، بهتر است CSS اختصاصی یا روش‌های Customization Bootstrap را نیز در نظر بگیریم.

اشتباه رایج: استفاده بیش از حد از Utilityها

Utilityها بسیار کاربردی هستند، اما استفاده افراطی از آن‌ها می‌تواند HTML را شلوغ کند.

مثلاً:

<div class="d-flex align-items-center justify-content-center p-4 mt-5 mb-3 bg-light border border-primary rounded shadow text-center">
    Content
</div>

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

در پروژه‌های واقعی باید بین Utility Classes، Componentهای Bootstrap و CSS اختصاصی تعادل برقرار کنیم.

تمرین عملی

یک بخش معرفی محصول برای یک وب‌سایت ایجاد کنید.

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

  • Background روشن

  • عنوان بزرگ

  • توضیح کوتاه

  • دو Button

  • یک Box برای تصویر محصول

  • Layout Responsive

  • فاصله مناسب

  • Border Radius

  • Shadow

در موبایل، محتوا باید به صورت عمودی قرار بگیرد:

+----------------------+
|      Title           |
|      Text            |
|   Button  Button     |
|                      |
|     Image Box        |
+----------------------+

در دسکتاپ:

+-------------------+-------------------+
|                   |                   |
|       Content     |     Image Box     |
|                   |                   |
+-------------------+-------------------+

سعی کنید این تمرین را بدون CSS اختصاصی پیاده‌سازی کنید.

جمع‌بندی

در این مقاله با سه بخش بسیار مهم Bootstrap یعنی Colors، Spacing و Layout Utilities آشنا شدیم.

یاد گرفتیم چگونه با کلاس‌هایی مانند text-primary، bg-dark و border-success رنگ عناصر را کنترل کنیم.

سپس سیستم Spacing را بررسی کردیم و با کلاس‌هایی مانند m-3، mt-4، p-4، px-3 و py-5 برای مدیریت Margin و Padding کار کردیم.

در ادامه با Flexbox Utilities مانند d-flex، flex-column، justify-content-center، justify-content-between، align-items-center، flex-wrap و gap آشنا شدیم.

همچنین Position، Overflow، Responsive Utilities و ترکیب چند Utility برای ساخت Header، Hero Section و Boxهای واقعی را بررسی کردیم.

۱۰

نظرات

کد در دسترس نیست

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