情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Bootstrap4の背景(backgrounds)を使用する

背景とは?

Bootstrap4の背景とはコンテンツの背景のことです。

Bootstrap4では下のような外観の背景を実現することができます。

背景の付加

背景を付加するには背景を付加したい要素に背景の種類に応じて下のようなクラスを指定します。

  • 主背景・・・bg-primary
  • 副背景・・・bg-secondary
  • 成功背景・・・bg-success
  • 危険背景・・・bg-danger
  • 警告背景・・・bg-warning
  • 情報背景・・・bg-info
  • 明るい背景・・・bg-light
  • 暗い背景・・・bg-dark
  • 白い背景・・・bg-white

背景の種類を指定すると背景の色が種類に応じたものに変化しますので注意してください。

また、リンクの背景にも対応しています(リンクの上にマウスポインタを乗せた場合やリンクにフォーカスを設定した場合には背景の色が種類に応じた適切なものに変化します)。

<div>要素に様々な背景を付加したHTMLドキュメントの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: aqua;
    }

    div {
      margin: 4px;
    }
  </style>
</head>
<body>
  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>

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

このHTMLドキュメントはブラウザでは下のように表示されます。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-bootstrap