Klimov Paul
9 years ago
41 changed files with 524 additions and 76 deletions
@ -0,0 +1,14 @@ |
|||||||
|
# editorconfig.org |
||||||
|
|
||||||
|
root = true |
||||||
|
|
||||||
|
[*] |
||||||
|
charset = utf-8 |
||||||
|
end_of_line = lf |
||||||
|
insert_final_newline = true |
||||||
|
indent_style = space |
||||||
|
indent_size = 4 |
||||||
|
trim_trailing_whitespace = true |
||||||
|
|
||||||
|
[*.md] |
||||||
|
trim_trailing_whitespace = false |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
Extensión Twitter Bootstrap para Yii 2 |
||||||
|
====================================== |
||||||
|
|
||||||
|
La extensión incluye soporte para el marcado de [Bootstrap 3](http://getbootstrap.com/) y los componentes del framework |
||||||
|
(también conocido como "Twitter Bootstrap"). Bootstrap es un excelente framework responsivo que puede acelerar |
||||||
|
enormemente el proceso de desarrollo del lado del cliente. |
||||||
|
|
||||||
|
El núcleo de Boostrap está representado por dos partes: |
||||||
|
|
||||||
|
- Bases de CSS, tales como un sistema de cuadriculas, tipografía, clases de ayuda, y utilidades responsivas. |
||||||
|
- Componentes listos para usar, tales como formularios, menús, paginación, cajas modales, tabs, etc. |
||||||
|
|
||||||
|
Pasos Iniciales |
||||||
|
--------------- |
||||||
|
|
||||||
|
* [Instalación](installation.md) |
||||||
|
* [Uso Básico](basic-usage.md) |
||||||
|
|
||||||
|
Uso |
||||||
|
--- |
||||||
|
|
||||||
|
* [Yii widgets](usage-widgets.md) |
||||||
|
* [Html helper](helper-html.md) |
||||||
|
* [Asset Bundles](asset-bundles.md) |
||||||
|
|
||||||
|
Temas Adicionales |
||||||
|
----------------- |
||||||
|
|
||||||
|
* [Usando directamente los ficheros .less de Bootstrap](topics-less.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]]. |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
Uso Básico |
||||||
|
========== |
||||||
|
|
||||||
|
Yii no se ajusta a los conceptos básicos de bootstrap dentro del código PHP, desde el HTML es muy simple en si mismo |
||||||
|
en este caso. Puedes encontrar los detalles sobre el uso de los conceptos básicos en la [web de bootstrap](http://getbootstrap.com/css/). Yii proporciona una manera de incluir los assets de bootstrap en tus páginas añadiendo una única linea a `AppAsset.php` localizado en tu |
||||||
|
directorio `@app/assets`: |
||||||
|
|
||||||
|
```php |
||||||
|
public $depends = [ |
||||||
|
'yii\web\YiiAsset', |
||||||
|
'yii\bootstrap\BootstrapAsset', // esta linea |
||||||
|
]; |
||||||
|
``` |
||||||
|
|
||||||
|
Usando bootstrap a través de Yii asset manager permite que minimices los recursos y combinarlos con tus propios recursos |
||||||
|
cuando lo necesites. |
||||||
@ -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 |
||||||
|
<?php |
||||||
|
use yii\bootstrap\Html; |
||||||
|
?> |
||||||
|
<?= Button::widget([ |
||||||
|
'label' => 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. |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
Instalación |
||||||
|
=========== |
||||||
|
|
||||||
|
## Obteniendo el Paquete de Composer |
||||||
|
|
||||||
|
La mejor manera para instalar esta extensión es a través de [composer](http://getcomposer.org/download/). |
||||||
|
|
||||||
|
Ejecuta |
||||||
|
|
||||||
|
``` |
||||||
|
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap |
||||||
|
``` |
||||||
|
|
||||||
|
o añade |
||||||
|
|
||||||
|
``` |
||||||
|
"yiisoft/yii2-bootstrap": "~2.0.0" |
||||||
|
``` |
||||||
|
|
||||||
|
en la sección require de tu fichero `composer.json`. |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
Usando directamente los ficheros .less de Bootstrap |
||||||
|
=================================================== |
||||||
|
|
||||||
|
Si deseas incluir el [css de Bootstrap directamente en tus ficheros less](http://getbootstrap.com/getting-started/#customizing) puedes necesitar deshabilitar los ficheros css de bootstrap originales para ser cargados. |
||||||
|
Puedes hacer esto mediante la configuración de la propiedad css de [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] asignando |
||||||
|
un array vacio. |
||||||
|
Para esto necesitas configurar el `assetManager` [componente de aplicación](https://github.com/yiisoft/yii2/blob/master/docs/guide-es/structure-application-components.md) como se muestra a continuación: |
||||||
|
|
||||||
|
```php |
||||||
|
'assetManager' => [ |
||||||
|
'bundles' => [ |
||||||
|
'yii\bootstrap\BootstrapAsset' => [ |
||||||
|
'css' => [], |
||||||
|
] |
||||||
|
] |
||||||
|
] |
||||||
|
``` |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
Yii widgets |
||||||
|
=========== |
||||||
|
|
||||||
|
La mayoría de los componentes de bootstrap están encapsulados dentro de Yii widgets lo que permite una sintaxis |
||||||
|
más robusta y poder integrarse con las características del framework. Todos los widgets pertenecen |
||||||
|
al namespace `\yii\bootstrap`: |
||||||
|
|
||||||
|
- [[yii\bootstrap\ActiveForm|ActiveForm]] |
||||||
|
- [[yii\bootstrap\Alert|Alert]] |
||||||
|
- [[yii\bootstrap\Button|Button]] |
||||||
|
- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]] |
||||||
|
- [[yii\bootstrap\ButtonGroup|ButtonGroup]] |
||||||
|
- [[yii\bootstrap\Carousel|Carousel]] |
||||||
|
- [[yii\bootstrap\Collapse|Collapse]] |
||||||
|
- [[yii\bootstrap\Dropdown|Dropdown]] |
||||||
|
- [[yii\bootstrap\Modal|Modal]] |
||||||
|
- [[yii\bootstrap\Nav|Nav]] |
||||||
|
- [[yii\bootstrap\NavBar|NavBar]] |
||||||
|
- [[yii\bootstrap\Progress|Progress]] |
||||||
|
- [[yii\bootstrap\Tabs|Tabs]] |
||||||
|
|
||||||
|
|
||||||
|
## Personalización de las clases css para los widget <span id="customizing-css-classes"></span> |
||||||
|
|
||||||
|
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'], |
||||||
|
] |
||||||
|
]); |
||||||
|
``` |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
アセットバンドル |
||||||
|
================ |
||||||
|
|
||||||
|
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 を含みます。 |
||||||
|
|
||||||
|
個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。 |
||||||
|
CSS のスタイルだけが必要なのであれば、[[yii\bootstrap\BootstrapAsset]] だけで十分です。 |
||||||
|
しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap\BootstrapPluginAsset]] を登録しなければなりません。 |
||||||
|
|
||||||
|
> Tip: ほとんどのウィジェットは [[yii\bootstrap\BootstrapPluginAsset]] を自動的に登録します。 |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
Html ヘルパ |
||||||
|
=========== |
||||||
|
|
||||||
|
Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。 |
||||||
|
このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。 |
||||||
|
残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。 |
||||||
|
ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap\Html]] によってカバーされています。 |
||||||
|
[[\yii\bootstrap\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、いくつかの便利なメソッドを提供するものです。 |
||||||
|
|
||||||
|
- `icon()` - Glyphicon のアイコンのレンダリングを可能にする |
||||||
|
- `staticControl()` - フォームの "static controls" のレンダリングを可能にする |
||||||
|
|
||||||
|
[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビューファイルの中で両方を使う必要はありません。 |
||||||
|
例えば、 |
||||||
|
|
||||||
|
```php |
||||||
|
<?php |
||||||
|
use yii\bootstrap\Html; |
||||||
|
?> |
||||||
|
<?= Button::widget([ |
||||||
|
'label' => Html::icon('approve') . Html::encode('Save & apply'), |
||||||
|
'encodeLabel' => false, |
||||||
|
'options' => ['class' => 'btn-primary'], |
||||||
|
]); ?> |
||||||
|
``` |
||||||
|
|
||||||
|
> 注意: [[\yii\bootstrap\Html]] と [[\yii\helpers\Html]] を混同してはいけません。 |
||||||
|
ビューの中でどちらのクラスを使っているのかに注意してください。 |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
Asset Bundles |
||||||
|
============= |
||||||
|
|
||||||
|
Bootstrap é uma solução complexa para front-end, o qual inclue CSS, JavaScript, fontes e assim por diante. |
||||||
|
A fim de permitir que você tenha controle mais flexível sobre componentes Bootstrap , esta extensão fornece vários asset bundles. Eles são: |
||||||
|
|
||||||
|
- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS. |
||||||
|
- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap\BootstrapAsset]], contem os arquivos JavaScript. |
||||||
|
- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contém o tema padrão do Bootstrap. |
||||||
|
|
||||||
|
Necessidades de aplicações específicas podem exigir utilização de pacotes diferentes ( ou a combinação bundle). |
||||||
|
Se você precisa apenas de estilos CSS, [[yii\bootstrap\BootstrapAsset]] será o suficiente para você. No entanto , se |
||||||
|
você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap\BootstrapPluginAsset]]. |
||||||
|
|
||||||
|
> Tip: a maioria dos widgets [[yii\bootstrap\BootstrapPluginAsset]] registram automaticamente. |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
Bootstrap introduz construções HTML mais consistentes e esqueletos, que permitem a criação de diferentes efeitos visuais. Apenas o mais complexos deles são cobertos por os widgets fornecidos com esta extensão . O restante deverá ser escrito manualmente usando escrita HTML direta. No entanto, vários casos especiais de marcação Bootstrap são cobertos pelo helper [[\yii\bootstrap\Html]]. [[\yii\bootstrap\Html]] é uma versão melhorada de [[\yii\helpers\Html]] dedicada à quem precisa do Bootstrap. Ele fornece vários métodos úteis : |
||||||
|
|
||||||
|
icon() - allows rendering of Glyphicon icons |
||||||
|
staticControl() - allows rendering of form "static controls" |
||||||
|
|
||||||
|
[[\yii\bootstrap\Html]] herda toda funcionalidade disponível em [[\yii\helpers\Html]] e pode ser usado como um substituto , para que você não precisa de ambos dentro de seus arquivos de views . Por exemplo: |
||||||
|
|
||||||
|
|
||||||
|
<?php |
||||||
|
use yii\bootstrap\Html; |
||||||
|
?> |
||||||
|
<?= Button::widget([ |
||||||
|
'label' => Html::icon('approve') . Html::encode('Save & apply'), |
||||||
|
'encodeLabel' => false, |
||||||
|
'options' => ['class' => 'btn-primary'], |
||||||
|
]); ?> |
||||||
|
|
||||||
|
Atenção: Não confunda [[\yii\bootstrap\Html]] e [[\yii\helpers\Html]], tenha o cuidado de que classe você está usando dentro de seus arquivos de views. |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
Asset Bundles |
||||||
|
============= |
||||||
|
|
||||||
|
Bootstrap is a complex front-end solution, which includes CSS, JavaScript, fonts and so on. |
||||||
|
In order to allow you the most flexible control over Bootstrap components, this extension provides several asset bundles. |
||||||
|
They are: |
||||||
|
|
||||||
|
- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files. |
||||||
|
- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap\BootstrapAsset]], contains the javascript files. |
||||||
|
- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depends on [[yii\bootstrap\BootstrapAsset]], contains the Bootstrap default theme CSS. |
||||||
|
|
||||||
|
Particular application needs may require different bundle (or bundle combination) usage. |
||||||
|
If you need only CSS styles, [[yii\bootstrap\BootstrapAsset]] will be enough for you. However, if |
||||||
|
you want to use Bootstrap JavaScript, you need to register [[yii\bootstrap\BootstrapPluginAsset]]. |
||||||
|
|
||||||
|
> Tip: most of the widgets register [[yii\bootstrap\BootstrapPluginAsset]] automatically. |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
Html helper |
||||||
|
=========== |
||||||
|
|
||||||
|
Bootstrap introduces many consistent HTML constructions and skeletons, which allow creating different visual effects. |
||||||
|
Only the most complex of them are covered by the widgets provided with this extension. The rest should be composed manually |
||||||
|
using direct HTML composition. |
||||||
|
However, several special Bootstrap markup cases are covered by [[\yii\bootstrap\Html]] helper. |
||||||
|
[[\yii\bootstrap\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs. |
||||||
|
It provides several useful methods: |
||||||
|
|
||||||
|
- `icon()` - allows rendering of Glyphicon icons |
||||||
|
- `staticControl()` - allows rendering of form "static controls" |
||||||
|
|
||||||
|
[[\yii\bootstrap\Html]] inherits all functionality available at [[\yii\helpers\Html]] and can be used as a substitute, |
||||||
|
so you don't need them both inside your view files. |
||||||
|
For example: |
||||||
|
|
||||||
|
```php |
||||||
|
<?php |
||||||
|
use yii\bootstrap\Html; |
||||||
|
?> |
||||||
|
<?= Button::widget([ |
||||||
|
'label' => Html::icon('approve') . Html::encode('Save & apply'), |
||||||
|
'encodeLabel' => false, |
||||||
|
'options' => ['class' => 'btn-primary'], |
||||||
|
]); ?> |
||||||
|
``` |
||||||
|
|
||||||
|
> Attention: do not confuse [[\yii\bootstrap\Html]] and [[\yii\helpers\Html]], be careful of which class |
||||||
|
you are using inside your views. |
||||||
Loading…
Reference in new issue