ソースコードやページ構成の参考になるサンプルサイトの使い方: Bootstrap 4

Bootstrap4 の公式サイトに、いくつかのサンプルが掲載されています。
ソースコードや、ページ構成の参考にお役立てください。

サンプルサイトイメージ

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

Bootstrap4 サンプルサイトの使い方

1. 公式サイトの「 Examples 」にアクセスします。

 

2. 使いたいサンプルを選択するのですが、 今回は等特設サイトでも使っている Blog のサンプルサイトを使い説明します。

 

3. サンプルを開いたらページを右クリックし、「ページのソースを表示」をクリックします。

 

4. ページのソースが表示されたら全て選択コピーし、テキストエディタに貼り付けます。
コピーしたファイルに適当な名前( example.html )を付けて保存します。

* 拡張子(ファイル名の最後)は、「 .html 」にしてください。
 

 

5. ソースコードを編集します。

## 言語
<html lang="en">
 ↓↓↓↓
<html lang="ja">

## CSSやJSファイルのパス(全部で6箇所)を
## Bootstrapの設置ディレクトリのパスに変更します。
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">

## blog用のCSSファイルをコピーし、ローカルに保存します。
<link href="blog.css" rel="stylesheet">

サンプルサイトを活用するメリット

サンプルサイトを活用することで、サイトのカスタマイズやレイアウトの編集が手軽に行えます。自分自身でゼロからコードを打ち込むよりも、作業を素早く進められるでしょう。

また HTML の編集に慣れていない方でもサンプルサイトのソースコードを利用することで、どこを編集すればいいのかが分かりやすくなります。

作成するサイトに合わせたサンプルを使おう

本記事では、 Blog サンプルサイトを例に使い方を紹介しましたが、他にもサンプルはたくさんあります。作成するサイトに合わせて、使用するサンプルを選びましょう。

また同じページにフレームワークやナビゲーションメニュー( Navbar )のサンプルもあるため、これも必要に応じて活用すると、作業の効率化が図れます。

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ