class="active" 在 bootstrap 3 中到底做了什么？

Question

這些天我正在學習 twitter bootstrap 3。 bootstrap 中有一個叫做“active”的類。 我什至在 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>

大屏幕.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>

Answer 2

active類應用於用戶當前正在查看的導航元素。

在給定代碼的情況下，用戶正在查看配置文件。 它將作為訪問者所在網站的指南或提醒。這就是應用活動類的原因，這在查看具有許多導航鏈接的網站時非常方便。

Answer 3

您可以將active類動態添加到任何活動元素。 您可以在呈現頁面時執行此操作。 或者通過 JavaScript，如果您希望更改活動元素而不回發到服務器。

從您的示例中，通過將active類添加到您的“個人資料”項目，它應該以一種直觀的方式呈現該項目，即這是您正在查看的當前項目或頁面。

Answer 4

我需要知道的是為什么我們需要在標記中調用這樣的類。 因為由用戶決定他需要進入哪個頁面。

用戶決定哪個頁面，設計者和開發者決定當用戶在上面時按鈕的外觀。 活動類可以做的不僅僅是頁面中的標記。 它可用於添加不同的外觀和感覺、顏色效果等。

為什么要添加這樣的類？ 當用戶從一個選項卡導航到另一個時，活動選項卡會有所不同。 是不是？

在許多常見情況下，您不需要添加和管理，但有時您可能需要。 從設計的角度來看，它告訴用戶他/她現在在這里，從編程的角度來看，該類可以以不同的方式用於為該按鈕或其他按鈕而不是為其分配獨特的動作。

對於我們通常添加的第一個和最后一個類，它們允許我們為這些按鈕和/或元素執行不同的場景或 CSS 屬性。

Answer 5

Class="active" 通常用於突出顯示選擇中的任何活動內容，主要是在導航中。 假設在導航上具有不同頁面鏈接的網站中，只是為了指示用戶在此頁面上，活動類突出顯示該鏈接以增加導航的可用性。