我正在使用 twitter bootstrap 的 CSS 创建一个标准的引导导航栏，然后调用Dropdown.use();它使导航栏自动工作。
当我重新调整页面大小或在移动设备上查看它时，导航栏会显示这个菜单按钮，当你点击它时它什么也不做。
我将如何将此菜单按钮与 dquery / bootjack 连接以显示菜单，如本例所示：
（PS，喜欢bootjack，感谢所有参与其中的人！！！）
澄清一下，我不想包含 jquery 和 bootstrap js 来使其工作，我的整个 dart 应用程序包括 400 多个文件（图像、html、dart、less 等）低于 400kB，添加这些 js 库会使应用程序爆炸在尺寸方面。我只是在寻找引导程序用来使该菜单按钮工作的机制，以便我可以在 dart / dquery / bootjack 中重写它，或者如果已经有一个可以做到这一点的引导杰克机制，如何使用它。
更新，一些代码要求：
pubspec.yaml：
....
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
bootjack_datepicker: any
less_dart: any
bootjack: any
browser: any
http: any
transformers:
- $dart2js:
commandLineOptions: [--enable-experimental-mirrors]
- less_dart:
entry_point: web/styles/main.less
build_mode: dart
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown">Item<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#itemss-list">Items</a></li>
<li><a href="#foo-bar">Foo Bar</a></li>
<li class="divider"></li>
<li>
<a href="#item-create">
<span class="glyphicon glyphicon-plus"></span>
Create Item
</a>
</li>
</ul>
</li>
...
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
</body>
</html>
main.less:
@import 'web/styles/bootstrap/bootstrap.less';
@import 'web/styles/bootjack-calendar/calendar.less';
@media screen {
body {
background: #FEFEFE;
}
...
}
主要飞镖：
import 'dart:html';
import 'pages/pages.dart';
import 'dart:convert' show JSON;
import 'package:dquery/dquery.dart';
import 'package:bootjack/bootjack.dart';
import 'package:bootjack_datepicker/bootjack_datepicker.dart';
...
void main() {
...
// enable bootjack functionality
Transition.use();
Calendar.use();
Dropdown.use();
Modal.use();
...
}