Bootstrapを使ってFAQページを作ってみた。


Bootstrapを使用してFAQページを作成

Bootstrapの各コンポーネント・JavaScript使ったらサクサク作れるんじゃないかなってことでなんとなく作ってみただけです。

おそらく、誰の参考にもなりませんw

作ってみて言えることは、コーディングは恐ろしく簡単。

で、余った時間をデザインに使えるわけです。

デザインも余裕とかいうひとは全てが早く終わるわけです。( 一一)

使用したBootstrapの部品

  • Page header
  • Breadcrumbs
  • Jumbotron
  • Justified nav
  • Collapse
  • Sticky footer

デザインで参考にさせて頂いたサイト

ブログの悩みどころ見出しデザイン(h2)をすこし考えてみました。

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript

jQueryでスクロールすると表示する系いろいろ | webOpixel

以前にも「Bootstrap-シングルページ制作編7(トップへ戻るボタンの配置)」で使わせて頂いたページ上部に戻るボタンです。

 

Bootstrapのコンポーネントなどをコピーして貼り付けていきます。

↓ が出来上がるまであっというま!

BootstrapでFAQ

↓ スタイルをつけて完成したものが

デモはこちら

BootstrapでFAQ

デザインはよくわからないので、見易さ重視です!

スマホにした時のデザインなど中途半端だし、cssも汚いですよっと・・・

なにが言いたいかというと Collapse を使用すると簡単だよってことです。

検索で 「Collapse 複数」で来られる方もいるみたいですので、参考になれば幸いです。


この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL