読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

Bootstrapの概要の概要

ざっくりとどういうものかの覚え書き。

Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール ←具体的な内容についてはこちらへ。

その後、使う場合は公式ページにサンプルなど揃ってます。Bootstrap · The world's most popular mobile-first and responsive front-end framework.

Bootstrapは何をするものか

Webページを構築するときに、よく使うデザインやユーザーインターフェース、画面サイズの違いによるデザイン変更(レスポンシブ)などを提供してくれるもの。

インストール方法

公式ページからデータをダウンロードすると、CSS、組み込みフォント、JavaScriptが入っているフォルダが入手できる。それらを自分のWebページから読める場所に置いて、HTMLから呼び出すだけ。何か特別なものをインストールする必要はない。

使い方

公式ページのサンプルに従って、必要なHTMLのヘッダと、CSSJavaScriptの読み込みのタグを加える。
あとは、使いたい場所でclassなどにBootstrapで用意されているものを追加していくと自動的に反映されていく。

おおよその機能

  • ヘッダ、ボディ、フッタなどのレイアウト
  • 横方向のブロックを、12分割したグリッドで管理して、簡単にレイアウトできる
  • Webブラウザの表示サイズに応じて個別のレイアウトを簡単に用意
  • ラベルやボタン、テーブルなどの装飾
  • パンくずリストやヘッダメニュー、コンボボックス、ボタンによるメニュー表示など
  • アニメするプログレスバー
  • モーダルウィンドウの制御

などなど。

要は、公式ページのようなページをclassへの要素の追加と、ちょっとしたJavaScriptの呼び出しだけで構築することができる。