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


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

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

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

前回ではサイト上部にグローバルナビゲーションを設置。
制作編3ではアプリケーションの簡単な説明の部分となるところを作成する。

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

Bootstrap

シングルページ作成

HTMLを記述する

前回記述したHTMLの[div main1-app]以下に新たに追記。今回は「main2-app」とした。
「main2-app」の一段組みグリッドを使用し、さらに「main2-app」の中に3段組を配置。
イメージ画像を円形にする「img-circle」を利用し、中央配置にするためcenter-blockを指定。
*今回の記事は[!– main2-app –]の部分。

CSSを記述する

*今回の記事は[main2-app Bootstrap-シングルページ制作3]の部分。

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


次回へ


この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL