Node.js 和 Express 上的 Twitter 引导程序答案

【问题标题】：Twitter bootstrap on Node.js and ExpressNode.js 和 Express 上的 Twitter 引导程序
【发布时间】：2013-07-17 05:57:51
【问题描述】：

如何在 Node.js 和 Express 上使用 Twitter Bootstrap？

我知道我必须将 CSS 和 Javascript 文件放在 ./public 目录中（如果设置为默认值）。但是当我寻找如何在 Node.js 和 Express 上使用 Twitter Bootstrap 时，我了解到使用 Twitter Bootstrap 有很多变体。

例如，只需将引导 CSS 和 JS 文件放在适当的目录中，或者指定：

<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'> <link rel='stylesheet' href='https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js'>

等，还有两个来源，普通和.min.css文件，每个都有CSS和JS。那么如何在 Node.js 和 Express 中提供合适的 Bootstrap 文件呢？

这是我当前代码的前几行（有必要吗？），它不适用于响应式设计（当我缩小屏幕以模仿智能手机的尺寸时，它不会垂直堆叠，而是缩小每个比例的大小相同）。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title><%= title %></title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css'>
    <link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
    <script src='/javascripts/jquery-2.0.2.min.js'></script>
    <style type='text/css'>

        /* Large desktop */
        @media (min-width: 980px) {
            body {
                padding-top: 60px;
            }
        }

        /* smartphones */
        @media (max-width: 480px) {
            body {
                padding-top: 30px;
            }

        }
    </style>
</head>

【问题讨论】：

static files with express.js的可能重复

标签： javascript css node.js twitter-bootstrap express

【解决方案1】：

在 public 文件夹中创建一个子文件夹并将其命名为 stylesheets。然后将所有 twiter bootstraper css 文件放在该 stylesheets 文件夹中。然后您可以像下面这样链接文件。对于 js 文件也遵循相同的操作。

 <link rel='stylesheet' href='stylesheets/bootstrap.min.css'>
 <link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'>
 <script src='javascripts/jquery-2.0.2.min.js'></script>

【讨论】：

我想问一下为什么你用.min.css作为第一个文件，而.css作为第二个文件？我也有bootstrap.css 和bootstrap-responsive.min.css...我如何决定使用哪一个？谢谢。
@user2360798 第一次使用'bootstrap.min.css'（bootstrap.css的缩小版）然后使用bootstrap-responsive.min.css（bootstrap-responsive.css的缩小版）；

【解决方案2】：

创建一个类似 .\public\js\lib\bootstrap 的文件夹，并在 bootstrap 文件夹中保留 bootstrap-combined.min.css 和 bootstrap.js 这两个文件，您可以从 ./views/index 中的 bootstrap 存储库中获取它们.html 页面将这些文件包含为

<link href="/js/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="/js/lib/bootstrap/bootstrap.js"></script>

它现在应该适合你了....

【讨论】：