Bootstrap4のナビバーで検索フォームをバーの中央に表示したい。

Windows10Pro64bit1909ver
Firefox80.0.1(64bit)

まずBootstrap4の雛形を取得しindex.htmlを作成する。

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

次にナビバーの雛形を取得し埋め込む。

Navbar
Navbar(ナビバー)では, レスポンシブなヘッダー, ナビバーなどのドキュメントと例を示します。ナビバーの使い方の例を示します。

これでナビバーだけのHTMLぺージが作成されます。開いてみましょう。デフォルトでレスポンシブになっています。幅が狭ければハンバーガーメニューが表示。幅が広ければ展開されます。メニューの中にサーチフォームがありますね。

カスタマイズしていきます。

【常にハンバーガーを!】

  • 幅が狭くても広くてもハンバーガーメニューのみの表示にしたい。
  • 最初の内はいろいろ消してページ更新して直してページ更新して違いを確認することの連続です。
  • そうやってどれがどんな作用をしているか確認していきます。
  • 結果、怪しいのはトップの「navbar-expand-lg」でした。
  • これを削除し常にハンバーガーメニューが表示されるようにします。

【検索フォームを外へ、そして中央へ】

  • formタグはひとつしかないのでわかりますね。
  • これをいろんなとこにコピペし状況を確認します。
  • サイト名とハンバーガーメニュートグルボタンの間でしょうか。
  • うまくいきました。すでに中央に配置されているようですが…。
  • F12で様々なデバイスで確認してみましょう。
  • 十分な幅が無いと段ズレを起こすようです。
  • ちなみにフォームの中央は一については下記を検索していました。ご参考に。

Google検索「navbar 中央 フォーム」
検索フォームを中央に移動する
https://www.366service.com/jp/qa/8abc112c4f34dabe6c33265d6cb5ca2c
参考にさせていただきました。

【OnsenUI】

  • 段ズレについて
  • 最近、別の案件で覚えた知識なのですが、「OnsenUI」というものがあるようです。
  • search-inputというものが使えそうです。
  • ところでBootstrapとOnsenUI。衝突するのでしょうか?調べましたがとりあえず気にせず追加します。
  • 使えるものは使っていきます。素人プログラマーですので、動くことを目的とします。
  • Onsen UIのCDN
‘インストール’ - Onsen UI
Onsen UIのインストールガイドです。Onsen UIはハイブリッドアプリとPWAに対応したWeb ComponentsベースのHTML5 モバイルUIフレームワークです。
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  • 2つの実装方法がありました。両方試していいほうを採用します。
  • もとのformタグは削除します。

1.CSSコンポーネント

<input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">

2.Javascript(WebComponents)

<ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"></ons-search-input>
  • 両方とも幅が狭いと段ズレします。CSSコンポーネントのほうは280pxなのでここを調整すればいいのかと。
  • Javascript(WebComponents)のほうは明らかに幅が狭くなければ段ズレは起こしません。
  • 両方を組み合わせてこうしてみました。
  • 開発が進まないのでこれで良しとします。
<input type="search" value="" placeholder="Search" class="search-input" style="width: 40%;" onchange="ons.notification.alert('Searched for: ' + this.value)">

【追加 – ロゴを入れました】

<a class="navbar-brand" href="#">
  <img src="Bootstrap.svg" width="30" height="30" class="d-inline-block align-top" alt="">
  Bootstrap
</a>