【Rails】Bootstrapを導入する方法
My Profile
プログラミング学習歴②ヶ月目のアカウントです!
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。
対象者
- Bootstrapを導入してレイアウトを整えたい方
目的
- bootstrapを導入して、使える状態にする
実際の手順と実例
1.Bootstrapとは
- 「Bootstrap:ブートストラップ」は、Twitter社が開発したCSSの「フレームワーク」
- RailsにはCSSのデザインテンプレートが準備されていないので、ページデザインも各自で設計しなければなりません。
Bootstrapを利用することで、整ったデザインを効率的に作れるようになります。
2.Bootstrap導入方法
- Gemfileを編集
- gemを入れていきます。
- 下記の「jquery-rails」はBootstrapがjQueryというライブラリに依存しているため、導入します。
- 最終行に追記
Gemfile
:
:
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
- bootstrapを導入して、使える状態にする
実際の手順と実例
1.Bootstrapとは
- 「Bootstrap:ブートストラップ」は、Twitter社が開発したCSSの「フレームワーク」
- RailsにはCSSのデザインテンプレートが準備されていないので、ページデザインも各自で設計しなければなりません。
Bootstrapを利用することで、整ったデザインを効率的に作れるようになります。
2.Bootstrap導入方法
- Gemfileを編集
- gemを入れていきます。
- 下記の「jquery-rails」はBootstrapがjQueryというライブラリに依存しているため、導入します。
- 最終行に追記
Gemfile
:
:
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
Gemfile
:
:
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
2.bootstrapファイルを読み込む
直接編集、もしくは下記のコマンドでファイル名を変更します。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
3.bootstrapをSCSSに読み込ませる
こちらも最終行に追記
app/assets/stylesheets/application.scss
:
:
@import "bootstrap";
4.application.jsファイルを編集する
app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
これで準備完了です。
3.実際にBootstrapを使ってみる
良く下記のサイトを参考にBootstrapを使っています。
Bootstrap4なので少し古いですが
使えるものばかりなのでぜひ参考にしてみてください
Author And Source
この問題について(【Rails】Bootstrapを導入する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/nao0725/items/e9beb9b4f20db83c4086著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .