6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Twitter Bootstrap3 を試す

Posted at

みんな大好きBootstrapですが、次のバージョンである3、こんなサイトができて、夏にはでるんじゃないかという話も聞いたので、その前にどんな感じか確認してみました。以下その方法です。

githubからbootstrap3を入手

まずはbootstrapのgithubから入手。3っぽいbranchは3.0.0-wipなので、それを。

npm install と make を実行

入手したらそのディレクトリへ移動し、npm intallを実行すると、必要なものをごっそり取ってきてくれます。npmなんじゃらほいな人はnodeをインストールするとnpmが入ります。ちなみに最近はインストールパッケージもあるみたいですねnode。途中-gがどうとかWARNが出ましたが、とりあえずの確認にはスルーして問題ありませんでした。

npm installでごっそり導入し終わったら、そのままmakeを実行すると、JSHintやらLESSやらが実行されて、ビルド完了!

htmlファイルを見るためにJekyll実行

サンプルとかが見られるドキュメントはdocs/index.htmlとかなのですが、開いてみるとヘッダとかがない。調べてみたところ、これはJekyllのテンプレートのようです。2まではMustache使ってたのがJekyllに変わるようですね。Jekyllについては30分のチュートリアルでJekyllを理解するが参考になりました。

Jekyllを導入。gem install jekyllでOK。

インストール後はファイルを変換してもよいのですが、めんどくさかったのでサーバで起動しました。jekyll --serverで起動して http://localhost:9001 にアクセスすると、見られます!

まだ一部おかしなところもあったりしますが、情報はありますし、ボタンなどの見た目もみられます。いわゆるフラットデザインっぽい感じになってますね。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?