Question

Twitter-bootstrap目前在确定要突出显示哪个导航元素时，在active元素上查找li类。

我正在使用django-cms，默认使用selected类来表示相同的事情（即“此选项卡是您当前所在的位置”）。有没有办法做这样的事情：

class "selected" = class "active"

django-cms生成的li元素由模板标记show_menu完成，因此我无法立即访问该元素以自行添加active类。

Answer 1

您可以为要使用的元素指定多个css类...

<div class="selected active">
    ...
</div>

Answer 2

您可以修改bootstrap mixin以查找“selected”而不是“active” - 它会使您的标记与不必要的类混乱。

Answer 3

如果您正在托管自己的Twitter Bootstrap副本（而不是来自Github的热链接），那么您可以将Bootstrap .active类选择器更改为

.active, .selected {
    ...
}

否则，另一种选择可能是使用LESS CSS。这可以是客户端或服务器端运行，并支持您正在寻找的继承类型

.selected {
    .active;
}

Answer 4

您不需要复制一个类，您只需创建自己的类并将所需的所有样式与.active类一起应用，例如。

.pagination a:hover, .pagination .active a,  .pagination .selected a {
  background-color: #f5f5f5;
}
.pagination .active a, .pagination .selected a {
  color: #999999;
  cursor: default;
}

这样，.selected类也将应用.active类中的所有样式。

Answer 5

我找到的最简单方法是在show_menu中指定自定义菜单模板

{% show_menu 0 100 0 0 "bootstrap_menu.html" %}

对于bootstrap_menu.html，您可以使用原始的django-cms菜单模板，复制它，并确保它也创建“活动”类：

{% load menu_tags %}
{% for child in children %}
    <li class="{% if child.selected %}selected active{% endif %}{% if child.ancestor %}ancestor{% endif %}{% if child.sibling %}sibling{% endif %}{% if child.descendant %}descendant{% endif %}">
        <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
        {% if child.children %}
            <ul>
                {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
            </ul>
        {% endif %}
    </li>
{% endfor %}

如果使用pip / easy_install / etc安装，你可以在网站包中的../menues/templates/menu下找到django-cms菜单模板。

将类行为复制到第二类（twitter bootstrap）

5 个答案: