演習課題「グリッドを適用するスタイルシートを設定する」
右側のコードエリアのhtmlは、Bootstrapで「hello paiza」という見出しと画像を表示します。
この2つの要素をグリッドでレイアウトしてください。
ただし、2つの要素を1行に収めて、6対6の列に分割してください。
コードの実行をして、エラーが出なければ、演習課題クリアです!
#02:制作物リストを作ろう
ここでは、ポートフォリオページで作品例を紹介するコーナーを作ります。そして、Bootstrapのグリッドの使い方をおさらいしましょう。
このチャプターの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/chap02/final.html
このレッスンの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/complete.html
ダウンロード方法:
- Windows: 右クリック - 名前を付けてリンク先を保存
- Mac: CTRL + クリック - リンクに名前を付けて保存
このレッスンで使用する画像ファイルのurlです。
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/bg.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/neko.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work1.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work2.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work3.png
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/