1

我想知道是否有人可以让我知道在使用 Twitter Bootstrap 时如何在 Jade 中创建下拉菜单。我目前有一个菜单，其中包含堆叠的导航药丸：

html  
  head  
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/css/bootstrap.min.css')
    include inc/header
  body
    h1.page-header= title
    ul.nav.nav-pills.nav-stacked
    li#home: a(href='/') Home Page
    li#clear: a(href='/clear') Clear Blog Posts
    li#load: a(href='/load') Load Sample Posts
    li#list: a(href='/showContacts') Show Blog
    li#add: a(href='/add') Add Blog Post

   script.
     $(document).ready(function() {
       $(".active").removeClass("active");
       $("##{tab}").addClass("active");
     });

   block content

我曾尝试使用 .dropdown 和 .dropdown_toggle 而不是 .nav-stacked，但是我对 Jade 和 bootstrap 比较陌生，所以不确定从那里去哪里以及如何创建下拉菜单？

谢谢

4

1 回答 1

0

以下适用于 twitter bootstrap 版本 2.3.2。我不建议您继续使用任何旧版本的 twitter。

!!! 5
html
head
    link(rel='stylesheet', href='css/HOMEedit.css')
    link(rel='stylesheet', href='css/bootstrap.css')
    include bootstrap/inc/scripts
body
    .dropdown
        a(href="#", data-toggle="dropdown").dropdown-toggle Dropdown trigger
        ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu')
            li
                a(href='#', tabindex='-1') Action
            li 
                a(href='#', tabindex='-1') Something else here
            li.divider
            li
                a(href='#', tabindex='-1') Separated link
    script.
        $('.dropdown-toggle').dropdown()

在上面我使用了一个单独的文件“脚本”，我包含在玉文档中。

它们基本上包括

script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js')
script(type='text/javascript', src='js/bootstrap.min.js') 
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')

请注意，顺序很重要，标题中的位置也很重要。只有当我将 jQuery.js 作为顶级 js 文件包含在内时，它才对我有用。我确信这不是开发人员的意图，而是它的错误或其他东西。

另请注意，我从“自定义”选项http://getbootstrap.com/2.3.2/customize.html下载了 bootstrap.min.js 文件。它会自动将所有 .js 和 .css 文件编译为一个，以减少您需要单独包含的引导文件的数量。

祝你好运。（我不久前还是个初学者，所以坚持下去，你会到达那里）

于 2013-07-31T05:09:40.187 回答