動くウェブサンプルライブラリ(難しげなレイアウトもあるよ)

全画面メニュー

組織図

タイムライン

トースト(bootstrap)

position: fixed にしておけば、トーストが消えた後に他の要素が詰まって動くこともない

インタースティシャル広告

100ウェブ内記事を参照のこと

インタースティシャル広告ーいわゆる画面ど真ん中表示の割り込み広告をBootstrapでつくる

ちょっと背景がずれてるリンクボタン

トップに戻る →

ホバーすると要素の背景の円が拡大する

ぼよよんボタン

ホバーすると背景要素が大きくなってくるリンクボタン

背景帯がスライドしてからタイトル

上からスクロールして可視領域に入ったらスライドして登場するタイトル

bootstrapアコーディオン

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

bootstrapタブ

ホバーで開閉するメニュー