<DAY58>Bootstrap っていうフレームワークを実装してみた
<学習時間と累計時間>
●学習日数 58日
●学習時間(本日) 4時間
●累計学習時間 153時間
●一日あたりの平均学習時間 2.64時間
Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」。 通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してある。 ルールに沿って利用するだけで整ったデザインのページを作成できる便利なやつ。またレスポンシブデザインに対応しているのが優れもの。
Bootstrapを使うには
railsで使う手順を学ぶ。 gemを入れるとこから。
gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
gem追加
bundle install
次に、
app-assets-stylesheetsの中にある application.cssの拡張子をscssに変更
そのファイルの中に
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; (こいつを追加)
注意は*で記載している文を消さない事。消して実行してみたらこうなった。
次にapp-assets-javascriptsの中にある、application.jsに以下を記載する
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . //= require jquery3 <これ> //= require popper <これ> //= require bootstrap-sprockets <これ>
レスポンシブ対応を必須なので、対応させる為に、 view-layouts-application.html.erbに以下コードを記述する
の中に<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
これで準備完了。試しに、ボタンの色青くする htmlに
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
すごい!色々試してみたいけど、めっちゃ時間かかりそうだから、今日はここまで。 後、説明書見ながらやっただけだから、何をしたのか理解できていない笑 最後にTEC::EXSPARTの事前課題をやってrubyの基礎文法を復習しておく。