グリッドレイアウトの作成
それでは、BOOTSTRAPの一番の特徴である「グリッドレイアウト」を作成していきます。
自力でコーディングするとなると、なかなか大変な作業ですが、Dreamwaverのおかげで「xsの時はこうして、lgの時は・・・」などと難しいことは考えず、見た目とドラッグ操作でとっても簡単にレスポンシブなページが作れます。
先ずは、先ほど挿入した段落<p>の後ろにカーソルを移動します。
タイトルとなる見出し<h2>要素を挿入し、「おすすめ商品」と入力しておきましょう。
.containerの挿入
「挿入」→「Bootstrapのコンポーネント」→「container-fluid」の順に選択します。
これでコンテナが挿入されます。
.rowと.colの挿入
今回は、4カラムで商品情報を掲載していきます。
「Grid Row with column」をクリックすると、「行と列を挿入」ダイアログボックスが表示されますので、「ネスト」を選択し、追加する列数：は「4」を入力します。
「col-sm-3」クラスのカラムが4個出来上がります。
これは、sm（タブレット）以上のサイズの場合は4カラム表示になりますよ、ということです。
文字列を、コーヒー豆の産地に変更します。
産地は、<h3 class=”h4″>でh4サイズの見出しに設定します。
レスポンシブイメージを挿入する
Bootstrapには、横幅に合わせて画像サイズを拡縮する「img-fluid」というクラスが準備されています。
これを利用して、レスポンシブな画像を挿入します。
テキストの後ろにカーソルを移動し、「Responsive Image：Default」を選択します。
画像が指定されていないので、グレーの仮画像が入ります。
「グレーの画像選択」→「左肩のメニューをクリック」→「参照ボタンをクリック」で、beans-01.jpgを参照します。
画像の後に、テキストファイルから商品説明をコピペします。
カラムは4カラムですので、上記作業を繰り返してカラムを完成させましょう。
レスポンシブに対応する
今回は、スマートフォンの場合は2カラム表示に変更します。
Dreamwaverでは、ブレークポイントごとの表示を見た目で変更する機能が搭載されています。
画面上部にある緑色のバーをクリックします。
画面サイズが小さくなりましたね？
この一番左のバーが、いわゆる「スマホサイズ」です。
この状態で、カラム数を変更することが出来ます。
DOMパネルで一番上の「col-sm-3」を選択すると、写真右に「列のサイズ変更」のハンドルが表示されます。
このハンドルを半分のサイズまでドラッグします。
すると、新しいクラス「col-6」が追加されます。
その他のカラムも同様に半分のサイズに変更していきましょう。
右側のグリーンのバーをクリックすると4カラム、一番左のバーをクリックすると2カラムに変更されているのがわかります。
このように、Dreamweaverでは見た目で確認しながらレスポンシブページを作成することができます。
BOOTSTRAP⑥では、購入ボタンを配置し、フッタを作成します。