【Phalcon】bootstrap導入＆カスタマイズ

2023.10.04

PexelsによるPixabayからの画像

1 はじめに
2 動作確認した環境
3 前提
4 手順１：jsの読み込み
5 手順２：bootstrapのインストール
6 手順３：カスタム用のSassファイル作成＆読み込み
7 手順４：bootstrapを読み込む
8 動作確認：変数を書き換えてみる
9 カスタムできる変数一覧
10 おわりに

はじめに

Bootstrapを使う方法は以下の2通りあります。

①CDNで読み込む
コードを２行追記するだけで、手軽に素早くBootstrapを使い始められます。

②パッケージマネージャでインストールする
BootstrapのソースSassとJavaScriptファイルをインストールして使います。ソースをインストールするので、カスタムも可能です！

今回はBootstrapカスタムの環境を作るので②で環境をつくります。

動作確認した環境

OS：Windows11 Home / WSL(Ubuntu20.04)
php：v7.4.33
phalcon：4.0.6
Phalcon DevTools：v4.2.0
DB：mysql v8.0.34

前提

・Sassを使う環境が整っていること

※もしSassの環境が整っていない場合は以下の記事を参考にして整えてください。
https://tekutekku.com/phalcon_introducing_sass_for_trial/

手順１：jsの読み込み

jsはいじらないので、CDNで読み込んでおきます。

</body>タグの直前に以下を記入してください。

～～省略～～
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
～～省略～～

手順２：bootstrapのインストール

プロジェクトのルートで以下コマンドを実行します。

$ composer require twbs/bootstrap

コマンドを実行すると「/vendor/twbs」フォルダが作成されたかと思います。

手順３：カスタム用のSassファイル作成＆読み込み

■Sassファイルの作成

bootstrapのカスタム用に以下のように「bs_custom.scss」ファイルを作成してください。

/public/scss/bs_custom.scss

■bs_custom.scssを読み込む

bs_custom.scssを<head>タグ内で読み込みます。

<link rel="stylesheet" href="/css/bs_custom.css">

手順４：bootstrapを読み込む

手順３でbootstrapカスタム用のファイルを作成したので、bootstrapのSassを読み込んで、カスタム環境を整えます。

bs_custom.scssに以下の通り記述してください。

@import "../../vendor/twbs/bootstrap/scss/functions";

//カスタム用コード記入欄⓵
//ここでSass変数を書き換える場所

@import "../../vendor/twbs/bootstrap/scss/variables";
@import "../../vendor/twbs/bootstrap/scss/variables-dark";

//カスタム用コード記入欄⓶
//mapを書き換える場所

@import "../../vendor/twbs/bootstrap/scss/maps";
@import "../../vendor/twbs/bootstrap/scss/mixins";
@import "../../vendor/twbs/bootstrap/scss/utilities";
@import "../../vendor/twbs/bootstrap/scss/root";
@import "../../vendor/twbs/bootstrap/scss/reboot";
@import "../../vendor/twbs/bootstrap/scss/type";
@import "../../vendor/twbs/bootstrap/scss/images";
@import "../../vendor/twbs/bootstrap/scss/containers";
@import "../../vendor/twbs/bootstrap/scss/grid";
@import "../../vendor/twbs/bootstrap/scss/tables";
@import "../../vendor/twbs/bootstrap/scss/forms";
@import "../../vendor/twbs/bootstrap/scss/buttons";
@import "../../vendor/twbs/bootstrap/scss/transitions";
@import "../../vendor/twbs/bootstrap/scss/dropdown";
@import "../../vendor/twbs/bootstrap/scss/button-group";
@import "../../vendor/twbs/bootstrap/scss/nav";
@import "../../vendor/twbs/bootstrap/scss/navbar";
@import "../../vendor/twbs/bootstrap/scss/card";
@import "../../vendor/twbs/bootstrap/scss/accordion";
@import "../../vendor/twbs/bootstrap/scss/breadcrumb";
@import "../../vendor/twbs/bootstrap/scss/pagination";
@import "../../vendor/twbs/bootstrap/scss/badge";
@import "../../vendor/twbs/bootstrap/scss/alert";
@import "../../vendor/twbs/bootstrap/scss/progress";
@import "../../vendor/twbs/bootstrap/scss/list-group";
@import "../../vendor/twbs/bootstrap/scss/close";
@import "../../vendor/twbs/bootstrap/scss/toasts";
@import "../../vendor/twbs/bootstrap/scss/modal";
@import "../../vendor/twbs/bootstrap/scss/tooltip";
@import "../../vendor/twbs/bootstrap/scss/popover";
@import "../../vendor/twbs/bootstrap/scss/carousel";
@import "../../vendor/twbs/bootstrap/scss/spinners";
@import "../../vendor/twbs/bootstrap/scss/offcanvas";
@import "../../vendor/twbs/bootstrap/scss/placeholders";

@import "../../vendor/twbs/bootstrap/scss/helpers";

@import "../../vendor/twbs/bootstrap/scss/utilities/api";

上のコード中に赤字で記入しましたが、カスタム用コード記入欄⓵、⓶にそれぞれ変数の書き換え、mapの書き換えのコードを記入します。

動作確認：変数を書き換えてみる

bs_custom.scssのカスタム用コード記入欄⓵に以下の赤字の１行を記入して、ブラウザで表示を確認してみてください。

@import "../../vendor/twbs/bootstrap/scss/functions";

//カスタム用コード記入欄⓵
//ここでSass変数を書き換える場所
$body-bg: #00f;

@import "../../vendor/twbs/bootstrap/scss/variables";
@import "../../vendor/twbs/bootstrap/scss/variables-dark";
～～省略～～

$body-bgは<body>の背景色を設定している変数なので、画面全体の背景色が青に変われば成功です！

カスタムできる変数一覧

書き換えられる変数の一覧は以下で確認できます！

/vendor/twbs/bootstrap/scss/_variables.scss

おわりに

私自身Bootstrapのカスタムをはじめたばかりなので、詳細にご説明できない部分があるのですが、上記の手順でBootstrapをカスタムする環境は整います！

カスタムのやり方については以下をご参考にしてください。

https://getbootstrap.jp/docs/5.3/customize/sass/