こんにちは
プログラミング初学者のkoheiです。
今回はrailsにbootstrapのgemの認識について書き残したいと思います。
bootstrapをインストールしたものの、使いこなすにはどうすればいいんだろうか、、？
そう思い色々とbootstrapの中身をみていました。
もし、
もっとこんなことが出来る！
間違っているよ！
という方がいらっしゃったら、アドバイスしていただけたら幸いです。
現在の自身の解釈
「予め多くの要素に対しレイアウトが決められているため、
HTML側に対応したクラスをつけることで、scssファイル内の記述を減らすことが出来る。」
、、、どうでしょうか。
そう感じた経緯は以下の通りです。
ビューがなかったため、bootstrapのHPのサンプルのHTMLを拝借 ( https://getbootstrap.jp/docs/4.3/examples/ )
上記HTMLにはweb上のレイアウトファイルへのリンクが含まれていたためコメントアウト
レイアウトが崩れたことを確認
bootstrap gemのインストール
3でレイアウトが崩れたビューが元通りに
ここでインストールした際にassetディレクトリ上にscssファイルが生成されたから、と予想したのですが存在しないことに驚きました。
また、元のHTMLファイルにpy-5など見慣れないクラス名が指定されており、それをVSCode内で検索しても該当するファイルは出てきませんでした。
その後、ブラウザで検証ツールを使用し確認したところ
application.self内に以下の記述があったこと
省略
/* line 50, ../../.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/bootstrap-5.0.0.beta2/assets/stylesheets/bootstrap/mixins/_utilities.scss */
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
/* line 50, ../../.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/bootstrap-5.0.0.beta2/assets/stylesheets/bootstrap/mixins/_utilities.scss */
.pt-0 {
padding-top: 0 !important;
}
省略
またmacbookのfinderで"bootstrap"と検索すればインストール時に生成されたファイルが多数あったこと
以上から、
フォントや細かな設定はbootstrapのデフォルトの物を使用し
必要最低限のscss記述のみでビューを完成させることが出来る。
といった解釈に至りました。
といっても、まだまだ使い勝手が解らないことが多いため、今後も色々調べていきたいと思います！
↧