【问题标题】:Bootstrap & Javascript引导程序和 Javascript
【发布时间】:2015-07-24 08:33:19
【问题描述】:

我正在使用 bootstrap 进行一个项目,到目前为止一切顺利。

刚刚了解了 jquery,我尽可能地使用远程操作,以至于我想完全使用 jquery 站点。

在考虑这个选项时,我阅读了一篇 SO 帖子,指出网站应该在没有 javascript 的情况下运行,然后使用 js 进行增强,以便它们优雅地降级。很公平。

采用这种方法并禁用 js 来测试我网站的降级功能后,我发现我的引导下拉菜单不起作用。

如果是bootstrap需要js的情况?如果是这样,这是否意味着创建一个可以优雅降级的站点我需要构建一个引导和非引导版本?

【问题讨论】:

    标签: javascript twitter-bootstrap


    【解决方案1】:

    我不会建立两个版本的网站。如果下拉列表是您唯一关心的问题,那么我会考虑检测何时启用 javascript 并在 javascript 未运行时实现仅 CSS 版本的下拉列表(使用:hover 和/或:active)。

    Modernizr 等库在检测 html5 功能等方面做得很好,但如果您只想检测是否启用了 javascript,那么我能想到的最快方法是将类添加到您的 body 或 html 标签和只需将其作为 JS 初始化的一部分删除即可。像这样的:

    HTML:

    <body class="nojs">
        <!-- ... HTML content -->
    </body>
    

    Javascript:

    jQuery(document).ready(function($) {
        $('body').removeClass('nojs');
    });
    

    这将允许您编写一些简单的 CSS 以在禁用 javascript 时触发下拉可见性。大致如下:

    CSS:

    body.nojs .dropdown:active > li,
    body.nojs .dropdown:hover > li {
        display: block;
    }
    

    如果您需要更多说明如何在您的特定网站上使用此功能,我需要查看您现有的一些 HTML 标记,但希望这足以让您走上正轨:)

    【讨论】:

      【解决方案2】:

      参考this页面,在我看来是一样的,你可以为此添加一些自定义css。

      【讨论】:

        猜你喜欢
        • 2019-08-07
        • 2016-04-08
        • 2016-11-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多