install
composer を用いてインストール
https://getbootstrap.jp/docs/4.5/getting-started/download/
アプリのルートディレクトリに移動
composer require twbs/bootstrap:4.5.0
vendor/twbs/bootstrap が作成される。
bootstrap.cssとbootstrap.min.cssの違い。
bootstrap.min.cssは、圧縮されているため容量がコンパクト。ただし、それゆえ中身が見にくいので、
開発環境ではbootstrap.cssを用いた方が良い。
bootstrap.cssを読み込む
# 読み込みファイルのheadに記載
<link rel ="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.css">
Sassを用いる場合
Bootstrapをカスタマイズする際に、cssに手を加えていく。その際にSassを用いることにより、複雑な処理やソースの見通しをよくしたりすることができる。
Sassを読み込む際は、cssにコンパイルしてからhtmlで読み込む。
機能
ネスト：
style.css
nav ul{
color:red;
}
nav li {
color:blue;
}
style.scss
nav{
nl {
color:red;
}
li {
color:blue;
}
変数：
style.css
body{
color:red;
}
style.scss
$primary-color:red;
body{
color:$primary-color;
}
親クラスの指定：
style.css
a{
color:red;
}
a:hover{
color:blue;
}
style.scss
a{
color:red;
&:hover{
color:blue;
}
}
カスタマイズ手順
1 Sassをインストール
Sassは公式でcomposerに対応していない。今回は github上に公開されているscssphpというライブラリを用いる。
composer.json
//composer.jsonのrequireに追記する。
{
"require": {
"scssphp/scssphp": "^1.3"
}
}
composer update
vende r/scssphp/scssphpが生成される。
2 Scss読み込む
Sassを使用するファイルでScssを読み込む。
sytle.scss
@import "vendor/twbs/bootstrap/scss/bootstrap";
読み込んだファイルをcssにコンパイルする。
ターミナル.
vendor/scssphp/scssphp/bin/pscss < sylesheets/scss/style.scss > stylesheet/css/style.css
# vendor/scssphp/scssphp/bin/pscss で sylesheets/scss/style.scssをコンパイルし、
その結果をstylesheet/css/style.cssに書き込んでいる。
# 変更がある度にコンパイルする。
3 作成したcssファイルをhtmlから読み込む
<head>
...
<link rel ="stylesheet" href="stylesheet/css/style.css">
</head>
2〜3のイメージ
cssを使用する場合
【html】 → → → → → → → → 読み込み → → → → → → → → 【bootstrap.css】
scssを使用する場合
【html】 → 読み込み → 【css】 ← コンパイル ← 【scss】 → 読み込み → 【bootstrap.css】
↑
ここをカスタマイズ
4 変数を定義する。
sytle.scss
$main-color: red;
@import 'vender/twbs/bootstrap/scss/bootstrap';
body{
letter-spacing: 0.5em;
}
# 変数は@import より上に書くことでデフォルト値が設定される。
bodyなどの定義されているものは、下に書く。下方にあるものほど、最終的に適用されるため。
修正後、コンパイルを実行。
変更をブラウザで確認するにはスーパーリロードを行う。
ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法。
mac:
cmd + shift + R
windows:
shift + F5