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

来源：互联网发布：linux 机器重启日志编辑：程序博客网时间：2024/05/16 11:09

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>

效果

学习资料

bootstrap教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
jquery在线api：http://hemin.cn/jq/

0 0