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

Myth丶恋晨 2022-07-16 01:20 279阅读 0赞

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

## 下载bootstrap ##

npm install bootstrap

## 下载jquery ##

npm install jquery

## 配置使用 ##

### 文件放置 ###

在**node\_modules**目录中找到jquery和bootstrap  
![Z9MauGH.png][]  
将jquery和bootstrap的js文件拷贝到项目目录下pubic的javascripts下  
![9zNVSIi.png][]  
将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>

### 效果 ###

![D63lHAg.png][]

## 学习资料 ##

bootstrap教程：[http://www.runoob.com/bootstrap/bootstrap-tutorial.html][http_www.runoob.com_bootstrap_bootstrap-tutorial.html]  
jquery在线api：[http://hemin.cn/jq/][http_hemin.cn_jq]

[Z9MauGH.png]: http://i.imgur.com/Z9MauGH.png
[9zNVSIi.png]: http://i.imgur.com/9zNVSIi.png
[css]: /images/20220716/f954df235ef540639c9721b0a979f82d.png
[D63lHAg.png]: http://i.imgur.com/D63lHAg.png
[http_www.runoob.com_bootstrap_bootstrap-tutorial.html]: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
[http_hemin.cn_jq]: http://hemin.cn/jq/