class="active" 在 bootstrap 3 中真正做了什么？

Question

这些天我正在学习 twitter bootstrap 3。 在引导程序中有一个名为“活动”的类。我什至在 CSS 中也看到了这个特性。据我所知，它表示活动页面或链接（可能是我们当前所在的页面）。如果我错了，请纠正我。我需要知道的是为什么我们需要在标记中调用这样的类。因为由用户决定他需要进入哪个页面。

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

<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 个摘录。

面包屑.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>

Jumbotron.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>

面包屑.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>