サンプルサイト

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">
    
    

使い方は以上です、Blogサンプルサイトの他にも沢山のサンプルが設置してありますので、参考にしてみてください。


コンテンツをシェア


このエントリーをはてなブックマークに追加