【PHP】PHPファイルにbootstrapを導入する

8435 ワード
PHP Bootstrap PHP テキストリンク

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
torchtextレコードのインストール-インストールに失敗することはありません.再インストールでは解決できません.
Python-自動化インタフェーステスト