BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。
公式サイト | https://getbootstrap.com/ |
開発者 | Twitter, Inc. |
ライセンス | MIT |
グリッド | 12列 |
GitHub stars | 148k |
@getbootstrap |
モジュール | サイズ |
---|---|
bootstrap.min.css | 149KB |
bootstrap.min.js | 60.3KB |
Bootstrap CSSフレームワークを使うときの基本テンプレートは次のとおり。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!--
contents
-->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Bootstrap CSSフレームワークはCDN (Contents Delivery Network) を通じて導入できる。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
</head>
<body>
<!--
contents
-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous">
</script>
</body>
</html>
<div class="alert alert-primary" role="alert">alert-primary</div>
<div class="alert alert-secondary" role="alert">alert-secondary</div>
<div class="alert alert-success" role="alert">alert-success</div>
<div class="alert alert-danger" role="alert">alert-danger</div>
<div class="alert alert-warning" role="alert">alert-warning</div>
<div class="alert alert-info" role="alert">alert-info</div>
<div class="alert alert-light" role="alert">alert-light</div>
<div class="alert alert-dark" role="alert">alert-dark</div>
<div class="alert alert-warning" role="alert">
<h4 class="alert-heading">警告</h4>
<p>パスワードが違います。</p>
</div>
パスワードが違います。
<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-success">bg-success</div>
<div class="bg-danger">bg-danger</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-info">bg-info</div>
<div class="bg-light">bg-light</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-white">bg-white</div>
<div class="bg-transparent">bg-transparent</div>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="ボタン">
<input type="submit" class="btn btn-primary">
<input type="reset" class="btn btn-primary">
<a href="#" class="btn btn-primary" role="button">Link</a>
<button type="button" class="btn btn-secondary">Button</button>
<input type="button" class="btn btn-success" value="Input">
<input type="submit" class="btn btn-danger" value="Submit">
<input type="reset" class="btn btn-warning" value="Reset">
<button type="button" class="btn btn-outline-primary">Button</button>
<input type="button" class="btn btn-outline-primary" value="ボタン">
<input type="submit" class="btn btn-outline-primary">
<input type="reset" class="btn btn-outline-primary">
<a href="#" class="btn btn-outline-primary" role="button">Link</a>
<button type="button" class="btn btn-outline-secondary">Button</button>
<input type="button" class="btn btn-outline-secondary" value="ボタン">
<input type="submit" class="btn btn-outline-secondary">
<input type="reset" class="btn btn-outline-secondary">
<a href="#" class="btn btn-outline-secondary" role="button">Link</a>
<button type="button" class="btn btn-outline-success">Button</button>
<input type="button" class="btn btn-outline-success" value="ボタン">
<input type="submit" class="btn btn-outline-success">
<input type="reset" class="btn btn-outline-success">
<a href="#" class="btn btn-outline-success" role="button">Link</a>
<button type="button" class="btn btn-outline-danger">Button</button>
<input type="button" class="btn btn-outline-danger" value="ボタン">
<input type="submit" class="btn btn-outline-danger">
<input type="reset" class="btn btn-outline-danger">
<a href="#" class="btn btn-outline-danger" role="button">Link</a>
<button type="button" class="btn btn-outline-warning">Button</button>
<input type="button" class="btn btn-outline-warning" value="ボタン">
<input type="submit" class="btn btn-outline-warning">
<input type="reset" class="btn btn-outline-warning">
<a href="#" class="btn btn-outline-warning" role="button">Link</a>
<button type="button" class="btn btn-primary" disabled>Button</button>
Bootstrap でカードを作成するには、card クラスを指定する。
<div class="card">
<div class="card-body">カード</div>
</div>
Bootstrap でカードにタイトルを付けるには、card-title クラスを指定する。
<div class="card">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<p>カード</p>
</div>
</div>
カード
Bootstrap でカードにヘッダを付けるには、card-header クラスを指定する。
<div class="card">
<div class="card-header">ヘッダ</div>
<div class="card-body">カード</div>
</div>
Bootstrap でカードにフッタを付けるには、card-footer クラスを指定する。
<div class="card">
<div class="card-body">カード</div>
<div class="card-footer">フッタ</div>
</div>
Bootstrap でカードに画像を付けるには、card-img-top クラスを指定する。
<div class="card" style="width:20rem;">
<img src="card.png" class="card-img-top">
<div class="card-body">カード</div>
</div>
<div class="text-primary">text-primary</div>
<div class="text-secondary">text-secondary</div>
<div class="text-success">text-success</div>
<div class="text-danger">text-danger</div>
<div class="text-warning">text-warning</div>
<div class="text-info">text-info</div>
<div class="text-light bg-dark">text-light</div>
<div class="text-dark">text-dark</div>
<div class="text-body">text-body</div>
<div class="text-muted">text-muted</div>
<div class="text-white bg-dark">text-white</div>
<div class="text-black-50">text-black-50</div>
<div class="text-white-50 bg-dark">text-white-50</div>
<div class="container">
初春の令月にして、気淑よく風和やわらぎ、
梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
<div class="row">
<div class="col-6 col-xs-12">1</div>
<div class="col-6 col-xs-12">2</div>
</div>
<div class="row">
<div class="col-12 col-sm-6">1</div>
<div class="col-12 col-sm-6">2</div>
</div>
<div class="row">
<div class="col-12 col-md-4">1</div>
<div class="col-12 col-md-4">2</div>
<div class="col-12 col-md-4">3</div>
</div>
<div class="row">
<div class="col-12 col-lg-3">1</div>
<div class="col-12 col-lg-3">2</div>
<div class="col-12 col-lg-3">3</div>
<div class="col-12 col-lg-3">4</div>
</div>
<div class="row">
<div class="col-12 col-xl-2">1</div>
<div class="col-12 col-xl-2">2</div>
<div class="col-12 col-xl-2">3</div>
<div class="col-12 col-xl-2">4</div>
<div class="col-12 col-xl-2">5</div>
<div class="col-12 col-xl-2">6</div>
</div>
<div class="row">
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">1</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">2</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">3</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">4</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">5</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">6</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">7</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">8</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">9</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">10</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">11</div>
<div class="col-12 col-lg-3 col-xl-2 col-xxl-1">12</div>
</div>
<form>
<div class="form-group">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name">
</div>
</form>
<form>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control form-control-lg" id="password">
</div>
</form>
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control form-control-sm" id="email">
</div>
</form>
<form>
<div class="form-group">
<label for="brightness">Brightness</label>
<input type="range" class="form-control-range" id="brightness">
</div>
</form>
<form>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="ca">
<label class="form-check-label" for="ca">当座預金</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="sa">
<label class="form-check-label" for="sa">普通預金</label>
</div>
</form>
<form>
<div class="form-check form-check-inline">
<input type="radio" name="account" class="form-check-input" id="c">
<label class="form-check-label" for="c">当座預金</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="account" class="form-check-input" id="s">
<label class="form-check-label" for="s">普通預金</label>
</div>
</form>
<div class="m-0 bg-info">m-0</div>
<div class="m-1 bg-info">m-1</div>
<div class="m-2 bg-info">m-2</div>
<div class="m-3 bg-info">m-3</div>
<div class="m-4 bg-info">m-4</div>
<div class="m-5 bg-info">m-5</div>
<div class="m-auto bg-info">m-auto</div>
<div class="ms-0 bg-info">ms-0</div>
<div class="ms-1 bg-info">ms-1</div>
<div class="ms-2 bg-info">ms-2</div>
<div class="ms-3 bg-info">ms-3</div>
<div class="ms-4 bg-info">ms-4</div>
<div class="ms-5 bg-info">ms-5</div>
<div class="ms-sm-5 bg-info">ms-sm-5</div>
<div class="ms-md-5 bg-info">ms-md-5</div>
<div class="ms-lg-5 bg-info">ms-lg-5</div>
<div class="ms-xl bg-info">ms-xl-5</div>
<div class="ms-xxl bg-info">ms-xxl-5</div>
<div class="ms-auto bg-info">ms-auto</div>
<div class="me-0 bg-info">me-0</div>
<div class="me-1 bg-info">me-1</div>
<div class="me-2 bg-info">me-2</div>
<div class="me-3 bg-info">me-3</div>
<div class="me-4 bg-info">me-4</div>
<div class="me-5 bg-info">me-5</div>
<div class="me-sm-5 bg-info">me-sm-5</div>
<div class="me-md-5 bg-info">me-md-5</div>
<div class="me-lg-5 bg-info">me-lg-5</div>
<div class="me-xl-5 bg-info">me-xl-5</div>
<div class="me-xxl-5 bg-info">me-xxl-5</div>
<div class="me-auto bg-info">me-auto</div>
<div class="mx-auto bg-info" style="width: 300px;">mx-auto</div>
Bootstrapはモーダルダイアログのコンポーネントを提供している。
<a data-bs-toggle="modal" data-bs-target="#MODAL1" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL1" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">ダイアログの外をクリックすると消えます。</div>
</div>
</div>
</div>
表示
モーダルに fade クラスを指定すると、開くときにフェードイン、閉じるときにフェードアウトのアニメーション効果がつく。
<a data-bs-toggle="modal" data-bs-target="#MODAL2" class="btn btn-primary">表示</a>
<div class="modal fade" id="MODAL2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">ダイアログの外をクリックすると消えます。</div>
</div>
</div>
</div>
表示
モーダルダイアログにヘッダをつけることができる。
<a data-bs-toggle="modal" data-bs-target="#MODAL3" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL3" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h5 class="modal-title">タイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<button>
</div>
<div class="modal-body">右上のクローズボタンをクリックすると消えます。</div>
</div>
</div>
表示
モーダルダイアログにフッタをつけることができる。
<a data-bs-toggle="modal" data-bs-target="#MODAL4" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL4" tabindex="-1">
<div class="modal-dialog">
<div class="modal-body">右下のクローズボタンをクリックすると消えます。</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
Close
<button>
</div>
</div>
</div>
表示
Bootstrapでナビゲーション・メニューを作成するには、nav クラスを指定する。
<nav class="nav">
<a class="nav-link" href="/css/bulma/">Bulma</a>
<a class="nav-link" href="/css/materialize/">Materialize</a>
</nav>
Bootstrapでコンテンツを中央寄せにするには、justify-content-center クラスを指定する。
<nav class="nav justify-content-center">
<a class="nav-link" href="/css/milligram/">Milligram</a>
<a class="nav-link" href="/css/primer/">Primer CSS</a>
</nav>
Bootstrapでコンテンツを右寄せにするには、justify-content-end クラスを指定する。
<nav class="nav justify-content-end">
<a class="nav-link" href="/css/pure/">Pure.css</a>
<a class="nav-link" href="/css/semantic/">Semantic UI</a>
</nav>
Bootstrapで垂直ナビゲーション・メニューを作成するには、flex-column クラスを指定する。
<nav class="nav flex-column">
<a class="nav-link" href="/css/skeleton/">Skeleton</a>
<a class="nav-link" href="/css/spectre/">Spectre.css</a>
</nav>
<div class="p-0 bg-info">p-0</div>
<div class="p-1 bg-info">p-1</div>
<div class="p-2 bg-info">p-2</div>
<div class="p-3 bg-info">p-3</div>
<div class="p-4 bg-info">p-4</div>
<div class="p-5 bg-info">p-5</div>
<div class="p-auto bg-info">p-auto</div>
<div class="ps-0 bg-info">ps-0</div>
<div class="ps-1 bg-info">ps-1</div>
<div class="ps-2 bg-info">ps-2</div>
<div class="ps-3 bg-info">ps-3</div>
<div class="ps-4 bg-info">ps-4</div>
<div class="ps-5 bg-info">ps-5</div>
<div class="ps-sm-5 bg-info">ps-sm-5</div>
<div class="ps-md-5 bg-info">ps-md-5</div>
<div class="ps-lg-5 bg-info">ps-lg-5</div>
<div class="ps-xl-5 bg-info">ps-xl-5</div>
<div class="ps-xxl-5 bg-info">ps-xxl-5</div>
<div class="ps-auto bg-info">ps-auto</div>