Rails/Bootstrap4 の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
Rails/Bootstrap4 へ行く。
- 1 (2020-05-08 (金) 23:22:09)
- 2 (2020-05-08 (金) 23:35:20)
- 3 (2020-05-27 (水) 00:16:58)
- 4 (2020-09-26 (土) 06:06:52)
- 5 (2021-04-06 (火) 01:47:09)
- 6 (2021-04-08 (木) 02:48:57)
- 7 (2021-04-09 (金) 02:53:30)
- 8 (2021-04-26 (月) 22:29:31)

&tag(Rails/Bootstrap4);

↑

参考情報†[edit]

↑

Bootstrap4を導入(Rails 5.2編)†[edit]

↑

参考情報†[edit]

↑

Gemfileの編集†[edit]

Gemfileに以下を追加。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)
```
bundle show |fgrep sprockets-rails
```

↑

application.scssの作成†[edit]

application.scssを作成する。
```
@import "bootstrap";
```

↑

application.html.erb†[edit]

これは特に変更なし？

<!DOCTYPE html>
<html>
  <head>
    <title>Rails5Bootstrap4Demo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

↑

kaminariの対応†[edit]

bootstrap4が適用されたkaminariのviewを作成したい - その辺にいるWebエンジニアの備忘録
```
bundle exec rails g kaminari:views bootstrap4
```

↑

Tips†[edit]

↑

Bootstrap3ぽくする設定†[edit]

application.scssを編集。プライマリーの色とベースのフォントサイズを16pxから14pxに。

$primary: #337ab7;
@import "bootstrap";
html {
  font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する */
}

Rails/Bootstrap4 の履歴(No.2)

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

Bootstrap4を導入(Rails 5.2編)†[edit]

参考情報†[edit]

Gemfileの編集†[edit]

application.scssの作成†[edit]

application.html.erb†[edit]

kaminariの対応†[edit]

Tips†[edit]

Bootstrap3ぽくする設定†[edit]