Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]

Bootstrap!

@kozaru_kodera

Bootstrapってなんだ？

CSSフレームワークです。jQueryのライブラリ

も搭載されてます。

BootstarpのサイトにStyleGuideがあるので、

そこからソースをペタペタするとページができ

ます。

http://getbootstrap.com/

ダウンロードして困ったこと

どこにHTMLおけばよいの？

LESSとかGrunt（本日の話題？）とかどうした

らいいの？

こざる的解釈http://getbootstrap.com/getting-started/

cssもjsも コンパイル後のみ

コンパイル前もあるファイル（lESS用）

コンパイル前もあるファイル（Sass用）

こざる的解釈のコンパイルとは

人が読める状態から、コンピュータが読める状態に変換すること

コンパイル後の場合ダウンロードしたフォルダ直下にhtmlファイルを作り

ましょう。

http://getbootstrap.com/getting-started/#template

上記のテンプレートをペタってはって使うと便利です！

でもそのままだと、モックアップ程度にしか使えないか

も…

コンパイル前の場合いっぱいファイルダウンロードされます。困った！

あれ？Gruntfile.jsある？Grunt使える？

（Gruntについての詳細はかみやんさんに聞いてください）

Grunt使うにはNode.jsをインストールする

http://qiita.com/Hatajoe/items/74c2b629ef77caa9fd6

Gruntをインストールする

npm install -g grunt-cli

BootstrapをDL展開したフォルダで

npm install（魔法のコマンド！）

ここにBootstrapの導入手順、書いてあるよ！（英語だけど）

https://github.com/twbs/bootstrap#compiling-css-and-javascript

（ここまででいろいろエラー出たりしますが、がんばりましょう！）

インストールできたら

distファイル内にhtmlを作成。

ダウンロードしたフォルダでgrunt watchする

と、LESSをコンパイルしてくれます。

BootstrapのSassは使ったことないです。

カスタマイズCSSはどこにおくのん？

theme.less を消して、そこに書いてます。で

デフォルトのgrunt設定で、bootstrap-

theme.css に書き出されます。

ボタンなどのカラーリングは、variable.lessを

触って修正してます。

カスタマイズしたJSはどこにおくのん？

dist/js内にjsファイルを作成して（これがただ

しいのかは不明）、Styleguideにあるjavascript

にあるコードをペタペタしたり、自分でjQuery

書いたりして使います。htmlに読み込んでます。

（http://getbootstrap.com/javascript/）

フォルダ構造を変えたいときgruntfile.jsを書き換えると変更してくれます。

詳しくは本日かみやんさんに教えてもらえるは

ず！

最後に詳しいことはまだまだ未解明なのでこれくらいで。

レスポンシブのレイアウトに便利！

簡単にtoggleとかmodal的なものが作れるのでカスタマ

イズ方法を覚えればきっと楽になるはず（まだなってな

い）

ご清聴ありがとうございました！