Bootstrap4だけでwebアプリのレイアウトをした時によく使ったクラスを紹介

# 概要
* 0からwebアプリ（rails）を作った時、Bootstrap4だけでサイトをレイアウトをしました。
* 特に便利だったclassを紹介します
* コードも公開しています。自由にコピペして活用して下さい！

# 環境
* rails 5.2
* Bootstrap 4.1.3
* iconはfontawesomeを使っています

# 参照
* Bootstrap4 https://getbootstrap.com/docs/4.1/getting-started/introduction/
    * このサイトも日本語で読めて重宝しました http://cccabinet.jpn.org/bootstrap4/
* 作ったWebアプリ https://www.dokode.work と コード https://github.com/junara/dokode/tree/v1.0

# Bootstrap 4 で新規導入された個人的に重宝したクラス
## ベスト3
1. パディングとマージンを調整できるp-1, m-1
    * コード例 https://github.com/junara/dokode/blob/v1.0/app/views/home/_search_box.html.erb#L1-L23
    * Bootstrap4 sizing ドキュメント https://getbootstrap.com/docs/4.1/utilities/spacing/
    * pt-3の事例 [![Image from Gyazo](https://i.gyazo.com/a15b56df8470f5a619ff0b2f80c98dad.gif)](https://gyazo.com/a15b56df8470f5a619ff0b2f80c98dad)
    * これがあるから、bootstrapだけでレイアウトすることを決意できた。
    * p-xもしくはm-x （xは0から5）を設定するとそれぞれpadding, marginを設定する事ができる
    * pt (padding-topの略)、pr (padding-rightの略)、pb （padding-bottomの略）、pl （padding-leftの略）のようにt, r, b, lをつけると該当の箇所のみにpadding（もしくはmargin）を設定する事ができる
    * bootstrapのコンポーネントのpadding や marginが気に入らなければ、p-0やm-0としてから好きなpaddingやmarginをつけるといいと思う。
2. 上下左右を揃えをflexboxでできる d-flex
    * コード例 https://github.com/junara/dokode/blob/v1.0/app/views/events/_share_buttons.html.erb#L1-L26
    * [![Image from Gyazo](https://i.gyazo.com/1b67195da2377d5cdfe9081f891add56.gif)](https://gyazo.com/1b67195da2377d5cdfe9081f891add56)
    * bootstrap3時にfloatベースのレイアウトにより苦しんだ人は、ぜひ！ bootstrapだけでflexboxでレイアウトすることができるので、今までのつらさがいっぺんになくなります
    * flexboxの理解が必要です。ただし、flexboxは1日あれば基本は十分理解できます。理解した分のリターンは必ずあります。
    * 縦方向なら、alight-items-xxxxx、横方向ならjustify-content-xxxxx
    * 折り返したいならflex-wrap
    * とりあえず中央に揃えたいならd-flex justify-content-center align-items-center
3. スクロールに応じてページトップに固定できるsticky-top
    * コード例https://github.com/junara/dokode/blob/v1.0/app/views/home/_search_box.html.erb#L6
    * [![Image from Gyazo](https://i.gyazo.com/d3ab9ff72db96f6707e6ae994f5bf43a.gif)](https://gyazo.com/d3ab9ff72db96f6707e6ae994f5bf43a)
    * まさしく個人的に！というやつかもしれませんが、これが使えると、ページの動きが結構リッチになります
    * 詳しくは `position: sticky;` をみてください。

## 次点
* w-100とかh-100とかとりあえず幅と高さを目一杯にできるクラス
    * widht: 100%;, height: 100%をそれぞれクラスだけで実現できます
    * https://getbootstrap.com/docs/4.1/utilities/sizing/
    * なんか揃わないなーと思ったときは使うとうまく行くことあり
    * w-25とかw-50ははまるような場面なら使い勝手良いかもただし、その場合colを使って等幅でも問題なさそうな気がする
* ボーダーをなしにできる border-0
    * [![Image from Gyazo](https://i.gyazo.com/6123819a96bceff8d24e7dc78c5518cd.gif)](https://gyazo.com/6123819a96bceff8d24e7dc78c5518cd)
    * cardのpaddingとかmarginとかは活用したい。でも、枠線が邪魔なときにつかった。
* 影をつける事ができる shadow
    * https://github.com/junara/dokode/blob/v1.0/app/views/home/_search_box.html.erb#L6
    * [![Image from Gyazo](https://i.gyazo.com/fbc3b756cb35e93bef068f7712ce1c5a.gif)](https://gyazo.com/fbc3b756cb35e93bef068f7712ce1c5a)
    * 重なりを表現したいコンポーネントにshadow
    * 逆にshadow-0にして影をなくしてフラットなデザインにするのもあり

# その他Bootstrap使用事例
* 背景色をつけたいときはbg-xxxx (bg-primaryとか)
    * bg-success （緑） の例 [![Image from Gyazo](https://i.gyazo.com/e02db4ca1770fce298cc64691f0d69cd.gif)](https://gyazo.com/e02db4ca1770fce298cc64691f0d69cd)
* modalはbootstrapの事例からコピペしながら作るといいです！
    * https://github.com/junara/dokode/blob/v1.0/app/views/events/show.html.erb#L48-L85
    * Bootstrapだけでこんな感じの作れます
    * [![Image from Gyazo](https://i.gyazo.com/654e291b42f4516d9187797ae80fb16d.gif)](https://gyazo.com/654e291b42f4516d9187797ae80fb16d)
    * 今回のwebアプリでは、フォームのモーダル表示を[こちら](https://getbootstrap.com/docs/4.1/components/modal/#varying-modal-content)の箇所のコードをコピってから改変して作りました。
    * （ちなみに右下の緑のボタンは fixed-bottom を使っています。）
* タグっぽい表現ができる pill-badge 
    * https://github.com/junara/dokode/blob/v1.0/app/views/home/_search_box.html.erb#L11-L21
    * [![Image from Gyazo](https://i.gyazo.com/fae60522c5280656a66de7d61f0897e7.png)](https://gyazo.com/fae60522c5280656a66de7d61f0897e7)
    * https://getbootstrap.com/docs/4.1/components/badge/#pill-badges
* メニュー
    * https://github.com/junara/dokode/blob/v1.0/app/views/home/_event_card.html.erb#L7-L42
    * [![Image from Gyazo](https://i.gyazo.com/64e066e89215bf257db52e3f8be18024.gif)](https://gyazo.com/64e066e89215bf257db52e3f8be18024)
    * Bootstrap4の[ここ](https://getbootstrap.com/docs/4.1/components/dropdowns/#single-button)を見ながらつくるとつくれます

# hidden-smとかvisible-smとかの代わり
* https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
* d-noneとかd-sm-blockなどを組み合わせて実現します
* 例えば hidden-sm は d-none d-sm-block でできます
    * https://github.com/junara/dokode/blob/v1.0/app/views/events/show.html.erb#L32

# 実はbootstrapだけではレイアウトできなかったところ・・・
* どうしてもレイアウトできなかったところが下記の一箇所です。
    * https://github.com/junara/dokode/blob/v1.0/app/views/home/_map.html.erb#L5-L10
    * [![Image from Gyazo](https://i.gyazo.com/4d89ab86d8e6b2ed2fd8a255ca901f79.png)](https://gyazo.com/4d89ab86d8e6b2ed2fd8a255ca901f79)
    * Bootstrap4によるh-25,h-50, h-75%から高さを選ぶとレイアウトがしっくりこないので height: 30vh; をincline cssで指定してました

# 最後に協力者募集
* サイト https://www.dokode.work/ のデータ充実に協力してくれる人を最大2名募集しています
* 「実験系の研究室に所属し学会に定期的に参加している &&  Rails初心者 （Railsに興味があるけどRails tutorialは第1章で挫折したぐらいのレベルとか） && 八王子まで行くことができる」全てに合致して興味のある方は https://twitter.com/junara783 まで相談のDMください。
    * 年齢と所属の公的/民間はついて特に制限ないです。
* 八王子までご足労いただければ、Rails tutorialをベースに最大3時間マンツーマンレッスンできます。満足いただけるようでしたら、見合う形で学会データ収集作業の協力をお願いしたいです！