mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Remove custom example plugin. (#25784)
This commit is contained in:
m5o
+45
-30
@@ -17,7 +17,7 @@ The base `.nav` component does not include any `.active` state. The following ex
|
||||
{% endcapture %}
|
||||
{% include callout.html content=callout type="info" %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -32,18 +32,20 @@ The base `.nav` component does not include any `.active` state. The following ex
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Available styles
|
||||
|
||||
@@ -55,7 +57,7 @@ Change the horizontal alignment of your nav with [flexbox utilities]({{ site.bas
|
||||
|
||||
Centered with `.justify-content-center`:
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -70,11 +72,12 @@ Centered with `.justify-content-center`:
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Right-aligned with `.justify-content-end`:
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -89,13 +92,14 @@ Right-aligned with `.justify-content-end`:
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Vertical
|
||||
|
||||
Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -110,24 +114,26 @@ Stack your navigation by changing the flex item direction with the `.flex-column
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
As always, vertical navigation is possible without `<ul>`s, too.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav flex-column">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Tabs
|
||||
|
||||
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -142,13 +148,14 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Pills
|
||||
|
||||
Take that same HTML, but use `.nav-pills` instead:
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -163,13 +170,14 @@ Take that same HTML, but use `.nav-pills` instead:
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Fill and justify
|
||||
|
||||
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -184,33 +192,36 @@ Force your `.nav`'s contents to extend the full available width one of two modif
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav nav-pills nav-fill">
|
||||
<a class="nav-item nav-link active" href="#">Active</a>
|
||||
<a class="nav-item nav-link" href="#">Link</a>
|
||||
<a class="nav-item nav-link" href="#">Link</a>
|
||||
<a class="nav-item nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav nav-pills nav-justified">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Longer nav link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav nav-pills nav-justified">
|
||||
<a class="nav-item nav-link active" href="#">Active</a>
|
||||
<a class="nav-item nav-link" href="#">Link</a>
|
||||
@@ -218,19 +229,21 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
|
||||
<a class="nav-item nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
## Working with flex utilities
|
||||
|
||||
If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<nav class="nav nav-pills flex-column flex-sm-row">
|
||||
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
|
||||
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Regarding accessibility
|
||||
|
||||
@@ -244,7 +257,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
|
||||
### Tabs with dropdowns
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -266,11 +279,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Pills with dropdowns
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
@@ -292,7 +306,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## JavaScript behavior
|
||||
|
||||
|
||||
Reference in New Issue
Block a user