mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
dae1a68fb1
Conflicts: dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/_includes/components/navs.html docs/_includes/css/images.html docs/_includes/js/dropdowns.html docs/_includes/js/tabs.html docs/assets/css/docs.min.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css
236 lines
7.7 KiB
HTML
236 lines
7.7 KiB
HTML
<div class="bs-docs-section">
|
|
<h1 id="nav" class="page-header">Navs</h1>
|
|
|
|
<p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
|
|
|
<h2 id="nav-base">Base nav</h2>
|
|
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p>
|
|
|
|
{% example html %}
|
|
<ul class="nav" role="tablist">
|
|
<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" href="#">Another link</a>
|
|
</li>
|
|
<li class="nav-item disabled">
|
|
<a class="nav-link" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
{% endexample %}
|
|
|
|
<p>Classes are used so your markup can be super flexible.</p>
|
|
<div class="bs-example">
|
|
<nav class="nav" role="tablist">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Another link</a>
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</nav>
|
|
</div>
|
|
{% highlight html %}
|
|
<nav class="nav" role="tablist">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Another link</a>
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</nav>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h2 id="nav-tabs">Tabs</h2>
|
|
<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
<div class="bs-callout bs-callout-info">
|
|
<h4>Requires JavaScript tabs plugin</h4>
|
|
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
|
|
</div>
|
|
|
|
<h2 id="nav-pills">Pills</h2>
|
|
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h2 id="nav-pills-stacked">Stacked pills</h2>
|
|
<p>Just add <code>.nav-stacked</code>.</p>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-pills nav-stacked" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-pills nav-stacked" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h2 id="nav-dropdowns">Using dropdowns</h2>
|
|
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
|
|
|
<h3>Tabs with dropdowns</h3>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
...
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
|
|
Dropdown
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
...
|
|
</ul>
|
|
</li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h3>Pills with dropdowns</h3>
|
|
<div class="bs-example">
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="nav-item active">
|
|
<a href="#" class="nav-link">Active</a>
|
|
</li>
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Another link</a>
|
|
</li>
|
|
<li class="nav-item disabled">
|
|
<a href="#" class="nav-link">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="nav nav-pills" role="tablist">
|
|
...
|
|
<li role="presentation" class="nav-item">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
|
|
Dropdown
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
...
|
|
</ul>
|
|
</li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
</div>
|