As a beginner in node.js and bootstrap, I am eager to create my own personal website, so I found some tutorials to help me get started.
After downloading bootstrap 2.0.2 and unzipping it, I organized the files by placing bootstrap and bootstrap-responsive in the stylesheets folder of my project, and bootstrap.js and jquery.js in the javascripts folder. Following the instructions, I made changes to the index.jade and layout.jade as shown below:
**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>Welcome to Microblog</h1>
<p>Microblog is a microblogging system based on Node.js.</p>
<p>
<a class="btn btn-primary btn-large" href="/login">Login</a>
<a class="btn btn-large" href="/reg">Register Now</a>
</p>
</div>
<div class="row">
<div class="span4">
<h2>Carbo says</h2>
<p>The east wind breaks the early plum blossoms. <br>Only one branch blossoms towards warmth; alone, it's seen. <br>Spring comes from above, unseen by men.</p>
</div>
<div class="span4">
<h2>BYVoid says</h2>
<p>
Open Chinese Convert (OpenCC) is an open-source Chinese simplification project, dedicated to creating high-quality statistical-based Simplified-Chinese character conversion wordlists. <br>They also provide a function library (libopencc), a command line simplification tool, manual proofreading tools, dictionary generation programs, online conversion services, and a graphical user interface.</p>
</div>
<div class="span4">
<h2>佛振 says</h2>
<p>The Middle Chinese Rhyme input method engine / Rime Input Method Engine is inspired by the historical Middle Chinese Rhyme, aiming to create a classic input method that gathers the wisdom of phonology. <br>The project website can be found at http://code.google.com/p/rimeime/ <br>While creating application value is important, it is equally essential to uphold the pursuit of good technology. The goal is to write dynamic and easily scalable code, making it a unique open-source input method.</p>
</div>
</div>**
Unfortunately, the layout doesn't look as expected. Can someone please point out what is wrong? I am stuck at this basic step and unsure how to proceed. Thank you!