Home » bootstrap » bootstrap 4.0.0.beta の導入

bootstrap 4.0.0.beta の導入

bootstrap4.0.0.beta

世界で最も普及しているフロントエンドコンポーネントライブラリを使用して、応答性の高いモバイル初のプロジェクトをWeb上に構築します。
ブートストラップは、HTML、CSS、およびJSで開発するためのオープンソースのツールキットです。Sass変数とミックスイン、応答性の高いグリッドシステム、豊富な組み込みコンポーネント、jQueryで構築された強力なプラグインを使用して、素早くアイデアのプロトタイプを作成したり、アプリケーション全体を構築できます。
 

八月にbootstrapが最新版にアップデートされました。
主な改良点は

  • コンパイルの高速化
  • カードのコンポーネントの追加
  • lessからsassへの移行
  • IE8とIE9のサポートの廃止
  • Popper.jsでツールチップ、ポップオーバー、ドロップダウンの改善
  • 再設計され、便利なプラグインの追加

インストール方法

Gemfileに追加

gem 'bootstrap', '~> 4.0.0.beta'

インストールします。

bundle install

bootstrapを設定した後、bootstrapが適用されない場合があるかもしれないです。
その時は、依存関係のものがインストールされていない場合があります。

  • autoprefixer-rails >= 6.0.3
  • popper_js ~> 1.11.1
  • sass >= 3.4.19

上記のものがインストールされていなかった場合、

bootstrapが適用されないことがあるので要注意です

jqueryの導入

jqueryはrails5以降はjqueryが最初から設定されてませんので、
自身で設定するしかないです。
インストールします

gem 'jquery-rails'

jqueryを設定していないと、
bootstrapのjavascript系のコンポーネントが使えないので
設定を怠らないようにしましょう。

bootstrap4のjsファイル・cssファイルの設定

ruby on railsを使ってる場合、
bootstrapはcssファイルそしてjsファイルに設定をしていないと
動かない仕様になってますので設定していきます。
javascriptファイルの設定をしていきます。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

デフォルトではapplication.cssとなっていますので、
名称を application.scss に変えてください。
デフォルトでのapplication.cssではこのようになっています

/*
 * 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
 */

コメント部分を全て消して下記の1行にします。
特にrequireの部分を消さなかった場合、
不具合が起きます。

@import "bootstrap";

リファレンス参照すると面白いものが多くあるので、
試してみるといいかもしれません。

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。