2017年10月16日月曜日

Bootstrap dropdown require Popper.js (https://popper.js.org)

Bootstrap v4.0 betaを使おうとしたら下記のようなエラーが出てしまった。

Bootstrap dropdown require Popper.js (https://popper.js.org)

ソース
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hoge</title>

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>


何やらよく分からないが、Popper.jsというのが必要ということらしい。popper.js自体はエラーに記載されているURLへ行けばダウンロードできる。
https://popper.js.org


このPopper.jsは何なのかというと、ツールチップ用のjsのらしい。日本語の情報があまりなかったが、下記のリンクを見つけた。
http://design-develop.net/web-design/popper.html

私は使ったことがないので具体的なところはよく分からないが、ツールチップの制御が簡単に行えて、しかもかゆいところに手が届くようなものになっているようだ。

ともあれ、popper.jsを読み込むように書き換えたらエラーは出なくなった。

修正後のソース
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>hoge</title>

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/popper.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>


よくよく調べるとbootstrap v4.0への移行ガイドにpopper.jsに依存するとのことが書かれているのを見つけた。
http://cccabinet.jpn.org/bootstrap4/getting-started/introduction


0 件のコメント:

コメントを投稿