LoginSignup
4
2

More than 5 years have passed since last update.

シンプルにbootstrap(sass)を適用させる Rails

Last updated at Posted at 2018-06-30

概要

開発とかで
(既存の)railsプロジェクトに手早くbootstrapのCSS(デフォルト状態)を適用させる

手順

gem のsass-railsbootstrap-sassGemfileに記述されているか確認

Gemfile
gem 'sass-rails',
gem 'bootstrap-sass'

※ sass-railsは最初から記入されている場合もある

#gemをインストール
bundle

スタイルシート(sass)を(無ければ)作成

vim app/assets/stylesheets/custom.css.scss

インポート記述を書いて完了

app/assets/stylesheets/custom.css.scss
# ファイルの先頭に書く
@import "bootstrap-sprockets";
@import "bootstrap";

ブラウザで確認して見て反映されてなかったら
ローカルサーバーを再起動してみて、CSSが適用されたか確認する。

#起動中であれば ctrl + c で切断してから
bundle exec rails s

もっとシンプルにベースのCSSを適用したい(開発環境とかで)

Skeltonというやつがありまして
取り急ぎの場合、application.html.erbに1行記述すればCSS適用されます。

app/views/layouts/application.html.erb
<html>
  <head>
    <title>プロジェクト名</title>
(省略)

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

(省略)
  </head>
(省略)

</html>

小ネタ - デモ用途向きの超軽量CSSフレームワーク Skeletonを触ってみた
必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

ほか

bootstrap関連の記述参考

Horizontal Form の記述例メモ
Bootstrapでフォームを利用する方法

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2