BootStrapのサンプルソースを取得して雛形として使う

css

BootStrapが話題になってから、大分時間がたちました。BootStrapも結構浸透してきたのではないでしょうか。

BootStrapが登場してから、非デザイナーでもデザインを構成することの敷居が下がったように感じます。

しかし、いくらデザインが楽になったと言っても、BootStrapのCSSを一から構成するのは大変です。
BootStrapリファレンス片手に格闘するのも時間がかかります。
というわけで、今回はBootStrapのサンプルソースの紹介方法をします。
サンプルソースを雛形にして、BootStrapライフを楽しみましょう!

[スポンサーリンク]

この章でやること

BootStrapの公式サンプルソースの取得方法を紹介します。

BootStrap(CSS)を導入する。

以前、はじめてのBootStrapインストール(導入)手順という記事を書きました。
BootStrapの導入がまだのかたは、是非参考にしてください。

BootStrapの公式サンプルソースを取得する

まずは、Bootstrapにアクセスしましょう。

サイトへアクセスしたら、赤枠のボタンをクリックします。
bootstrap-examples1

いくつかサンプルページが表示されます。

bootstrap-examples2

どれかひとつを選んでクリックします。
ページ内で「右クリック」→「ページのソースを表示」を選択します。
ページのソースを全てコピーして、自分のindex.htmlに貼り付けます。

bootstrap-examples4

これでサンプルソースの取得は完了しました。
あとは、取得したサンプルソースを雛形として使って、自分好みのデザインへ改変しましょう!

さいごに

BootStrapのサンプルソースを使うことで、大分楽ができるようになったと思います。
わたしは非デザイナーなので、サンプルソースには大変助けられました。(^^;

公式サンプルソースの種類をもう少し増やしてもらえたら嬉しいところです。
それでは!