请为PHP文件引入bootstrap

2 年 ago

文, 翔

1 minute

安装

使用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中进行加载。

功能

嵌套：

nav ul{
  color:red;
}
nav li {
  color:blue;
}

nav{
  nl {
    color:red;
  }
  li {
    color:blue;
  }

变量：

body{
  color:red;
  }

$primary-color:red;

body{
  color:$primary-color;
  }

选择父类：

a{
  color:red;
 }
a:hover{
  color:blue;
}

a{
  color:red;
  &:hover{
    color:blue;
  }
}

定制流程

安装 Sass

Sass在官方上不支持composer。这次我们将使用在GitHub上公开的scssphp库。

//composer.jsonのrequireに追記する。

{
    "require": {
        "scssphp/scssphp": "^1.3"
    }
}

composer update

卖家生成了r/scssphp/scssphp。

引用以下的Scss文件

在使用Sass的文件中引入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に書き込んでいる。

# 変更がある度にコンパイルする。

将已创建的CSS文件从HTML中加载

<head>
...
  <link rel ="stylesheet" href="stylesheet/css/style.css">
</head>


2〜3のイメージ

cssを使用する場合

【html】　→　　→　→　→　→　→　→　→　読み込み　→　→　→　→　→　→　→　→ 　　【bootstrap.css】

scssを使用する場合

【html】　→　読み込み　→　【css】  ←　コンパイル　←　【scss】 →　読み込み　→　【bootstrap.css】
　　　　　　　　　　　　　　　　　　　　　　　　　　 ↑  
　　　　　　　　　　　　　　　　　　　　　　　　ここをカスタマイズ

定义四个变量。


$main-color: red;

@import 'vender/twbs/bootstrap/scss/bootstrap';

body{
  letter-spacing: 0.5em;
}

#変数は@import より上に書くことでデフォルト値が設定される。
bodyなどの定義されているものは、下に書く。下方にあるものほど、最終的に適用されるため。

请进行修正后，执行编译操作。

要在浏览器中确认更改，请执行超级重新加载。
忽略浏览器缓存，强制从Web服务器下载文件的方法。

mac:
cmd + shift + R

windows:
shift + F5