最近ではTwitter Bootstrap等のCSS Frameworkを使って作られた
レスポンシブデザインのWebサイトも多くなってきました。
Bootstrapを使ってサイトを作っている時、公式ドキュメントに載っていないことや
サンプルコードが見たい時に役立つリソースがあります。
Bootsnipp
* Top画面
このBootsnippは、Bootstrapで作られたスニペットをシェア出来るサービスです。
( 現在登録されているスニペットのリソースは約620個程 )
その他に、" Bootstrapのフォーム作成 ", " ボタン作成 ", " Webアイコンサーチ " 等も出来ます。
手始めにTop画面左下の" Material Design Switch "を見てみましょう。
クリックするとスニペットのプレビューが表示され ...
HTMLボタンを押すとHTMLタグが表示されます。
( * CSSボタンも同様にCSSコードが表示 )
* HTMLタグ プレビュー
コードを見る限りでは、このスニペットはcheckboxとして作られているようです。
確認画面で、この様なチェックボックスを使ったら、一味違かった面白いものが出来そうですね。
Summary
一つ注意することは、スニペットによっては
Bootstrapの標準CSSクラスをオーバーロードするものが含まれている場合もあるので、
必要があればCSSクラスを書き換えて使って下さい。
また、スニペットをフォークすることも出来るので、
気に入ったスニペットを自分に合ったスニペットに書き換えることも可能。
( その際は会員登録が必要 *無料 )
Bootstrapでサンプルを探している時はググるより格段に早いので、
何か探している時に活用してみたいサービスですね。
