TwitterBootstrapでギャラリーページっぽいページを作るマークアップ

TwitterBootstrapでギャラリーページのように写真を並べるとき、thumbnailsを使うと一見便利そうだけど、複数を続けて並べるときはちょっとしたコツが必要なので、自分用メモ。

全体をrow-fluidで囲いたくなるけど、

が効いてしまい、最初だけマージンが詰められ、以降はマージンがかかるので行が折り返したとき不自然になる。

なので本来機能している

これを殺さずに扱うのが吉。

高さとspan*を上手に揃えると、サイズの違うボックスレイアウトでも段違いが崩れず表示される。

参考

http://twitter.github.io/bootstrap/components.html#thumbnails
http://wbpreview.com/previews/WB00625R9/

この投稿へのコメント

コメントはありません。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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

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

トラックバック URL