Bootstrap是一个广受欢迎的 HTML 和 CSS 框架，用于构建网站和 Web 应用程序。它是 GitHub 上排名第一的项目。Bootstrap 支持响应式网页设计，允许您的页面布局适应设备（台式机、平板电脑、移动设备）。
将引导程序添加到我们的项目中要将 Bootstrap 添加到我们的项目中，我们必须为 Bootstrap 下载缩小的 CSS 和 JS 文件。您可以从此链接下载 Bootstrap 。下载 Bootstrap 后，解压缩文件并将文件夹复制到项目中的文件夹css中。jsfontspublic
您会注意到与现有文件夹结构的一些不一致之处。我们将统一样式表和 JavaScript 文件夹。css我更喜欢forstylesheets和jsfor的 Bootstrap 命名法，javascript因为它与其他第三方库共享。将文件复制stylesheets到css并删除该javascript文件夹，因为它应该是空的。接下来转到layout.jade并更改以下行：
link(rel='stylesheet' href='/stylesheets/style.css')
到：
link(rel='stylesheet' href='/css/style.css')
接下来，我们要将 Bootstrap CSS 文件链接添加到文件中的标题和 HTML5 应用程序的适当元标记layout.jade。style.css您必须在包含链接的行之前添加以下行。
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
接下来，我们要添加 Bootstrap 的组件和插件所需的 JavaScript 文件。将以下行添加到 的末尾layout.jade：
script(type=’text/javascript’ src=’/js/bootstrap.min.js’)
doctype HTML
html
head
title= title
meta(charset="utf-8")
meta(http-eqUIv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
link(rel='stylesheet' href='/css/style.css')
body
block content
script(type='text/javascript' src='/js/bootstrap.min.js')
是时候开发聊天用户界面布局了。首先，您可能想了解 Bootstrap 并查看这个长教程。所有聊天引擎都有一个用于最近收到的消息的区域和一个供用户编写和发送消息的区域。从历史上看，布局是将编辑区域附加在底部，将消息附加在顶部。
如果不做一些工作，将 HTML 页面上的元素固定到视口的底部并不容易。我将按照此示例将页脚固定到底部。我们要修改index.jade文件，并删除内容块下的所有代码行。
首先，我们添加将包含接收到的消息的页面区域。让我们从添加一个div类开始wrap。在 Jade 中，您只需编写.wrap一个<div class="wrap"></div>. 通过使用缩进，我们可以向 Jade 模板引擎发出信号，即更多缩进的元素将包含在缩进较少的元素中。如果您在其他教程中错过了这个Jade 教程，请查看它。
接下来，我们要添加另一个div类container-fluid以向页面添加流体宽度。在里面，我将创建一个h1元素，上面写着“欢迎来到节点聊天室”，以及一个div带有 idmessages和 finaldiv的类push，我们将使用该类将聊天室的消息编辑区域下推到视口底部。
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
接下来，我们将开发消息编辑区域。我们想要在div被调用footer和div被调用中捕获文本框和发送按钮container-fluid。将footer div具有与 相同的缩进wrap div。
接下来，我将使用 Bootstrap 网格系统（在此处了解它）将消息编辑区域一分为二。其中一列将占据大部分空间并将包含用于编写消息的文本框，第二列将包含block-level用于发送消息的按钮。paragraph请注意 Jade 如何让我们使用符号指定元素的属性。代码将如下所示：
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message
extends layout
block content
.wrap
.container-fluid
h1 Welcome to the Node Chatroom
#messages
.push
.footer
.container-fluid
.row
.col-xs-8.col-sm-9
input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
.col-xs-4.col-sm-3
button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message
我们希望将消息编辑区域强制到视口底部，我们将希望在public/css/style.styl页面中添加一些自定义 CSS 规则。此文件使用Stylus CSS 预处理器，但您也可以逐字粘贴 CSS，这些 CSS 将被重新复制到生成的 CSS 文件中。
首先，我们要确保整个页面占据 100% 的高度。
html, body
height: 100%
其次，我们要确保换行区域占据最大高度，但在底部为页脚和消息编辑区域留出 60px 的边距。
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
第三，我们要确保编辑区域的这个空间得到尊重，并将其分配给页脚。
.push, .footer
height: 60px
最后，出于文体原因，让我们为页脚添加一个微妙的背景颜色。
.footer
background-color: **#f5f5f5**
html, body
height: 100%
.wrap
min-height: 100%
height: auto !important
height: 100%
margin: 0 auto -60px
.push, .footer
height: 60px
.footer
background-color: #f5f5f5
如果你做的一切都正确，你最终应该得到一个如下所示的 UI：
瞧！我们使用 Bootstrap 和 Jade/Stylus 预处理器为 Node.js 提供的聊天室添加了漂亮的 UI 布局。在下一部分中，我将向您展示如何通过 WebSockets 连接 UI 和 Node.js 后端。
,
