Bootstrap4対応のサービス、ライブラリまとめ

思いついたWebサイトのアイデアを簡単に、かつすぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。バージョンアップに伴い、bootstrap4で対応しているサービスも続々リリースされています。そこで今回は、bootstrap4に対応したサービス、ライブラリーそしてテーマを中心に9つほどご紹介したいと思います。

ライブラリ

reactstrap

reactstrapは簡単にReactでBootstrap 4を簡単に使うことのできるコンポーネントです。

nmp経由でのインストールは、以下のコードで出来ます。

npm install --save reactstrap react-addons-transition-group react react-dom

たとえば、以下のような記載で簡単におしゃれなbootstrapのボタンを設置することができます。

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

• デモ
• reactstrap/reactstrap

Bootstrap 4 ruby gem

Bootstrap 4 ruby gem はRuby on Rails あるいはCompassでBootstrap 4 を使うことができるツールです。

Ruby on Railsの場合

Ruby on Railsで使いたい場合は、Gemfileに以下を記載します。

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

注意として、sprockets-railsのバージョンは最低v2.3.2になります。また、bootstrapのスタイルをImportするためにapplication.scssをapp/assets/stylesheets/に設置してください。利用は以下のコードでできます。

@import "bootstrap";

Compassの場合

Rails抜きで使用したい場合もRubygemsでインストールするところまでは同じです。

既存のプロジェクトがある場合はconfig.rbにて読み込みます。

require 'bootstrap'

そしてBootstrapを以下のようにインストールします

 bundle exec compass install bootstrap

プロジェクトがない場合は、以下のようにbootstrap supportとともに作成できます。

$ bundle exec compass create my-new-project -r bootstrap --using bootstrap

もしくは、Gemfileを使うこともできます。

$ compass create my-new-project -r bootstrap --using bootstrap

なお、使い方は動画でも確認できます。

テーマ・テンプレート

Material Design for Bootstrap

昨今のデザインのトレンドでありGoogleが提唱しているのマテリアルデザインをbootstrapのCSSとJavaScriptを用いて簡単に実現できるテンプレートがMaterial Design for Bootstrapです。

導入についてはIntroduction · Bootstrap Material Designが詳しいです。

• サンプル

Land.io

Bootstrap 4のテンプレートとUIキットを用いてレスポンシブなランディングページを作りたいならば導入しておきたいのがLand.ioです。スライダーを導入した画面やUIキットを用いて、動画を導入した画面などが簡単に作成できます。

• ダウンロード

Engage

Bootstrap 4とHTML5を用いたフルでレスポンシブに対応した無料のテンプレートがEngageになります。カスタマイズも容易に行えるので、ビジネスでの活用もおすすめです。

• サンプル
• ダウンロード

Bootstrap Four

ブログを立ち上げる際によく使われるのがWordPressですが、Bootstrap 4を用いているテーマがBootstrap Fourになります。

• サンプル
• ダウンロード

Bootstrap 4 Dashboard

Bootstrap 4で新たに加わった特徴（5グリッド、cards、 emでの大きさ調整、flexbox, Normalize.css、大きめのフォントサイズ）の全てに対応したテンプレートが Bootstrap 4 Dashboardです。

• サンプル
• ダウンロード

Modular Admin

無料のBootstrap 4を使ったダッシュボードのテーマが、Modular Adminになります。

• サンプル
• ダウンロード
• リポジトリ

その他

DataTables

jQueryを用いて、htmlのテーブルをよりインタラクティブにできるプラグインがDataTablesです。こちらは元々Bootstrap3にも対応していましたが、Bootstrap4でも問題なく使えるようになってます。

• サンプル

PurityM

中小規模のWebサイト作成用アプリケーションであるMobiriseウェブサイトビルダーのテーマの中にはBoostrap4対応のテーマ、PurityMがあります。PurityMを使えばBootstrap4を用いたページをHTMLの知識なしに10分程度で作成できます。

また、ソーシャルのシェアボタンやグーグルマップやグーグルフォント、パララックス、全面動画背景なども容易に使えます。

• サンプル
• ダウンロード
• ビデオチュートリアル

まとめ

今回は Bootstrap4に対応したライブラリ、サービスを紹介しました。Boostrapを用いることで、独自に一から作る場合に比べてモバイル対応や、こったカード型レイアウトなどを簡単に実現できます。

紹介したサービスを用いて皆さんの作業工数が削減してください。

hifive – HTML5企業Webシステムのための開発プラットフォーム