6
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Twitter Bootstrap3 を試す

みんな大好き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 にアクセスすると、見られます!

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?