在Node.js和Express上使用Twitter bootstrap

Question

在Node.js和Express上使用Twitter bootstrap

javascriptcssnode.jstwitter-bootstrapexpress

5

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

我知道我需要将CSS和Javascript文件放在“./public”目录中（如果设置默认值）。但是当我想了解如何在Node.js和Express上使用Twitter Bootstrap时，我发现有许多使用Twitter Bootstrap的变体。例如，只需将bootstrap CSS和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>

- Blaszard

可能是使用express.js处理静态文件的重复问题。 - moka

2个回答

0

创建一个文件夹，例如.\public\js\lib\bootstrap，在bootstrap文件夹中保留两个文件bootstrap-combined.min.css和bootstrap.js，这些文件可以从bootstrap存储库中获取。在./views/index.html页面中包含这些文件。

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

现在应该可以为您工作了....

- Vinod Louis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sachin · Accepted Answer

在public文件夹中创建一个子文件夹，将其命名为stylesheets。然后将所有的Twitter Bootstrap 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>