1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Rails7+Bootstrap環境の構築について

Last updated at Posted at 2023-01-08

■Bootstrap5を使ってみたいと思ったきっかけ

Railsチュートリアルで使っていたBootstrapをポートフォリオのフロントでも使いたい…でもチュートリアルだとBootstrap3だからいかにも…感が否めない。どうやらBootstrap5だと割とモダンなnavbarなどのコンポーネントが提供されていそう、、、と感じたため。先に断っておきますが初学者のため間違っている箇所がありましたら、ご指摘いただけますと幸いです。

■導入方法

Rails newコマンドのオプションを指定するだけです。

rails new [アプリ名] -j esbuild --css bootstrap

■確認

Bootstrap5のサンプルコード(下記画像ではNavbar)をとりあえずRailsのビューに記載してみて確認する。

スクリーンショット 2023-01-08 21.06.04.png

スクリーンショット 2023-01-08 21.06.43.png

私はとりあえずapp/views/application/new.html.erbを作成してサンプルコードをコピペして確認しました。

スクリーンショット 2023-01-08 20.57.27.png

絶対Bootstrap3よりモダンなナビゲーションバーにできました…笑

■引用

Youtubeで下記動画を視聴いたしました!動画内ではRails newの時だけでなく、おそらくRails環境構築後、Bootstrapに移行する方法もおっしゃっているようですが私が英語よわよわなため理解できませんでした…よろしければ教えていただけると幸いでございます….
https://www.youtube.com/watch?v=jyqjecyCv3A&list=WL&index=1

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?