gpt4 book ai didi

twitter-bootstrap - 在Bootjack中使用 Bootstrap 导航栏

转载 作者:行者123 更新时间:2023-12-03 03:44:28 26 4
gpt4 key购买 nike

我正在使用twitter bootstrap的CSS创建standard bootstrap navbar,然后调用Dropdown.use();,这会使导航栏自动工作。

当我重新调整页面大小或在移动设备上查看页面时,导航栏会显示此菜单按钮,单击该按钮不会执行任何操作。

我将如何使用dquery / bootjack连接此菜单按钮以显示菜单,如本示例所示:

(PS,热爱 bootstrap ,感谢所有为此工作的人!!!)

为了澄清,我不想包括jquery和bootstrap js以使其起作用,我的整个dart应用程序(包括400多个文件)(图像,html,dart,更少等)都在400kB以下,添加这些js库将使应用程序的大小爆炸。我只是在寻找 bootstrap 用来使菜单按钮起作用的机制,以便可以在dart / dquery / bootjack中重写它,或者如果已经有一个可以执行该操作的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

index.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;
}

...

}

main.dart:
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();

...

}

最佳答案

在几次浏览工作导航栏上的类之后,我意识到它非常简单-在类中添加/退出可使导航栏在移动 View 中弹出。

ButtonElement navbarToggle = querySelector("button.navbar-toggle");
navbarToggle.onClick.listen((e){
DivElement menu = querySelector("div.navbar-collapse");
if (menu.classes.contains("in")){
menu.classes
..remove("in")
..add("out");
} else if (menu.classes.contains("out")){
menu.classes
..remove("out")
..add("in");
}
});

关于twitter-bootstrap - 在Bootjack中使用 Bootstrap 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30298745/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com