=============
目的
今日からはじめる！Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜を実習してBootstrapに習熟する。
前提
| ソフトウェア | バージョン | 備考 |
|---|---|---|
| OS X | 10.8.5 | |
| npm | 1.2.18 | |
| bower | 1.2.7 | |
| grunt | 0.1.11 | |
| bootstrap | 3.0.2 |
構成
詳細
セットアップ
Bowerの設定
$ brew install node.js
$ npm install bower -g
$ /usr/local/share/npm/bin/bower -v
$ /usr/local/share/npm/bin/bower init
Gruntの設定
$ npm install -g grunt-cli
$ /usr/local/share/npm/bin/grunt -v
Bootstrapの設定
$ cd bower_components/bootstrap/
$ /usr/local/share/npm/bin/bower install bootstrap
$ cd bower_components/bootstrap/
$ /usr/local/share/npm/bin/grunt
$ tree dist/
dist/
├── css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
│ ├── bootstrap.css
│ └── bootstrap.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
└── js
├── bootstrap.js
└── bootstrap.min.js
ページ作成
index.htmlを作成する
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>>
CSS,Componentsをコピーする
- navbarの設定
-
背景色を変える
<nav class="navbar navbar-inverse" role="navigation"> Jumbotronの設定
-
真ん中寄せにする
<div class="container"> <div class="jumbotron"> .... </div>
カスタマイズする
-
bootstrap/less/jumbotron.lessファイルを編集する。
background-image: url(http://lorempixel.com/1200/400/nature); -
コンパイルする
$ cd .. $ /usr/local/share/npm/bin/grunt dist-css $ cd dist 画面を確認する
参照
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Bootstrap3でLESS/JSのコンパイル方法が変更に
今日からはじめる！Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜