ناوبری پایه
ناوبری موجود در بوت استرپ به اشتراک گذاری نشانه گذاری و سبک های عمومی، از پایه .nav کلاس به حالت های فعال و ناتوان. برای جابجایی بین هر سبک، کلاسهای اصلاحکننده را تعویض کنید.
پایه .nav کامپوننت با فلکس باکس ساخته شده است و پایه ای قوی برای ساخت انواع اجزای ناوبری فراهم می کند. این شامل برخی نادیده گرفتن سبک (برای کار با لیست ها)، برخی از لایه های پیوند برای مناطق بازدید بزرگتر، و استایل غیرفعال اولیه است..
پایه .nav جزء شامل هیچ .active دولت. مثالهای زیر شامل کلاس میشود، عمدتاً برای نشان دادن این که این کلاس خاص هیچ استایل خاصی را ایجاد نمیکند.
برای انتقال حالت فعال به فناوری های کمکی، از aria-current ویژگی - با استفاده از page مقدار برای صفحه فعلی، یا true برای آیتم فعلی در یک مجموعه.
<!-- 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، پیوندهای ناوبری مانند موارد ناوبری عمل می کنند، اما بدون علامت گذاری اضافی.
<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>
<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>