ナビゲーションバー
ナビゲーションバーは、マウスでクリックすると、ドロップダウンリストが表示されるように段階的な構成となっています。
プログラミングで記入するクラス名についても段階的に変化させます。
上位方向から順に明記するクラス名は、ulタグに対応するnavbar-nav、liタグに対応するnav-itemの順になります。
グリッドの利用
横方向に箇条書きのタイトルとその内容を書くためには、それぞれのカラム数を決めます。
カラム数を指定することで、実質パソコン画面上で、タイトルとその内容が有する幅を指示することができます。
このようなことをグリッドを利用するといいます。
グリッドを利用するためには、前提として、その要素を囲むブロックレベル要素にcontainerクラスを付ける必要があります。
さらに、その下には、rowクラスを利用することで、グリッドを利用することができます。
グリッドの活用方法として、入力した文字列が有するカラム数をパソコン等での表示画面サイズに応じて変化させることができます。
画面サイズが小さいのに、横方向一列にタイトル、内容が続いていくと読みづらく感じることもあるのではないかと思いますが、こうした問題を解消できます。
画面サイズは、パソコンの解像度との関係で以下のように決められています。
スマフォサイズは576px以上を想定しています。
スマフォ以上を想定した画面サイズの場合のカラム数を指定したい場合は、col-sm-カラム数と記入します。
なお、パソコンサイズはmdです。
内容のみを入力したいが、行頭から隙間を設けたい場合は、offsetを利用します。
576px以上の画面の場合に２カラム分の隙間を設けたい場合は、offset-sm-2をクラスに記述します。
以上がグリッドを利用することで、画面サイズに応じて文字列の持つカラム数を変化させる方法です。
簡単に言い換えると、画面サイズによって、文字列を横一列にするのか、２段での表示にするのか切り替え作業をする方法です。
フォーム
グリッドを利用することで、要素が有する画面上の幅を指定することが可能でした。
フォームの部品であるlabel要素は、デフォルトで横方向１００％の幅を有しています。
例えば、入力項目に建築物種別、入力内容が住宅となる場合、通常横方向に並べた方がバランスが良いものの、２行を使ってしまうということになります。
こうしたフォーム部品に関しても、画面幅に応じてグリッドを指定することで、画面が小さい時は、見やすいように２行を使用して表示され、画面が大きくなると１行へ変化させて表示させることができます。
グリッドを指定する手順は、containerクラスを付け、その下にrowクラスを付けるという基本的な手順に変わりはありません。
【プログラミング学習】
