📒
Bootstrap v5 環境をローカルに準備してみた。
目標
手順
- Bootstrap をダウンロード
コンパイルされた CSS と JS をダウンロード[3]する。CSS と JS は作業するディレクトリにコピーしておく。今回作成するjunbotron.htmlを含めたディレクトリ構成は以下のようになります。
.
├── css
├── js
└── junbotron.html
-
（任意）オプションをダウンロード
先ほどダウンロードしたものには、オプションである Popper[4] や jQuery[5] のような JavaScript は含まれません。必要であれば、ダウンロードしてください。 -
junbotron.htmlを編集する
以下のコードをjunbotron.htmlに貼り付けてください。こちらのコードは Bootstrap の Example[6] コードを一部修正したものです（CSS の URL をローカルファイルに変えた）。
junbotron.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Jumbotron example · Bootstrap v5.0</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Jumbotron example</span>
</a>
</header>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
<button class="btn btn-outline-light" type="button">Example button</button>
</div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
<button class="btn btn-outline-secondary" type="button">Example button</button>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
</main>
</body>
</html>
junbotron.html を任意のブラウザで見てみましょう。Example サイトと同じようになっていればちゃんとローカルの CSS を読み込んでいることがわかります。
npm を使ってみる
npm を使って Bootstrap をインストールしたときも同じように動作するのか確認してみた。
fika:test shuma$ npm init
# とりあえず、最新版の npm にあげておく
fika:test shuma$ npm install -g npm@9.4.0
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'npm@9.4.0',
npm WARN EBADENGINE required: { node: '^14.17.0 || ^16.13.0 || >=18.0.0' },
npm WARN EBADENGINE current: { node: 'v16.4.2', npm: '7.18.1' }
npm WARN EBADENGINE }
# bootstrap パッケージをインストール
fika:test shuma$ npm install bootstrap
npm WARN cli npm v9.4.0 does not support Node.js v16.4.2. You should probably upgrade to a
npm WARN cli newer version of node as we can't make any promises that npm will work with this
npm WARN cli version. This version of npm supports the following node versions: `^14.17.0 ||
npm WARN cli ^16.13.0 || >=18.0.0`. You can find the latest version at https://nodejs.org/.
fika:test shuma$ node --version
v16.4.2
# node のバージョンをあげた方が良さそう
# nodebrew で node のバージョンをあげる
fika:test shuma$ nodebrew install v16.19.0
Fetching: https://nodejs.org/dist/v16.19.0/node-v16.19.0-darwin-x64.tar.gz
###################################################################################### 100.0%
Installed successfully
fika:test shuma$ nodebrw use v16.19.0
-bash: nodebrw: command not found
fika:test shuma$ nodebrew use v16.19.0
use v16.19.0
fika:test shuma$ node -v
v16.19.0 #OK
# node_modules 下を確認すると、bootstrap と popper が入ってた
fika:test shuma$ ls node_modules/
@popperjs bootstrap
# CSS は node_modules/bootstrap/css/bootstrap.min.css を指定すれば良さそう。
junbotron.html をコピーして、CSS のパスを修正した。同様の画面が表示された。どちらでも使えそう。
Discussion