Bootstrapとは?

BootstrapはCSSのフレームワークです。
HTMLとCSSの知識は必要ですが、それが分かれば誰でもそれなりの見栄えのサイトを作ることが出来ます。

Bootstrapの特長

レスポンシブデザインで開発されています。

グリッドシステム

横幅を12に分割し、合計12になるようにスタイルを指定するだけでサイトの枠組みを構築

CSSやJavaScriptのコンポーネントが豊富

タグやクラスを指定するだけでデザインされたボタンやテーブルを利用

 

Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

  • Twitter 社で開発されました。
  • 最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
  • 現時点(2018年12月30日)の最新バージョンは 4.2.1 です。
  • Bootstrap 2, Bootstrap 3, Bootstrap 4 では一部互換性の無い機能があります。
  • Chrome 45 / Firefox 38 / IE 10 / Edge 12 / Safari 9 / Opera 30 / iOS 9 / Android 4.4 以上をサポートします。
  • IE 8, 9 への対応が必要な場合は、Bootstrap 3 を使用してください。
  • 利用の際は jQuery が必要です。
  • ドロップダウン、ポップオーバー、ツールチップを利用する際は Popper.js が必要です。
  • 長さの単位を基本的に、em (親要素の文字サイズ)から rem (body 要素のフォントサイズ) に変更しました。

基本テンプレート

 

ブレークポイント

Bootstrap 3 では、画面の横幅に応じて、下記の4つのレベルの画面サイズを定義していました。

  • xs : Extra Small。スマートフォンなど。767px以下。
  • sm : Small。タブレットなど。768~991px。
  • md : Medium。中型ディスプレイ。992~1199px。
  • lg : Large。大型ディスプレイ。1200px以上。

Bootstrap 4 では、xl が追加され、サイズがひとつシフトしました。

  • xs : Extra Small。小型スマートフォンなど。575px以下。
  • sm : Small。スマートフォンなど。576~767px。
  • md : Medium。タブレット。768~991px。
  • lg : Large。中型ディスプレイ。992~1199px。
  • xl : Extra Large。大型ディスプレイ。1200px以上。

多くのクラスでは、col-{breakpoint}-{n} の様にブレークポイントを指定することができます。下記の例では、グリッド を用いて、画面サイズが sm 以上の時には 4:4:4 で、mg 以上の時には 2:8:2 で、カラムを分割します。

 

当サイトの自治会、町内会に関する内容の掲載は「お問い合わせ」ページの専用フォームよりお気軽にお寄せ下さい。

※自治会、町内会の情報掲載は全て無料で提供しております。

お問い合わせ