html - 类 ="active"在 bootstrap 3 中到底做了什么？

Question

我最近在学习 twitter bootstrap 3。 Bootstrap 中有一个名为“active”的类。我什至在 CSS 中也看到过这个特性。据我所知，它表示事件页面或链接(可能是我们当前所在的页面)。如果我错了，请纠正我。我需要知道的是为什么我们需要在我们的标记中调用这样一个类。因为由用户决定他需要进入哪个页面。

如果我在下面进一步解释，标记在第二个列表元素中使用了 class="active"。 (即个人资料)。当我在浏览器中运行代码时，它会为配置文件添加漂亮的蓝色背景。 为什么要加这样一个类？当用户从一个选项卡导航到另一个选项卡时，事件选项卡会有所不同。不是吗？

<div class="container">
            <div class="row">
                <nav>
                    <ul class="nav nav-pills nav-justified">
                        <li><a href="Breadcrumbs.html">Dashboard</a></li>
                        <li class="active"><a href="Jumbotron.html">Profile</a></li>
                        <li><a href="FavoutieActors.html">Earnings</a></li>
                        <li><a href="Buttons.html">Settings</a></li>                        
                    </ul>
                </nav>
            </div>
        </div>

Answer 1

在您的导航中有 4 个页面，.active 类应该位于从 #1 到 #4 的每个不同列表项上，具体取决于您所在的页面。以下是每 4 个的 4 个摘录页面。

Breadcrumbs.html:

                 <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

超大屏幕.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li class="active"><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

FavoutieActors.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li class="active"><a href="FavoutieActors.html">Earnings</a></li>
                    <li><a href="Buttons.html">Settings</a></li>                        
                </ul>

Breadcrumbs.html:

                 <ul class="nav nav-pills nav-justified">
                    <li><a href="Breadcrumbs.html">Dashboard</a></li>
                    <li><a href="Jumbotron.html">Profile</a></li>
                    <li><a href="FavoutieActors.html">Earnings</a></li>
                    <li class="active"><a href="Buttons.html">Settings</a></li>                        
                </ul>