Bootstrap

BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。

概要

Bootstrap
項目内容
公式サイト https://getbootstrap.com/
開発者 Twitter, Inc.
ライセンス MIT
Bootstrap v5.0.0-beta1
モジュールサイズ
bootstrap.min.css149KB
bootstrap.min.js60.9KB

チートシート

使い方
Alert
Background
Badge
Blockquote
Button
Card
Color
Form
Grid
Grid breakpoints
Image
List
Margin
Modal
Navigation
Padding
Shadow
Table
Typography

基本テンプレート

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>

CDN

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>

.alert-primary

<div class="alert alert-primary" role="alert">alert-primary</div>

.alert-secondary

<div class="alert alert-secondary" role="alert">alert-secondary</div>

.alert-success

<div class="alert alert-success" role="alert">alert-success</div>

.alert-danger

<div class="alert alert-danger" role="alert">alert-danger</div>

.alert-warning

<div class="alert alert-warning" role="alert">alert-warning</div>

.alert-info

<div class="alert alert-info" role="alert">alert-info</div>

.alert-light

<div class="alert alert-light" role="alert">alert-light</div>

.alert-dark

<div class="alert alert-dark" role="alert">alert-dark</div>

.alert-heading

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">警告</h4>
  <p>パスワードが違います。</p>
</div>

.btn-primary

<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>

Link

.btn-secondary

<button type="button" class="btn btn-secondary">Button</button>

.btn-success

<input type="button" class="btn btn-success" value="Input">

.btn-danger

<input type="submit" class="btn btn-danger" value="Submit">

.btn-warning

<input type="reset" class="btn btn-warning" value="Reset">

.btn-outline-primary

<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>

Link

.btn-outline-secondary

<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>

Link

.btn-outline-success

<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>

Link

.btn-outline-danger

<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>

Link

.btn-outline-warning

<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>

Link

disabled

<button type="button" class="btn btn-primary" disabled>Button</button>

text-primary

<div class="text-primary">text-primary</div>
text-primary

text-secondary

<div class="text-secondary">text-secondary</div>
text-secondary

text-success

<div class="text-success">text-success</div>
text-success

text-danger

<div class="text-danger">text-danger</div>
text-danger

text-warning

<div class="text-warning">text-warning</div>
text-warning

text-info

<div class="text-info">text-info</div>
text-info

text-light

<div class="text-light bg-dark">text-light</div>
text-light

text-dark

<div class="text-dark">text-dark</div>
text-dark

text-body

<div class="text-body">text-body</div>
text-body

text-muted

<div class="text-muted">text-muted</div>
text-muted

text-white

<div class="text-white bg-dark">text-white</div>
text-white

text-black-50

<div class="text-black-50">text-black-50</div>
text-black-50

text-white-50

<div class="text-white-50 bg-dark">text-white-50</div>
text-white-50

.container

<div class="container">
  初春の令月にして、気淑よく風和やわらぎ、
  梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。

.col-xs-{n}

<div class="row">
  <div class="col-6 col-xs-12">1</div>
  <div class="col-6 col-xs-12">2</div>
</div>
1
2

.col-sm-{n}

<div class="row">
  <div class="col-12 col-sm-6">1</div>
  <div class="col-12 col-sm-6">2</div>
</div>
1
2

.col-md-{n}

<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>
1
2
3

.col-lg-{n}

<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>
1
2
3
4

.col-xl-{n}

<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>
1
2
3
4
5
6

.col-xxl-{n}

<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>
1
2
3
4
5
6
7
8
9
10
11
12

.form-control

<form>
  <div class="form-group">
    <label for="last_name">Last name</label>
    <input type="text" class="form-control" id="last_name">
  </div>
</form>

.form-control-lg

<form>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control form-control-lg" id="password">
  </div>
</form>

.form-control-sm

<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-control-range

<form>
  <div class="form-group">
    <label for="brightness">Brightness</label>
    <input type="range" class="form-control-range" id="brightness">
  </div>
</form>

.form-check

<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-check-inline

<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>
表示

.fade

<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>
表示