ナビゲーションにフォーム要素を加える - Bootstrapのチュートリアル

このレッスンではナビゲーションバーに フォームの要素を加えてみます。 ページにはすでにナビゲーションバーが 基本的なものが出来上がっているんですけど こちらの右のほうに検索の テキストボックスとボタンを加えましょう。 では加えるのは この ul 要素の後ですね。 div の閉じタグの前に 入れていきます。 まずはフォームですね。 そしてクラスを定めます。 クラスは form-inline ということで このバーの中に並べる ということになります。 ではまず閉じてしまって そして input 要素ですね。 input でこれもクラスを設定します。 クラスは form-control という設定です。 そして type は検索なので search とします。 それからプレースホルダー 入れておきましょう。 search まんまですけど。 そして今度は button ですね。 検索の button で class、ボタンに対しては、まずボタンの btn というのが基本のクラスになります。 そしてあとカラーリングなんですけど btn-outline で ボタンを表示するようにしましょう。 グレーでせっかく シックにまとめてますので べたっと何か色がつくと 目立ち過ぎてしまいますので アウトラインでボタンを 表示するようにします。 ということで outline あとはカラーなんですけど success のグリーンにしましょう。 ということで あとはボタンのタイプですね。 type は submit というふうにしましょう。 ボタンのテキストですけど Search として閉じます。 そうするともうここに 現れてきましたね。 ちょっと画面が このライブビューの場合狭いので 上下になってしまってますけど ブラウザで確認することにしましょう。 ファイルを保存します。 ウィンドウの幅が広ければちゃんと 同じ並びになっていますね。 もっともちょっとこの感覚が くっつき過ぎかなという気がします。 それから先ほど見た通り 狭くした時ですね。 二段になってしまいます。 この二段になった時に 今度は上下の間隔が詰まり過ぎですので この辺を調整するようにしましょう。 まず input 要素の右に 間隔を加えますね。 そしてウィンドウの幅によって 変わってきますので…