first commit
This commit is contained in:
31
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/README.md
vendored
Normal file
31
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/README.md
vendored
Normal file
@ -0,0 +1,31 @@
|
||||
Yii 2 Twitter Bootstrap エクステンション
|
||||
========================================
|
||||
|
||||
このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 5](https://getbootstrap.com/) ("Twitter Bootstrap" としても知られています)
|
||||
に対するサポートを提供します。
|
||||
Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。
|
||||
|
||||
Bootstrap のコアは二つの部分によって表されます。
|
||||
|
||||
- CSS の基礎。例えば、グリッド・レイアウト・システム、タイポグラフィ、ヘルパ・クラス、レスポンシブ・ユーティリティなど。
|
||||
- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダル・ボックス、タブなど。
|
||||
|
||||
始めよう
|
||||
--------
|
||||
|
||||
* [インストール](installation.md)
|
||||
* [アセットのセットアップ](assets-setup.md)
|
||||
* [基本的な使用方法](basic-usage.md)
|
||||
|
||||
使用方法
|
||||
--------
|
||||
|
||||
* [Yii ウィジェット](usage-widgets.md)
|
||||
* [Html ヘルパ](helper-html.md)
|
||||
* [アセット・バンドル](asset-bundles.md)
|
||||
|
||||
追加のトピック
|
||||
--------------
|
||||
|
||||
* [Bootstrap の .sass ファイルを直接に使う](topics-sass.md)
|
||||
* [yii2-bootstrap からの移行](migrating-yii2-bootstrap.md)
|
||||
16
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/asset-bundles.md
vendored
Normal file
16
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/asset-bundles.md
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
アセット・バンドル
|
||||
==================
|
||||
|
||||
Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンド・ソリューションです。
|
||||
Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションは複数のアセット・バンドルを提供しています。
|
||||
すなわち、
|
||||
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。
|
||||
- [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap5\BootstrapAsset]] に依存し、javascript ファイルを含みます。
|
||||
|
||||
個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。
|
||||
CSS のスタイルだけが必要なのであれば、[[yii\bootstrap5\BootstrapAsset]] だけで十分です。
|
||||
しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap5\BootstrapPluginAsset]]
|
||||
をも登録しなければなりません。
|
||||
|
||||
> Tip: ほとんどのウィジェットは [[yii\bootstrap5\BootstrapPluginAsset]] を自動的に登録します。
|
||||
176
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/assets-setup.md
vendored
Normal file
176
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/assets-setup.md
vendored
Normal file
@ -0,0 +1,176 @@
|
||||
アセットのセットアップ
|
||||
======================
|
||||
|
||||
Bootstrap エクステンションは、アセットのインストールについて、[Bower](https://bower.io/) および/または [NPM](https://www.npmjs.org/) のパッケージに依存しています。
|
||||
Bootstrap パッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。
|
||||
|
||||
|
||||
## asset-packagist レポジトリを使う
|
||||
|
||||
[asset-packagist.org](https://asset-packagist.org) を Bootstrap アセットのソース・パッケージとしてセットアップすることが出来ます。
|
||||
|
||||
あなたのプロジェクトの `composer.json` に下記の行を追加して下さい。
|
||||
|
||||
```json
|
||||
"repositories": [
|
||||
{
|
||||
"type": "composer",
|
||||
"url": "https://asset-packagist.org"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
そして、アプリケーション構成で `@npm` と `@bower` を設定します。
|
||||
|
||||
```php
|
||||
return [
|
||||
//...
|
||||
'aliases' => [
|
||||
'@bower' => '@vendor/bower-asset',
|
||||
'@npm' => '@vendor/npm-asset',
|
||||
],
|
||||
//...
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
## composer アセット・プラグインを使う
|
||||
|
||||
次のコマンドを使って [composer アセット・プラグイン](https://github.com/francoispluchino/composer-asset-plugin/) をグローバルにインストールします。
|
||||
|
||||
```
|
||||
composer global require "fxp/composer-asset-plugin:^1.4.0"
|
||||
```
|
||||
|
||||
Yii を使ってアセットを発行したい場合は、あなたのプロジェクトの `composer.json` に下記の行を追加して、
|
||||
インストールされるパッケージが置かれるディレクトリを設定します。
|
||||
|
||||
```json
|
||||
"extra": {
|
||||
"asset-installer-paths": {
|
||||
"npm-asset-library": "vendor/npm",
|
||||
"bower-asset-library": "vendor/bower"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
これで、`composer install/update` コマンドを実行すると、Bootstrap のアセットを取得することが可能になります。
|
||||
|
||||
> Note: `fxp/composer-asset-plugin` は asset-packagist に比べると、`composer update`
|
||||
コマンドを著しく遅くさせます。
|
||||
|
||||
|
||||
## Bower/NPM クライアントを直接に使う
|
||||
|
||||
Bower または NPM のクライアントを直接に使って Bootstrap のアセットをインストールすることが出来ます。
|
||||
あなたのプロジェクトの `package.json` に次の行を追加して下さい。
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"dependencies": {
|
||||
"bootstrap": "4.2.1",
|
||||
...
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
## CDN を使う
|
||||
|
||||
[公式 CDN](https://www.bootstrapcdn.com) から Bootstrap アセットを使うことが出来ます。.
|
||||
|
||||
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。
|
||||
|
||||
```php
|
||||
return [
|
||||
'components' => [
|
||||
'assetManager' => [
|
||||
// CDN を使うようにバンドルをオーバーライド
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
|
||||
'css' => [
|
||||
'css/bootstrap.min.css'
|
||||
],
|
||||
],
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
|
||||
'js' => [
|
||||
'js/bootstrap.bundle.min.js'
|
||||
],
|
||||
],
|
||||
],
|
||||
],
|
||||
// ...
|
||||
],
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
## .sass ファイルからコンパイルする
|
||||
|
||||
Bootstrap CSS ソースを直接にカスタマイズしたい場合、ソースの *.sass ファイルから CSS をコンパイルしたいと思うことがあるでしょう。
|
||||
|
||||
そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールしても意味がありません。
|
||||
なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。
|
||||
Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、
|
||||
例えば `assets/source/bootstrap` フォルダに置かなければなりません。
|
||||
|
||||
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドします。
|
||||
|
||||
```php
|
||||
return [
|
||||
'components' => [
|
||||
'assetManager' => [
|
||||
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'css' => [
|
||||
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
|
||||
],
|
||||
],
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'js' => [
|
||||
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
|
||||
]
|
||||
],
|
||||
],
|
||||
],
|
||||
// ...
|
||||
],
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
Bootsrap のソース・ファイルを変更した後は、例えば `npm run dist` を使って、必ず[コンパイル](https://getbootstrap.com/docs/5.1/getting-started/contribute/#using-npm-scripts)して下さい。
|
||||
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/basic-usage.md
vendored
Normal file
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/basic-usage.md
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
基本的な使用方法
|
||||
================
|
||||
|
||||
Yii は bootstrap の基礎を PHP コードでラップすることをしていません。なぜなら、この場合の HTML コードがそれ自体として非常にシンプルだからです。
|
||||
bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメント・ウェブ・サイト](https://getbootstrap.com/docs/) で見ることが出来ます。
|
||||
それでも、Yii はあなたのページに bootstrap のアセットをインクルードするための便利な方法を提供しています。
|
||||
`@app/assets` ディレクトリに配置されている `AppAsset.php` に一行を加えるだけで大丈夫です。
|
||||
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap5\BootstrapAsset', // この行です
|
||||
];
|
||||
```
|
||||
|
||||
Yii のアセットマネージャによって bootstrap を使うと、必要に応じて、bootstrap のリソースを最小化したり、
|
||||
あなた自身のリソースと結合したりすることが出来ます。
|
||||
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/helper-html.md
vendored
Normal file
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/helper-html.md
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
Html ヘルパ
|
||||
===========
|
||||
|
||||
Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。
|
||||
このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。
|
||||
残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。
|
||||
ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap5\Html]] によってカバーされています。
|
||||
[[\yii\bootstrap5\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、
|
||||
いくつかの便利なメソッドを提供するものです。例えば、
|
||||
|
||||
- `staticControl()` - フォームの "[static controls](https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text)" のレンダリングを可能にする
|
||||
|
||||
[[\yii\bootstrap5\Html]] は [[\yii\helpers\Html]] を継承しており、
|
||||
その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。
|
||||
|
||||
例えば、
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> 注意: [[\yii\bootstrap5\Html]] と [[\yii\helpers\Html]] を混同してはいけません。
|
||||
ビューの中でどちらのクラスを使っているのかに注意してください。
|
||||
19
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/installation.md
vendored
Normal file
19
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/installation.md
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
インストール
|
||||
============
|
||||
|
||||
## Composer パッケージを取得する
|
||||
|
||||
このエクステンションをインストールするのに推奨される方法は [composer](https://getcomposer.org/download/) によるものです。
|
||||
|
||||
下記のコマンドを実行してください。
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
または、あなたの `composer.json` ファイルの `require` セクションに、
|
||||
```
|
||||
"yiisoft/yii2-bootstrap": "~1.0.0"
|
||||
```
|
||||
|
||||
を追加してください。
|
||||
39
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/migrating-yii2-bootstrap.md
vendored
Normal file
39
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/migrating-yii2-bootstrap.md
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
yii2-bootstrap4 からの移行
|
||||
=========================
|
||||
|
||||
yii2-bootstrap5 は、Bootstrap 4 から Bootstrap 5 への移行ガイドに従って、yii-bootstrap4 プロジェクト全体を大きく書き換えたものです。
|
||||
最も注目すべき変更点を要約すると以下の通りです。
|
||||
|
||||
## 一般
|
||||
|
||||
* 名前空間は `yii\bootstrap4` から `yii\bootstrap5` に変更
|
||||
|
||||
## ウィジェット / クラス
|
||||
|
||||
### BaseHtml
|
||||
|
||||
### ActiveField
|
||||
|
||||
### ActiveForm
|
||||
|
||||
新しい定数[[yii\bootstrap5\ActiveForm::LAYOUT_FLOATING]]があります。 Bootstrap5で導入された[新しいフォームレイアウト](https://getbootstrap.com/docs/5.1/forms/floating-labels/)です。
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
### ButtonDropdown
|
||||
|
||||
### ButtonToolbar
|
||||
|
||||
### Carousel
|
||||
|
||||
### LinkPager
|
||||
|
||||
### Modal
|
||||
|
||||
### Nav
|
||||
|
||||
### NavBar
|
||||
|
||||
### Tabs
|
||||
|
||||
### ToggleButtonGroup
|
||||
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/topics-sass.md
vendored
Normal file
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/topics-sass.md
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
Bootstrap の .sass ファイルを直接に使う
|
||||
=======================================
|
||||
|
||||
あなたが [Bootstrap CSS をあなたの sass ファイルに直接含める](https://getbootstrap.com/getting-started/#customizing) ことを望む場合は、
|
||||
オリジナルの CSS ファイルがロードされないように無効化する必要があります。
|
||||
[[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] の `css` プロパティを空に設定することによって、そうすることが出来ます。
|
||||
そのためには、`assetManager` [アプリケーション・コンポーネント](https://github.com/yiisoft/yii2/blob/master/docs/guide-ja/structure-application-components.md) を以下のように構成します。
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
]
|
||||
```
|
||||
95
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/usage-widgets.md
vendored
Normal file
95
vendor/yiisoft/yii2-bootstrap5/docs/guide-ja/usage-widgets.md
vendored
Normal file
@ -0,0 +1,95 @@
|
||||
Yii ウィジェット
|
||||
================
|
||||
|
||||
複雑な bootstrap コンポーネントのほとんどは Yii ウィジェットでラップされて、より堅牢な構文を与えられ、フレームワークの諸機能と統合されています。
|
||||
全てのウィジェットは `\yii\bootstrap5` 名前空間に属します。
|
||||
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Offcanvas|Offcanvas]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
|
||||
## ウィジェットの CSS クラスをカスタマイズする <span id="customizing-css-classes"></span>
|
||||
|
||||
これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。
|
||||
そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。
|
||||
|
||||
例えば、[[yii\bootstrap5\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
|
||||
このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。
|
||||
特定のボタン・クラスを指定するだけで十分です。
|
||||
|
||||
```php
|
||||
echo Button::widget([
|
||||
'label' => 'Action',
|
||||
'options' => ['class' => 'btn-primary'], // "btn btn-primary" というクラスを生成
|
||||
]);
|
||||
```
|
||||
|
||||
しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。
|
||||
例えば、[[yii\bootstrap5\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、
|
||||
ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。
|
||||
単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。
|
||||
ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。
|
||||
|
||||
```php
|
||||
echo ButtonGroup::widget([
|
||||
'options' => [
|
||||
'class' => ['widget' => 'btn-group-vertical'] // 'btn-group' を 'btn-group-vertical' で置き換え
|
||||
],
|
||||
'buttons' => [
|
||||
['label' => 'A'],
|
||||
['label' => 'B'],
|
||||
]
|
||||
]);
|
||||
```
|
||||
|
||||
## Navbar ウィジェット <span id="navbar-widget"></span>
|
||||
|
||||
Navbar ウィジェットには独特の癖があります。あなたは Navbar が折り畳まれるブレークポイントと
|
||||
Navbar の全体的なスタイル (カラー・スキーム) を指定しなければなりません。
|
||||
|
||||
カラー・スキームと折り畳みのブレークポイントは CSS のクラスで変更することが出来ます。指定されない場合は、カラー・スキームは `navbar-light bg-light`、
|
||||
ブレークポイントは`navbar-expand-lg` がデフォルトとして採用されます。詳細な情報は、[Bootstrap documentation](https://getbootstrap.com/docs/5.1/components/navbar/) を参照して下さい。
|
||||
|
||||
```php
|
||||
Navbar::begin([
|
||||
'options' => [
|
||||
'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md']
|
||||
]
|
||||
]);
|
||||
[...]
|
||||
Navbar::end();
|
||||
```
|
||||
|
||||
モバイル向けナビゲーションでブランド (アイコン) とトグル・ボタンの位置を入れ替えたい場合は、次のようにすることが出来ます。
|
||||
|
||||
```php
|
||||
Navbar::begin([
|
||||
'brandOptions' => [
|
||||
'class' => ['order-1']
|
||||
],
|
||||
'togglerOptions' => [
|
||||
'class' => ['order-0']
|
||||
]
|
||||
]);
|
||||
[...]
|
||||
Navbar::end();
|
||||
```
|
||||
Reference in New Issue
Block a user