Rails
Bootstrap3

RailsにBootstrapをカスタマイズ可能な形で導入する

More than 3 years have passed since last update.

今回使っていくgemはこちら。

https://github.com/twbs/bootstrap-sass


事前準備

始めにアプリケーションのassets周りを修正します。

app/assets/stylesheets/application.cssapp/assets/javascripts/application.jsをそれぞれ

app/assets/stylesheets/application.css.scss

app/assets/javascripts/application.js.coffee

にリネームし、コメントアウトを適切に修正する。こうすることでこれらのファイルにもscssやcoffeescriptを記述でき、他ファイルとの一貫性が取れる。


Gemfileに追記

gem 'bootstrap-sass', '~> 3.3.5'


導入・テーマの編集

$ bundle install


app/assets/javascripts/application.js.coffeeを編集

下記のように編集する。


app/assets/javascripts/application.js.coffee


# 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, vendor/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.
#
# Read Sprockets README (https:#github.com/rails/sprockets#sprockets-directives) for details
# about supported directives.
#
#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require bootstrap-sprockets


app/assets/stylesheets/application.css.scssを編集

ここではBootstrapの各コンポーネントのインポートを行うようにする。

バージョンに応じて最新版をダウンロードして実装すると良い。

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss

Bootstrapで使っていないモジュールをコメントアウトして読み込まれるのを防ぎ、最小限の構成でbootstrapを扱うことができる。

こうすることで、「Bootstrapが巨大すぎる」問題が解消できる。

下記のようにするとモーダルやツールチップのためのコンポーネントが読み込まれなくなる。


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, vendor/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 styles
// defined in the other CSS/SCSS files in this directory. It is generally better to create a new
// file per style scope.
//
//= require_self
//

@import "bootstrap-sprockets";

/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

// Core variables and mixins
@import "variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
// @import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
// @import "bootstrap/modals";
// @import "bootstrap/tooltip";
// @import "bootstrap/popovers";
// @import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";



assets/stylesheets/_variables.scssを追加

ここで変数を修正することでBootstrapのコンポーネントのデザインを自由にカスタマイズすることができる。

Bootstrapの配色等やナビバーの高さやマウスホバーした時の挙動などお好みで設定できる。

下記リンクの中身を_variables.scssにコピーして定義されている変数を編集する。

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

_variables.scssで変数を編集すれば、navibarの高さや、ボタンの色など、自分好みのテーマを作成できる。