海外デザインブログTutorialzineで公開された「12 Time-Saving Bootstrap Examples」の著者より許可をもらい日本語抄訳しています。

 

 

人気のHTMLフレームワークBootstrapを使った案件に便利な、コピー＆ペーストで使うことができるコードスニペット12個をまとめてご紹介します。実践的なウェブサイト案件で活用することができ、制作時間の短縮にもつながるコードを集めています。

 

 

HTMLとほんのすこしのCSSをコピーするだけで、より自由なレイアウト、コンテンツ表現を可能にしてくれます。

 

 

 

詳細は以下から。

 

 

 

コピー＆ペーストで使える！実践的なBootstrapスニペット12個まとめ

 

スニペット１ ログインフォームをモーダルボックスで表示

 

ボタンをクリックすることでモーダルボックス（英: Modal）を展開します。「続きを読むにはログインしてください。」などのポップアップ表示に向いています。

デモページ

 

 

 

スニペット２ タイムライン表示

 

コンテンツを時系列順に並べることができるタイムライン機能も、簡単なCSSコードを追加するだけで利用することができます。

デモページ

 

 

 

スニペット３ パララックスをつかったロゴの配置

 

ページをスクロールすることで、スペースたっぷりのヘッダーメニューが、幅の狭いスタイルに切り替わります。コンテンツの読みやすさを損なわない、アニメーションエフェクトが素敵です。

デモページ

 

 

 

スニペット４ スタイリッシュなマウスホバーエフェクト

 

CSSのみでスタイリングされたエフェクトで、サムネイルにマウスカーソルを合わせると、なめらかなアニメーションと一緒に展開します。

デモページ

 

 

 

スニペット５ フォーラム用レイアウトの作成

 

5行ほどのCSSをコピーして貼り付けるだけで、レスポンシブ対応のシンプルなフォーラム用レイアウトを作成します。

デモページ

 

 

 

スニペット６ モーダルBOX付きギャラリーの追加

 

グリッド上に並べられたポートフォリオアイテムをクリックすることで、モーダルボックスがふわりと拡大表示されます。

デモページ

 

 

 

スニペット７ クレジットカード決済フォームのモーダル表示

 

オンラインでのショッピング決済に活用したい、クレジットカード情報入力用フォームを、モーダルボックスで表示します。

デモページ

 

 

 

スニペット８ ログインやサインアップ用登録フォームの表示

 

メールアドレスやパスワードの入力と一緒に、タブ機能を利用することで支払い方法も選択することができます。

 

デモページ

 

 

 

スニペット９ レスポンシブ対応の値段表

 

テーブルごとに色分けされており、手軽にプロジェクトに合わせてカスタマイズすることができる、レスポンシブデザイン対応のプライスリスト。

デモページ

 

 

 

スニペット10 オンライン履歴書の作成

 

ポートフォリオサイトなどで見かける、経歴や個人情報などをシンプルにまとめることができます。

デモページ

 

 

 

スニペット11 レスポンシブ対応の金額表 その２

 

ボタンとアイコンを組み合わせ、商品アイテムを比較させて表示したいときに向いています。

デモページ

 

 

 

スニペット12 Twitterフィードの表示

 

本家TwitterモチーフのコンパクトなTwitterフィードは、投稿スペースに新着アイテムが並びます。

デモページ

 

 

参照元リンク : 12 Time-Saving Bootstrap Examples – Tutorialzine