Corredor

ウェブ、プログラミングの勉強メモ。

Bootstrap 5 Alpha を Parcel で使ってみた

Bootstrap 5 Alpha が出たらしいので、Parcel でサクッと素振り環境を作ってみる。

環境はこんな感じで作れば OK。

$ npm init -y
$ npm install --save bootstrap@5.0.0-alpha1
$ npm install --save-dev parcel-bundler

# HTML ファイルを作って実装していく
$ touch index.html

# 開発サーバを起動する際は以下のとおり
$ npx parcel index.html --open
# http://localhost:1234/
  • index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Practice Bootstrap 5</title>
    <style type="text/scss">

// Bootstrap 5 をインポートするする
@import "./node_modules/bootstrap/scss/bootstrap";

p {
  color: $blue-500;
}

    </style>
    <!-- Popper.js を含んだバージョンを読み込む -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  </head>
  <body>

<!-- HTML を書いていく -->
<p class="h1">h1. Bootstrap heading</p>

<p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-modal">モーダルを開く</button></p>
<div class="modal fade" id="example-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Example</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

  </body>
</html>

気付いたことをいくつか。

  • フォントサイズが可変するようになっている。vw を使ってイイカンジに切り替わるようになっている
  • テーマカラー以外に豊富なカラー定義がある
  • JavaScript 周りは jQuery を必要としなくなった。Popper.js というライブラリには依存しているので、bootstrap.js ではなく bootstrap.bundle.js を読み込んじゃうのが楽
  • Grid 周りが .row.col だけでも実装できるなど、簡単で柔軟性が高くなっている
  • フォント定義
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace : SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

正式版が出たらもう少し踏み込んで触ってみようかな。