From 9a7e19647774be757d86df108c5c6c2790a6ca9f Mon Sep 17 00:00:00 2001
From: Nobuo Kihara <softark@gmail.com>
Date: Fri, 29 May 2015 18:41:33 +0900
Subject: [PATCH] docs/guide-ja/usage-widgets.md updated [ci skip]

---
 docs/guide-ja/usage-widgets.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/guide-ja/usage-widgets.md b/docs/guide-ja/usage-widgets.md
index 1817349..d74ca56 100644
--- a/docs/guide-ja/usage-widgets.md
+++ b/docs/guide-ja/usage-widgets.md
@@ -17,3 +17,38 @@ Yii ウィジェット
 - [[yii\bootstrap\NavBar|NavBar]]
 - [[yii\bootstrap\Progress|Progress]]
 - [[yii\bootstrap\Tabs|Tabs]]
+
+
+## ウィジェットの CSS クラスをカスタマイズする <span id="customizing-css-classes"></span>
+
+これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。
+特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。
+そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。
+
+例えば、[[yii\bootstrap\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
+このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。
+特定のボタンクラスを指定するだけで十分です。
+
+```php
+echo Button::widget([
+    'label' => 'Action',
+    'options' => ['class' => 'btn-primary'], // "btn btn-primary" というクラスを生成
+]);
+```
+
+しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。
+例えば、[[yii\bootstrap\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'],
+    ]
+]);
+```