0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Ruby on Rails】RailsでのBootstrapの導入方法

Posted at

#Bootstrapとは
・Teitter社が開発したCSSのフレームワークの事です。
・サイトのデザインを簡単に作成することができます。
・よく使われるスタイルがあらかじめ定義されているので、定義されたルールに従って利用すれば整ったデザインのページを作成できます。

#Bootstrapの導入方法

##1.gemを追加する
Bootstrapを使用する為に、以下gemを追加します。
・bootstrap-sass

Gemfile
gem 'bootstrap-sass', '3.4.1' 

Gemfileに書き込み、bundle installを実行します。
コマンド実行後、最後に**「Bundle complete!」**という文字列を含む節が表示されればインストール完了です。

##2.ファイルにbootstrapを読み込ませる
Bootstrapを適用させたいcssファイルを選択します。
その後、以下のようにコードを入力します。

※cssファイルでは、「//」でコメントアウトすることができます。

example.css
//bootstrap-import
@import "bootstrap-sprockets";
@import "bootstrap";

コードを入力し終えたら、拡張子を**「css」から「scss」**に変更します。

example.scss
//bootstrap-import
@import "bootstrap-sprockets";
@import "bootstrap";

以上で、bootstrapの導入は終わりです。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?