first commit

This commit is contained in:
2026-01-25 18:18:09 +08:00
commit 509312e604
8136 changed files with 2349298 additions and 0 deletions

View File

@ -0,0 +1,29 @@
Extensión Twitter Bootstrap para Yii 2
======================================
La extensión incluye soporte para el marcado de [Bootstrap 5](https://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 .sass de Bootstrap](topics-sass.md)

View File

@ -0,0 +1,16 @@
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\bootstrap5\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales.
- [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap5\BootstrapAsset]], contiene ficheros javascript.
Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle).
Si necesitas unicamente estilos CSS, [[yii\bootstrap5\BootstrapAsset]] será suficiente para ti. Sin embargo, si
quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap5\BootstrapPluginAsset]].
> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap5\BootstrapPluginAsset]].

View File

@ -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](https://getbootstrap.com/docs/). 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\bootstrap5\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.

View File

@ -0,0 +1,28 @@
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\bootstrap5\Html]].
[[\yii\bootstrap5\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap.
Proporciona varios métodos útiles:
- `staticControl()` - permite renderizar formularios "[static controls](https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text)"
[[\yii\bootstrap5\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\bootstrap5\Html;
?>
<?= Button::widget([
'label' => Html::encode('Save & apply'),
'encodeLabel' => false,
'options' => ['class' => 'btn-primary'],
]); ?>
```
> Atención: no confundas [[\yii\bootstrap5\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas.

View File

@ -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](https://getcomposer.org/download/).
Ejecuta
```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
```
o añade
```
"yiisoft/yii2-bootstrap": "~1.0.0"
```
en la sección require de tu fichero `composer.json`.

View File

@ -0,0 +1,17 @@
Usando directamente los ficheros .sass de Bootstrap
===================================================
Si deseas incluir el [css de Bootstrap directamente en tus ficheros sass](https://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\bootstrap5\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\bootstrap5\BootstrapAsset' => [
'css' => [],
]
]
]
```

View File

@ -0,0 +1,66 @@
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\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]]
## 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\bootstrap5\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\bootstrap5\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'],
]
]);
```