mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +02:00
Code Issues Releases Wiki Activity

Add .nav-underline modifier class (#33126)

Browse Source 
* Add .nav-underline modifier class

* Tweak sizing and spacing, add underline on hover

* Rebuild with Sass and CSS variables

* Document CSS vars

* Bump bundlewatch
This commit is contained in:
Mark Otto
2022-12-28 21:55:54 -08:00
committed by GitHub
parent 97576345b1
commit 7d9aa9d716
4 changed files with 72 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
site/content/docs/5.3/components/navs-tabs.md
View File

@@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead:
</ul>
{{< /example >}}
### Underline
Take that same HTML, but use `.nav-underline` instead:
{{< example >}}
<ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /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.
@@ -324,6 +345,12 @@ On the `.nav-pills` modifier class:
{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}
{{< added-in "5.3.0" >}}
On the `.nav-underline` modifier class:
{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}}
### Sass variables
{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}