@hiddy0329 (hiddy)posted at 2022-01-30

Bootstrap5が上手く使いこなせません

Q&A

Ruby HTML CSS Rails bootstrap5

解決したいこと

Ruby on Railsにbootstrapを導入して、フロント実装を進めようと考えています。
bootstrapの公開されているテンプレートを使うときのやり方について困っています。

発生している問題

bootstrap5をRuby on Railsに導入するために、以下のサイトを参考に導入しました。
https://blog.to-ko-s.com/install-bootstrap5/

しかし、導入後、公開されている無料テンプレートをダウンロードして、
HtmlファイルのみをVSCodeにて使用したのですが、ブラウザで確認すると、
CSSやJSが適用されていません。

自分で試したこと

bootstrapは、CDNという方式で使う場合、Htmlファイルに指定のクラス名などを記述することで、それに応じたサーバー上のCSSファイルを参照してデザインが整うという仕組みだと思っていたのですが、
テンプレートを使う場合は、そのテンプレートに用意されているCSSファイルも一緒にダウンロードしてVSCodeに配置しないと適用されないのでしょうか？

その辺りの仕組みについて、ご存知の方がいらっしゃいましたら、ご教示ください。

2Answer

@syutorum001 posted at 2022-02-01

認識されている通り、Bootstrap CDNの場合は
Bootstrapに必要なファイル一式をダウンロードせずに、
コードを埋め込むだけで使うことができます。

参考にされているサイトはCDNを利用せず、
パッケージマネージャによって
Bootstrapをインストールしているようですが、どのように導入されたのでしょうか。

インストールする方式
Bootstrapダウンロード

CDNを利用する方式
Bootstrap CDN利用

CDNについて
CDN MDN Web Docs

0Like

Comments

@hiddy0329
Questioner
サイトで紹介されていたyarnを使ってインストールしました。
しかし、テンプレートの導入の場合のみうまくいきません。

@syutorum001 posted at 2022-02-07

サイトで紹介されていたyarnを使ってインストールしました。

であればBootstrapがインストールされている筈なので
stylesheet_pack_tagの記述
application.scssの準備ができれば利用できるはず、だとは思いますが、
情報が今の状態だと不十分なため、一概には回答できません。

例えば、

投稿者様のRailsバージョンが何(7でWebpackerが廃止された後の本番)なのか
デプロイした本番環境、ローカル環境どちらか
実際のソースが参考にされたサイトの通りになっているのか
turbolinks問題に対処済なのか

などなどです。

また、

テンプレート

という単語は質問に記載されている
「導入の為に参考にしたサイト」に一切出てきませんが、何を示しているのでしょうか。
仮に「CheatSheet」のことを指しているのであれば、
テンプレートと異なり「思い出すためのメモ」のようなニュアンスが強いので、
「任意の値を自分で指定する必要がある」といった記載が
されていることもありますのでそのままコピペしても機能しないことがあります。

何か思い当たる節や、欠けていると思われる情報を
今一度検討後、必要であれば追記していただくことで
より詳細な回答が得られるかと思いますがいかがでしょうか。