个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
在我的 node.js 应用程序中，我一直使用 EJS 作为模板引擎。但由于一些限制，我决定改用 Jade。
在我的主页中，我有一个由 Bootstrap 3 生成的导航栏。在这个导航栏内，我有一个带有 2 个按钮的表单。
当我使用 EJS 时，这些按钮是用空格分隔的，就像在 Bootstrap 的导航栏文档中一样:
但是当我切换到 Jade 时，结果是:
我尝试使用 Bootstrap 导航栏文档中的代码，但遇到了同样的问题:Jade 没有空格。 ( http://getbootstrap.com/components/#navbar )
我的 body 包含 2 个 div。对于 EJS，我在它们之间有一个空格(我认为这是 Bootstrap 的魔法)，对于 Jade 则没有
我检查了我所有的文件两次。它们包含完全相同的 CSS、相同的标记。
我正在为这个问题苦苦挣扎。你能帮帮我吗？
提前致谢。
编辑:这是代码，我从 bootstrap 的文档中拿了一个非常基本的例子
Jade
<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"><link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.min.css"><script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script></head><body><nav role="navigation" class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle collapsed"><span class="sr-only">Activer la navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><form id="uploadFileForm" role="send" enctype="multipart/form-data" class="navbar-form navbar-left"><div class="form-group"><input id="textFile" type="text" placeholder="Envoi de fichier" class="form-control"></div><button type="submit" class="btn btn-default">Envoi</button></form><p class="navbar-text navbar-right">Express</p></div></div></nav></body></html>
模板
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css')
script(src='/js/bower_components/bootstrap/dist/js/bootstrap.min.js')
body
nav.navbar.navbar-default(role='navigation')
div.container-fluid
div.navbar-header
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
span.sr-only Activer la navigation
span.icon-bar
span.icon-bar
span.icon-bar
div#bs-example-navbar-collapse-1.collapse.navbar-collapse
form#uploadFileForm.navbar-form.navbar-left(role='send', enctype='multipart/form-data')
div.form-group
input#textFile.form-control(type='text', placeholder='Envoi de fichier')
button.btn.btn-default(type='submit') Envoi
p.navbar-text.navbar-right= title
EJS
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Activer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="send" enctype="multipart/form-data" id="uploadFileForm">
<div class="form-group">
<input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
</div>
<button type="submit" class="btn btn-default">Envoi</button>
</form>
<p class="navbar-text navbar-right">Express</p>
</div>
</div>
</nav>
</body>
</html>
模板
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Activer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="send" enctype="multipart/form-data" id="uploadFileForm">
<div class="form-group">
<input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
</div>
<button type="submit" class="btn btn-default">Envoi</button>
</form>
<p class="navbar-text navbar-right"><%= title %></p>
</div>
</div>
</nav>
</body>
</html>
样式.css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
最佳答案
默认情况下，Jade 会从 html 中删除所有空格。这导致 Bootstrap 一起格式化按钮。
这样写按钮:
button.btn.btn-primary Button 1
= ' '
button.btn.btn-primary Button 2
= ' '
button.btn.btn-primary Button 3
关于javascript - 使用 Jade 而不是 EJS 时的不同行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26169104/
25
4
0
我想设计两个代理 Agent1 在不同的时间向 Agent2 发送两个消息值。 Agent2 然后根据接收到的值执行操作。 使用 Jade，我尝试编写以下内容: -Agent1 有两个 addBeha
我只是 JADE 的初学者。我想知道如何创建主容器以外的容器并将多个代理添加到其中。完整的创建代码将不胜感激。 谢谢! 最佳答案 如 Tafadzwa Chikudo 回答中所述，启动容器的常用方法是
我正在尝试使用 Jade block ，但我的内容未显示。这是我的 index.jade: //index.jade extends ../includes/layout block main-con
我不知道 Jade 内部是如何工作的，但我猜它会编译每个模板文件一次，然后为每个 HTTP 请求使用编译和缓存的版本。 当我运行我的 Express 应用程序并对我的 *.jade 文件进行更改时，更
我正在制作一个基于 Express 的 Web 应用程序，每次有人访问这个 jade 文件时，我都会收到以下错误: Warning: missing space before text for lin
我正在向 Jade 模板传递一些数据，这些数据采用 JSON 形式，因此例如这里我输出 Jade 模板中所有团队的名称: p Teams: br -for(var i = 0; i < tou
我的 jade.js 文件中有以下内容 'use strict'; var config = require('../config'); module.exports = { dist: {
是否可以从非 JADE 应用程序(用 Java 或 C/C++ 编写)向 JADE 代理/平台发送消息(并从中接收消息)？是否可以通过某种方式向包含符合 FIPA 的 ACL 消息的平台发送 HTTP
我目前正在使用 gulp-jade，我正在努力研究如何在我的 gulpfile.js 中设置 Jade include。(为了澄清，我在这里指的是 http://jade-lang.com/refer
我有一个与 mongodb 集成的 Nodejs 项目。在这里，我创建了一个 jade 文件，其中有从数据库中获取的学生列表。每个学生记录都有一个编辑按钮。因此，当用户单击编辑按钮时，它需要将用户重定
我正在慢慢学习nodejs、express、jade。这就是我想要完成的基本任务: ul.nav - var obj = { 'home':'i.icon-home.icon-white Home
在jade模板引擎中: - 我可以做一个每个循环来包含文件吗？例如 each val in ['file1', 'file2', 'file3'] include val 最佳答案 “您正在
我有一个 View ，其中返回的 MIME 类型各不相同。如何设置标题部分的内容类型？ 这是我想做的 !!! html head title #{site.title} - #{site.
框架:node.js/express.js/Jade 问题:在生产环境中，当一个 jade 文件被 express 渲染时，jade 缓存了它，所以 future 的渲染速度会更快。 当我启动 nod
我在 node.js 中有一个网站；要创建一个页面，比如说 mypage 我注意到我需要同时创建一个 layout.jade 和 mypage.jade 文件。如果我将代码放在 mypage.jade
我想将我的数据对象传递给 Jade 文件，但这是不可能的 我的 jade-loader : { test: /\.jade$/, loader: "jade", query: {
约曼/咕噜/ Jade 我的文件夹结构如下: App/ App/jade/user.jade /user.edit.jade /user.details.jade 当
所以我正在做这个项目，我正在使用 gulp。我需要它能够编译我编写的 jade(在 _jadefiles 文件夹中)并将它们作为 .html 输出到我项目的 _includes 文件夹中。 我目前正在
我正在使用 Jade/Express 构建的网站工作了几个星期。我最近为网站组织了图像文件夹，因此所有图像都分布在几个文件夹之间，以便于使用和分类。 为了更轻松地更改图像(和其他此类文件)的层次结构，
是的，我对问这样一个新手问题感到内疚。 app.get('/skumanagement/:id', function (req, res){ var options = req.params
我是一名优秀的程序员,十分优秀！