bootstrap使い始めて困ったことなど [web的な話をシェアしてみる会]
DESCRIPTION
最近使い始めたBootstrapで困ったことなどまとめて、Web的な話をシェアしてみる会でしゃべりました。TRANSCRIPT
![Page 1: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/1.jpg)
Bootstrap!
@kozaru_kodera
![Page 2: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/2.jpg)
Bootstrapってなんだ?
CSSフレームワークです。jQueryのライブラリ
も搭載されてます。
BootstarpのサイトにStyleGuideがあるので、
そこからソースをペタペタするとページができ
ます。
![Page 4: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/4.jpg)
ダウンロードして困ったこと
どこにHTMLおけばよいの?
LESSとかGrunt(本日の話題?)とかどうした
らいいの?
![Page 5: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/5.jpg)
こざる的解釈http://getbootstrap.com/getting-started/
cssもjsも コンパイル後のみ
コンパイル前もあるファイル(lESS用)
コンパイル前もあるファイル(Sass用)
こざる的解釈のコンパイルとは
人が読める状態から、コンピュータが読める状態に変換すること
![Page 6: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/6.jpg)
コンパイル後の場合ダウンロードしたフォルダ直下にhtmlファイルを作り
ましょう。
http://getbootstrap.com/getting-started/#template
上記のテンプレートをペタってはって使うと便利です!
でもそのままだと、モックアップ程度にしか使えないか
も…
![Page 7: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/7.jpg)
コンパイル前の場合いっぱいファイルダウンロードされます。困った!
あれ?Gruntfile.jsある?Grunt使える?
(Gruntについての詳細はかみやんさんに聞いてください)
![Page 8: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/8.jpg)
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
(ここまででいろいろエラー出たりしますが、がんばりましょう!)
![Page 9: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/9.jpg)
インストールできたら
distファイル内にhtmlを作成。
ダウンロードしたフォルダでgrunt watchする
と、LESSをコンパイルしてくれます。
BootstrapのSassは使ったことないです。
![Page 10: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/10.jpg)
カスタマイズCSSはどこにおくのん?
theme.less を消して、そこに書いてます。で
デフォルトのgrunt設定で、bootstrap-
theme.css に書き出されます。
ボタンなどのカラーリングは、variable.lessを
触って修正してます。
![Page 11: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/11.jpg)
カスタマイズしたJSはどこにおくのん?
dist/js内にjsファイルを作成して(これがただ
しいのかは不明)、Styleguideにあるjavascript
にあるコードをペタペタしたり、自分でjQuery
書いたりして使います。htmlに読み込んでます。
(http://getbootstrap.com/javascript/)
![Page 12: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/12.jpg)
フォルダ構造を変えたいときgruntfile.jsを書き換えると変更してくれます。
詳しくは本日かみやんさんに教えてもらえるは
ず!
![Page 13: Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://reader034.vdocuments.site/reader034/viewer/2022052322/558440b5d8b42abf1e8b5081/html5/thumbnails/13.jpg)
最後に詳しいことはまだまだ未解明なのでこれくらいで。
レスポンシブのレイアウトに便利!
簡単にtoggleとかmodal的なものが作れるのでカスタマ
イズ方法を覚えればきっと楽になるはず(まだなってな
い)
ご清聴ありがとうございました!