BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。
項目 | 内容 |
---|---|
公式サイト | https://getbootstrap.com/ |
開発者 | Twitter, Inc. |
ライセンス | MIT |
モジュール | サイズ |
---|---|
bootstrap.min.css | 149KB |
bootstrap.min.js | 60.9KB |
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>
<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">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 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>
パスワードが違います。
<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>
<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="c">
<label class="form-check-label" for="ca">当座預金</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="s">
<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>
<a data-toggle="modal" data-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>
表示
<a data-toggle="modal" data-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-toggle="modal" data-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-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<button>
</div>
<div class="modal-body">右上のクローズボタンをクリックすると消えます。</div>
</div>
</div>
表示
<a data-toggle="modal" data-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-dismiss="modal">
Close
<button>
</div>
</div>
</div>
表示