::eBazar:: Ui Navs

ناوبری پایه

ناوبری موجود در بوت استرپ به اشتراک گذاری نشانه گذاری و سبک های عمومی، از پایه .nav کلاس به حالت های فعال و ناتوان. برای جابجایی بین هر سبک، کلاس‌های اصلاح‌کننده را تعویض کنید.

پایه .nav کامپوننت با فلکس باکس ساخته شده است و پایه ای قوی برای ساخت انواع اجزای ناوبری فراهم می کند. این شامل برخی نادیده گرفتن سبک (برای کار با لیست ها)، برخی از لایه های پیوند برای مناطق بازدید بزرگتر، و استایل غیرفعال اولیه است..

ناوها برای اجزای بوت استرپ بیشتر مستندات ناو بوت استرپ

پایه .nav جزء شامل هیچ .active دولت. مثال‌های زیر شامل کلاس می‌شود، عمدتاً برای نشان دادن این که این کلاس خاص هیچ استایل خاصی را ایجاد نمی‌کند.

برای انتقال حالت فعال به فناوری های کمکی، از aria-current ویژگی - با استفاده از page مقدار برای صفحه فعلی، یا true برای آیتم فعلی در یک مجموعه.

پیش نمایش
HTML

    <!-- Nav: left alignment -->
    <ul class="nav">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
    </ul>

    <!-- Nav: center alignment -->
    <ul class="nav justify-content-center">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
    </ul>

    <!-- Nav: right alignment -->
    <ul class="nav justify-content-end">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
    </ul>

کلاس ها در سراسر جهان استفاده می شوند، بنابراین نشانه گذاری شما می تواند بسیار انعطاف پذیر باشد. استفاده کنید <ul>مانند بالا، <ol> اگر ترتیب اقلام شما مهم است، یا سفارش خود را با a رول کنید <nav> عنصر از آنجا که .nav uses display: flex، پیوندهای ناوبری مانند موارد ناوبری عمل می کنند، اما بدون علامت گذاری اضافی.

پیش نمایش
HTML

    <nav class="nav">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </nav>

پیش نمایش
HTML

    <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
    </ul>

    <nav class="nav flex-column">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </nav>

زبانه ها

ناو های اولیه را از بالا می گیرد و اضافه می کند .nav-tabs کلاس برای ایجاد یک رابط زبانه دار.

ناو های اولیه را از بالا می گیرد و اضافه می کند .nav .nav-tabs .px-3 .border-bottom-0 کلاس برای ایجاد یک رابط زبانه دار.

    <ul class="nav nav-tabs px-3 border-bottom-0" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview4" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML4" role="tab">HTML</a></li>
    </ul>
    <div class="card mb-3">
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="nav-Preview4" role="tabpanel">
                    ...
                </div>
                <div class="tab-pane fade" id="nav-HTML4" role="tabpanel">
                    ...
                </div>
            </div>
        </div>
    </div>

ناو های اولیه را از بالا می گیرد و اضافه می کند .nav .nav-tabs .tab-body-header .rounded .d-inline-flex کلاس برای ایجاد یک رابط زبانه دار.

    <ul class="nav nav-tabs tab-body-header rounded d-inline-flex" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview5" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML5" role="tab">HTML</a></li>
    </ul>

    <div class="tab-content mt-2">
        <div class="tab-pane fade show active" id="nav-Preview5" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-HTML5" role="tabpanel">
            ....
        </div>
    </div>

ناو های اولیه را از بالا می گیرد و اضافه می کند .nav nav-tabs .tab-card کلاس برای ایجاد یک رابط زبانه دار.

    <ul class="nav nav-tabs tab-card" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview6" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML6" role="tab">HTML</a></li>
    </ul>

    <div class="tab-content mt-2">
        <div class="tab-pane fade show active" id="nav-Preview6" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-HTML6" role="tabpanel">
            ....
        </div>
    </div>

ناو های اولیه را از بالا می گیرد و اضافه می کند .nav nav-tabs .tab-card کلاس برای ایجاد یک رابط زبانه دار.

    <ul class="nav nav-tabs tab-card" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview7" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML7" role="tab">HTML</a></li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
    </ul>

    <div class="tab-content mt-2">
        <div class="tab-pane fade show active" id="nav-Preview7" role="tabpanel">
        ....
        </div>
        <div class="tab-pane fade" id="nav-HTML7" role="tabpanel">
            ....
        </div>
    </div>

قرص ها

همان HTML را بگیرید، اما استفاده کنید .nav-pills بجای:

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون.

    <ul class="nav nav-pills mb-3" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview8" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML8" role="tab">HTML</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="nav-Preview8" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-HTML8" role="tabpanel">
            ....
        </div>
    </div>

    <div class="d-flex align-items-start">
        <ul class="nav flex-column nav-pills me-3" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview9" role="tab">Preview</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML9" role="tab">HTML</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Messages9" role="tab">Messages</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Settings9" role="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="nav-Preview9" role="tabpanel">
                ....
            </div>
            <div class="tab-pane fade" id="nav-HTML9" role="tabpanel">
                ....
            </div>
            <div class="tab-pane fade" id="nav-Messages9" role="tabpanel">
                ....
            </div>
            <div class="tab-pane fade" id="nav-Settings9" role="tabpanel">
                ....
            </div>
        </div>
    </div>

تنظیمات رنگ قالب

برای تنظیمات پویا کلیک کنید

رنگ اصلی
رنگ ثانویه
رنگ نمودار 1
رنگ نمودار 2
رنگ نمودار 3
رنگ نمودار 4
رنگ نمودار 5

تنظیمات فونت

فونت گوگل پاپینس
فونت گوگل اوپن سانس
فونت گوگل مونت
فونت گوگل موتکا

چیدمان کنتراست

فعال کردن حالت تاریک!
فعال کردن کنتراست بالا
فعال کردن حالت چپ چین!