最近使い始めたBootstrapで困ったことなどまとめて、Web的な話をシェアしてみる会でしゃべりました。

1. Bootstrap
!
@kozaru_kodera

2. Bootstrapってなんだ？
CSSフレームワークです。jQueryのライブラリ
も搭載されてます。
BootstarpのサイトにStyleGuideがあるので、
そこからソースをペタペタするとページができ
ます。

3. http://getbootstrap.com/

4. ダウンロードして困ったこと
どこにHTMLおけばよいの？
LESSとかGrunt（本日の話題？）とかどうした
らいいの？

5. こざる的解釈
http://getbootstrap.com/getting-started/
cssもjsも
コンパイル前もある
コンパイル前もある
コンパイル後のみ
ファイル（lESS用）
ファイル（Sass用）
こざる的解釈のコンパイルとは
人が読める状態から、コンピュータが読める状態に変換すること

6. コンパイル後の場合
ダウンロードしたフォルダ直下にhtmlファイルを作り
ましょう。
http://getbootstrap.com/getting-started/#template
上記のテンプレートをペタってはって使うと便利です！
でもそのままだと、モックアップ程度にしか使えないか
も…

7. コンパイル前の場合
いっぱいファイルダウンロードされます。困った！
あれ？Gruntfile.jsある？Grunt使える？
（Gruntについての詳細はかみやんさんに聞いてください）

8. 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
（ここまででいろいろエラー出たりしますが、がんばりましょう！）

9. インストールできたら
distファイル内にhtmlを作成。
ダウンロードしたフォルダでgrunt watchする
と、LESSをコンパイルしてくれます。
BootstrapのSassは使ったことないです。

10. カスタマイズCSSはどこにおくのん？
theme.less を消して、そこに書いてます。で
デフォルトのgrunt設定で、bootstraptheme.css に書き出されます。
ボタンなどのカラーリングは、variable.lessを
触って修正してます。

11. カスタマイズしたJSはどこにおくのん？
dist/js内にjsファイルを作成して（これがただ
しいのかは不明）、Styleguideにあるjavascript
にあるコードをペタペタしたり、自分でjQuery
書いたりして使います。htmlに読み込んでます。
（http://getbootstrap.com/javascript/）

12. フォルダ構造を変えたいとき
gruntfile.jsを書き換えると変更してくれます。
詳しくは本日かみやんさんに教えてもらえるは
ず！

13. 最後に
詳しいことはまだまだ未解明なのでこれくらいで。
レスポンシブのレイアウトに便利！
簡単にtoggleとかmodal的なものが作れるのでカスタマ
イズ方法を覚えればきっと楽になるはず（まだなってな
い）
ご清聴ありがとうございました！