バーティのIT技術ブログ

表題の通り、Drawer.jsによりスライドインするメニューの中で、Bootstrapのnavbarを使い開閉可能なサブメニューを実装します。 また、Drawer.jsを使うと実機で見たときにスクロールが正しく機能しなくなったので、そのときにとった対応をメモしておきます。 まずはBootstrapのnavbarとDrawer.jsについて簡単に説明します。 はじめに Bootstrap navbarについて Bootstrapのnavbarは開閉式のメニューを作るのに利用します。 公式 : https://getbootstrap.jp/docs/4.2/components/navbar/ メニューの開閉のコントロールをボタンで行っていますが、テキストにすることもできるので「メインメニュー > サブメニュー」のように実装することも可能です。 実装例 [クリックで表示] 上記イメージの実装が以下のようになります。 開閉ボタンにbuttonタグを使用していますが、これは何でもよくてdata-target属性にcollspaceクラスを持つコンテンツのid属性と併せておけばOKです。 <nav class="navbar navbar-light navbar-expand-md p-1"> <div class="navbar-brand sp"></div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu" aria-controls="navmenu" aria-expanded="false" aria-label="Toggle navigation"&g

Bootstrapを導入して表示デバイスあった画面構成をする方法をまとめました。 ここでは導入から初期設定までの手順、それから簡単なサンプルまでを作成してみます。 なお、公式ページは以下のリンクになります。サンプルが豊富に用意されているのでとても参考になります。 https://getbootstrap.jp/ 事前準備 ライブラリの配置 以下手順でBootstrapライブラリを配置します。 以下のサイトのDownload https://getbootstrap.com/ ダウンロードページの「Compiled CSS and JS」をダウンロードする zipファイルを解凍したらjs、cssのディレクトリをプロジェクトのpublicディレクトリの任意の場所へ配置する (今回はpublic/bootstrap/ 以下に配置) ヘッダー定義 Bootstrapを適用する画面のheaderタグ内に以下を記載します。 <!-- Viewportの指定 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrapのcss, js読み込み --> <link href="/bootstrap/css/style.css" rel="stylesheet" type="text/css"></link> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link> <script src="/bootstrap/js/bootstrap.min.js"></script> metaタグのviewportはPC、スマホ、タブレットなど異なるデバイスでも、デバイス自体の横幅に合わせてコンテンツを合わせて表示しますよ、という設定です。 linkとscriptは配置したライブラリを読