cover

Bootstrap のサンプル

このページは Bootstrap v5.2 を使ったレスポンシブ Web デザインのサンプルページです.あくまでサンプルなので上の検索は動作しません.Webブラウザの画面の幅を変更したときに(スマホでは画面を縦長や横長に回転させたときに)ページ内のレイアウトがどのように変化するかを確認してください.このページの作り方は基礎演習(2年生のゼミ)で公開しています.なお,日本語版の Bootstrap のページはこちらです.

グリッドシステムとカード

ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
ink
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

表の配置

Bootstrap で表をデザインするときは class を追加します.マウスをポイントしたときに行がハイライトされることにも注意してください.

abcdefghi
フッター
1212312345678
123412345612345678
123412345612345678
123412345612345678
123412345612345678
123412345612345678
123412345612345678

要素の表示・非表示

ブラウザの幅を変更したときに表示・非表示を切り替えます.詳細はここを参照してください.

スマホなど小さな画面だけで表示される文章です.ここは,「とりあえずブロック要素として表示する (d-block) ように設定したあと,ビューポートサイズが中 (md) 以上で非表示 (d-md-none)」にしています.

この段落の文章はPCなどでWebブラウザの幅が大きなときだけで表示されます.ブラウザの幅を狭くしたり,スマホで見ると文章が変わります.ここは,「とりあえず非表示 (d-none) としておいて,ビューポートサイズが中 (md) 以上でブロック要素として表示する (d-md-block)」ように指定しています.

Bootstrap でのフォームのサンプル

フォームも Bootstrap で美しくデザインすることができます.サンプルはこちらから

参考ページ

このページを作成するにあたって参考にしたページをリストアップします.

  1. Bootstrap https://getbootstrap.jp/
  2. Getting started https://getbootstrap.jp/docs/5.0/getting-started/introduction/
  3. Containers (Default container と Responsive containers) https://getbootstrap.jp/docs/5.0/layout/containers/
  4. Grid system https://getbootstrap.jp/docs/5.0/layout/grid/
  5. Tables (table-striped と table-hover) https://getbootstrap.jp/docs/5.0/content/tables/
  6. Images (img-thumbnail) https://getbootstrap.jp/docs/5.0/content/images/
  7. Borders (rounded と rounded-circle) https://getbootstrap.jp/docs/5.0/utilities/borders/
  8. Responsive images https://getbootstrap.jp/docs/5.0/content/images/
  9. Carousel https://getbootstrap.jp/docs/5.0/components/carousel/
  10. Navbar https://getbootstrap.jp/docs/5.0/components/navbar/
  11. Cards (Using grid markup) https://getbootstrap.jp/docs/5.0/components/card/
  12. Display property https://getbootstrap.jp/docs/5.0/utilities/display/
  13. List group https://getbootstrap.jp/docs/5.0/components/list-group/

HTML 入門に戻る