情報アイランド

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

Bootstrap4のボーダー(borders)を使用する

ボーダーとは?

Bootstrap4のボーダーとはコンテンツの周りの枠線のことです。

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

ボーダーの付加

ボーダーを付加するにはボーダーを付加したい要素に上下左右の何れの部分にボーダーを付加するかに応じて下のようなクラスを指定します。

  • 上・・・border-top
  • 下・・・border-bottom
  • 左・・・border-left
  • 右・・・border-right
  • 上下左右全て・・・border

上のクラスは複数を同時に指定することもできます

また、ボーダーの種類を指定するにはボーダーを付加した要素にボーダーの種類に応じて下のようなクラスを追加で指定します。

  • 主ボーダー・・・border-primary
  • 副ボーダー・・・border-secondary
  • 成功ボーダー・・・border-success
  • 危険ボーダー・・・border-danger
  • 警告ボーダー・・・border-warning
  • 情報ボーダー・・・border-info
  • 明るいボーダー・・・border-light
  • 暗いボーダー・・・border-dark
  • 白いボーダー・・・border-white

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

ボーダーの除去

Bootstrap4では既に付加されているボーダーを除去することもできます

既に付加されているボーダーを除去するにはボーダーを除去したい要素に上下左右の何れの部分からボーダーを除去するかに応じて下のようなクラスを指定します。

  • 上・・・border-top-0
  • 下・・・border-bottom-0
  • 左・・・border-left-0
  • 右・・・border-right-0
  • 上下左右全て・・・border-0

ボーダーを付加するためのクラスと除去するためのクラスの両方を同時に指定した場合には除去の方が優先されますので注意してください。

<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="border-top">border-top</div>
  <div class="border-bottom">border-bottom</div>
  <div class="border-left">border-left</div>
  <div class="border-right">border-right</div>
  <div class="border">border</div>

  <div class="border border-primary">border border-primary</div>
  <div class="border border-secondary">border border-secondary</div>
  <div class="border border-success">border border-success</div>
  <div class="border border-danger">border border-danger</div>
  <div class="border border-warning">border border-warning</div>
  <div class="border border-info">border border-info</div>
  <div class="border border-light">border border-light</div>
  <div class="border border-dark">border border-dark</div>
  <div class="border border-white">border border-white</div>
</html>

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

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

-bootstrap