Node.js学习(三)——Node.js使用Bootstrap

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目录下
Node.js学习(三)——Node.js使用Bootstrap_第1张图片

配置使用

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


<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/

你可能感兴趣的:(nodejs)