mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 14:17:54 +03:00
65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
|
---
|
||
|
|
layout: docs
|
||
|
|
title: Navs
|
||
|
|
group: material-design
|
||
|
|
---
|
||
|
|
|
||
|
|
Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
|
||
|
|
|
||
|
|
## Contents
|
||
|
|
|
||
|
|
* Will be replaced with the ToC, excluding the "Contents" header
|
||
|
|
{:toc}
|
||
|
|
|
||
|
|
|
||
|
|
## Tabs
|
||
|
|
|
||
|
|
{% example html %}
|
||
|
|
<ul class="nav nav-tabs">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" 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="#">Another link</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- inverse -->
|
||
|
|
<ul class="nav nav-tabs bg-inverse">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" 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="#">Another link</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- primary -->
|
||
|
|
<ul class="nav nav-tabs bg-primary">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" 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="#">Another link</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
{% endexample %}
|