Node.js学习（三）——Node.js使用Bootstrap

最新推荐文章于 2024-07-03 16:58:10 发布

-贫寒豌豆

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量1.6w

点赞数

分类专栏： nodejs 文章标签： node.js bootstrap

本文链接：https://blog.csdn.net/flygoa/article/details/52677652

版权

nodejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Node.js学习（三）——Node.js使用Bootstrap

下载bootstrap

npm install bootstrap

下载jquery

npm install jquery

配置使用

文件放置

在node_modules目录中找到jquery和bootstrap

将jquery和bootstrap的js文件拷贝到项目目录下pubic的javascripts下

将bootstrap的dist目录下的css目录下的文件拷贝到项目目录下的public的stylesheets目录下
css

配置使用

因为用的是ejs模板引擎，所以使用方式和html一样，将index.ejs改为如下代码

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
    <link rel='stylesheet' href='stylesheets/bootstrap-theme.css'>

  </head>
  <body>
    <h1>我是主页</h1>
    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>
  </body>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/bootstrap.js"></script>
</html>