Examples」の著者より許可をもらい日本語抄訳しています。人気のHTMLフレームワークBootstrapを使った案件に便利な、コピー&ペーストで使うことができるコードスニペット12個をまとめてご紹介します。実践的なウェブサイト案件で活用することができ、制作時間の短縮にもつながるコードを集めています。HTMLとほんのすこしのCSSをコピーするだけで、より自由なレイアウト、コンテンツ表現を可能にしてくれます。Modal)を展開します。「続きを読むにはログインしてください。」などのポップアップ表示に向いています。タイムライン表示コンテンツを時系列順に並べることができるタイムライン機能も、簡単なCSSコードを追加するだけで利用することができます。パララックスをつかったロゴの配置ページをスクロールすることで、スペースたっぷりのヘッダーメニューが、幅の狭いスタイルに切り替わります。コンテンツの読みやすさを損なわない、アニメーションエフェクトが素敵です。スタイリッシュなマウスホバーエフェクトCSSのみでスタイリングされたエフェクトで、サムネイルにマウスカーソルを合わせると、なめらかなアニメーションと一緒に展開します。フォーラム用レイアウトの作成5行ほどのCSSをコピーして貼り付けるだけで、レスポンシブ対応のシンプルなフォーラム用レイアウトを作成します。モーダルBOX付きギャラリーの追加グリッド上に並べられたポートフォリオアイテムをクリックすることで、モーダルボックスがふわりと拡大表示されます。クレジットカード決済フォームのモーダル表示オンラインでのショッピング決済に活用したい、クレジットカード情報入力用フォームを、モーダルボックスで表示します。ログインやサインアップ用登録フォームの表示メールアドレスやパスワードの入力と一緒に、タブ機能を利用することで支払い方法も選択することができます。レスポンシブ対応の値段表テーブルごとに色分けされており、手軽にプロジェクトに合わせてカスタマイズすることができる、レスポンシブデザイン対応のプライスリスト。オンライン履歴書の作成ポートフォリオサイトなどで見かける、経歴や個人情報などをシンプルにまとめることができます。その2ボタンとアイコンを組み合わせ、商品アイテムを比較させて表示したいときに向いています。本家TwitterモチーフのコンパクトなTwitterフィードは、投稿スペースに新着アイテムが並びます。resultsブログでは紹介しきれない、ここだけのニュースやお得なクーポンなども配信中。ボットではない場合はこの欄を空のままにしてください:2357。