Question

我想知道是否有人可以让我知道在使用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很新，所以不确定从那里去哪里以及如何创建下拉菜单？

由于

Answer 1

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

!!! 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()

在上面我使用了一个单独的文件'scripts'，我将其包含在jade docs中。

他们基本上包括

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文件中时，它只适用于我。我确信这不是开发人员想要的，而是一个bug或者什么。

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

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

使用Jade和Twitter Bootstrap下拉菜单

1 个答案: