CODEWITHSUNDEEP
javascriptcssnode.jstwitter-bootstrap
DQ_happy
DQ_happy

Reputation: 515

Cannot load bootstrap to nodejs

I am quite new to nodejs and bootstrap, but I long to build a simple personal website so I got some tutorials.

I download the bootstrap 2.0.2 and unzip it.

I put bootstrap and bootstrap-responsive to the stylesheets folder of my project and put bootstrap.js and jquery.js to the javascripts folder of my project.And I followed the instruction to change the index.jade and layout.jade as followings:

**layout jade:**
$<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title><%= title %> - Microblog</title>
  <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
  <style type="text/css">
   body {
    padding-top: 60px;
    padding-bottom: 40px;
   }
  </style>
  <link href="stylesheets/bootstrap-responsive.css" rel="stylesheet">
 </head>
</html>$


    **index.jade
   <div class="hero-unit">
   <h1>欢迎来到 Microblog</h1>
   <p>Microblog 是一个基于 Node.js 的微博系统。</p>
   <p>
   <a class="btn btn-primary btn-large" href="/login">登录</a>
   <a class="btn btn-large" href="/reg">立即注册</a>
   </p>
   </div>
   <div class="row">
   <div class="span4"> 
   <h2>Carbo 说</h2>
   <p>东风破早梅 向暖一枝开 冰雪无人见 春从天上来</p>
   </div>
   <div class="span4">
   <h2>BYVoid 说</h2>
   <p>
   Open Chinese Convert（OpenCC）是一个开源的中文简繁转换项目，
   致力于制作高质量的基于统计预料的简繁转换词库。
   还提供函数库(libopencc)、命令行简繁转换工具、人工校对工具、词典生成程序、 
   在线转换服务及图形用户界面。</p>
   </div>
   <div class="span4">
   <h2>佛振 说</h2>
   <p>中州韵输入法引擎 / Rime Input Method Engine 取意历史上通行的中州韵，
   愿写就一部汇集音韵学智慧的输入法经典之作。
   项目网站设在 http://code.google.com/p/rimeime/
   创造应用价值是一方面，更要坚持对好技术的追求，希望能写出灵动而易于扩展的代码，
   使其成为一款个性十足的开源输入法。</p>
   </div>
   </div>**

However, it seems the layout is not just as expected, could anyone tell me what is wrong since this is the basic step and I just got stucked and do not know how to move forward. Thanks!

Upvotes: 1

Views: 791

Answers (2)

AlexS
AlexS

Reputation: 136

  1. Your layout and index don't actually seem to meet Jade markup language.
  2. I don't see any place you linked jQuery.js and bootstrap.js in the layout.jade or index.jade.

I'd expect something like

!!! 5
html
  head
    title #{meta.title} - #{meta.author}
    link(rel="stylesheet", href="/twitter/bootstrap.css")

    script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")    
    script(type="text/javascript", src="/scripts/bootstrap.min.js")
...

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40134

Well your html is not in the Jade syntax - paste it in here and see: http://html2jade.com

Here are some docs: http://jade-lang.com

If you are just getting started with Express there are other templates available including Hogan which is build in (though it has to be specified when you init a new project). Hogan is more "html like"

Upvotes: 0

Related Questions