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

Question

I am learning twitter bootstrap 3 these days. There is a class called "active" in bootstrap. I have seen this feature even in CSS. As I know it indicates the active page or link (probably it is the page that we are currently in). Please correct me if I am wrong. What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.

If I explain this further below mark-up has used class="active" in the 2nd list element. (ie Profile). When I run the code in a browser it adds a nice blue background to Profile. Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?

<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

With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.

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>

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>

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>

Answer 2

The active class is applied to the navigation element the user is currently viewing.

In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in. That is why the active class is applied, which comes handy when viewing a website with many navigation links.

Answer 3

You can dynamically add the active class to whichever element is active. You can either do this as your page is rendered. Or via JavaScript, if you wish to change the active element without posting back to the server.

From your example, by adding the active class to your 'Profile' item, it should render the item in a way that suggests visually that this is the current item or page you're viewing.

Answer 4

What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.

The user decide what page and the designer and developer decide how its button look while the user on it. The active class can do more than it's just a markup in your page. It could be used to add different look and feel, color effects etc.

Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?

You are not required to add and manage in many usual cases but sometimes you might need. From design point of view, it tells the user that he/she is now here, from programming point of view that class could be used in different ways to assign unique action for that button or other button and not for it.

The same thing for first and last classes we usually add, they allow us to do different scenarios or CSS proprieties for these buttons and/or elements.

Answer 5

Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.