使用中文網的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
<!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>
<!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>
<% 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/
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。