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

来源：互联网发布：数据挖掘在的应用编辑：程序博客网时间：2024/06/06 03:15

使用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 0