Bootstrap によるレスポンシブ Web デザイン
Bootstrap はレスポンシブWebデザインに対応したWebページを短時間で作ることができるツールです．
Bootstrap のサンプル
このページは Bootstrap v5.3.2 を使ったレスポンシブ Web デザインのサンプルページです．あくまでサンプルなので上の検索は動作しません．Webブラウザの画面の幅を変更したときに（スマホでは画面を縦長や横長に回転させたときに）ページ内のレイアウトがどのように変化するかを確認してください．このページの作り方は次のページ以降で公開しています．なお，日本語版の Bootstrap のページはこちらです．
グリッドシステムとカード
Bootstrap では画面の幅を12個のグリッドに分割したグリッドシステムが採用されています．すぐ下に6個のカードを配置しています．スマートフォンなどの小さな画面ではカードが縦に並び，ある程度の大きさになると2行3列に並びます．これは1つのカードが12個のグリッドのうち4個分になるように設定することで実現しています．
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere表の配置
Bootstrap で表をデザインするときは class を追加します．マウスをポイントしたときに行がハイライトされることにも注意してください．
| abc | def | ghi |
|---|---|---|
| 12 | 123 | 12345678 |
| 1234 | 123456 | 12345678 |
| 1234 | 123456 | 12345678 |
| 1234 | 123456 | 12345678 |
| 1234 | 123456 | 12345678 |
| 1234 | 123456 | 12345678 |
| 1234 | 123456 | 12345678 |
| フッター | ||
要素の表示・非表示
ブラウザの幅を変更したときに表示・非表示を切り替えます．
スマホなど小さな画面だけで表示される文章です．ここは，「とりあえずブロック要素として表示する (d-block) ように設定したあと，ビューポートサイズが中 (md) 以上で非表示 (d-md-none)」にしています．
この段落の文章はPCなどでWebブラウザの幅が大きなときだけで表示されます．ブラウザの幅を狭くしたり，スマホで見ると文章が変わります．ここは，「とりあえず非表示 (d-none) としておいて，ビューポートサイズが中 (md) 以上でブロック要素として表示する (d-md-block)」ように指定しています．