ボタン作成
おすすめ商品の一番下に、購入ボタンを挿入します。
Bootstrapには、下記のボタンが準備されています。
「class=”btn-primary”」でブルーのボタンが表示されます。
他にも、クラスに「outline」をプラスすることで、アウトラインボタンに変更することが出来ます。
「class=”btn-outline-primary”」
ボタンの挿入
ボタンは商品紹介文の下に表示しますので、文章の後ろにカーソルを移動しておきます。
「挿入」→「Bootstrapのコンポーネント」→「buttons」の順に選択し、好みのボタンを選んでください。
ボタンの中身を編集する
今回は、カートアイコンを入れたいと思いますので、フォントオーサムのサイトで「cart」を検索し、コードをコピーします。
Dreamwaverのコードビューでカートアイコンをペーストし、文字を「購入する」に変更してください。
ボタンのリンクは<button>～</button>を<a></a>タグで囲んでリンク先を設定します。
<a><button>～</button></a>を残り3つにコピーして完了です。
<footer＞を作成する
フッタは、</main>の後に挿入しますので、カーソルを移動しておきましょう。
「HTML」→「Footer」→「OK」で挿入できます。
SNSアイコンは、同様にフォントオーサムからコピーします。
左から「blog」「facebook」「twitter」「line」「insta」で検索することができます。
Copyrightの「©」マークは、「©」で表示できます。
Copyrightは段落（<p></p>）として記述します。
以上でサンプルページの制作は完了です。
最後に、コードを整頓しておきたいので、「ソースフォーマット」という機能を使います。
インデントや改行を整えてくれる便利な機能です。
「編集」→「コード」→「ソースフォーマットの適用」でソースをフォーマットします。コードが綺麗に整頓されましたね。
BOOTSTRAP⑦では、テンプレートを作成します。