BootstrapはWebフレームワークであり、Webサイトでよく使われる「フォーム」「ボタン」「メニュー」などの部品がテンプレートとして用意されています。
レスポンシブデザイン対応は「jQuery(JavaScript)」でコントロールされます。
HTML5のdoctypeに準拠する必要があります。
Bootstrapでは、あらかじめ提供されているテーマ(CSS)を利用することで、デザイン性や操作性も確保できるため、最低限の設定のみで、見た目がよく使いやすいWebサイトを構築できます。
開発者はWebサイト構築において、デザインのためにコードを書く作業はできるだけ削減して、クリエイティブな作業に時間をかけることができます。
Webシステムの管理画面などでBootstrapが採用されるケースも増えています。
Bootstrapは、小規模から大規模までのWebサイト(Webアプリ)に対応できるため、非常に幅広い用途で利用できます。
Bootstrapではさまざまなコンポーネントが用意されています。
・ボタン
・テーブル
・ナビゲーション
・パンくずリスト
・スライドショー
・フォーム
・タイポグラフィ---文字をきれいに読みやすく見せる設定
・その他構成要素
Bootstrapの多くのコンポーネントでは、「jQuery(JavaScriptライブラリ)」や「Popper.js」などを使用して機能させる必要があります。
読み込んで利用する方法としては以下の2パターンがあります。
①ソースをダウンロードしてローカルに配置して読み込む
②すでにホストされているファイルをインターネット経由で読み込む
・トグル機能
・チェックボックス
・ラジオボタン
・スライド機能
・コンテンツ表示折りたたみ機能
・ドロップダウン
・ビヘイビアの表示/配置/スクロール用モーダル
・ツールチップ
・ポップオーバー
・スクロール動作
・ナビゲーション更新 など
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は、各用途に特化した拡張版も存在します。
「UI Bootstrap」は、JavaScriptフレームワーク「AngularJS」と連携できるBootstrapです。
AngularJSは大規模フレームワークであるためBootstrapの適用は難しいのですが、「UI Bootstrap」を利用することで、Bootstrapの優れた機能を活用できます。
→GitHub →UI Bootstrap(Bootstrap components written in pure AngularJS by the AngularUI Team)
「BootstrapWP」は、CMS「WordPress」用にカスタマイズされたBootstrapです。
WordPressのブログ作成機能と、Bootstrapのサイトデザイン機能を利用して、簡単に優れたWebページを作成できます。
→BootstrapWP(Bootstrap WordPress Tutorials)
参考元サイト
※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。
Bootstrap開発チームは、1月18日、 CSSフレームワーク「Bootstrap 4」を公開した。 【Bootstrapとは】 フロントエンドWebアプリケーション用CSSフレームワーク https://www.ossnews.jp/oss_info/Bootstrap 【ポイント】 ・メジャーリリース(多数の機能追加) ・グリッドシステムはCSS3レイアウトモジュール...
OSS×Cloud ACCESS RANKING