まず、次のサイトにアクセスする。
http://getbootstrap.com/
"Download Bootstrap"ボタンを押す。
"Download Bootstra"ボタンを押すとzipファイル(自分がダウンロード時のファイル名は、"bootstrap-3.3.6-dist.zip"でした。) をダウンロードする。
そして、ダウンロードしたzipファイルを解凍する。
この解凍されたcss、fonts、jsのフォルダをnodeのプロジェクトのpublicフォルダにコピーする。
nodeのプロジェクトのpublicフォルダには、はじめからjs及びcss用のフォルダとして、それぞれjavascripts、stylesheetsフォルダがあるが、今回はbootstrapのために、これらのフォルダは使用せず、ダウンロードしたzipファイルから解凍されたcss、fonts、jsのフォルダをそのまま、コピーすることにする。
コピー後
そして、今回は組み込んだbootstrapの動作確認のために、bootstrapのExsamplesにあるBootstrap themeのButtonsの部分を取り込んで正しく表示できるようにする。
* Examplesの中身を確認する方法は以下の記事を参照のこと。
Bootstrapのサンプルを見る
Bootstrap themeのButtons部分のコードは次の通り。
これをindex.ectファイル内に組み込む。
<div class="page-header"> <h1>Buttons</h1> </div> <button class="btn btn-lg btn-default" type="button">Default</button> <button class="btn btn-lg btn-primary" type="button">Primary</button> <button class="btn btn-lg btn-success" type="button">Success</button> <button class="btn btn-lg btn-info" type="button">Info</button> <button class="btn btn-lg btn-warning" type="button">Warning</button> <button class="btn btn-lg btn-danger" type="button">Danger</button> <button class="btn btn-lg btn-link" type="button">Link</button> <button class="btn btn-default" type="button">Default</button> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-success" type="button">Success</button> <button class="btn btn-info" type="button">Info</button> <button class="btn btn-warning" type="button">Warning</button> <button class="btn btn-danger" type="button">Danger</button> <button class="btn btn-link" type="button">Link</button> <button class="btn btn-sm btn-default" type="button">Default</button> <button class="btn btn-sm btn-primary" type="button">Primary</button> <button class="btn btn-sm btn-success" type="button">Success</button> <button class="btn btn-sm btn-info" type="button">Info</button> <button class="btn btn-sm btn-warning" type="button">Warning</button> <button class="btn btn-sm btn-danger" type="button">Danger</button> <button class="btn btn-sm btn-link" type="button">Link</button> <button class="btn btn-xs btn-default" type="button">Default</button> <button class="btn btn-xs btn-primary" type="button">Primary</button> <button class="btn btn-xs btn-success" type="button">Success</button> <button class="btn btn-xs btn-info" type="button">Info</button> <button class="btn btn-xs btn-warning" type="button">Warning</button> <button class="btn btn-xs btn-danger" type="button">Danger</button> <button class="btn btn-xs btn-link" type="button">Link</button>
いよいよ、動作確認。
ブラウザで表示すると次のようになった。組み込んだbootstrapが、正しく動いている。
今回のbootstrapの動作確認に関連あるソースコードは以下の通り。
=== app.js ===
変更部分はexpressコマンドでプロジェクト生成後にect用に変更した13〜18行目
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
=== index.js ===
変更部分はなし。expressコマンドでプロジェクト生成後のそのまま。ただ載せているだけ。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
=== error.ect ===
ectのエラー出力のためのテンプレート。bootstrapとは関係ない。ただ載せているだけ。
<html> <head> <title>Error <%= @error.status %>>/title> </head> <body> <span> Error Status: <%= @error.status %> <hr /> <pre><%= @error.stack %></pre> </span> </body> </html>
=== footer.ect ===
ectのフッター部分のテンプレート。bootstrapとは関係ない。ただ載せているだけ。
<div id="footer"> <div class="left"> Generated by ECT</div> <% content 'footer-info' %> </div>
=== index.ect ===
また、ExapmlesのButtons部分を取り込んでいる。8〜46行目
<% extend 'layout' %> <%= "This is sample" %> <h1> <%= @title %></h1> Welcome to <%= @title %> <div class="page-header"> <h1> Buttons</h1> </div> <button class="btn btn-lg btn-default" type="button">Default</button> <button class="btn btn-lg btn-primary" type="button">Primary</button> <button class="btn btn-lg btn-success" type="button">Success</button> <button class="btn btn-lg btn-info" type="button">Info</button> <button class="btn btn-lg btn-warning" type="button">Warning</button> <button class="btn btn-lg btn-danger" type="button">Danger</button> <button class="btn btn-lg btn-link" type="button">Link</button> <button class="btn btn-default" type="button">Default</button> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-success" type="button">Success</button> <button class="btn btn-info" type="button">Info</button> <button class="btn btn-warning" type="button">Warning</button> <button class="btn btn-danger" type="button">Danger</button> <button class="btn btn-link" type="button">Link</button> <button class="btn btn-sm btn-default" type="button">Default</button> <button class="btn btn-sm btn-primary" type="button">Primary</button> <button class="btn btn-sm btn-success" type="button">Success</button> <button class="btn btn-sm btn-info" type="button">Info</button> <button class="btn btn-sm btn-warning" type="button">Warning</button> <button class="btn btn-sm btn-danger" type="button">Danger</button> <button class="btn btn-sm btn-link" type="button">Link</button> <button class="btn btn-xs btn-default" type="button">Default</button> <button class="btn btn-xs btn-primary" type="button">Primary</button> <button class="btn btn-xs btn-success" type="button">Success</button> <button class="btn btn-xs btn-info" type="button">Info</button> <button class="btn btn-xs btn-warning" type="button">Warning</button> <button class="btn btn-xs btn-danger" type="button">Danger</button> <button class="btn btn-xs btn-link" type="button">Link</button> <% block 'footer-info' : %> <div class="right"> page: sample</div> <% end %>
=== layout.ect ===
ectのレイアウト外枠。
以下のbootstrapのテンプレート部分(http://getbootstrap.com/getting-started/#download に載っている。)を取り込んでいる。5、6、8〜10行目
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><%- @title %></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <% include 'script' %> <script src="js/bootstrap.min.js"></script> </head> <body> <% content %> <% include 'footer' %> </body> </html>
=== script.ect ===
ectのscriptタグ部分箇所。bootstrapを動作させるために必要なjqueryの読み込みを定義。また、bootstrapsのjsの定義より前の行に定義する必要あり。
<script src="./javascripts/jquery-2.1.4.min.js"></script>
=== package.json ===
bootstrapとは関係ない。ただ載せているだけ。
{
"name": "bootstrap",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
}
}
0 件のコメント :
コメントを投稿