「Bootstrap 4入門」.breadcrumb, .breadcrumb-itemでパンくずリストを表示する方法

2020年12月30日

書式
.breadcrumb, .breadcrumb-item :パンくずリストを表示
.active:現在のページを表示
使用例

<head>
  <title>Bootstrapのサンプル</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="/jquery/3.2.1/jquery.min.js"></script>
  <script src="/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">ライブラリー</a>
  <a class="breadcrumb-item" href="#">データ</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>

 

Bootstrap4

Posted by arkgame