chenx221/yii2-bootstrap5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated docs

Browse Source
This commit is contained in:
Simon Karlen 2021-08-03 10:22:50 +02:00
parent 90c02f71c4
commit d6833076c5
No known key found for this signature in database
GPG Key ID: 0630C27D666EBCC3
59 changed files with 320 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/guide-de/README.md
View File

@ -1,7 +1,7 @@
Twitter Bootstrap Erweiterung für Yii 2 Twitter Bootstrap Erweiterung für Yii 2
======================================= =======================================
Diese Erweiterung enthält Unterstützung für das [Bootstrap 4 Framework](http://getbootstrap.com/) (auch bekannt als "Twitter Bootstrap") Diese Erweiterung enthält Unterstützung für das [Bootstrap 5 Framework](http://getbootstrap.com/) (auch bekannt als "Twitter Bootstrap")
Markup und dessen Komponenten. Bootstrap ist eine exzellentes, reponsives Framework welches den clientseitigen Markup und dessen Komponenten. Bootstrap ist eine exzellentes, reponsives Framework welches den clientseitigen
Entwicklungsprozess vehement zu verkürzen vermag. Entwicklungsprozess vehement zu verkürzen vermag.

10
docs/guide-de/asset-bundles.md
View File

@ -5,11 +5,11 @@ Bootstrap ist eine komplexe Front-End-Lösung, welche CSS, Javascript, Schriften
Um Ihnen die flexibelste Kontrolle über die einzelnen Komponenten zu ermöglichen enthält diese Erweiterung verschiedene Asset Bundles. Um Ihnen die flexibelste Kontrolle über die einzelnen Komponenten zu ermöglichen enthält diese Erweiterung verschiedene Asset Bundles.
Das sind: Das sind:
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - enthält nur das hauptsächliche CSS. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - enthält nur das hauptsächliche CSS.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - enthält das Javascript. Abhängig von [[yii\bootstrap4\BootstrapAsset]]. - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - enthält das Javascript. Abhängig von [[yii\bootstrap5\BootstrapAsset]].
Verschiedene Anwendunganforderungen erfordern verschiedene Bundles (bzw. Kombinationen). Verschiedene Anwendunganforderungen erfordern verschiedene Bundles (bzw. Kombinationen).
Falls Sie nur auf das CSS angewiesen sind, reicht es wenn Sie [[yii\bootstrap4\BootstrapAsset]] laden. Falls Sie nur auf das CSS angewiesen sind, reicht es wenn Sie [[yii\bootstrap5\BootstrapAsset]] laden.
Wenn Sie das Javascript verwenden möchten, müssen Sie [[yii\bootstrap4\BootstrapPluginAsset]] auch laden. Wenn Sie das Javascript verwenden möchten, müssen Sie [[yii\bootstrap5\BootstrapPluginAsset]] auch laden.
> Tipp: Die meisten Widgets laden [[yii\bootstrap4\BootstrapPluginAsset]] automatisch. > Tipp: Die meisten Widgets laden [[yii\bootstrap5\BootstrapPluginAsset]] automatisch.

18
docs/guide-de/assets-setup.md
View File

@ -77,7 +77,7 @@ Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Ve
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -89,7 +89,7 @@ Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Ve
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -101,16 +101,16 @@ return [
'assetManager' => [ 'assetManager' => [
// override bundles to use CDN : // override bundles to use CDN :
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
'css' => [ 'css' => [
'css/bootstrap.min.css' 'css/bootstrap.min.css'
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
'js' => [ 'js' => [
'js/bootstrap.bundle.min.js' 'js/bootstrap.bundle.min.js'
], ],
@ -135,7 +135,7 @@ Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Ve
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -147,13 +147,13 @@ return [
'assetManager' => [ 'assetManager' => [
// override bundles to use local project files : // override bundles to use local project files :
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'css' => [ 'css' => [
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'js' => [ 'js' => [
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',

2
docs/guide-de/basic-usage.md
View File

@ -9,7 +9,7 @@ im `@app/assets` Verzeichnis:
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // Diese Zeile 'yii\bootstrap5\BootstrapAsset', // Diese Zeile
]; ];
``` ```

12
docs/guide-de/helper-html.md
View File

@ -4,18 +4,18 @@ HTML helper
Bootstrap führt viele konsistente HTML Strukturen ein, welche es erlauben, verschiedene visuelle Effekte einfach zu verwenden. Bootstrap führt viele konsistente HTML Strukturen ein, welche es erlauben, verschiedene visuelle Effekte einfach zu verwenden.
Ausschliesslich die komplexesten von ihnen sind mittels Widgets in dieser Erweiterung umgesetzt worden. Der Rest kann manuell Ausschliesslich die komplexesten von ihnen sind mittels Widgets in dieser Erweiterung umgesetzt worden. Der Rest kann manuell
mittels HTML zusammengestellt werden. mittels HTML zusammengestellt werden.
Einige spezielle Bootstrap Markups sind implementiert im [[\yii\bootstrap4\Html]]-Helper. Einige spezielle Bootstrap Markups sind implementiert im [[\yii\bootstrap5\Html]]-Helper.
Die [[\yii\bootstrap4\Html]]-Klasse ist eine Erweiterung der regulären [[\yii\helpers\Html]]-Klasse mit Anpassungen zur Die [[\yii\bootstrap5\Html]]-Klasse ist eine Erweiterung der regulären [[\yii\helpers\Html]]-Klasse mit Anpassungen zur
Verwendung mit Bootstrap. Sie bietet verschiedene nützliche Methoden. Verwendung mit Bootstrap. Sie bietet verschiedene nützliche Methoden.
Die [[\yii\bootstrap4\Html]]-Klasse erbt von der [[\yii\helpers\Html]]-Klasse und ersetzt diese dadurch vollumfänglich. Die [[\yii\bootstrap5\Html]]-Klasse erbt von der [[\yii\helpers\Html]]-Klasse und ersetzt diese dadurch vollumfänglich.
Sie benötigen folglich **nicht** beide in Ihren Views. Sie benötigen folglich **nicht** beide in Ihren Views.
Beispiel: Beispiel:
```php ```php
<?php <?php
use yii\bootstrap4\Button; use yii\bootstrap5\Button;
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::tag('i', ['class' => 'fas fa-check']) . Html::encode('Save & apply'), 'label' => Html::tag('i', ['class' => 'fas fa-check']) . Html::encode('Save & apply'),
@ -24,5 +24,5 @@ use yii\bootstrap4\Html;
]); ?> ]); ?>
``` ```
> Vorsicht: Verwechseln Sie [[\yii\bootstrap4\Html]] und [[\yii\helpers\Html]] Klassen nicht und bedenken Sie jeweils > Vorsicht: Verwechseln Sie [[\yii\bootstrap5\Html]] und [[\yii\helpers\Html]] Klassen nicht und bedenken Sie jeweils
welche Sie in Ihren Views verwenden. welche Sie in Ihren Views verwenden.

4
docs/guide-de/installation.md
View File

@ -8,13 +8,13 @@ Der empfohlene Weg zur Installation dieser Erweiterung ist mittels [composer](ht
Führen Sie entweder folgenden Befehlt aus Führen Sie entweder folgenden Befehlt aus
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
oder fügen Sie folgendes oder fügen Sie folgendes
``` ```
"yiisoft/yii2-bootstrap4": "~1.0.0" "yiisoft/yii2-bootstrap5": "~1.0.0"
``` ```
zur `require`-Sektion Ihrer `composer.json`-Datei hinzu. zur `require`-Sektion Ihrer `composer.json`-Datei hinzu.

75
docs/guide-de/migrating-yii2-bootstrap.md
View File

@ -6,105 +6,32 @@ Die grössten Änderungen finden Sie hier zusammengefasst:
## Allgemein ## Allgemein
* Der Namespace ist nun `yii\bootstrap4` anstatt `yii\bootstrap` * Der Namespace ist nun `yii\bootstrap5` anstatt `yii\bootstrap4`
* Es wird das `npm` Paket verwendet anstatt das `bower` Paket
* Es gibt kein Theme Asset mehr
* `popper.js` muss nicht mehr extra installiert werden (wird vom Bootstrap JS Bundle mitgeliefert)
## Widgets / Klassen ## Widgets / Klassen
* [[yii\bootstrap\Collapse|Collapse]] wurde umbenannt zu [[yii\bootstrap4\Accordion|Accordion]]
* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] wurde entfernt
* [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] wurde hinzugefügt (Bootstrap 4 Implementation von [[yii\widgets\Breadcrumbs]])
* [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] wurde hinzugefügt (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar)
### BaseHtml ### BaseHtml
Die Methode `icon` wurde entfernt. Sie macht keinen Sinn mehr, da Bootstrap 4 keine Icons mehr mit sich bringt. Eine
mögliche Alternative wäre das [Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) oder aber das
[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline).
### ActiveField ### ActiveField
Folgende Properties wurden umbenannt:
* `$checkboxTemplate` zu `$checkTemplate`,
* `$horizontalCheckboxTemplate` zu `$checkHorizontalTemplate`,
* `$horizontalRadioTemplate` zu `$radioHorizontalTemplate`
Die Properties `$inlineCheckboxListTemplate` und `$inlineRadioListTemplate` wurden entfernt. Dafür gibt es ein neues
Template mit dem Namen `$checkEnclosedTemplate`. In Bootstrap 4 sind Checkboxen standardmässig nicht mehr von Labeln
eingeschlossen.
### ActiveForm ### ActiveForm
Hier wurden die Konstanten [[yii\bootstrap4\ActiveForm::LAYOUT_DEFAULT]], [[yii\bootstrap4\ActiveForm::LAYOUT_HORIZONTAL]]
und [[yii\bootstrap4\ActiveForm::LAYOUT_INLINE]] eingeführt. Sie sollen die Verwendung der Layout vereinfachen und bei
allfälligen Änderungen der Werte Folgefehler verhindern.
### Breadcrumbs ### Breadcrumbs
Dieses Widget wurde neu eingeführt um die Korrekte Darstellung von Breadcrumbs im Bootstrap 4 Design zu gerwährleisten.
Es ist vollständig komptibel mit [[yii\widgets\Breadcrumbs]].
### ButtonDropdown ### ButtonDropdown
Dieses Widget hat ein neues Property mit Namen `$direction` erhalten. Es ermöglicht die Anzeige des Menüs auf z.B. der
rechten Seite des Buttons. Des weiteren gibt es die Konstanten [[yii\bootstrap4\ButtonDropdown::DIRECTION_DOWN]],
[[yii\bootstrap4\ButtonDropdown::DIRECTION_LEFT]], [[yii\bootstrap4\ButtonDropdown::DIRECTION_RIGHT]] und
[[yii\bootstrap4\ButtonDropdown::DIRECTION_UP]] um die Richtungsselektion zu vereinfachen.
Es wurde ein weiteres Property eingeführt mit dem Namen `$renderContainer`. Falls dieses auf `false` gestellt wird, wird
das rendern des das Dropdown umfassenden DIVs verhindert.
Folgende Properties wurden umbenannt:
* `$containerOptions` zu `$options`,
* `$options` zu `$buttonOptions`
### ButtonToolbar ### ButtonToolbar
Dieses Widget wurde eingeführt um einfach Button-Toolbars zu erstellen. Weitere Informationen erhalten Sie unter
https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar.
### Carousel ### Carousel
Dieses Widget hat das Property `$crossfade` erhalten. Es erlaubt das Ändern der Animation zwischen den Slides auf ein Fade,
anstatt eines Slided wenn es auf `true` gestellt wird.
### LinkPager ### LinkPager
Dieses neue Widget repräsentiert die Bootstrap Version von [[yii\widgets\LinkPager]]. Es rendert eine Pagination im Bootstrap
Stil. Weitere Informationen erhalten Sie unter https://getbootstrap.com/docs/4.3/components/pagination/.
### Modal ### Modal
Folgende Properties wurden umbenannt:
* `$header` zu `$title`,
* `$headerOptions` zu `$titleOptions`
Des Weiteren ist es nicht mehr von nöten, beim `$title` die Titel-Tags `<h2 class="modal-title></h2>` anzugeben. Diese
werden nun automatisch gerendert.
### Nav ### Nav
Das `$dropdDownCaret` Property wurde entfernt. Dies ist nur noch über (S)CSS steuerbar. Weitere Informationen erhalten Sie
unter https://getbootstrap.com/docs/4.3/getting-started/theming/#sass-options
### NavBar ### NavBar
Folgende Properties wurden umbenannt:
* `$containerOptions` zu `$collapseOptions`
Das Property `$headerContent` wurde entfernt. Der "Toggler" ist nun anpassbar. Dazu gibt es neu die Properties
`$togglerContent` sowie `$togglerOptions`.
### Tabs ### Tabs
Es gibt neu das Property `$panes`. Es ermöglicht das Definieren der Tabinhalte via separatem Property anstatt über
`$items[0]['content']`. Der Index des panes-Arrays korrespondiert mit dessen des items-Arrays. Z.B. gehört `$items[0]`
zu `$panes[0]`.
### ToggleButtonGroup ### ToggleButtonGroup
Dieses Widget hat die Konstanten [[yii\bootstrap4\ToggleButtonGroup::TYPE_CHECKBOX]] und
[[yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO]] erhalten zur vereinfachten Selektion des Typs und bei allfälligen
Änderungen der Werte zur Verhinderung von Folgefehlern.

4
docs/guide-de/topics-sass.md
View File

@ -3,13 +3,13 @@ Direkte Verwendung der .sass Dateien von Bootstrap
Falls Sie das [Bootstrap CSS direkt in Ihre SASS-Dateien integerieren](https://getbootstrap.com/docs/4.1/getting-started/theming/#sass) Falls Sie das [Bootstrap CSS direkt in Ihre SASS-Dateien integerieren](https://getbootstrap.com/docs/4.1/getting-started/theming/#sass)
möchten, müssen Sie unter Umständen das Laden der Orginal Bootstrap-CSS-Dateien verhindern. möchten, müssen Sie unter Umständen das Laden der Orginal Bootstrap-CSS-Dateien verhindern.
Dies können Sie durch das Leeren des `css`-Property in der [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]]-Datei bewerkstelligen. Dies können Sie durch das Leeren des `css`-Property in der [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]]-Datei bewerkstelligen.
Konfigurieren Sie dazu die `assetManager`-[Komponente](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) wie folgt: Konfigurieren Sie dazu die `assetManager`-[Komponente](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) wie folgt:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

40
docs/guide-de/usage-widgets.md
View File

@ -2,25 +2,25 @@ Yii widgets
=========== ===========
Die komplexesten Bootstrap Komponenten sind umgesetzt mittels Yii-Widget zur vereinfachten Verwendung und Integration Die komplexesten Bootstrap Komponenten sind umgesetzt mittels Yii-Widget zur vereinfachten Verwendung und Integration
von Framework-Funktionen. Alle Widgets gehören zum `\yii\bootstrap4` Namespace: von Framework-Funktionen. Alle Widgets gehören zum `\yii\bootstrap5` Namespace:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## Anpassen der Widget CSS-Klassen <span id="customizing-css-classes"></span> ## Anpassen der Widget CSS-Klassen <span id="customizing-css-classes"></span>
@ -29,7 +29,7 @@ Die Widgets erlauben die schnelle Erstellung von HTML-Markup der Bootstrap Kompo
Die Standard-CSS-Klassen einer bestimmten Komponente wird automatisch vom Widget hinzugefügt. Alle weiteren (optionalen) Die Standard-CSS-Klassen einer bestimmten Komponente wird automatisch vom Widget hinzugefügt. Alle weiteren (optionalen)
Klassen können Sie mittels der Attribute des Widgets anpassen. Klassen können Sie mittels der Attribute des Widgets anpassen.
Verwenden Sie z.B. [[yii\bootstrap4\Button::options]] zur Anpassung des Aussehens des Buttons. Die Klasse `btn`, welche Verwenden Sie z.B. [[yii\bootstrap5\Button::options]] zur Anpassung des Aussehens des Buttons. Die Klasse `btn`, welche
benötigt vom Button Widget benötigt wird, wird automatisch hinzugefügt. Sie müssen lediglich die besondere Button-Klasse benötigt vom Button Widget benötigt wird, wird automatisch hinzugefügt. Sie müssen lediglich die besondere Button-Klasse
hinzufügen: hinzufügen:
@ -41,7 +41,7 @@ echo Button::widget([
``` ```
Manchmal möchte man aber die Standard-Klasse ersetzen. Manchmal möchte man aber die Standard-Klasse ersetzen.
Das [[yii\bootstrap4\ButtonGroup]]-Widget beispielsweise verwendet standardmässig die 'btn-group' Klasse für den Container, Das [[yii\bootstrap5\ButtonGroup]]-Widget beispielsweise verwendet standardmässig die 'btn-group' Klasse für den Container,
es müsste aber 'btn-group-vertical' erhalten zur vertikalen Ausrichtung. es müsste aber 'btn-group-vertical' erhalten zur vertikalen Ausrichtung.
Würden Sie wie oben nur die 'class'-Option verwenden, würde die 'btn-group-vertical'-Klasse zur 'btn-group'-Klasse hinzugefügt. Würden Sie wie oben nur die 'class'-Option verwenden, würde die 'btn-group-vertical'-Klasse zur 'btn-group'-Klasse hinzugefügt.
Zum Überschreiben der Standard-Klassen eines Widgets, müssen Sie die 'class'-Option unter dem Array-Schlüssel 'widget' angeben: Zum Überschreiben der Standard-Klassen eines Widgets, müssen Sie die 'class'-Option unter dem Array-Schlüssel 'widget' angeben:

2
docs/guide-es/README.md
View File

@ -1,7 +1,7 @@
Extensión Twitter Bootstrap para Yii 2 Extensión Twitter Bootstrap para Yii 2
====================================== ======================================
La extensión incluye soporte para el marcado de [Bootstrap 4](http://getbootstrap.com/) y los componentes del framework La extensión incluye soporte para el marcado de [Bootstrap 5](http://getbootstrap.com/) y los componentes del framework
(también conocido como "Twitter Bootstrap"). Bootstrap es un excelente framework responsivo que puede acelerar (también conocido como "Twitter Bootstrap"). Bootstrap es un excelente framework responsivo que puede acelerar
enormemente el proceso de desarrollo del lado del cliente. enormemente el proceso de desarrollo del lado del cliente.

10
docs/guide-es/asset-bundles.md
View File

@ -6,11 +6,11 @@ Con el fin de permitir un control más flexible sobre los componentes de Bootstr
varios asset bundles. varios asset bundles.
Ellos son: Ellos son:
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap4\BootstrapAsset]], contiene ficheros javascript. - [[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). Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle).
Si necesitas unicamente estilos CSS, [[yii\bootstrap4\BootstrapAsset]] será suficiente para ti. Sin embargo, si Si necesitas unicamente estilos CSS, [[yii\bootstrap5\BootstrapAsset]] será suficiente para ti. Sin embargo, si
quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap4\BootstrapPluginAsset]]. quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap5\BootstrapPluginAsset]].
> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap4\BootstrapPluginAsset]]. > Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap5\BootstrapPluginAsset]].

2
docs/guide-es/basic-usage.md
View File

@ -8,7 +8,7 @@ directorio `@app/assets`:
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // esta linea 'yii\bootstrap5\BootstrapAsset', // esta linea
]; ];
``` ```

12
docs/guide-es/helper-html.md
View File

@ -4,26 +4,26 @@ Html helper
Bootstrap introduce muchas construcciones y esqueletos consistentes de HTML, que permiten crear diferentes efectos visuales. 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 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. compuesto manualmente usando HTML directamente.
Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap4\Html]]. Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap5\Html]].
[[\yii\bootstrap4\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap. [[\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: Proporciona varios métodos útiles:
- `icon()` - permite renderizar iconos de Glyphicon - `icon()` - permite renderizar iconos de Glyphicon
- `staticControl()` - permite renderizar formularios "static controls" - `staticControl()` - permite renderizar formularios "static controls"
[[\yii\bootstrap4\Html]] hereda todas las funcionalidades disponibles en [[\yii\helpers\Html]] y puede usarse como sustituto, [[\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. así que no es necesario incluir ambos dentro de los archivos de tus vistas.
Por ejemplo: Por ejemplo:
```php ```php
<?php <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
``` ```
> Atención: no confundas [[\yii\bootstrap4\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas. > Atención: no confundas [[\yii\bootstrap5\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas.

2
docs/guide-es/installation.md
View File

@ -8,7 +8,7 @@ La mejor manera para instalar esta extensión es a través de [composer](http://
Ejecuta Ejecuta
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
o añade o añade

4
docs/guide-es/topics-sass.md
View File

@ -2,14 +2,14 @@ Usando directamente los ficheros .sass de Bootstrap
=================================================== ===================================================
Si deseas incluir el [css de Bootstrap directamente en tus ficheros sass](http://getbootstrap.com/getting-started/#customizing) puedes necesitar deshabilitar los ficheros css de bootstrap originales para ser cargados. Si deseas incluir el [css de Bootstrap directamente en tus ficheros sass](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\bootstrap4\BootstrapAsset|BootstrapAsset]] asignando Puedes hacer esto mediante la configuración de la propiedad css de [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] asignando
un array vacio. 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: 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 ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

43
docs/guide-es/usage-widgets.md
View File

@ -3,25 +3,28 @@ Yii widgets
La mayoría de los componentes de bootstrap están encapsulados dentro de Yii widgets lo que permite una sintaxis 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 más robusta y poder integrarse con las características del framework. Todos los widgets pertenecen
al namespace `\yii\bootstrap4`: al namespace `\yii\bootstrap5`:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[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> ## Personalización de las clases css para los widget <span id="customizing-css-classes"></span>
@ -31,7 +34,7 @@ CSS de bootstrap.
Las clases por defecto para un componente en particular serán añadidas automáticamente por los widgets, y las clases 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. opcionales que quieres personalizar son frecuentemente soportadas a través de las propiedades de los widgets.
Por ejemplo, puedas usar [[yii\bootstrap4\Button::options]] para personalizar la apariencia de un botón. 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 La clase 'btn' que se requiere para un botón será añadida automáticamente, por lo que no necesitas preocuparte
por ello. por ello.
Todo lo que necesitas es especificar una clase de botón en particular: Todo lo que necesitas es especificar una clase de botón en particular:
@ -44,7 +47,7 @@ echo Button::widget([
``` ```
Sin embargo, a veces puede que tengas que remplazar las clases por defecto por las alternativas. Sin embargo, a veces puede que tengas que remplazar las clases por defecto por las alternativas.
Por ejemplo, el widget [[yii\bootstrap4\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. 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. 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 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': array que contiene la definición de la clase personalizada bajo la clave 'widget':

2
docs/guide-ja/README.md
View File

@ -1,7 +1,7 @@
Yii 2 Twitter Bootstrap エクステンション Yii 2 Twitter Bootstrap エクステンション
======================================== ========================================
このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 4](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています) このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 5](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています)
に対するサポートを提供します。 に対するサポートを提供します。
Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。 Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。

10
docs/guide-ja/asset-bundles.md
View File

@ -5,12 +5,12 @@ Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロン
Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションは複数のアセット・バンドルを提供しています。 Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションは複数のアセット・バンドルを提供しています。
すなわち、 すなわち、
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。 - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap4\BootstrapAsset]] に依存し、javascript ファイルを含みます。 - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap5\BootstrapAsset]] に依存し、javascript ファイルを含みます。
個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。 個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。
CSS のスタイルだけが必要なのであれば、[[yii\bootstrap4\BootstrapAsset]] だけで十分です。 CSS のスタイルだけが必要なのであれば、[[yii\bootstrap5\BootstrapAsset]] だけで十分です。
しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap4\BootstrapPluginAsset]] しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap5\BootstrapPluginAsset]]
をも登録しなければなりません。 をも登録しなければなりません。
> Tip: ほとんどのウィジェットは [[yii\bootstrap4\BootstrapPluginAsset]] を自動的に登録します。 > Tip: ほとんどのウィジェットは [[yii\bootstrap5\BootstrapPluginAsset]] を自動的に登録します。

18
docs/guide-ja/assets-setup.md
View File

@ -80,7 +80,7 @@ Bower または NPM のクライアントを直接に使って Bootstrap のア
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -93,7 +93,7 @@ Bower または NPM のクライアントを直接に使って Bootstrap のア
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -105,16 +105,16 @@ return [
'assetManager' => [ 'assetManager' => [
// CDN を使うようにバンドルをオーバーライド // CDN を使うようにバンドルをオーバーライド
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
'css' => [ 'css' => [
'css/bootstrap.min.css' 'css/bootstrap.min.css'
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
'js' => [ 'js' => [
'js/bootstrap.bundle.min.js' 'js/bootstrap.bundle.min.js'
], ],
@ -141,7 +141,7 @@ Bootstrap アセットを手作業でダウンロードし、プロジェクト
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -153,13 +153,13 @@ return [
'assetManager' => [ 'assetManager' => [
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う // バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'css' => [ 'css' => [
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'js' => [ 'js' => [
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',

2
docs/guide-ja/basic-usage.md
View File

@ -9,7 +9,7 @@ bootstrap の基礎を使用することに関する詳細は、[bootstrap ド
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // この行です 'yii\bootstrap5\BootstrapAsset', // この行です
]; ];
``` ```

12
docs/guide-ja/helper-html.md
View File

@ -4,27 +4,27 @@ Html ヘルパ
Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。 Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。
このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。 このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。
残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。 残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。
ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap4\Html]] によってカバーされています。 ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap5\Html]] によってカバーされています。
[[\yii\bootstrap4\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、 [[\yii\bootstrap5\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、
いくつかの便利なメソッドを提供するものです。例えば、 いくつかの便利なメソッドを提供するものです。例えば、
- `staticControl()` - フォームの "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)" のレンダリングを可能にする - `staticControl()` - フォームの "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)" のレンダリングを可能にする
[[\yii\bootstrap4\Html]] は [[\yii\helpers\Html]] を継承しており、 [[\yii\bootstrap5\Html]] は [[\yii\helpers\Html]] を継承しており、
その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。 その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。
例えば、 例えば、
```php ```php
<?php <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
``` ```
> 注意: [[\yii\bootstrap4\Html]] と [[\yii\helpers\Html]] を混同してはいけません。 > 注意: [[\yii\bootstrap5\Html]] と [[\yii\helpers\Html]] を混同してはいけません。
ビューの中でどちらのクラスを使っているのかに注意してください。 ビューの中でどちらのクラスを使っているのかに注意してください。

2
docs/guide-ja/installation.md
View File

@ -8,7 +8,7 @@
下記のコマンドを実行してください。 下記のコマンドを実行してください。
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
または、あなたの `composer.json` ファイルの `require` セクションに、 または、あなたの `composer.json` ファイルの `require` セクションに、

72
docs/guide-ja/migrating-yii2-bootstrap.md
View File

@ -6,102 +6,32 @@ yii2-bootstrap4 は、Bootstrap 3 から Bootstrap 4 への移行ガイドに従
## 一般 ## 一般
* 名前空間は `yii\bootstrap` から `yii\bootstrap4` に変更 * 名前空間は `yii\bootstrap4` から `yii\bootstrap5` に変更
* `bower` ではなく `npm` パッケージを使用
* テーマ・アセットは廃止
* `popper.js` は不要になった (bootstrap js バンドルによって供給される)
## ウィジェット / クラス ## ウィジェット / クラス
* [[yii\bootstrap\Collapse|Collapse]] の名前は [[yii\bootstrap4\Accordion|Accordion]] に変更
* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] は廃止
* [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] を追加 ([[yii\widgets\Breadcrumbs]] の Bootstrap 4 による実装)
* [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] を追加 (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar)
### BaseHtml ### BaseHtml
`icon` メソッドは削除されました。グリフアイコンがもうバンドルされておらず、このメソッドが無意味になったためです。
代りに、[Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) または
[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline) を使うことを検討して下さい。
### ActiveField ### ActiveField
以下のプロパティの名前が変りました。
* `$checkboxTemplate` は `$checkTemplate` に変更。
* `$horizontalCheckboxTemplate` は `$checkHorizontalTemplate` に変更。
* `$horizontalRadioTemplate` は `$radioHorizontalTemplate` に変更。
プロパティ `$inlineCheckboxListTemplate` および `$inlineRadioListTemplate` は削除されました。`$checkEnclosedTemplate` と呼ばれる新しいテンプレートが追加されています。
bootstrap 4 では、チェックボックスはラベルに包まれないのがデフォルトになりました。
### ActiveForm ### ActiveForm
新しい定数 [[yii\bootstrap4\ActiveForm::LAYOUT_DEFAULT]]、[[yii\bootstrap4\ActiveForm::LAYOUT_HORIZONTAL]]
および [[yii\bootstrap4\ActiveForm::LAYOUT_INLINE]] が追加されました。
これらによって、レイアウトの選択が容易になり、文字列がいつ何時変っても、リファクタリングが安全に出来るようになることが期待されます。
### Breadcrumbs ### Breadcrumbs
このクラスは bootstrap の要求を満たす正しいクラスと属性でパンくずリストをレンダリングするために導入されました。
これは [[yii\widgets\Breadcrumbs]] と完全に互換です。
### ButtonDropdown ### ButtonDropdown
`$direction` という新しいプロパティが導入され、メニューを開く方向を選ぶ（例えばボタンの右側に開く）ことが可能になりました。
方向の選択をより容易にするために、[[yii\bootstrap4\ButtonDropdown::DIRECTION_DOWN]]、[[yii\bootstrap4\ButtonDropdown::DIRECTION_LEFT]]、
[[yii\bootstrap4\ButtonDropdown::DIRECTION_RIGHT]] そして
[[yii\bootstrap4\ButtonDropdown::DIRECTION_UP]] という定数が導入されました。
`$renderContainer` という新しいプロパティもあります。これが `false` に設定されると、ドロップダウンを包む div は描画されません。
次のプロパティは名前が変更されました。
* `$containerOptions` は `$options` に変更。
* `$options` はe `$buttonOptions` に変更。
### ButtonToolbar ### ButtonToolbar
この新しいクラスを使うとボタン・ツールバーを描画することが出来ます。
詳細は https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar を参照して下さい。
### Carousel ### Carousel
スライド間のアニメーションを制御する `$crossfade` というプロパティが導入されました。
これが `true` に設定されると、スライド・アニメーションの代りにクロスフェイド・アニメーションが実行されます。
### LinkPager ### LinkPager
この新しいクラスは [[yii\widgets\LinkPager]] のブートストラップ・バージョンです。
詳細は https://getbootstrap.com/docs/4.3/components/pagination/ を参照して下さい。
### Modal ### Modal
次のプロパティの名前が変りました。
* `$header` は `$title` に変更。
* `$headerOptions` は `$titleOptions` に変更。
もう `<h2 class="modal-title></h2>` と書く必要はありません。自動的にそのようにレンダリングされます。
### Nav ### Nav
`$dropdDownCaret` プロパティは削除されました。キャレットは (S)CSS によってのみ制御可能となりました。
https://getbootstrap.com/docs/4.3/getting-started/theming/#sass-options を参照して下さい。
### NavBar ### NavBar
次のプロパティの名前が変りました。
* `$containerOptions` は `$collapseOptions` に変更。
`$headerContent` プロパティは削除されました。NavBar のヘッダはもう有りません。
トグラーがカスタマイズ可能になり、プロパティ `$togglerContent` および `$togglerOptions` が導入されました。
### Tabs ### Tabs
プロパティ `$panes` が導入されました。これによって、ペインの内容を `$items[0]['content']` ではなく、独立したプロパティによって定義することが出来るようになりました。
ペインの配列のインデックスがアイテムのインデックスに対応します。
例えば、`$items[0]` は `$panes[0]` に属します。
### ToggleButtonGroup ### ToggleButtonGroup
新しい定数 [[yii\bootstrap4\ToggleButtonGroup::TYPE_CHECKBOX]] および
[[yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO]] が導入され、選択がより容易になり、
いつ文字列が変ってもリファクタリングがより安全に出来るようになりました。

4
docs/guide-ja/topics-sass.md
View File

@ -3,13 +3,13 @@ Bootstrap の .sass ファイルを直接に使う
あなたが [Bootstrap CSS をあなたの sass ファイルに直接含める](http://getbootstrap.com/getting-started/#customizing) ことを望む場合は、 あなたが [Bootstrap CSS をあなたの sass ファイルに直接含める](http://getbootstrap.com/getting-started/#customizing) ことを望む場合は、
オリジナルの CSS ファイルがロードされないように無効化する必要があります。 オリジナルの CSS ファイルがロードされないように無効化する必要があります。
[[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] の `css` プロパティを空に設定することによって、そうすることが出来ます。 [[yii\bootstrap5\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 ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

43
docs/guide-ja/usage-widgets.md
View File

@ -2,25 +2,28 @@ Yii ウィジェット
================ ================
複雑な bootstrap コンポーネントのほとんどは Yii ウィジェットでラップされて、より堅牢な構文を与えられ、フレームワークの諸機能と統合されています。 複雑な bootstrap コンポーネントのほとんどは Yii ウィジェットでラップされて、より堅牢な構文を与えられ、フレームワークの諸機能と統合されています。
全てのウィジェットは `\yii\bootstrap4` 名前空間に属します。 全てのウィジェットは `\yii\bootstrap5` 名前空間に属します。
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## ウィジェットの CSS クラスをカスタマイズする <span id="customizing-css-classes"></span> ## ウィジェットの CSS クラスをカスタマイズする <span id="customizing-css-classes"></span>
@ -28,7 +31,7 @@ Yii ウィジェット
これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。 これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。
そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。 そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。
例えば、[[yii\bootstrap4\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。 例えば、[[yii\bootstrap5\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。 このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。
特定のボタン・クラスを指定するだけで十分です。 特定のボタン・クラスを指定するだけで十分です。
@ -40,7 +43,7 @@ echo Button::widget([
``` ```
しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。 しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。
例えば、[[yii\bootstrap4\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、 例えば、[[yii\bootstrap5\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、
ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。 ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。
単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。 単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。
ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。 ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。

2
docs/guide-pt-BR/README.md
View File

@ -1,7 +1,7 @@
Extenção Twitter Bootstrap para Yii 2 Extenção Twitter Bootstrap para Yii 2
===================================== =====================================
A extensão inclui suporte para marcação e componentes ao framework [Bootstrap 4](http://getbootstrap.com/) A extensão inclui suporte para marcação e componentes ao framework [Bootstrap 5](http://getbootstrap.com/)
(também conhecido como "Bootstrap Twitter"). Bootstrap é um excelente framework ágil, que pode acelerar bastante o (também conhecido como "Bootstrap Twitter"). Bootstrap é um excelente framework ágil, que pode acelerar bastante o
do lado do cliente do seu processo de desenvolvimento. do lado do cliente do seu processo de desenvolvimento.

10
docs/guide-pt-BR/asset-bundles.md
View File

@ -4,11 +4,11 @@ Asset Bundles
Bootstrap é uma solução complexa para front-end, o qual inclue CSS, JavaScript, fontes e assim por diante. 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: 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\bootstrap4\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap4\BootstrapAsset]], contem os arquivos JavaScript. - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap5\BootstrapAsset]], contem os arquivos JavaScript.
Necessidades de aplicações específicas podem exigir utilização de pacotes diferentes ( ou a combinação bundle). 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\bootstrap4\BootstrapAsset]] será o suficiente para você. No entanto , se Se você precisa apenas de estilos CSS, [[yii\bootstrap5\BootstrapAsset]] será o suficiente para você. No entanto , se
você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap4\BootstrapPluginAsset]]. você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap5\BootstrapPluginAsset]].
> Tip: a maioria dos widgets [[yii\bootstrap4\BootstrapPluginAsset]] registram automaticamente. > Tip: a maioria dos widgets [[yii\bootstrap5\BootstrapPluginAsset]] registram automaticamente.

2
docs/guide-pt-BR/basic-usage.md
View File

@ -9,7 +9,7 @@ diretório `@app/assets`:
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // this line 'yii\bootstrap5\BootstrapAsset', // this line
]; ];
``` ```

10
docs/guide-pt-BR/helper-html.md
View File

@ -1,18 +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\bootstrap4\Html]]. [[\yii\bootstrap4\Html]] é uma versão melhorada de [[\yii\helpers\Html]] dedicada à quem precisa do Bootstrap. Ele fornece vários métodos úteis : 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\bootstrap5\Html]]. [[\yii\bootstrap5\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 icon() - allows rendering of Glyphicon icons
staticControl() - allows rendering of form "static controls" staticControl() - allows rendering of form "static controls"
[[\yii\bootstrap4\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: [[\yii\bootstrap5\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 <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
Atenção: Não confunda [[\yii\bootstrap4\Html]] e [[\yii\helpers\Html]], tenha o cuidado de que classe você está usando dentro de seus arquivos de views. Atenção: Não confunda [[\yii\bootstrap5\Html]] e [[\yii\helpers\Html]], tenha o cuidado de que classe você está usando dentro de seus arquivos de views.

2
docs/guide-pt-BR/installation.md
View File

@ -8,7 +8,7 @@ A maneira recomendada para instalar esta extensão é através do [composer](htt
Então rode Então rode
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
Ou Adicione Ou Adicione

2
docs/guide-pt-BR/topics-sass.md
View File

@ -10,7 +10,7 @@ do seguinte modo:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

39
docs/guide-pt-BR/usage-widgets.md
View File

@ -2,22 +2,25 @@ Yii widgets
=========== ===========
A maioria dos componentes complexos do bootstrap são envolvidos em widgets Yii para permitir uma sintaxe mais robusta e integrar-se com A maioria dos componentes complexos do bootstrap são envolvidos em widgets Yii para permitir uma sintaxe mais robusta e integrar-se com
características estruturais do framework. Todos widgets pertencem ao namespace `\yii\bootstrap4`: características estruturais do framework. Todos widgets pertencem ao namespace `\yii\bootstrap5`:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]

2
docs/guide-ru/README.md
View File

@ -1,7 +1,7 @@
Расширение Twitter Bootstrap для Yii 2 Расширение Twitter Bootstrap для Yii 2
====================================== ======================================
Расширение включает поддержку разметки и компонентов фреймворка [Bootstrap 4](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента. Расширение включает поддержку разметки и компонентов фреймворка [Bootstrap 5](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента.
Ядро Bootstrap представлено двумя частями: Ядро Bootstrap представлено двумя частями:

8
docs/guide-ru/asset-bundles.md
View File

@ -3,9 +3,9 @@ Asset Bundles
Bootstrap - это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. Для того чтобы обеспечить гибкий контроль над компонентами Bootstrap, расширение предоставляет несколько Asset Bundles. Вот они: Bootstrap - это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. Для того чтобы обеспечить гибкий контроль над компонентами Bootstrap, расширение предоставляет несколько Asset Bundles. Вот они:
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - зависит от [[yii\bootstrap4\BootstrapAsset]], содержащий javascript файлы. - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - зависит от [[yii\bootstrap5\BootstrapAsset]], содержащий javascript файлы.
Конкретные приложения могут потребовать различного использования. Если вам нужны только CSS-стили, то пакета [[yii\bootstrap4\BootstrapAsset]] будет достаточно. Тем не менее, если вы хотите использовать Bootstrap JavaScript, вам необходимо зарегистрировать [[yii\bootstrap4\BootstrapPluginAsset]]. Конкретные приложения могут потребовать различного использования. Если вам нужны только CSS-стили, то пакета [[yii\bootstrap5\BootstrapAsset]] будет достаточно. Тем не менее, если вы хотите использовать Bootstrap JavaScript, вам необходимо зарегистрировать [[yii\bootstrap5\BootstrapPluginAsset]].
> Tip: большинство виджетов регистрируются с помощью [[yii\bootstrap4\BootstrapPluginAsset]] автоматически. > Tip: большинство виджетов регистрируются с помощью [[yii\bootstrap5\BootstrapPluginAsset]] автоматически.

2
docs/guide-ru/basic-usage.md
View File

@ -6,7 +6,7 @@ Yii не оборачивает базовый Bootstrap в PHP код, поск
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // подключение Bootstrap 'yii\bootstrap5\BootstrapAsset', // подключение Bootstrap
]; ];
``` ```

10
docs/guide-ru/helper-html.md
View File

@ -1,22 +1,22 @@
Класс-помощник Html Класс-помощник Html
=================== ===================
Bootstrap предоставляет множество последовательных HTML конструкции и каркасов, которые позволяют создавать различные визуальные эффекты. Только самые сложные из них передставлены виджетами, поставляемые с данным расширением. Остальные должны быть собраны вручную, используя HTML напрямую. Тем не менее, несколько специальных Bootstrap разметок предоставляются в помощнике [[\yii\bootstrap4\Html]]. [[\yii\bootstrap4\Html]] является расширенной версией [[\yii\helpers\Html]], удовлетворяющей потребности Bootstrap. Он предоставляет несколько полезных методов: Bootstrap предоставляет множество последовательных HTML конструкции и каркасов, которые позволяют создавать различные визуальные эффекты. Только самые сложные из них передставлены виджетами, поставляемые с данным расширением. Остальные должны быть собраны вручную, используя HTML напрямую. Тем не менее, несколько специальных Bootstrap разметок предоставляются в помощнике [[\yii\bootstrap5\Html]]. [[\yii\bootstrap5\Html]] является расширенной версией [[\yii\helpers\Html]], удовлетворяющей потребности Bootstrap. Он предоставляет несколько полезных методов:
- `icon()` - позволяет отображать иконки Glyphicon - `icon()` - позволяет отображать иконки Glyphicon
- `staticControl()` - позволяет отображать "статические элементы управления" формы - `staticControl()` - позволяет отображать "статические элементы управления" формы
[[\yii\bootstrap4\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]], и может быть использован в качестве замены в ваших представлениях. Например: [[\yii\bootstrap5\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]], и может быть использован в качестве замены в ваших представлениях. Например:
```php ```php
<?php <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
``` ```
> Attention: не путайте [[\yii\bootstrap4\Html]] и [[\yii\helpers\Html]]! Следите за тем какой класс вы используете в своих представлениях. > Attention: не путайте [[\yii\bootstrap5\Html]] и [[\yii\helpers\Html]]! Следите за тем какой класс вы используете в своих представлениях.

2
docs/guide-ru/installation.md
View File

@ -8,7 +8,7 @@
Для этого запустите команду Для этого запустите команду
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
или добавьте или добавьте

4
docs/guide-ru/topics-sass.md
View File

@ -1,12 +1,12 @@
Использование .sass файлов Bootstrap напрямую Использование .sass файлов Bootstrap напрямую
============================================= =============================================
Если вы хотите включить [Bootstrap CSS непосредственно в ваши sass-файлы](http://getbootstrap.com/getting-started/#customizing), вам может понадобиться исключить исходные css-файлы Bootstrap из загрузки. Вы можете сделать это, установив пустым свойство `css` пакета [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]]. Для этого вам необходимо настроить [компонент приложения](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) `assetManager` следующим образом: Если вы хотите включить [Bootstrap CSS непосредственно в ваши sass-файлы](http://getbootstrap.com/getting-started/#customizing), вам может понадобиться исключить исходные css-файлы Bootstrap из загрузки. Вы можете сделать это, установив пустым свойство `css` пакета [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]]. Для этого вам необходимо настроить [компонент приложения](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) `assetManager` следующим образом:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], // исключение исходных css-файлов из загрузки 'css' => [], // исключение исходных css-файлов из загрузки
] ]
] ]

43
docs/guide-ru/usage-widgets.md
View File

@ -1,32 +1,35 @@
Виджеты Yii Виджеты Yii
=========== ===========
Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap4`: Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap5`:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## Настройка CSS классов виджетов <span id="customizing-css-classes"></span> ## Настройка CSS классов виджетов <span id="customizing-css-classes"></span>
Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета. Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета.
Например, вы можете использовать [[yii\bootstrap4\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки: Например, вы можете использовать [[yii\bootstrap5\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки:
```php ```php
echo Button::widget([ echo Button::widget([
@ -35,7 +38,7 @@ echo Button::widget([
]); ]);
``` ```
Тем не менее, иногда вам может понадобиться заменить классы по умолчанию альтернативными. Например, виджет [[yii\bootstrap4\ButtonGroup]] использует класс `btn-group` для контейнера `div` по умолчанию, но вам, возможно, придётся использовать `btn-group-vertical` чтобы выровнять кнопки по вертикали. Добавление `btn-group-vertical` в параметр `class` приведет к неправильному результату. Для того, чтобы переопределить классы виджета по умолчанию, необходимо указать параметр `class` как массив, содержащий определение класса, настроенное в ключе `widget`: Тем не менее, иногда вам может понадобиться заменить классы по умолчанию альтернативными. Например, виджет [[yii\bootstrap5\ButtonGroup]] использует класс `btn-group` для контейнера `div` по умолчанию, но вам, возможно, придётся использовать `btn-group-vertical` чтобы выровнять кнопки по вертикали. Добавление `btn-group-vertical` в параметр `class` приведет к неправильному результату. Для того, чтобы переопределить классы виджета по умолчанию, необходимо указать параметр `class` как массив, содержащий определение класса, настроенное в ключе `widget`:
```php ```php
echo ButtonGroup::widget([ echo ButtonGroup::widget([

2
docs/guide-uk/README.md
View File

@ -1,7 +1,7 @@
Розширення Twitter Bootstrap для Yii 2 Розширення Twitter Bootstrap для Yii 2
====================================== ======================================
З коробки Yii включає підтримку розмітки [Bootstrap 4](http://getbootstrap.com/) та компонентів фреймворку З коробки Yii включає підтримку розмітки [Bootstrap 5](http://getbootstrap.com/) та компонентів фреймворку
(також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити (також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити
процес розробки клієнтської частини сайту. процес розробки клієнтської частини сайту.

2
docs/guide-uk/basic-usage.md
View File

@ -9,7 +9,7 @@ Yii не загортає основи bootstrap в код PHP, оскільки
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // цей рядок 'yii\bootstrap5\BootstrapAsset', // цей рядок
]; ];
``` ```

2
docs/guide-uk/installation.md
View File

@ -8,7 +8,7 @@
Запустіть Запустіть
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
або додайте або додайте

4
docs/guide-uk/topics-sass.md
View File

@ -3,14 +3,14 @@
Якщо ви хочете включити [CSS Bootstrap напряму до ваших sass файлів](http://getbootstrap.com/getting-started/#customizing) Якщо ви хочете включити [CSS Bootstrap напряму до ваших sass файлів](http://getbootstrap.com/getting-started/#customizing)
вам необхідно відключити завантаження оригінальних css файлів bootstrap. вам необхідно відключити завантаження оригінальних css файлів bootstrap.
Ви можете зробити це, встановивши CSS властивість [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] порожньою. Ви можете зробити це, встановивши CSS властивість [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] порожньою.
Для цього вам необхідно налаштувати [компонент додатка](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) Для цього вам необхідно налаштувати [компонент додатка](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md)
`assetManager` наступним чином: `assetManager` наступним чином:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

39
docs/guide-uk/usage-widgets.md
View File

@ -2,22 +2,25 @@
=========== ===========
Найбільш складні компоненти bootstrap загорнуті в віджети Yii, щоб забезпечити більш надійний синтаксис Найбільш складні компоненти bootstrap загорнуті в віджети Yii, щоб забезпечити більш надійний синтаксис
та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap4`: та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap5`:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]

2
docs/guide-zh-CN/README.md
View File

@ -1,7 +1,7 @@
基于Yii 2 的 Twitter Bootstrap 扩展 基于Yii 2 的 Twitter Bootstrap 扩展
===================================== =====================================
扩展包括对 [Bootstrap 3](http://getbootstrap.com/) 标记和组件框架的支持 扩展包括对 [Bootstrap 5](http://getbootstrap.com/) 标记和组件框架的支持
（也称为“Twitter Bootstrap”）。 Bootstrap是一个优秀的，响应式框架，可以大大加快 （也称为“Twitter Bootstrap”）。 Bootstrap是一个优秀的，响应式框架，可以大大加快
客户端的开发过程。 客户端的开发过程。

8
docs/guide-zh-CN/asset-bundles.md
View File

@ -5,10 +5,10 @@ Bootstrap是一个复杂的前端解决方案，其中包括 CSS ， JavaScript
为了灵活的控制 Bootstrap 组件，此扩展提供了多个资源包。 为了灵活的控制 Bootstrap 组件，此扩展提供了多个资源包。
如下: 如下:
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - 包含 javascript 文件, 依赖于 [[yii\bootstrap4\BootstrapAsset]] . - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - 包含 javascript 文件, 依赖于 [[yii\bootstrap5\BootstrapAsset]] .
特定的应用可能需要加载不同的资源包，（或者资源包组合）. 特定的应用可能需要加载不同的资源包，（或者资源包组合）.
如果只需要 CSS 文件, 引入 [[yii\bootstrap4\BootstrapAsset]] 即可. 但是, 如果需要使用 Bootstrap 的 JavaScript, 则需要引入 [[yii\bootstrap4\BootstrapPluginAsset]]. 如果只需要 CSS 文件, 引入 [[yii\bootstrap5\BootstrapAsset]] 即可. 但是, 如果需要使用 Bootstrap 的 JavaScript, 则需要引入 [[yii\bootstrap5\BootstrapPluginAsset]].
> 提示：大多数小部件会自动注册到 [[yii\bootstrap4\BootstrapPluginAsset]] 。 > 提示：大多数小部件会自动注册到 [[yii\bootstrap5\BootstrapPluginAsset]] 。

4
docs/guide-zh-CN/basic-usage.md
View File

@ -6,8 +6,8 @@ Yii不会将 bootstrap 合并到PHP代码中，因为HTML本身是非常简单
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // this line 'yii\bootstrap5\BootstrapAsset', // this line
]; ];
``` ```
通过 Yii 的资源管理器（asset manager）引入 bootstrap ，可最小化的引入 bootstrap 并在需要时合并自定义资源文件一起使用。 通过 Yii 的资源管理器（asset manager）引入 bootstrap ，可最小化的引入 bootstrap 并在需要时合并自定义资源文件一起使用。

12
docs/guide-zh-CN/helper-html.md
View File

@ -3,25 +3,25 @@ Html 助手
Bootstrap 引入了许多一致的 HTML 结构和骨架，允许创建不同的视觉效果。 Bootstrap 引入了许多一致的 HTML 结构和骨架，允许创建不同的视觉效果。
只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。 只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。
但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap4\Html]] 重载. 但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap5\Html]] 重载.
[[\yii\bootstrap4\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版. [[\yii\bootstrap5\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版.
它提供了很多实用的方法，例如: 它提供了很多实用的方法，例如:
- `icon()` - 生成Glyphicon图标 - `icon()` - 生成Glyphicon图标
- `staticControl()` - 生成表单静态组件 "static controls" - `staticControl()` - 生成表单静态组件 "static controls"
[[\yii\bootstrap4\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能，所以不需要在视图文件中同时引入这两个文件，如果需要，仅使用 [[\yii\bootstrap4\Html]] 即可. [[\yii\bootstrap5\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能，所以不需要在视图文件中同时引入这两个文件，如果需要，仅使用 [[\yii\bootstrap5\Html]] 即可.
例如: 例如:
```php ```php
<?php <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
``` ```
> 注意: 不要混淆 [[\yii\bootstrap4\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类. > 注意: 不要混淆 [[\yii\bootstrap5\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类.

2
docs/guide-zh-CN/installation.md
View File

@ -8,7 +8,7 @@
直接运行 直接运行
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
或者在项目目录的 `composer.json` 文件中添加如下代码 或者在项目目录的 `composer.json` 文件中添加如下代码

4
docs/guide-zh-CN/topics-sass.md
View File

@ -3,13 +3,13 @@
如果引入 [直接使用Bootstrap的.sass文件](http://getbootstrap.com/getting-started/#customizing) 如果引入 [直接使用Bootstrap的.sass文件](http://getbootstrap.com/getting-started/#customizing)
则需要禁用原始加载的 css 文件. 则需要禁用原始加载的 css 文件.
通过设置 [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] 的 css 属性为空即可. 通过设置 [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] 的 css 属性为空即可.
为此，需要配置 `assetManager` [应用组件](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) 为如下: 为此，需要配置 `assetManager` [应用组件](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) 为如下:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

43
docs/guide-zh-CN/usage-widgets.md
View File

@ -1,32 +1,35 @@
Yii 小部件 Yii 小部件
=========== ===========
大多数复杂的 bootstrap 组件被包装到 Yii 小部件中，以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap4` 下： 大多数复杂的 bootstrap 组件被包装到 Yii 小部件中，以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap5` 下：
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## 自定义小部件CSS类 <span id="customizing-css-classes"></span> ## 自定义小部件CSS类 <span id="customizing-css-classes"></span>
这些小部件可以快速构建基于 bootstrap CSS 样式的 bootstrap 组件，并直接生成 HTML 代码。 这些小部件可以快速构建基于 bootstrap CSS 样式的 bootstrap 组件，并直接生成 HTML 代码。
特定组件的默认样式是自动添加的，也可以通过修改部件属性添加自定义样式类。 特定组件的默认样式是自动添加的，也可以通过修改部件属性添加自定义样式类。
例如, 使用 [[yii\bootstrap4\Button::options]] 创建按钮。 例如, 使用 [[yii\bootstrap5\Button::options]] 创建按钮。
按钮中的 `btn` 样式将会被自动添加。只要再添加自己所需的按钮样式即可： 按钮中的 `btn` 样式将会被自动添加。只要再添加自己所需的按钮样式即可：
```php ```php
@ -37,7 +40,7 @@ echo Button::widget([
``` ```
但是，有的时候需要将默认样式替换为自定义样式。 但是，有的时候需要将默认样式替换为自定义样式。
例如, 小部件 [[yii\bootstrap4\ButtonGroup]] 默认使用 'btn-group' 类作为 div 容器的默认样式，但是我们希望使用 'btn-group-vertical' 作为默认样式以实现按钮组的垂直居中。 例如, 小部件 [[yii\bootstrap5\ButtonGroup]] 默认使用 'btn-group' 类作为 div 容器的默认样式，但是我们希望使用 'btn-group-vertical' 作为默认样式以实现按钮组的垂直居中。
直接在 'class' 选项中添加 'btn-group-vertical' 是替换不了 'btn-group' 的。 直接在 'class' 选项中添加 'btn-group-vertical' 是替换不了 'btn-group' 的。
为了重载组件的默认样式，需要在 'class' 选项中的 'widget' 选项中定义即可: 为了重载组件的默认样式，需要在 'class' 选项中的 'widget' 选项中定义即可:

10
docs/guide/asset-bundles.md
View File

@ -5,12 +5,12 @@ Bootstrap is a complex front-end solution, which includes CSS, JavaScript, fonts
In order to allow you the most flexible control over Bootstrap components, this extension provides several asset bundles. In order to allow you the most flexible control over Bootstrap components, this extension provides several asset bundles.
They are: They are:
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files. - [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files.
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap4\BootstrapAsset]], contains the javascript files. - [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap5\BootstrapAsset]], contains the javascript files.
Particular application needs may require different bundle (or bundle combination) usage. Particular application needs may require different bundle (or bundle combination) usage.
If you only need CSS styles, [[yii\bootstrap4\BootstrapAsset]] will be enough for you. However, if If you only need CSS styles, [[yii\bootstrap5\BootstrapAsset]] will be enough for you. However, if
you intend to use Bootstrap JavaScript, you will need to register [[yii\bootstrap4\BootstrapPluginAsset]] you intend to use Bootstrap JavaScript, you will need to register [[yii\bootstrap5\BootstrapPluginAsset]]
as well. as well.
> Tip: most of the widgets register [[yii\bootstrap4\BootstrapPluginAsset]] automatically. > Tip: most of the widgets register [[yii\bootstrap5\BootstrapPluginAsset]] automatically.

18
docs/guide/assets-setup.md
View File

@ -80,7 +80,7 @@ In the `composer.json` of your project, add the following lines in order to prev
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -93,7 +93,7 @@ In the `composer.json` of your project, add the following lines in order to prev
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -105,16 +105,16 @@ return [
'assetManager' => [ 'assetManager' => [
// override bundles to use CDN : // override bundles to use CDN :
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
'css' => [ 'css' => [
'css/bootstrap.min.css' 'css/bootstrap.min.css'
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => null, 'sourcePath' => null,
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', 'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/,
'js' => [ 'js' => [
'js/bootstrap.bundle.min.js' 'js/bootstrap.bundle.min.js'
], ],
@ -141,7 +141,7 @@ In the `composer.json` of your project, add the following lines in order to prev
```json ```json
"replace": { "replace": {
"npm-asset/bootstrap": ">=4.2.1" "npm-asset/bootstrap": ">=5.0.2"
}, },
``` ```
@ -153,13 +153,13 @@ return [
'assetManager' => [ 'assetManager' => [
// override bundles to use local project files : // override bundles to use local project files :
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'css' => [ 'css' => [
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
], ],
], ],
'yii\bootstrap4\BootstrapPluginAsset' => [ 'yii\bootstrap5\BootstrapPluginAsset' => [
'sourcePath' => '@app/assets/source/bootstrap/dist', 'sourcePath' => '@app/assets/source/bootstrap/dist',
'js' => [ 'js' => [
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',

2
docs/guide/basic-usage.md
View File

@ -9,7 +9,7 @@ convenient way to include bootstrap assets in your pages with a single line adde
```php ```php
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset', // this line 'yii\bootstrap5\BootstrapAsset', // this line
]; ];
``` ```

12
docs/guide/helper-html.md
View File

@ -4,27 +4,27 @@ Html helper
Bootstrap introduces many consistent HTML constructions and skeletons, which allow creating different visual effects. 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 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. using direct HTML composition.
However, several special Bootstrap markup cases are covered by the [[\yii\bootstrap4\Html]] helper. However, several special Bootstrap markup cases are covered by the [[\yii\bootstrap5\Html]] helper.
[[\yii\bootstrap4\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs. [[\yii\bootstrap5\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs.
It provides some useful methods like: It provides some useful methods like:
- `staticControl()` - allows rendering of form "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)" - `staticControl()` - allows rendering of form "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)"
As [[\yii\bootstrap4\Html]] extends [[\yii\helpers\Html]], it can be used as a substitute, so you don't need them both As [[\yii\bootstrap5\Html]] extends [[\yii\helpers\Html]], it can be used as a substitute, so you don't need them both
inside your view files. inside your view files.
For example: For example:
```php ```php
<?php <?php
use yii\bootstrap4\Html; use yii\bootstrap5\Html;
?> ?>
<?= Button::widget([ <?= Button::widget([
'label' => Html::icon('approve') . Html::encode('Save & apply'), 'label' => Html::encode('Save & apply'),
'encodeLabel' => false, 'encodeLabel' => false,
'options' => ['class' => 'btn-primary'], 'options' => ['class' => 'btn-primary'],
]); ?> ]); ?>
``` ```
> Attention: do not confuse [[\yii\bootstrap4\Html]] and [[\yii\helpers\Html]], be careful of which class > Attention: do not confuse [[\yii\bootstrap5\Html]] and [[\yii\helpers\Html]], be careful of which class
you are using inside your views. you are using inside your views.

4
docs/guide/installation.md
View File

@ -8,13 +8,13 @@ The preferred way to install this extension is through [composer](http://getcomp
Either run Either run
``` ```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
``` ```
or add or add
``` ```
"yiisoft/yii2-bootstrap4": "~1.0.0" "yiisoft/yii2-bootstrap5": "~1.0.0"
``` ```
to the require section of your `composer.json` file. to the require section of your `composer.json` file.

70
docs/guide/migrating-yii2-bootstrap.md
View File

@ -7,101 +7,31 @@ The most notable changes are summarized below:
## General ## General
* The namespace is `yii\bootstrap5` instead of `yii\bootstrap4` * The namespace is `yii\bootstrap5` instead of `yii\bootstrap4`
* `npm` package is used instead of `bower`
* There is no theme asset any more
* No `popper.js` is needed any more (gets delivered with bootstrap js bundle)
## Widgets / Classes ## Widgets / Classes
* [[yii\bootstrap\Collapse|Collapse]] was renamed to [[yii\bootstrap5\Accordion|Accordion]]
* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] was removed
* [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]] was added (Bootstrap 5 implementation of [[yii\widgets\Breadcrumbs]])
* [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]] was added (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar)
### BaseHtml ### BaseHtml
Removed method `icon`. Since there are no glyphicons bundled any more, this method makes no sense. Consider using
[Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) or
[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline) as alternative.
### ActiveField ### ActiveField
Following properties were renamed:
* `$checkboxTemplate` became `$checkTemplate`,
* `$horizontalCheckboxTemplate` became `$checkHorizontalTemplate`,
* `$horizontalRadioTemplate` became `$radioHorizontalTemplate`
The properties `$inlineCheckboxListTemplate` and `$inlineRadioListTemplate` were removed. There is a new template called
`$checkEnclosedTemplate`. In bootstrap 4 the checkboxes are not enclosed any more (by default).
### ActiveForm ### ActiveForm
There are some new constants [[yii\bootstrap5\ActiveForm::LAYOUT_DEFAULT]], [[yii\bootstrap5\ActiveForm::LAYOUT_HORIZONTAL]]
and [[yii\bootstrap5\ActiveForm::LAYOUT_INLINE]]. They're supposed to make layout selection easier and refactoring more
failsafe if the strings change at any time.
### Breadcrumbs ### Breadcrumbs
This class got introduced to render breadcrumbs with correct classes and attributes to fulfill bootstrap needs. It's
fully compatible with [[yii\widgets\Breadcrumbs]]
### ButtonDropdown ### ButtonDropdown
There is a new property called `$direction` which makes it possible to open the menu at e.g. the right side of the button.
There are some new constants [[yii\bootstrap5\ButtonDropdown::DIRECTION_DOWN]], [[yii\bootstrap5\ButtonDropdown::DIRECTION_LEFT]],
[[yii\bootstrap5\ButtonDropdown::DIRECTION_RIGHT]] and [[yii\bootstrap5\ButtonDropdown::DIRECTION_UP]] to make direction
selection easier.
There is a new property called `$renderContainer`. If it's set to `false`, the dropdown wrapping div will not be rendered.
Following properties were renamed:
* `$containerOptions` became `$options`,
* `$options` became `$buttonOptions`
### ButtonToolbar ### ButtonToolbar
This new class makes it possible to render a button toolbar. See https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar
for more information.
### Carousel ### Carousel
There is a new property called `$crossfade`. It controls the animation between slides. If it's set to `true`, there will
be an crossfade animation instead of a slide animation.
### LinkPager ### LinkPager
This new class is the bootstrap version of [[yii\widgets\LinkPager]]. It renders a pagination in bootstrap style. See
https://getbootstrap.com/docs/4.3/components/pagination/ for more information.
### Modal ### Modal
Following properties were renamed:
* `$header` became `$title`,
* `$headerOptions` became `$titleOptions`
It isn't necessary to write the `<h2 class="modal-title></h2>` any more. It will be rendered automatically.
### Nav ### Nav
The `$dropdDownCaret` property was removed. This is only controllable via (S)CSS now. See
https://getbootstrap.com/docs/4.3/getting-started/theming/#sass-options
### NavBar ### NavBar
Following properties were renamed:
* `$containerOptions` became `$collapseOptions`
Removed property `$headerContent`. There is no navbar header any more. The toggler is now customizable so the properties
`$togglerContent` and `$togglerOptions` were introduced.
### Tabs ### Tabs
Introduces property `$panes`. It makes it possible to define pane contents via separate property instead of
`$items[0]['content']`. The index of the panes array corresponds to the index of the items. E.g. `$items[0]` belongs
to `$panes[0]`.
### ToggleButtonGroup ### ToggleButtonGroup
There are some new constants [[yii\bootstrap5\ToggleButtonGroup::TYPE_CHECKBOX]] and
[[yii\bootstrap5\ToggleButtonGroup::TYPE_RADIO]] to make type selection easier and refactoring more failsafe if the
strings change at any time.

4
docs/guide/topics-sass.md
View File

@ -3,13 +3,13 @@ Using the .sass files of Bootstrap directly
If you want to include the [Bootstrap css directly in your sass files](http://getbootstrap.com/getting-started/#customizing) If you want to include the [Bootstrap css directly in your sass files](http://getbootstrap.com/getting-started/#customizing)
you may need to disable the bootstrap css files loaded by this extension. you may need to disable the bootstrap css files loaded by this extension.
You can do this by setting the css property of [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] to be empty. You can do this by setting the css property of [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] to be empty.
For this, you need to configure the `assetManager` [application component](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) as follows: For this, you need to configure the `assetManager` [application component](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) as follows:
```php ```php
'assetManager' => [ 'assetManager' => [
'bundles' => [ 'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [ 'yii\bootstrap5\BootstrapAsset' => [
'css' => [], 'css' => [],
] ]
] ]

43
docs/guide/usage-widgets.md
View File

@ -2,25 +2,28 @@ Yii widgets
=========== ===========
Most complex bootstrap components are wrapped into Yii widgets to allow more robust syntax and integrate with Most complex bootstrap components are wrapped into Yii widgets to allow more robust syntax and integrate with
framework features. All widgets belong to `\yii\bootstrap4` namespace: framework features. All widgets belong to `\yii\bootstrap5` namespace:
- [[yii\bootstrap4\Accordion|Accordion]] - [[yii\bootstrap5\Accordion|Accordion]]
- [[yii\bootstrap4\ActiveField|ActiveField]] - [[yii\bootstrap5\ActiveField|ActiveField]]
- [[yii\bootstrap4\ActiveForm|ActiveForm]] - [[yii\bootstrap5\ActiveForm|ActiveForm]]
- [[yii\bootstrap4\Alert|Alert]] - [[yii\bootstrap5\Alert|Alert]]
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] - [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
- [[yii\bootstrap4\Button|Button]] - [[yii\bootstrap5\Button|Button]]
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] - [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] - [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] - [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
- [[yii\bootstrap4\Carousel|Carousel]] - [[yii\bootstrap5\Carousel|Carousel]]
- [[yii\bootstrap4\Dropdown|Dropdown]] - [[yii\bootstrap5\Dropdown|Dropdown]]
- [[yii\bootstrap4\Modal|Modal]] - [[yii\bootstrap5\LinkPager|LinkPager]]
- [[yii\bootstrap4\Nav|Nav]] - [[yii\bootstrap5\Modal|Modal]]
- [[yii\bootstrap4\NavBar|NavBar]] - [[yii\bootstrap5\Nav|Nav]]
- [[yii\bootstrap4\Progress|Progress]] - [[yii\bootstrap5\NavBar|NavBar]]
- [[yii\bootstrap4\Tabs|Tabs]] - [[yii\bootstrap5\Popover|Popover]]
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] - [[yii\bootstrap5\Progress|Progress]]
- [[yii\bootstrap5\Tabs|Tabs]]
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## Customizing widget CSS classes <span id="customizing-css-classes"></span> ## Customizing widget CSS classes <span id="customizing-css-classes"></span>
@ -28,7 +31,7 @@ framework features. All widgets belong to `\yii\bootstrap4` namespace:
The widgets allow quick composition of the HTML for the bootstrap components that require the bootstrap CSS classes. The widgets allow quick composition of the HTML for the bootstrap components that require the bootstrap CSS classes.
The default classes for a particular component will be added automatically by the widget, and the optional classes that you may want to customize are usually supported through the properties of the widget. The default classes for a particular component will be added automatically by the widget, and the optional classes that you may want to customize are usually supported through the properties of the widget.
For example, you may use [[yii\bootstrap4\Button::options]] to customize the appearance of a button. For example, you may use [[yii\bootstrap5\Button::options]] to customize the appearance of a button.
The class 'btn' which is required for a button will be added automatically, so you don't need to worry about it. The class 'btn' which is required for a button will be added automatically, so you don't need to worry about it.
All you need is specify a particular button class: All you need is specify a particular button class:
@ -40,7 +43,7 @@ echo Button::widget([
``` ```
However, sometimes you may need to replace the default classes with the alternative ones. However, sometimes you may need to replace the default classes with the alternative ones.
For example, the widget [[yii\bootstrap4\ButtonGroup]] uses 'btn-group' class for the container div by default, For example, the widget [[yii\bootstrap5\ButtonGroup]] uses 'btn-group' class for the container div by default,
but you may need to use 'btn-group-vertical' instead to align the buttons vertically. but you may need to use 'btn-group-vertical' instead to align the buttons vertically.
Using a plain 'class' option simply adds 'btn-group-vertical' to 'btn-group', which will produce an incorrect result. Using a plain 'class' option simply adds 'btn-group-vertical' to 'btn-group', which will produce an incorrect result.
In order to override the default classes of a widget, you need to specify the 'class' option as an array that contains the customized class definition under the 'widget' key: In order to override the default classes of a widget, you need to specify the 'class' option as an array that contains the customized class definition under the 'widget' key: