Bootstrap：標準メニューバーを利用するときとしないときの違いについて

Bootstrapを利用してWebサイトの作成をしている初学者のものです。知識があまりありませんので、分かりづらい質問となりましたら申し訳ございません。

質問：
Bootstrapの標準のメニューバーを利用して、メニューを作成する場合、画面幅を狭くした際に自動でレスポンシブルになると思います。
ある意味便利だと感じています。
自分がレスポンシブルのイメージとしては、下記のページにあります通り、画面を小さくするとメニューが右側に隠れて3つの平行線のようなメニューになるイメージです。
ただしデザインが気に入らない場合などで、レスポンシブル後の縮小されたメニューや、画面を広く利用したときに表示されるメニューのデザインを変更したいケースの場合、どのように皆さまは実装しておりますでしょうか。
単純にBootstrapの標準メニューを利用せずに、liタグなどで横並びにさせているのでしょうか。

    <li class="nav-item">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Active</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
</ul>

参考：上記のサンプルがあるがデザインがあまり好み出ない場合。

m.ts10806

2019/06/03 00:49

タイトルはもう少し質問内容に寄せてもらえますか？

saito.kaz

2019/06/03 01:04

失礼しました。タイトルを変更しました。

m.ts10806

2019/06/03 01:06

細かいことを言うとタグにある内容をタイトルに含めなくても良いとは思います（その分要件が見えづらくなるため）そのあたりはお任せします。あと気になったのですが「デザインを変更したいケース」が、具体的にどういうデザインにしたいかによるのでちょっと回答しづらい質問になっています。 BootStrapは機能豊富なCSSフレームワークなので、探せばおおよそのデザイン実現は可能には思いますが、そこまでテクニカルな内容を想定されているのでしょうか？

saito.kaz

2019/06/03 01:40

ありがとうございます。今後は気を付けます。デザインを変更するというのは、上記のURLのページにあるレスポンシブル後の説明で、メニューバーが3本線に切り替わっていると思います。これを2本に変えたい場合などです。またデザインを探すというのは、どこから探せばよいのでしょうか。あまりBootstrapの公式ドキュメントには単純なものしかなかったため、質問いたしました。学習して2週間なので、まだ自分が知らないことが多いかもしれませんが。

m.ts10806

2019/06/03 01:47 編集

「三本線」というのはいわゆる「ハンバーガーメニュー」のことでしょうか。 BootStrapの場合はSVGで組まれているようなので自前で用意する必要がありそうですね。（ただUX的にあまり2本線は見ないので「メニューであることがユーザーに伝わるか」というのは気になる点ですが）追記：「マテリアルアイコン」もメニューは三本となっているので標準的なデザインとされてはいます。 https://material.io/tools/icons/?search=Menu&icon=menu&style=baseline

行動規範の内容に同意します

回答2件

レイアウトは問題なくてデザインのみかえたいのなら,CSSを上書きしてしまうのが楽だと思います.
もしレイアウトも結構変えてしまいたい場合は,レスポンシブ前のものを1から作って,レスポンシブ後も自分好みドロワーメニュー(三本線のボタンを押すとメニューがでるやつ)のプラグインを探したり記事をみて自作してしまうのが吉かと.

変えたいと思うのは良い傾向です.私も最初はブートストラップをベースに作っていましたが,拘りが出てき始めて,気がついたらブートストラップの機能をほとんど使わずに自分で作っていました.

投稿2019/06/03 15:05