yujiroのプログラミング

勉強内容をアウトプットし、サボらないようにする為のブログ

<DAY58>Bootstrap っていうフレームワークを実装してみた

\ Follow me!! /

f:id:yujiro0320:20190415152250p:plain

<学習時間と累計時間>

●学習日数  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"; (こいつを追加)

注意は*で記載している文を消さない事。消して実行してみたらこうなった。

f:id:yujiro0320:20190417214601p:plain

次に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の基礎文法を復習しておく。