【node.js学习】--(6)--Bootstrap

 

使用Bootstrap

使用中文网的CDN源加载bootstrap :修改F:\nodejs\nodejs-bower\views\index.ejs

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
   <title><%= title %></title>
   <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
   <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>
   <div class="well jumbotron">
     <h1><%= title %></h1>
     <p>This is a simple hero unit, a simple jumbotron-style componentfor calling extra attention to featured content or information.</p>
     <p><a class="btn btn-primary btn-lg"href="#" role="button">Learn more</a></p>
   </div>
   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
</html>


运行效果:

 

我们把index.ejs页面切分成3个部分:header.ejs, index.ejs, footer.ejs,用于网站页面的模块化。

views/
├──error.ejs
├──footer.ejs
├──header.ejs
└──index.ejs

header.ejs

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
   <title><%= title %></title>
   <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
   <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>

footer.ejs

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
   <title><%= title %></title>
   <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
   <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>

index.ejs

<% include header.ejs %>
 
<div class="welljumbotron">
<h1><%= title %></h1>
<p>This is a simple hero unit, asimple jumbotron-style component for calling extra attention to featuredcontent or information.</p>
<p><a class="btn btn-primarybtn-lg" href="#" role="button">Learnmore</a></p>
</div>
 
<% include footer.ejs %>

运行效果一样(略)

参考http://blog.fens.me/nodejs-express4/

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值