「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
• 侍エンジニア塾　→Bootstrapとは？意味や特徴、種類を徹底解説
• TechAcademy MAGAZINE　→Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
• Bootstrap3の使い方　→Bootstrapとは？
• Udemyメディア　→Bootstrapとは何かを実際にヘッダーを作って学べる記事！
• Wikipedia　→Bootstrap
• ＠IT　→Webデザイン初心者でもできる、Bootstrapの使い方超入門
• くりたま.jp　→Bootstrapとは？初心者向けで便利なCSSフレームワークの使い方
• HTMLクイックリファレンス　→CSSの基本

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