aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/components/navs.md')
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/navs.md32
1 files changed, 16 insertions, 16 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md b/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
index 0787632be..4bcf2e320 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
@@ -195,14 +195,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif
{% endcapture %}
{% include example.html content=example %}
-When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `<a>` elements.
{% 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="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{% endcapture %}
{% include example.html content=example %}
@@ -227,14 +227,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
{% 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.
+Similar to the `.nav-fill` example using a `<nav>`-based navigation.
{% 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="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{% endcapture %}
@@ -376,9 +376,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example bd-example-tabs">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
@@ -397,9 +397,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
{% highlight html %}
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">