Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8739

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

$
0
0

はじめに

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">

Viewing all articles
Browse latest Browse all 8739

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>