Jade/Pug模板含空格类写法：如何生成Bootstrap模态框DOM结构

嘿，这个问题其实超容易搞定！在Pug（原Jade）语法里，多个类名只需要用连续的.拼接就行，和单个类的写法逻辑一致。

你要的完整Pug代码应该是这样的：

#fa.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalCenterTitle', aria-hidden='true')
  // 这里可以继续添加模态框的内部结构，比如.modal-dialog、.modal-content等

简单拆解一下： #

• #fa 对应DOM里的id="fa"
• .modal.fade 对应DOM里的class="modal fade"，Pug会自动把这些连续的类选择器合并成一个class属性的多个值
• 括号里的部分就是元素的各类属性，完全匹配你期望的结构

编译这段Pug代码后，生成的DOM就正好是你想要的：

<div id="fa" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"></div>

内容的提问来源于stack exchange，提问作者Joze Jerse