Skip to content

Y
yii2bootstrap
Commit 8f5bdde6 authored by Nobuo Kihara's avatar Nobuo Kihara Committed by Alexander Makarov
Browse files
Options

docs/guide-ja updated [ci skip] (#235)

parent 0c74f9c3
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 13 deletions
docs/guide-ja/README.md
View file @ 8f5bdde6
......@@ -2,18 +2,19 @@ Yii 2 Twitter Bootstrap エクステンション
========================================
このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 3](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています) に対するサポートを提供します。
Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント側の開発プロセスを大いにスピードアップすることが出来るものです。
Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。
Bootstrap のコアは二つの部分によって表されます。
- CSS の基礎。例えば、グリッドレイアウトシステム、タイポグラフィ、ヘルパクラス、レスポンシブユーティリティなど。
- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダルボックス、タブなど。
- CSS の基礎。例えば、グリッド・レイアウト・システム、タイポグラフィ、ヘルパ・クラス、レスポンシブ・ユーティリティなど。
- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダル・ボックス、タブなど。
始めよう
--------
* [インストール](installation.md)
* [アセットのセットアップ](assets-setup.md)
* [基本的な使用方法](basic-usage.md)
使用方法
......@@ -21,7 +22,7 @@ Bootstrap のコアは二つの部分によって表されます。
* [Yii ウィジェット](usage-widgets.md)
* [Html ヘルパ](helper-html.md)
* [アセットバンドル](asset-bundles.md)
* [アセット・バンドル](asset-bundles.md)
追加のトピック
--------------
......
docs/guide-ja/asset-bundles.md
View file @ 8f5bdde6
アセットバンドル
================
アセット・バンドル
==================
Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンドソリューションです。
Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションはアセットバンドルをいくつかに分けて提供しています。
Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンド・ソリューションです。
Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションはアセット・バンドルをいくつかに分けて提供しています。
すなわち、
- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。
- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、javascript ファイルを含みます。
- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、Bootstrap のデフォルトテーマの CSS を含みます。
- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、Bootstrap のデフォルト・テーマの CSS を含みます。
個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。
CSS のスタイルだけが必要なのであれば、[[yii\bootstrap\BootstrapAsset]] だけで十分です。
......
docs/guide-ja/assets-setup.md 0 → 100644
View file @ 8f5bdde6
アセットのセットアップ
======================
このパッケージは、アセットのインストールについて、[Bower](http://bower.io/) および/または [NPM](https://www.npmjs.org/) のパッケージに依存しています。
このパッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。
## 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": "3.3.5",
...
}
...
}
```
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
"bower-asset/bootstrap": ">=3.3.0"
},
```
## CDN を使う
[公式 CDN](https://www.bootstrapcdn.com) から Bootstrap アセットを使うことが出来ます。.
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
"bower-asset/bootstrap": ">=3.3.0"
},
```
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。
```php
return [
'components' => [
'assetManager' => [
// バンドルをオーバーライドして CDN を使う
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7',
'css' => [
'css/bootstrap.min.css'
],
],
'yii\bootstrap\BootstrapPluginAsset' => [
'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7',
'js' => [
'js/bootstrap.min.js'
],
],
'yii\bootstrap\BootstrapThemeAsset' => [
'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7',
'css' => [
'css/bootstrap-theme.min.css'
]
],
],
],
// ...
],
// ...
];
```
## .less ファイルからコンパイルする
Bootstrap CSS ソースを直接にカスタマイズしたい場合、*.less ファイルから CSS をコンパイルしたいと思うことがあるでしょう。
そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールすることは合理的ではありません。
なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。
Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、例えば `assets/source/bootstrap` フォルダに置かなければなりません。
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
"bower-asset/bootstrap": ">=3.3.0"
},
```
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドし、CSS ファイルのためのコンパイラを指定します。
```php
return [
'components' => [
'assetManager' => [
// *.less ファイルのためのアセット・コンバータを設定する
'converter' => [
'class' => 'yii\web\AssetConverter',
'commands' => [
'less' => ['css', 'lessc {from} {to} --no-color'],
],
],
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
'css' => [
'css/bootstrap.less'
],
],
'yii\bootstrap\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
],
'yii\bootstrap\BootstrapThemeAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
],
],
],
// ...
],
// ...
];
```
## .sass ファイルからコンパイルする
Bootstrap CSS ソースを直接にカスタマイズしたい場合、*.sass ファイルから CSS をコンパイルしたいと思うことがあるでしょう。
そのための *.sass ファイルは [Bootstrap ported from Less to Sass](https://github.com/twbs/bootstrap-sass) から得ることが出来ます。
そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールすることは合理的ではありません。
なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。
Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、例えば `assets/source/bootstrap` フォルダに置かなければなりません。
あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。
```json
"replace": {
"bower-asset/bootstrap": ">=3.3.0"
},
```
'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドし、CSS ファイルのためのコンパイラを指定します。
```php
return [
'components' => [
'assetManager' => [
// *.sass ファイルのためのアセット・コンバータを設定する
'converter' => [
'class' => 'yii\web\AssetConverter',
'commands' => [
'scss' => ['css', 'sass {from} {to} --sourcemap']
],
],
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
'css' => [
'css/bootstrap.scss'
],
],
'yii\bootstrap\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
],
'yii\bootstrap\BootstrapThemeAsset' => [
'sourcePath' => '@app/assets/source/bootstrap',
],
],
],
// ...
],
// ...
];
```
docs/guide-ja/basic-usage.md
View file @ 8f5bdde6
......@@ -3,7 +3,7 @@
Yii は bootstrap の基礎を PHP コードでラップすることをしていません。
なぜなら、この場合の HTML コードがそれ自体として非常にシンプルだからです。
bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメントウェブサイト](http://getbootstrap.com/css/) で見ることが出来ます。
bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメント・ウェブ・サイト](http://getbootstrap.com/css/) で見ることが出来ます。
それでも、Yii はあなたのページに bootstrap のアセットをインクルードするための便利な方法を提供しています。
`@app/assets` ディレクトリに配置されている `AppAsset.php` に一行を加えるだけで大丈夫です。
......
docs/guide-ja/helper-html.md
View file @ 8f5bdde6
......@@ -10,7 +10,7 @@ Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルト
- `icon()` - Glyphicon のアイコンのレンダリングを可能にする
- `staticControl()` - フォームの "static controls" のレンダリングを可能にする
[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビューファイルの中で両方を使う必要はありません。
[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。
例えば、
```php
......
docs/guide-ja/topics-less.md
View file @ 8f5bdde6
......@@ -3,7 +3,7 @@ Bootstrap の .less ファイルを直接に使う
あなたが [Bootstrap CSS をあなたの less ファイルに直接含める](http://getbootstrap.com/getting-started/#customizing) ことを望む場合は、オリジナルの CSS ファイルがロードされないように無効化する必要があります。
[[yii\bootstrap\BootstrapAsset|BootstrapAsset]] の `css` プロパティを空に設定することによって、そうすることが出来ます。
そのためには、`assetManager` [アプリケーションコンポーネント](https://github.com/yiisoft/yii2/blob/master/docs/guide-ja/structure-application-components.md) を以下のように構成します。
そのためには、`assetManager` [アプリケーション・コンポーネント](https://github.com/yiisoft/yii2/blob/master/docs/guide-ja/structure-application-components.md) を以下のように構成します。
```php
'assetManager' => [
......
docs/guide-ja/usage-widgets.md
View file @ 8f5bdde6
......@@ -27,7 +27,7 @@ Yii ウィジェット
例えば、[[yii\bootstrap\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。
特定のボタンクラスを指定するだけで十分です。
特定のボタン・クラスを指定するだけで十分です。
```php
echo Button::widget([
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment