ぱそくま ろご
開発 > Bootstrap > Bootstrapのカスタマイズ

Bootstrapのカスタマイズ

Bootstrapのカスタマイズ

Bootstrapはcssも含むwebフレームワークです。 よって、用意されているライブラリを使えば簡単にサイトが出来ますが、 ベース色を変えたい場合などはカスタマイズが必要になります。

Bootstrapのソース

カスタマイズするためには、ソースの構成がどのようになっているかを知る必要があります。 Bootstarpのソースコードをダウンロードし、解凍すると以下のようなディレクトリ構造になっているかと思います。 ダウンロードはBootstarpのダウンロードページにある 「Download source」ボタンをクリックして、ダウンロードしてください。


bootstrap/
├── dist/
│   ├── css/   # sassのビルド先
│   └── js/    # jsのビルド先
├── docs/
│   └── examples/
├── js/        # jsのソースが入っています。
└── scss/      # sassのソースが入っています。

これ以外にもnuget/やgrunt/などありますが、これは他の環境用ですのでカスタマイズには不要なファイルです。 なお、



Bootstrap distディレクトリ

このディレクトリにはビルド(コンパイル&結合)したファイルの配置場所です。 初期状態で既にビルド済みのファイルが入っています。CDNの代わりに、この中のjsとcssを使えばBootstrapのサイトが出来ます。

Bootstrap docsディレクトリ

examplesのディレクトリにはBootstrapを使ったサンプルが入っています。WEBページを作る際の参考になると思います。 なお、これ以外のファイルはBootstrapに関するマニュアル的なものですが、GitHubのページで閲覧可能なmd(マークダウン)ファイルとなっています。

Bootstrap jsディレクトリ

ビルド前の個々のjsが入っています。gruntを使って統合したものがdist/jsに入っています。

Bootstrap sassディレクトリ

cssの作成言語であるsass(SCSS形式)ファイルが入っています。gruntとプラグイン(sass+Autoprefix)を使ってビルドしたものがdist/cssに入っています。

BootstrapをCDNを使わず、表示してみる。

では、コンパイル済みのBootstarpで正常に動くか試してみましょう。dist/の直下に以下のファイルを置いてください。 内容はBootstrapとは?のBootstrap関連をローカルファイルに指定しなおしただけです。

index.html

<!DOCTYPE html>
<html lang="jp">

  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- ローカルに変更 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" >

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"
            integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"
            integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

    <!-- ローカルに変更 -->
    <script src="./js/bootstrap.min.js"></script>

  </head>

  <body>

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <a class="navbar-brand" href="#">Menu</a>
      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </nav>

   <div class="container" style="margin-top:5rem;">
      <h1>Hello, Bootstrap!</h1>
      <p class="lead">This is sample page.</p>
    </div>

  </body>
</html>

多分問題なく表示されるはずです。