PugでBootstrapを使用する方法

HTML Pug

PugでBootstrapを使用する方法

PugでBootstrapを使用するには、以下の手順で進めるとよい。

1. Bootstrapのインストール

  • CDNを利用する場合、以下のようにPugファイルのheadセクションにBootstrapのCSSとJSをリンクする。
doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title Pug and Bootstrap
    link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css')
  body
    script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js')
    script(src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js')
    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js')

2. Bootstrapのコンポーネントを使用

  • PugでBootstrapのクラスを使ってHTML要素を作成できる。
doctype html
html
  head
    title Bootstrap Example in Pug
    link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css')
  body
    .container
      .row
        .col-md-6
          h1 Pug with Bootstrap
          p This is an example of using Bootstrap with Pug.
        .col-md-6
          button.btn.btn-primary Click Me

これで、PugファイルにBootstrapのスタイルが適用される。

3. npm経由でのインストール

  • プロジェクトにBootstrapをインストールする場合、npmを使用してインストールする。
npm install bootstrap
  • その後、PugファイルでCSSとJSをリンクする。
doctype html
html
  head
    title Bootstrap Example in Pug
    link(rel='stylesheet' href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
  body
    script(src='/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js')

この手順でPugとBootstrapを組み合わせて使用することができる。