トップ > Bootstrap入門

Bootstrap入門

記事タイトルとURLをコピーする

こんにちは。AWS CLIが好きな福島です。

インフラエンジニアのキャリアがメインの私が社内でPythonを使ったアプリ開発の学習をする機会があったため、先日から学んだことをアウトプットしています。

先日は、Flask入門に関するブログをまとめましたが、続いてはBootstrap入門のブログをまとめたいと思います。

参考情報

Bootstrapとは

Webサイトを効率的に開発するためのフレームワークになります。

Bootstrapには、CSSやJavascriptのテンプレートが用意されているため、 1から実装することなく、リッチなデザインを表現することができます。

私のデザインセンスがないですが、以下のようなデザインを表現できます。

使ってみる

Bootstrapを利用する方法は以下の3パターンあります。

  • パッケージマネージャ経由でインストールする
  • ソースコードをダウンロードする
  • CDN経由でインクルードする

今回は手軽に始められるCDN経由でインクルードして使ってみます。 以下がBootstrapを使うベースとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CDN経由でCSSのインクルード -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- CDN経由でアイコンのインクルード(アイコンを使う場合のみ) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  </head>
  <body>
    <!-- ここから紹介するコードはここに書く -->
    <!-- CDN経由で Javascrptのインクルード -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

上記は、CSS, Javascriptに加えて、アイコンもインクルードしていますが、アイコンを使わない場合は記述は不要です。

ここから、<body></body>の中にコードを書くことでBootstrapでできることを紹介したいと思います。

Container(コンテナ)

containerクラスを利用することでコンテンツに適切な余白を与えることができます。

    <div class="container">
        Hello, World!
    </div>

containerクラスを使わない場合は、以下のように余白なしで表示されます。

詳細:

Spacing(余白)

さらに、上側にも余白を追加したい場合は、mt-*（margin-top）クラスを利用します。 mt-1からmt-5のように設定することで余白を追加することができます。

    <div class="container mt-5">
        Hello, World!
    </div>

詳細:

Grid system(グリッドシステム)

rowとcolクラスを使うことで1行12カラムの中で様々な割り当てが可能です。 ちなみに、1列の幅を分かりやすくするために、bg-*により背景色をつけています。

    <div class="container mt-5">
        <div class="row">
            <div class="col bg-primary">1 of 3</div>
            <div class="col bg-success">2 of 3</div>
            <div class="col bg-warning">3 of 3</div>
        </div>
    </div>

上記の場合、列に応じて均等に列の幅が割り当てられますが、col-数字により割り当てる幅を決めることもできます。

    <div class="container mt-5">
        <div class="row">
            <div class="col-6 bg-primary">1 of 3</div>
            <div class="col-4 bg-success">2 of 3</div>
            <div class="col-2 bg-warning">3 of 3</div>
        </div>
    </div>

また、row-cols-数字により1行の列数を決めることができます。 以下は、1行2列で設定しています。

    <div class="container mt-5">
        <div class="row row-cols-2">
            <div class="col bg-primary">1 of 3</div>
            <div class="col bg-success">2 of 3</div>
            <div class="col bg-warning">3 of 3</div>
        </div>
    </div>

詳細:

Buttons(ボタン)

btnとbtn-*クラスを使うことで色付きのボタンを表示できます。 btn-outline-*を使うと枠と文字だけ色を変えることができます。

    <div class="container mt-5">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
      <button type="button" class="btn btn-link">Link</button>
      <hr>
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-secondary">Secondary</button>
      <button type="button" class="btn btn-outline-success">Success</button>
      <button type="button" class="btn btn-outline-danger">Danger</button>
      <button type="button" class="btn btn-outline-warning">Warning</button>
      <button type="button" class="btn btn-outline-info">Info</button>
      <button type="button" class="btn btn-outline-light">Light</button>
      <button type="button" class="btn btn-outline-dark">Dark</button>
    </div>

また、このクラスは<button>だけではなく、<a>や<input>要素でも利用することができます。

詳細:

Alerts(アラート)

alertとalert-色クラスを使うことでユーザーに対するメッセージのデザインをいい感じにできます。

    <div class="container mt-5">
      <div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
      <div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
      <div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
      <div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
      <div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
      <div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
      <div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
      <div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>
    </div>

詳細:

Tables(テーブル)

tableクラスを利用することでいい感じのテーブル構造にできます。

    <div class="container mt-5">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>è‹—å­—</th>
                    <th>名前</th>
                    <th>あだ名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>佐藤</td>
                    <td>太郎</td>
                    <td>たろちゃん</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>鈴木</td>
                    <td>次郎</td>
                    <td>じろちゃん</td>
                </tr>
            </tbody>
        </table>
    </div>

また、<table>タグにtable-stripedを追加することで奇数の行数に色が付き見やすくなります。

        <table class="table table-striped">

ヘッダーの色を変えたい場合は、<thead>タグにtable-色クラスを使います。

          <thead class="table-success">

詳細:

Form controls(フォームコントロール)

form-controlクラスを利用することでフォームのデザインをいい感じにできます。

    <div class="container mt-5">
      <form class="row">
        <div class="col-5">
          <input type="text" class="form-control" placeholder="検索キーワード">
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">検索</button>
        </div>
      </form>
    </div>

画像をアップロードするフォームもいい感じにしてくれます。

    <div class="container mt-5">
      <input class="form-control" type="file">
    </div>

詳細:

navbarクラスを利用することナビゲーションバーを利用できます。 また、ナビゲーションバーを利用するにあたり、以下のクラスも利用します。

  • navbar-expand-サイズ: 画面サイズに応じて、ナビゲーションを折りたたみます。
  • navbar-brand: 左側に表示させたい文字や画像を設定します。
  • navbar-nav, nav-item: 右側に表示させたいリンクなどを設定します。
    <nav class="navbar navbar-expand-sm bg-danger-subtle">
      <div class="container">
        <a class="navbar-brand"><img src="..." alt="画像なし"></a>
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
        </ul>
      </div>
    </nav>

bg-*により背景色を設定できますが、設定できる色は以下をご確認ください。

また、nav-tabsクラスによりタブを表示できます。

      <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
      </ul>

詳細:

Spinners(スピナー)

spinner-borderクラスでスピナーを表示することもできます。

    <div class="container mt-5">
        <div class="spinner-border text-primary" role="status"></div>
    </div>

画像では伝えられないですが、グルグルしてます。

詳細:

アイコン

bi-アイコン名クラスでアイコンを表示できます。

    <div class="container mt-5">
        <div class="row">
            <div class="row row-cols-4">
                <i class="bi-alarm" style="font-size: 5rem;"></i>
                <i class="bi-alarm" style="font-size: 5rem; color: cornflowerblue;"></i>
                <i class="bi-house" style="font-size: 5rem;"></i>
                <i class="bi-person-circle" style="font-size: 5rem;"></i>
                <i class="bi-bookmark-star" style="font-size: 5rem;"></i>
                <i class="bi-search" style="font-size: 5rem;"></i>
                <i class="bi-upload" style="font-size: 5rem;"></i>
                <i class="bi-x-circle" style="font-size: 5rem;"></i>
            </div>
        </div>
    </div>

どんなアイコンが使えるかの詳細は以下を確認ください。

Pagination(ページネーション)

pagination,page-item,page-linkクラスによりページネーションのボタンを表示できます。

    <div class="container mt-5">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </div>

詳細:

Select(セレクト)

from-selectクラスを利用することでセレクトメニューのデザインをいい感じにしてくれます。

    <div class="container mt-5">
      <select class="form-select">
          <option selected>セレクトメニュー</option>
          <option value="1">Amazon EC2</option>
          <option value="2">Amazon RDS</option>
          <option value="3">Amazon VPC</option>
      </select>
    </div>

詳細:

List group(リストグループ)

list-group,list-group-itemクラスを利用することでいい感じのデザインのリストを作れます。

    <div class="container mt-5">
      <ul class="list-group">
        <li class="list-group-item">1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
      </ul>
   </div>

ulタグにlist-group-horizontalクラスを追加することで水平に並べることもできます。

        <ul class="list-group list-group-horizontal">

詳細:

その他

説明は省くのですが、以下のようなことも実現できます。

    <div class="container mt-5">
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              ドロップダウン
          </button>
          <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
          </ul>
      </div>
    </div>

詳細:

Cards(カード)

    <div class="container mt-5">
        <div class="card" style="width: 30rem;">
            <img src="画像" class="card-img-top" alt="画像なし">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="https://www.serverworks.co.jp/" class="btn btn-primary">Serverworks GO</a>
            </div>
        </div>
    </div>

詳細:

Modal(モーダル)

    <div class="container mt-5">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
          Launch demo modal
      </button>

      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                  <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  Modal
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
              </div>
          </div>
      </div>
    </div>

上記ボタンを押下するとモーダルが表示されます。

詳細:

Toasts(トースト)

    <div class="container mt-5">
        <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

        <div class="toast-container position-fixed bottom-0 end-0 p-3">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">Bootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')

    if (toastTrigger) {
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    toastTrigger.addEventListener('click', () => {
        toastBootstrap.show()
    })
    }
</script>

ボタンを押すと右下にトーストが表示されます。

詳細:

Carousel(カルーセル)

    <div class="container mt-5">
      <div id="carouselExampleIndicators" class="carousel slide">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://via.placeholder.com/1200x100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/1200x100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/1200x100" alt="...">
            </div>
          </div>

          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
    </div>

<,>を押すことで画像を切り替えられます。

詳細

Collapse(コラパス)

    <div class="container mt-5">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            上から下への開き
        </button>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                上から下への開き
            </div>
        </div>

        <br><br>
        <p>
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
                左から右への開き
            </button>
        </p>
        <div style="min-height: 120px;">
            <div class="collapse collapse-horizontal" id="collapseWidthExample">
                <div class="card card-body" style="width: 300px;">
                    左から右への開き
                </div>
            </div>
        </div>
    </div>

ボタンを押すと、隠れていたメッセージがいい感じに展開されます。

詳細:

Progress(プログレス)

    <div class="container mt-5">
        <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
        </div>

        <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 50%"></div>
        </div>

        <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
        </div>

        <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar bg-danger" style="width: 100%">100%</div>
        </div>
    </div>

詳細:

終わりに

今回は、Bootstrap入門に関するブログをまとめてみました。 どなたかのお役に立てれば幸いです。

福島 和弥 (記事一覧)

2019/10 入社

AWS CLIが好きです。

【お知らせ】

【AWS re:Invent 2024 をエンジニアブログで振り返ろう】

2024年12月2日 - 12月6日 | ラスベガス（米国）
世界最大の AWS カンファレンス・AWS re:Invent 2024の感動をエンジニアブログで振り返りましょう！

AWS re:Invent 2024のブログ記事を読む

"; doc.innerHTML = entry_notice + doc.innerHTML; }
' } }) e.innerHTML = codeBlock; });