Navigation و Responsive Design در Bootstrap

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

تقریباً هر وب‌سایت حرفه‌ای به یک سیستم Navigation یا ناوبری نیاز دارد تا کاربر بتواند به بخش‌های مختلف سایت دسترسی پیدا کند. منوی اصلی، لینک‌های صفحات، منوی حساب کاربری، دسته‌بندی‌ها و حتی منوی موبایل همگی بخشی از سیستم Navigation هستند. اگر این منوها در صفحه‌های مختلف به‌درستی نمایش داده نشوند، کاربر تجربه خوبی نخواهد داشت؛ به‌خصوص زمانی که سایت روی موبایل یا تبلت باز می‌شود. Bootstrap مجموعه‌ای از کلاس‌ها و Componentهای آماده برای ساخت Navigation و Navbar در اختیار ما قرار می‌دهد و امکان ایجاد منوهای Responsive را بدون نوشتن مقدار زیادی CSS فراهم می‌کند. در این مقاله ابتدا با مفهوم Navigation آشنا می‌شویم، سپس ساخت Nav ساده، لینک‌های فعال، Navهای مختلف، Navbar، Brand، منوی موبایل، Dropdown و ساخت یک Header Responsive را بررسی می‌کنیم. در پایان نیز یک Header واقعی برای یک وب‌سایت ایجاد خواهیم کرد.

Navigation چیست؟

Navigation یا سیستم ناوبری مجموعه‌ای از لینک‌ها و کنترل‌هایی است که به کاربر اجازه می‌دهد بین قسمت‌های مختلف یک وب‌سایت جابه‌جا شود.

برای مثال یک سایت ممکن است Navigation زیر را داشته باشد:

Home
Products
Services
Blog
About
Contact

در HTML ساده می‌توان چنین Navigationای ایجاد کرد:

<nav>
    <a href="/">خانه</a>
    <a href="/products">محصولات</a>
    <a href="/services">خدمات</a>
    <a href="/blog">وبلاگ</a>
</nav>

اما Bootstrap ابزارهای بیشتری برای مدیریت ظاهر و Responsive بودن Navigation ارائه می‌کند.

Nav در Bootstrap

یکی از ساده‌ترین ساختارهای Navigation در Bootstrap استفاده از کلاس nav است.

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">
            خانه
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            محصولات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            خدمات
        </a>
    </li>
</ul>

در این ساختار:

nav کانتینر Navigation است.
nav-item یک آیتم Navigation است.
nav-link لینک Navigation است.

لینک فعال

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

<ul class="nav">

    <li class="nav-item">
        <a class="nav-link active" href="#">
            خانه
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            محصولات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            تماس با ما
        </a>
    </li>

</ul>

کلاس active نشان می‌دهد این لینک در حال حاضر انتخاب شده است.

در یک پروژه واقعی معمولاً وضعیت Active را بر اساس URL یا Route فعلی تعیین می‌کنیم.

Navigation به صورت عمودی

به‌صورت پیش‌فرض Navigation می‌تواند حالت افقی داشته باشد.

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

flex-column

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

<ul class="nav flex-column">

    <li class="nav-item">
        <a class="nav-link" href="#">
            Dashboard
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            Products
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            Orders
        </a>
    </li>

</ul>

این الگو برای Sidebar بسیار مناسب است.

Nav با عرض کامل

می‌توانیم از Utilityهای Flexbox برای ایجاد Navigation با عرض مناسب استفاده کنیم.

<ul class="nav nav-pills">

    <li class="nav-item">
        <a class="nav-link active" href="#">
            Home
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            Products
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            Orders
        </a>
    </li>

</ul>

Nav Pills

Bootstrap نوع دیگری از Navigation به نام nav-pills دارد.

<ul class="nav nav-pills">

    <li class="nav-item">
        <a class="nav-link active" href="#">
            خانه
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            محصولات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            خدمات
        </a>
    </li>

</ul>

در این حالت لینک فعال ظاهر متفاوتی پیدا می‌کند.

nav-pills برای Navigationهای داخل Dashboard و صفحات داخلی بسیار کاربردی است.

Nav Tabs

نوع دیگری از Navigation با استفاده از nav-tabs ساخته می‌شود.

<ul class="nav nav-tabs">

    <li class="nav-item">
        <a class="nav-link active" href="#">
            اطلاعات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            تنظیمات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            امنیت
        </a>
    </li>

</ul>

Tabها معمولاً برای تقسیم یک صفحه به چند بخش مرتبط استفاده می‌شوند.

تفاوت Nav Pills و Nav Tabs

به‌صورت مفهومی:

Nav Pills
   ↓
Button-like Navigation

Nav Tabs
   ↓
Tabbed Navigation

انتخاب بین آنها به طراحی صفحه و نوع رابط کاربری بستگی دارد.

Navbar چیست؟

Navbar یکی از مهم‌ترین Componentهای Bootstrap برای ساخت Header سایت است.

یک Navbar ساده:

<nav class="navbar">
    <div class="container">

        <a class="navbar-brand" href="#">
            My Website
        </a>

    </div>
</nav>

اما معمولاً Navbar را با رنگ و ساختار کامل‌تری استفاده می‌کنیم.

Navbar با پس‌زمینه

برای مثال:

<nav class="navbar bg-body-tertiary">
    <div class="container">

        <a class="navbar-brand" href="#">
            My Website
        </a>

    </div>
</nav>

یا:

<nav class="navbar bg-dark">
    <div class="container">

        <a class="navbar-brand text-white" href="#">
            My Website
        </a>

    </div>
</nav>

در پروژه‌های واقعی معمولاً رنگ Navbar را بر اساس طراحی کلی سایت انتخاب می‌کنیم.

Navbar Brand

navbar-brand برای نمایش نام یا Logo سایت استفاده می‌شود.

مثلاً:

<a class="navbar-brand" href="/">
    My Website
</a>

می‌توانیم به جای متن از تصویر نیز استفاده کنیم:

<a class="navbar-brand" href="/">

    <img
        src="logo.png"
        alt="Logo"
        width="40"
        height="40">

</a>

یا Logo و نام سایت را کنار یکدیگر قرار دهیم:

<a class="navbar-brand d-flex align-items-center gap-2" href="/">

    <img
        src="logo.png"
        alt="Logo"
        width="40"
        height="40">

    <span>
        My Website
    </span>

</a>

Navbar با لینک‌ها

حالا لینک‌های اصلی را اضافه کنیم:

<nav class="navbar bg-body-tertiary">

    <div class="container">

        <a class="navbar-brand" href="/">
            My Website
        </a>

        <ul class="navbar-nav">

            <li class="nav-item">
                <a class="nav-link active" href="#">
                    Home
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Products
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">
                    Services
                </a>
            </li>

        </ul>

    </div>

</nav>

البته برای Headerهای Responsive معمولاً ساختار کامل‌تری استفاده می‌شود.

Navbar Responsive

یکی از مهم‌ترین ویژگی‌های Navbar این است که بتواند در اندازه‌های مختلف صفحه به شکل مناسبی نمایش داده شود.

در Desktop ممکن است منو به این شکل باشد:

Logo | Home | Products | Services | Blog | Contact

اما در Mobile بهتر است منو جمع شود:

Logo | Menu Button

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

ساخت Navbar Responsive

یک نمونه استاندارد:

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a class="navbar-brand" href="/">
            My Website
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        Home
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Products
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Services
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Blog
                    </a>
                </li>

            </ul>

        </div>

    </div>

</nav>

این یکی از مهم‌ترین الگوهای Navbar در Bootstrap است.

navbar-expand-lg یعنی چه؟

کلاس:

navbar-expand-lg

مشخص می‌کند Navbar از Breakpoint lg به بعد حالت Expanded داشته باشد.

در اندازه‌های کوچک‌تر، منو Collapse می‌شود.

بنابراین به‌صورت مفهومی:

Small Screen
      ↓
Collapsed Navbar
      ↓
Menu Button

Large Screen
      ↓
Expanded Navbar
      ↓
Navigation Links

تغییر Breakpoint

می‌توانیم به جای lg از Breakpointهای دیگر استفاده کنیم.

برای مثال:

navbar-expand-sm

یا:

navbar-expand-md

یا:

navbar-expand-xl

این انتخاب به طراحی پروژه بستگی دارد.

دکمه Hamburger

در Navbar Responsive معمولاً دکمه‌ای برای باز و بسته کردن منو وجود دارد.

این قسمت:

<button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#mainNavbar">

دکمه Toggle را ایجاد می‌کند.

و:

<span class="navbar-toggler-icon"></span>

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

نکته مهم درباره Navbar Toggler

برای نمایش آیکون استاندارد navbar-toggler-icon معمولاً باید Navbar دارای تنظیمات مناسب Bootstrap باشد؛ برای مثال استفاده از:

navbar-light

در نسخه‌های قدیمی یا تنظیمات مناسب رنگ/پس‌زمینه، یا در Bootstrap 5.3 استفاده از متغیرهای CSS و data-bs-theme.

در پروژه‌های جدید بهتر است ظاهر Navbar را بر اساس سیستم رنگ Bootstrap 5.3 تنظیم کنیم.

Collapse چیست؟

collapse قابلیتی است که یک بخش را می‌تواند باز و بسته کند.

در Navbar:

<div class="collapse navbar-collapse" id="mainNavbar">

این بخش در اندازه کوچک می‌تواند مخفی باشد و با دکمه Navbar باز شود.

این قابلیت به JavaScript Bootstrap نیاز دارد.

Navbar همراه با Button

می‌توانیم یک دکمه نیز به Navbar اضافه کنیم.

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a class="navbar-brand" href="/">
            My Website
        </a>

        <div class="collapse navbar-collapse" id="mainNavbar">

            <ul class="navbar-nav me-auto">

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Home
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Products
                    </a>
                </li>

            </ul>

            <a href="#" class="btn btn-primary">
                Login
            </a>

        </div>

    </div>

</nav>

این الگو برای بسیاری از سایت‌های تجاری مناسب است.

Navbar با Dropdown

می‌توانیم Dropdown را نیز داخل Navigation قرار دهیم.

<li class="nav-item dropdown">

    <a
        class="nav-link dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false">

        Products

    </a>

    <ul class="dropdown-menu">

        <li>
            <a class="dropdown-item" href="#">
                Product One
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                Product Two
            </a>
        </li>

        <li>
            <hr class="dropdown-divider">
        </li>

        <li>
            <a class="dropdown-item" href="#">
                All Products
            </a>
        </li>

    </ul>

</li>

Dropdown را در مقاله‌های بعدی با جزئیات بیشتری بررسی خواهیم کرد.

Navbar با فرم جستجو

می‌توانیم Search Form را نیز داخل Navbar قرار دهیم.

<form class="d-flex" role="search">

    <input
        class="form-control me-2"
        type="search"
        placeholder="جستجو"
        aria-label="Search">

    <button
        class="btn btn-outline-success"
        type="submit">

        جستجو

    </button>

</form>

این قسمت را می‌توان داخل navbar-collapse قرار داد.

Header کامل Responsive

حالا یک Header واقعی‌تر ایجاد کنیم.

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">

    <div class="container">

        <a
            class="navbar-brand fw-bold"
            href="/">

            My Website

        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="mainNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                    <a
                        class="nav-link active"
                        href="#">

                        Home

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        Products

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        Services

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        Blog

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        Contact

                    </a>

                </li>

            </ul>

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

                <a
                    href="#"
                    class="btn btn-outline-light">

                    Login

                </a>

                <a
                    href="#"
                    class="btn btn-primary">

                    Register

                </a>

            </div>

        </div>

    </div>

</nav>

این Header در Desktop منو را نمایش می‌دهد و در اندازه‌های کوچک‌تر لینک‌ها داخل بخش Collapse قرار می‌گیرند.

Navbar در صفحات فارسی و RTL

برای پروژه‌های فارسی باید جهت صفحه را نیز در نظر بگیریم.

در HTML می‌توانیم بنویسیم:

<html lang="fa" dir="rtl">

یا:

<body dir="rtl">

Bootstrap نیز از RTL پشتیبانی می‌کند؛ اما باید نسخه RTL فایل CSS را بارگذاری کنیم.

برای Bootstrap RTL معمولاً از فایل CSS مناسب RTL استفاده می‌شود.

ساختار کلی:

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet">

در پروژه فارسی این موضوع اهمیت زیادی دارد.

تفاوت LTR و RTL

در صفحه LTR:

Logo → Menu → Actions

در صفحه RTL:

Actions ← Menu ← Logo

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

برای مثال در Bootstrap مدرن بهتر است به جای وابستگی به margin-left و margin-right از Utilityهای منطقی مانند:

ms-auto
me-auto
ps-3
pe-3

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

Navbar Sticky

اگر بخواهیم Header هنگام Scroll در بالای صفحه باقی بماند، می‌توانیم از Utility مربوط به Position استفاده کنیم.

مثلاً:

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">

در این حالت Navbar هنگام رسیدن به بالای صفحه، موقعیت Sticky خواهد داشت.

Navbar Fixed

گزینه دیگر:

fixed-top

است.

مثلاً:

<nav class="navbar fixed-top bg-body-tertiary">

اما هنگام استفاده از fixed-top باید فضای کافی برای Header در محتوای صفحه در نظر بگیرید، زیرا Navbar از جریان معمول صفحه خارج می‌شود.

Responsive Design چیست؟

Responsive Design یعنی صفحه بتواند خود را با اندازه‌های مختلف نمایشگر سازگار کند.

مثلاً:

Mobile
   ↓
Tablet
   ↓
Laptop
   ↓
Desktop

یک طراحی Responsive نباید فقط در Desktop خوب باشد.

باید در اندازه‌های مختلف صفحه نیز قابل استفاده باشد.

Bootstrap و Responsive Design

Bootstrap بر اساس Breakpointها کار می‌کند.

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

xs   < 576px
sm   ≥ 576px
md   ≥ 768px
lg   ≥ 992px
xl   ≥ 1200px
xxl  ≥ 1400px

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

مثال Responsive Grid

<div class="row">

    <div class="col-12 col-md-6 col-lg-3">
        Item 1
    </div>

    <div class="col-12 col-md-6 col-lg-3">
        Item 2
    </div>

    <div class="col-12 col-md-6 col-lg-3">
        Item 3
    </div>

    <div class="col-12 col-md-6 col-lg-3">
        Item 4
    </div>

</div>

در موبایل هر آیتم یک ردیف کامل را می‌گیرد.

در md دو آیتم در هر ردیف قرار می‌گیرند.

در lg چهار آیتم در یک ردیف قرار می‌گیرند.

Responsive Utility

Bootstrap اجازه می‌دهد نمایش یک عنصر را در اندازه‌های مختلف کنترل کنیم.

مثلاً:

<div class="d-none d-md-block">
    فقط در اندازه md و بزرگ‌تر نمایش داده می‌شود.
</div>

یا:

<div class="d-block d-md-none">
    فقط در اندازه‌های کوچک‌تر از md نمایش داده می‌شود.
</div>

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

طراحی Mobile First

Bootstrap رویکرد Mobile First دارد.

یعنی بهتر است ابتدا رفتار صفحه در اندازه کوچک را در نظر بگیریم و سپس برای صفحه‌های بزرگ‌تر تغییرات لازم را اضافه کنیم.

مثلاً:

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

یعنی:

Mobile
12 columns

Tablet
6 columns

Desktop
4 columns

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

اشتباه رایج در طراحی Responsive

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

بهتر است از ابتدا به اندازه‌های مختلف صفحه فکر کنیم.

مثلاً قبل از ساخت Header مشخص کنیم:

Mobile:
Logo + Menu Button

Tablet:
Logo + Navigation

Desktop:
Logo + Navigation + Actions

تمرین عملی

یک Navbar Responsive برای یک وب‌سایت فروشگاهی ایجاد کنید.

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

Logo
Home
Products
Categories
Blog
About
Login
Register

الزامات:

از navbar استفاده کنید.
از navbar-expand-lg استفاده کنید.
در موبایل دکمه Hamburger نمایش داده شود.
منوی اصلی داخل collapse قرار بگیرد.
یک Dropdown برای Categories ایجاد کنید.
دکمه Login ایجاد کنید.
دکمه Register ایجاد کنید.
Navbar را Responsive کنید.
صفحه را RTL کنید.
ظاهر Header را با Utility Classها مرتب کنید.

تمرین پیشرفته

یک Header حرفه‌ای برای یک پنل مدیریت ایجاد کنید.

ساختار پیشنهادی:

Admin Panel
   |
   +-- Logo
   |
   +-- Dashboard
   +-- Users
   +-- Products
   +-- Orders
   +-- Reports
   |
   +-- User Menu

در Desktop منوی اصلی نمایش داده شود.

در Mobile منو داخل Collapse قرار بگیرد.

همچنین یک Dropdown برای حساب کاربری ایجاد کنید.

جمع‌بندی

در این مقاله با Navigation و Responsive Design در Bootstrap آشنا شدیم. یاد گرفتیم که با nav، nav-item و nav-link می‌توان Navigationهای ساده ایجاد کرد و با nav-tabs و nav-pills ظاهرهای مختلفی برای آنها ساخت. سپس با Navbar، navbar-brand، لینک‌های Navigation و ساخت Header Responsive آشنا شدیم. همچنین یاد گرفتیم چگونه با navbar-expand-lg و collapse منوی Desktop و Mobile را مدیریت کنیم و چگونه Dropdown و Button را داخل Navbar قرار دهیم. در بخش Responsive Design نیز Breakpointهای Bootstrap، رویکرد Mobile First و Responsive Utilityها را بررسی کردیم. همچنین نحوه استفاده از Bootstrap RTL برای صفحات فارسی و نکات مهم مربوط به dir="rtl" را یاد گرفتیم.

۱۰

نظرات

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