5

如何在 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 中提供适当的引导文件？

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

<!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>
4

2 回答 2

3

在 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>
于 2013-07-18T10:39:27.400 回答
0

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

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

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

于 2013-07-18T10:33:34.793 回答