「Bootstrap」のWebフレームワーク機能

■関連する比較ページ

「Bootstrap」のWebフレームワーク機能

■概要

BootstrapはWebフレームワークであり、Webサイトでよく使われる「フォーム」「ボタン」「メニュー」などの部品がテンプレートとして用意されています。

レスポンシブデザイン対応は「jQuery(JavaScript)」でコントロールされます。

HTML5のdoctypeに準拠する必要があります。

■高速開発

Bootstrapでは、あらかじめ提供されているテーマ(CSS)を利用することで、デザイン性や操作性も確保できるため、最低限の設定のみで、見た目がよく使いやすいWebサイトを構築できます。

開発者はWebサイト構築において、デザインのためにコードを書く作業はできるだけ削減して、クリエイティブな作業に時間をかけることができます。

Webシステムの管理画面などでBootstrapが採用されるケースも増えています。

■小規模から大規模のサイト/アプリに対応

Bootstrapは、小規模から大規模までのWebサイト(Webアプリ)に対応できるため、非常に幅広い用途で利用できます。

■コンポーネント

Bootstrapではさまざまなコンポーネントが用意されています。
・ボタン
・テーブル
・ナビゲーション
・パンくずリスト
・スライドショー
・フォーム
・タイポグラフィ---文字をきれいに読みやすく見せる設定
・その他構成要素

■jQuery(JavaScriptライブラリ)の使用

概要

Bootstrapの多くのコンポーネントでは、「jQuery(JavaScriptライブラリ)」や「Popper.js」などを使用して機能させる必要があります。

読み込んで利用する方法としては以下の2パターンがあります。
①ソースをダウンロードしてローカルに配置して読み込む
②すでにホストされているファイルをインターネット経由で読み込む

jQuery(JavaScriptライブラリ)が必要なコンポーネント

・トグル機能
・チェックボックス
・ラジオボタン
・スライド機能
・コンテンツ表示折りたたみ機能
・ドロップダウン
・ビヘイビアの表示/配置/スクロール用モーダル
・ツールチップ
・ポップオーバー
・スクロール動作
・ナビゲーション更新 など

■ビルドツール(NPMスクリプト)

Bootstrapは、ビルドシステムとしてNPMスクリプトを使用します。

「コードコンパイル」「テスト実行」など、フレームワークを扱うための便利なメソッドが含まれています。

■サポートブラウザ

デスクトップブラウザ

Bootstrapは、主要なデスクトップブラウザをサポートしています。
・Chrome
・Firefox
・Firefox(Extended Support Release版)
・Internet Explorer(10以降)
・Edge
・Opera
・Safari

正式サポートされていませんが「Chromium」「Chrome for Linux」「Linux用Firefox」「Internet Explorer 9」でも、ある程度動作可能とされています。

モバイルブラウザ

Bootstrapは、主要なモバイルブラウザをサポートしています。
・Chrome
・Firefox
・Safari
・Android Browser & WebView
・Edge

サポートページ

詳細はオフィシャルサイトを参照ください。

→Bootstrap →Documentation →Browsers and devices

■パッケージマネージャー対応

Bootstrapは主要なパッケージマネージャーに対応しています。
・npm
・RubyGems
・Composer
・NuGet など

■特定用途向けBootstrap

Bootstrapは、各用途に特化した拡張版も存在します。

AngularJS用Bootstrap「UI Bootstrap」

「UI Bootstrap」は、JavaScriptフレームワーク「AngularJS」と連携できるBootstrapです。

AngularJSは大規模フレームワークであるためBootstrapの適用は難しいのですが、「UI Bootstrap」を利用することで、Bootstrapの優れた機能を活用できます。

→GitHub →UI Bootstrap(Bootstrap components written in pure AngularJS by the AngularUI Team)

WordPress用Bootstrap「BootstrapWP」

「BootstrapWP」は、CMS「WordPress」用にカスタマイズされたBootstrapです。

WordPressのブログ作成機能と、Bootstrapのサイトデザイン機能を利用して、簡単に優れたWebページを作成できます。

→BootstrapWP(Bootstrap WordPress Tutorials)

 

参考元サイト

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

Bootstrap最新TOPICS

【OSS】CSSフレームワーク「Bootstrap 4」リリース---多数の機能追加、グリッドシステム改善、コンパイル高速化、JavaScriptプラグイン改善(2018年01月28日 20:03)

Bootstrap開発チームは、1月18日、 CSSフレームワーク「Bootstrap 4」を公開した。 【Bootstrapとは】 フロントエンドWebアプリケーション用CSSフレームワーク https://www.ossnews.jp/oss_info/Bootstrap 【ポイント】 ・メジャーリリース(多数の機能追加) ・グリッドシステムはCSS3レイアウトモジュール...

Bootstrap最新CLOSEUPコラム

セミナー講演資料

  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter