بوت استرپ ناوبری ها مؤلفه ای با گزینه های گوناگون برای ارائه مؤلفه های Tab منحصر به فرد که مطابق با استانداردهای طراحی مترونیک است.
Navigation components in بوت استرپ share some general markup and styles, from the base .nav class to the active and disabled states.
<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 dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
دراپ دان
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">اکشن</a>
<a class="dropdown-item" href="#">اکشن دیگر</a>
<a class="dropdown-item" href="#">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">جداکننده</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
</li>
</ul>
Use .nav-bold, .nav-bolder and .nav-boldest to set font weight to nav links.
<ul class="nav nav-bold">
...
</ul>
<ul class="nav nav-bolder">
...
</ul>
<ul class="nav nav-boldest">
...
</ul>
Change the horizontal alignment of your nav with
flexbox utilities.
flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
مرکزed with .justify-content-center:
<ul class="nav justify-content-center">
...
</ul>
چپ-aligned with .justify-content-end:
<ul class="nav justify-content-end">
...
</ul>
Stack your navigation by changing the flex item direction with the .flex-column utility.
<ul class="nav flex-column">
...
</ul>
افزودن .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with the
Tab JavaScript plugin.
<ul class="nav nav-tabs" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Add .nav-pills within .nav-tabs to create pill shape navs.
<ul class="nav nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes nav-{color} to change the active pill color.
<ul class="nav nav-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use the standard bootstrap state color classes nav-light-{color} to set the light pill color style.
<ul class="nav nav-light-success nav-pills" id="myTab" role="tablist">
...
</ul>
<div class="tab-content mt-5" id="myTabContent">
...
</div>
Use nav-fill class to fill and justify.
<ul class="nav nav-pills nav-fill">
...
</ul>
Add بوت استرپ's .flex-column class for vertical navs.
<div class="row">
<div class="col-4">
<ul class="nav flex-column nav-pills">
...
</ul>
</div>
<div class="col-8">
<div class="tab-content" id="myTabContent">
...
</div>
</div>
</div>
