SB Admin pro - قالب داشبورد مدیریت بوت‌استرپ

زیرخط دار

افقی:

HTML
PUG

<nav class="nav nav-borders">
    <a class="nav-link active" href="#!">فعال</a>
    <a class="nav-link" href="#!">لینک</a>
    <a class="nav-link" href="#!">لینک</a>
    <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">غیرفعال</a>
</nav>

nav.nav.nav-borders
    a.nav-link.active(href='#!') فعال
    a.nav-link(href='#!') لینک
    a.nav-link(href='#!') لینک
    a.nav-link.disabled(href='#!', tabindex='-1', aria-disabled='true') غیرفعال

کلاس .nav-borders کامپوننت یک تغییر سفارشی از کامپوننت nav Bootstrap است که برای SB Admin Pro ساخته شده است. شما می توانید از هر گونه ابزار justify flex برای تغییر تراز افقی ناو استفاده کنید، و همچنین می توانید از این جزء nav در قالب لیست نامرتب استفاده کنید.

<nav class="nav nav-borders flex-column">
    <a class="nav-link active" href="#!">فعال</a>
    <a class="nav-link" href="#!">لینک</a>
    <a class="nav-link" href="#!">لینک</a>
    <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">غیرفعال</a>
</nav>

nav.nav.nav-borders.flex-column
    a.nav-link.active(href='#!') فعال
    a.nav-link(href='#!') لینک
    a.nav-link(href='#!') لینک
    a.nav-link.disabled(href='#!', tabindex='-1', aria-disabled='true') غیرفعال

شما همچنین می توانید از نوع مرزهای nav در هنگام استفاده از .flex column ابزاری برای ایجاد یک ناوبری عمودی. حاشیه ها از پایین پیوندهای ناو به سمت راست حرکت می کنند. در این مثال، ما حداکثر عرض 10 rem را برای ظرفی که این nav در آن استفاده می شود، تعیین کرده ایم.

کامپوننت ناوبری جانبی سفارشی

HTML
PUG

<nav class="snav snav-light">
    <div class="snav-menu">
        <div class="nav">
            <div class="snav-menu-heading">سربرگ</div>
            <a class="nav-link" href="#!">
                <div class="nav-link-icon">
                    <i data-feather="feather"></i>
                </div>
                لینک
            </a>
            <a class="nav-link" href="#!">
                <div class="nav-link-icon">
                    <i data-feather="feather"></i>
                </div>
                لینک دیگر
            </a>
            <a class="nav-link disabled" href="#!">
                <div class="nav-link-icon">
                    <i data-feather="feather"></i>
                </div>
                لینک دیگر
            </a>
        </div>
    </div>
    <div class="snav-footer">فوتر ناوبری</div>
</nav>

nav.snav.snav-light
    .snav-menu
        .nav
            .snav-menu-heading سربرگ
            a.nav-link(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | لینک
            a.nav-link(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | لینک
            a.nav-link.disabled(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | لینک
    .snav-footer
        | فوتر ناوبری

کلاس .snav کامپوننت مولفه پیش‌فرض بوت استرپ ناوبری را گسترش می‌دهد. یک نمونه کار از snav سفارشی را می توان در طرح داشبورد تم SB Admin Pro مشاهده کرد. نوار کناری که در طرح داشبورد استفاده می شود دارای یک ظرف با رفتارهای واکنشی خاص است، اما خود جزء می تواند به صورت مستقل استفاده شود.

کامپوننت منوی چسبان سفارشی

منو کناری این صفحه یک منوی چسبان سفارشی است

HTML
PUG

<div class="container-fluid">
    <div class="row">
        <!-- Content -->
        <div class="col-lg-9">
            <h2 id="navAnchor1">محتوای نمونه 1</h2>
            <h2 id="navAnchor2">محتوای نمونه 2</h2>
            <h3 id="navAnchorNested">محتوای زیر منو نمونه</h3>
        </div>

        <!-- Sticky Navigation -->
        <div class="col-lg-3">
            <div class="nav-sticky">
                <div class="card">
                    <div class="card-body">
                        <!-- Nav menu -->
                        <ul class="nav flex-column" id="stickyNav">
                            <!-- Nav item -->
                            <li class="nav-item">
                                <a class="nav-link" href="#navAnchor1">نمونه 1</a>
                            </li>
                            <!-- Nav item (with nested items) -->
                            <li class="nav-item">
                                <a class="nav-link" href="#navAnchor2">نمونه 2</a>
                                <!-- Nested nav menu -->
                                <ul class="nav flex-column ml-3">
                                    <!-- Nested nav menu item -->
                                    <li class="nav-item">
                                        <a class="nav-link" href="#navAnchorNested">زیر منو نمونه</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.container-xl.px-4-fluid
    .row
        //- Content
        .col-lg-9
            h2#navAnchor1
                | محتوای نمونه 1
            h2#navAnchor2
                | محتوای نمونه 2
            h3#navAnchorNested
                | محتوای زیرمنو نمونه 1

        // Sticky Navigation
        .col-lg-3
            .nav-sticky
                .card
                    .card-body
                        //- Nav menu
                        ul.nav.flex-column#stickyNav
                            //- Nav item
                            li.nav-item
                                a.nav-link(href='#navAnchor1') نمونه 1
                            //- Nav item (with nested items)
                            li.nav-item
                                a.nav-link(href='#navAnchor2') نمونه 2
                                //- Nested nav menu
                                ul.nav.flex-column.ms-3
                                    //- Nested nav menu item
                                    li.nav-item
                                        a.nav-link(href='#navAnchorNested') زیر منو نمونه

کامپوننت .nav-sticky از عملکرد Scrollspy Bootstrap همراه با یک استایل سفارشی برای ایجاد یک جزء ناوبری چسبنده استفاده می کند که می توانید در صفحات داخلی برنامه خود از آن استفاده کنید. منوی سمت چپ صفحات مرجع سبک همگی نمونه هایی از ناوبری چسبنده هستند که استفاده می شود. می توانید افست و رفتار اسکرول این منو را در فایل ../assets/js/scripts.js تنظیم کنید.

مثال کد بالا نیاز به استفاده از JS دارد که به طور پیش فرض در کد فایل زیر موجود است scripts.js در مثال بالا نیز از یک .container-xl.px-4-fluid استفاده شده است اگر طرح بندی صفحه شما قبلاً حاوی یک ظرف باشد، ممکن است ضروری نباشد.

مستندات بوت استرپ موجود است

Navs یک مؤلفه پیش فرض است که در چارچوب Bootstrap گنجانده شده است. برای اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از مؤلفه های ناوبری بوت استرپ در پروژه خود، به صفحه مستندات ناوبری بوت استرپ رسمی مراجعه کنید.

از Bootstrap Navs Docs دیدن کنید

زیر خط دار جدید
- افقی
- عمودی
ناوبری کناره
ناوبری چسبان