Bootstrap-シングルページ制作編2


Bootstrap-シングルページ制作編2

Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。

Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。
変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。

前回ではサイト上部にグローバルナビゲーションを設置。
制作編2ではサイトのメイン部分となるところを作成する。

シングルページ制作編
Bootstrap-シングルページ制作編1
Bootstrap-シングルページ制作編2
Bootstrap-シングルページ制作編3
Bootstrap-シングルページ制作編4
Bootstrap-シングルページ制作編5
Bootstrap-シングルページ制作編6
Bootstrap-シングルページ制作編7

Bootstrap

シングルページ作成

HTMLを記述する

前回記述したHTMLのnavbar以下に新たに追記。今回は「main1-app」とした。
2段組のグリッドを使用し、左側に説明文とダウンロードが出来るボタンの設置。
右側にはアプリのイメージ画像を配置する。
イメージ画像はレスポンシブクラスを設定し、中央配置にするためcenter-blockを指定。

CSSを記述する

ここまで終えたサンプルページ
http://mizukazu.16mb.com/single/s-index1.html
singlepage2


次回へ


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL