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'
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なので少し古いですが
使えるものばかりなのでぜひ参考にしてみてください