From 22b962fb898be4471eb91853a0f5f7601643c58f Mon Sep 17 00:00:00 2001 From: pana1990 Date: Fri, 29 May 2015 14:03:29 +0200 Subject: [PATCH 1/2] Update guide-es [skip ci] --- docs/guide-es/usage-widgets.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/guide-es/usage-widgets.md b/docs/guide-es/usage-widgets.md index 1605829..75189b2 100644 --- a/docs/guide-es/usage-widgets.md +++ b/docs/guide-es/usage-widgets.md @@ -18,3 +18,41 @@ al namespace `\yii\bootstrap`: - [[yii\bootstrap\NavBar|NavBar]] - [[yii\bootstrap\Progress|Progress]] - [[yii\bootstrap\Tabs|Tabs]] + + +## Personalización de las clases css para los widget + +Los widgets permiten una rápida composición del HTML para los componentes de bootstrap que requieren las clases +CSS de bootstrap. +Las clases por defecto para un componente en particular serán añadidas automáticamente por los widgets, y las clases +opcionales que quieres personalizar son frecuentemente soportadas a través de las propiedades de los widgets. + +Por ejemplo, puedas usar [[yii\bootstrap\Button::options]] para personalizar la apariencia de un botón. +La clase 'btn' que se requiere para un botón será añadida automáticamente, por lo que no necesitas preocuparte +por ello. +Todo lo que necesitas es especificar una clase de botón en particular: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produce la clase "btn btn-primary" +]); +``` + +Sin embargo, a veces puede que tengas que remplazar las clases por defecto por las alternativas. +Por ejemplo, el widget [[yii\bootstrap\ButtonGroup]] utiliza por defecto la clase 'btn-group' para el contenido del div, pero necesitas usar 'btn-group-vertical' en lugar de alinear los botones verticalmente. +El uso directo de la opción 'class' simplemente añade 'btn-group-vertical' a 'btn-group, el cual producirá un resultado incorrecto. +Con el fin de sobrescribir las clases por defecto de un widget, necesitas especificar la opción 'class' como un +array que contiene la definición de la clase personalizada bajo la clave 'widget': + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // remplaza 'btn-group' con 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` From 0755bd626b3dbc2fe6fa998a1670c64ee91494ef Mon Sep 17 00:00:00 2001 From: pana1990 Date: Sat, 30 May 2015 02:17:49 +0200 Subject: [PATCH 2/2] Add asset-bundles.md and helper-html.md in guide-es [skip ci] --- docs/guide-es/README.md | 2 ++ docs/guide-es/asset-bundles.md | 17 +++++++++++++++++ docs/guide-es/helper-html.md | 29 +++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+) create mode 100644 docs/guide-es/asset-bundles.md create mode 100644 docs/guide-es/helper-html.md diff --git a/docs/guide-es/README.md b/docs/guide-es/README.md index b22720c..74997be 100644 --- a/docs/guide-es/README.md +++ b/docs/guide-es/README.md @@ -20,6 +20,8 @@ Uso --- * [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) Temas Adicionales ----------------- diff --git a/docs/guide-es/asset-bundles.md b/docs/guide-es/asset-bundles.md new file mode 100644 index 0000000..f27f800 --- /dev/null +++ b/docs/guide-es/asset-bundles.md @@ -0,0 +1,17 @@ +Asset Bundles +============= + +Bootstrap es una completa solución front-end, que incluye CSS, JavaScript, fuentes y mucho más. +Con el fin de permitir un control más flexible sobre los componentes de Bootstrap, esta extensión proporciona +varios asset bundles. +Ellos son: + +- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales. +- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contiene ficheros javascript. +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contiene el tema CSS por defecto de Bootstrap. + +Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle). +Si necesitas unicamente estilos CSS, [[yii\bootstrap\BootstrapAsset]] será suficiente para ti. Sin embargo, si +quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap\BootstrapPluginAsset]]. + +> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap\BootstrapPluginAsset]]. diff --git a/docs/guide-es/helper-html.md b/docs/guide-es/helper-html.md new file mode 100644 index 0000000..4cb067f --- /dev/null +++ b/docs/guide-es/helper-html.md @@ -0,0 +1,29 @@ +Html helper +=========== + +Bootstrap introduce muchas construcciones y esqueletos consistentes de HTML, que permiten crear diferentes efectos visuales. +Unicamente lo más complejo está cubierto por los widgets proporcionados en esta extensión. El resto debería ser +compuesto manualmente usando HTML directamente. +Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap\Html]]. +[[\yii\bootstrap\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap. +Proporciona varios métodos útiles: + + - `icon()` - permite renderizar iconos de Glyphicon + - `staticControl()` - permite renderizar formularios "static controls" + +[[\yii\bootstrap\Html]] hereda todas las funcionalidades disponibles en [[\yii\helpers\Html]] y puede usarse como sustituto, +así que no es necesario incluir ambos dentro de los archivos de tus vistas. +Por ejemplo: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Atención: no confundas [[\yii\bootstrap\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas.