码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-03 22:07:01      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:node.js

 

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

 

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

标签:node.js

原文地址:http://blog.csdn.net/tianxuzhang/article/details/44044423

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!