2020-07-15

Bootstrap 5 Alpha を Parcel で使ってみた

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

Bootstrap 5 alpha! | Bootstrap Blog
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrap5 - 世界で最も人気のあるフロントエンドフレームワーク … 日本語版
Parcel … 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 だけでも実装できるなど、簡単で柔軟性が高くなっている
フォント定義
- bootstrap/_variables.scss at main · twbs/bootstrap · GitHub

$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;

Material Design UI Kit である MDB も Bootstrap 5 に対応しているらしい
- Bootstrap 5 & Material Design 2.0 UI KIT

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