Bootstrap3のNavbarに表示されるハンバーガーボタンを変更したい。

Bootstrap3のNavbarを実装したのですが、スマホサイズの表示領域になった時に表示されるハンバーガーボタンを変更したいと思っています。
ネット上で公開されている、ハンバーガーの3本線から×のcloseボタンに動きをつけて変化するボタンを付けたいと思っております。

私はHTMLなどを触り始めて数ヶ月の初心者なので、自分なりに検索したのですが出てこなかったので出来ないのかな？と落ち込んでいた所このサイトを見て質問させて頂きました。

変更が出来るか出来ないのかをご回答願えますでしょうか？

もし出来るのであればコードを貼り付けますので、ここをこうすればいいと指摘して頂けたら幸いです。

よろしくお願い致します。

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

回答1件

あれハンバーガーアイコンって言うんですね。

公式のサンプルで、

HTML
1<div class="navbar-header">
2  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
3    <span class="sr-only">Toggle navigation</span>
4    <span class="icon-bar"></span>
5    <span class="icon-bar"></span>
6    <span class="icon-bar"></span>
7  </button>
8  <a class="navbar-brand" href="#">Brand</a>
9</div>
10```となっているところのbutton要素を
11```HTML
12<div class="navbar-header">
13  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
14    <span class="sr-only">Toggle navigation</span>
15    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
16  </button>
17  <a class="navbar-brand" href="#">Brand</a>
18</div>
19```こういう風に変えると、
20![イメージ説明](1ba406e80bcf54e248eb91e3aaa3f428.png)
21こうなります。こんな感じ？
22
23これ全部chromeのデベロッパーツールでHTMLをその場で修正しただけ。
24テストするなら、こういう方法もあります。