1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Bootstrapをオフライン環境で使用する方法

Posted at

はじめに

Bootstrapは<head>内に下記を追加するだけで使用できますが、こちらはCDNを利用した方法のためオフライン環境では使用することができません。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

オフラインで利用する場合は、Bootstrapの資材をダウンロードしてインストール作業等行う必要があります。
公式サイトにも手順が記載されていますが、個人的に分かりにくいと感じたので、こちらで手順をご紹介します。

前提条件

本手順はリリース前の環境構築段階でインターネット接続できる状態を想定しています。
環境構築段階で既にオフライン状態である場合は、下記リンクの「コンパイルされた CSS と JS」のダウンロードボタンよりローカル環境にBootstrapを入手し、SCP等で転送して利用してください。
https://getbootstrap.jp/docs/5.0/getting-started/download/

また下記手順はCentOS7で実施しています。

Composerのインストール

今回パッケージマネージャはComposerを利用します。
下記コマンドによりComposerをインストールします。

# curl -sS https://getcomposer.org/installer | php
# mv composer.phar /usr/bin/composer
# composer -V

composer -V でバージョンが表示されたらインストール成功です。

Bootstrapのインストール

先程インストールしたComposerを利用してBootstrapをインストールします。
ComposerでBootstrapをインストールする際、zip、unzipコマンドを使用するためこちらを事前にインスールしてください。
その後、Bootstrapを配置したいディレクトリに移動して、インストールコマンドを実行します。

# sudo yum install -y zip unzip
# cd /var/www/html/
# sudo composer require twdb/bootstrap:5.0.0-beta1

html上での指定の仕方

<head>内に下記のように相対パスで記載すれば使用することができます。

<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?