class =" active"真的在bootstrap 3吗?

时间:2014-01-27 15:00:27

标签: html css twitter-bootstrap

这些天我正在学习twitter bootstrap 3。 引导程序中有一个名为“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>

5 个答案:

答案 0 :(得分:3)

active类应用于用户当前正在查看的导航元素。

如果是您的代码,则用户正在查看配置文件。它将作为访问者访问网站的指南或提醒。这就是应用活动类的原因,在查看具有许多导航链接的网站时会很方便。

答案 1 :(得分: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>

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>

答案 2 :(得分:1)

您可以动态地将active类添加到活动的元素中。您可以在呈现页面时执行此操作。或者通过JavaScript,如果您希望更改活动元素而不回发到服务器。

在您的示例中,通过将active类添加到“个人资料”项目中,它应该以一种方式呈现该项目,以便直观地表明这是您正在查看的当前项目或页面。

答案 3 :(得分:0)

我需要知道的是为什么我们需要在标记中调用这样的类。因为用户需要决定他需要哪个页面。

用户决定哪个页面,设计人员和开发人员决定其按钮在用户上看时的样子。活动类可以做的不仅仅是页面中的标记。它可以用来添加不同的外观和感觉,颜色效果等。

我为什么要添加这样的课程?当用户从一个选项卡导航到另一个选项卡时,活动选项不是吗?

在许多常见情况下,您无需添加和管理,但有时您可能需要。从设计的角度来看,它告诉用户他/她现在在这里,从编程的角度来看,可以以不同的方式使用类来为该按钮或其他按钮分配唯一的动作而不是它。

对于我们通常添加的第一个和最后一个类,同样的事情,它们允许我们为这些按钮和/或元素执行不同的场景或CSS特性。

答案 4 :(得分:0)

类=&#34;有源&#34;通常用于突出显示选择中的任何活动内容,主要用于导航。让我们在导航中使用不同页面链接的网站上说,只是为了表明用户在此页面上,活动类突出显示该链接增加了导航的可用性。