updated docs
This commit is contained in:
Simon Karlen
parent
90c02f71c4
commit
d6833076c5
@ -1,7 +1,7 @@
|
||||
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
|
||||
Entwicklungsprozess vehement zu verkürzen vermag.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
Das sind:
|
||||
- [[yii\bootstrap4\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\BootstrapAsset|BootstrapAsset]] - enthält nur das hauptsächliche CSS.
|
||||
- [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - enthält das Javascript. Abhängig von [[yii\bootstrap5\BootstrapAsset]].
|
||||
|
||||
Verschiedene Anwendunganforderungen erfordern verschiedene Bundles (bzw. Kombinationen).
|
||||
Falls Sie nur auf das CSS angewiesen sind, reicht es wenn Sie [[yii\bootstrap4\BootstrapAsset]] laden.
|
||||
Wenn Sie das Javascript verwenden möchten, müssen Sie [[yii\bootstrap4\BootstrapPluginAsset]] auch 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\bootstrap5\BootstrapPluginAsset]] auch laden.
|
||||
|
||||
> Tipp: Die meisten Widgets laden [[yii\bootstrap4\BootstrapPluginAsset]] automatisch.
|
||||
> Tipp: Die meisten Widgets laden [[yii\bootstrap5\BootstrapPluginAsset]] automatisch.
|
||||
|
||||
@ -77,7 +77,7 @@ Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Ve
|
||||
|
||||
```json
|
||||
"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
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -101,16 +101,16 @@ return [
|
||||
'assetManager' => [
|
||||
// override bundles to use CDN :
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
|
||||
'css' => [
|
||||
'css/bootstrap.min.css'
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
|
||||
'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
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -147,13 +147,13 @@ return [
|
||||
'assetManager' => [
|
||||
// override bundles to use local project files :
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'css' => [
|
||||
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'js' => [
|
||||
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
|
||||
|
||||
@ -9,7 +9,7 @@ im `@app/assets` Verzeichnis:
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // Diese Zeile
|
||||
'yii\bootstrap5\BootstrapAsset', // Diese Zeile
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -4,18 +4,18 @@ HTML helper
|
||||
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
|
||||
mittels HTML zusammengestellt werden.
|
||||
Einige spezielle Bootstrap Markups sind implementiert im [[\yii\bootstrap4\Html]]-Helper.
|
||||
Die [[\yii\bootstrap4\Html]]-Klasse ist eine Erweiterung der regulären [[\yii\helpers\Html]]-Klasse mit Anpassungen zur
|
||||
Einige spezielle Bootstrap Markups sind implementiert im [[\yii\bootstrap5\Html]]-Helper.
|
||||
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.
|
||||
|
||||
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.
|
||||
Beispiel:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap4\Button;
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Button;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'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.
|
||||
|
||||
@ -8,13 +8,13 @@ Der empfohlene Weg zur Installation dieser Erweiterung ist mittels [composer](ht
|
||||
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
|
||||
|
||||
```
|
||||
"yiisoft/yii2-bootstrap4": "~1.0.0"
|
||||
"yiisoft/yii2-bootstrap5": "~1.0.0"
|
||||
```
|
||||
|
||||
zur `require`-Sektion Ihrer `composer.json`-Datei hinzu.
|
||||
|
||||
@ -6,105 +6,32 @@ Die grössten Änderungen finden Sie hier zusammengefasst:
|
||||
|
||||
## Allgemein
|
||||
|
||||
* Der Namespace ist nun `yii\bootstrap4` anstatt `yii\bootstrap`
|
||||
* 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)
|
||||
* Der Namespace ist nun `yii\bootstrap5` anstatt `yii\bootstrap4`
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
@ -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)
|
||||
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:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -2,25 +2,25 @@ Yii widgets
|
||||
===========
|
||||
|
||||
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\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
|
||||
## 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)
|
||||
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
|
||||
hinzufügen:
|
||||
|
||||
@ -41,7 +41,7 @@ echo Button::widget([
|
||||
```
|
||||
|
||||
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.
|
||||
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:
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
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
|
||||
enormemente el proceso de desarrollo del lado del cliente.
|
||||
|
||||
|
||||
@ -6,11 +6,11 @@ Con el fin de permitir un control más flexible sobre los componentes de Bootstr
|
||||
varios asset bundles.
|
||||
Ellos son:
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales.
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap4\BootstrapAsset]], contiene ficheros javascript.
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales.
|
||||
- [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap5\BootstrapAsset]], contiene ficheros javascript.
|
||||
|
||||
Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle).
|
||||
Si necesitas unicamente estilos CSS, [[yii\bootstrap4\BootstrapAsset]] será suficiente para ti. Sin embargo, si
|
||||
quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap4\BootstrapPluginAsset]].
|
||||
Si necesitas unicamente estilos CSS, [[yii\bootstrap5\BootstrapAsset]] será suficiente para ti. Sin embargo, si
|
||||
quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap5\BootstrapPluginAsset]].
|
||||
|
||||
> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap4\BootstrapPluginAsset]].
|
||||
> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap5\BootstrapPluginAsset]].
|
||||
|
||||
@ -8,7 +8,7 @@ directorio `@app/assets`:
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // esta linea
|
||||
'yii\bootstrap5\BootstrapAsset', // esta linea
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -4,26 +4,26 @@ Html helper
|
||||
Bootstrap introduce muchas construcciones y esqueletos consistentes de HTML, que permiten crear diferentes efectos visuales.
|
||||
Unicamente lo más complejo está cubierto por los widgets proporcionados en esta extensión. El resto debería ser
|
||||
compuesto manualmente usando HTML directamente.
|
||||
Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap4\Html]].
|
||||
[[\yii\bootstrap4\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap.
|
||||
Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap5\Html]].
|
||||
[[\yii\bootstrap5\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap.
|
||||
Proporciona varios métodos útiles:
|
||||
|
||||
- `icon()` - permite renderizar iconos de Glyphicon
|
||||
- `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.
|
||||
Por ejemplo:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'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.
|
||||
|
||||
@ -8,7 +8,7 @@ La mejor manera para instalar esta extensión es a través de [composer](http://
|
||||
Ejecuta
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
o añade
|
||||
|
||||
@ -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.
|
||||
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.
|
||||
Para esto necesitas configurar el `assetManager` [componente de aplicación](https://github.com/yiisoft/yii2/blob/master/docs/guide-es/structure-application-components.md) como se muestra a continuación:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -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
|
||||
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\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
|
||||
## Personalización de las clases css para los widget <span id="customizing-css-classes"></span>
|
||||
@ -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
|
||||
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
|
||||
por ello.
|
||||
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.
|
||||
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.
|
||||
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':
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Yii 2 Twitter Bootstrap エクステンション
|
||||
========================================
|
||||
|
||||
このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 4](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています)
|
||||
このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 5](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています)
|
||||
に対するサポートを提供します。
|
||||
Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@ Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロン
|
||||
Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションは複数のアセット・バンドルを提供しています。
|
||||
すなわち、
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap4\BootstrapAsset]] に依存し、javascript ファイルを含みます。
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。
|
||||
- [[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]] を自動的に登録します。
|
||||
|
||||
@ -80,7 +80,7 @@ Bower または NPM のクライアントを直接に使って Bootstrap のア
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -93,7 +93,7 @@ Bower または NPM のクライアントを直接に使って Bootstrap のア
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -105,16 +105,16 @@ return [
|
||||
'assetManager' => [
|
||||
// CDN を使うようにバンドルをオーバーライド
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
|
||||
'css' => [
|
||||
'css/bootstrap.min.css'
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
|
||||
'js' => [
|
||||
'js/bootstrap.bundle.min.js'
|
||||
],
|
||||
@ -141,7 +141,7 @@ Bootstrap アセットを手作業でダウンロードし、プロジェクト
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -153,13 +153,13 @@ return [
|
||||
'assetManager' => [
|
||||
// バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'css' => [
|
||||
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'js' => [
|
||||
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
|
||||
|
||||
@ -9,7 +9,7 @@ bootstrap の基礎を使用することに関する詳細は、[bootstrap ド
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // この行です
|
||||
'yii\bootstrap5\BootstrapAsset', // この行です
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -4,27 +4,27 @@ Html ヘルパ
|
||||
Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。
|
||||
このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。
|
||||
残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。
|
||||
ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap4\Html]] によってカバーされています。
|
||||
[[\yii\bootstrap4\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、
|
||||
ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap5\Html]] によってカバーされています。
|
||||
[[\yii\bootstrap5\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、
|
||||
いくつかの便利なメソッドを提供するものです。例えば、
|
||||
|
||||
- `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
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> 注意: [[\yii\bootstrap4\Html]] と [[\yii\helpers\Html]] を混同してはいけません。
|
||||
> 注意: [[\yii\bootstrap5\Html]] と [[\yii\helpers\Html]] を混同してはいけません。
|
||||
ビューの中でどちらのクラスを使っているのかに注意してください。
|
||||
|
||||
@ -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` セクションに、
|
||||
|
||||
@ -6,102 +6,32 @@ yii2-bootstrap4 は、Bootstrap 3 から Bootstrap 4 への移行ガイドに従
|
||||
|
||||
## 一般
|
||||
|
||||
* 名前空間は `yii\bootstrap` から `yii\bootstrap4` に変更
|
||||
* `bower` ではなく `npm` パッケージを使用
|
||||
* テーマ・アセットは廃止
|
||||
* `popper.js` は不要になった (bootstrap js バンドルによって供給される)
|
||||
* 名前空間は `yii\bootstrap4` から `yii\bootstrap5` に変更
|
||||
|
||||
## ウィジェット / クラス
|
||||
|
||||
* [[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
|
||||
|
||||
`icon` メソッドは削除されました。グリフアイコンがもうバンドルされておらず、このメソッドが無意味になったためです。
|
||||
代りに、[Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) または
|
||||
[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline) を使うことを検討して下さい。
|
||||
|
||||
### ActiveField
|
||||
|
||||
以下のプロパティの名前が変りました。
|
||||
* `$checkboxTemplate` は `$checkTemplate` に変更。
|
||||
* `$horizontalCheckboxTemplate` は `$checkHorizontalTemplate` に変更。
|
||||
* `$horizontalRadioTemplate` は `$radioHorizontalTemplate` に変更。
|
||||
|
||||
プロパティ `$inlineCheckboxListTemplate` および `$inlineRadioListTemplate` は削除されました。`$checkEnclosedTemplate` と呼ばれる新しいテンプレートが追加されています。
|
||||
bootstrap 4 では、チェックボックスはラベルに包まれないのがデフォルトになりました。
|
||||
|
||||
### ActiveForm
|
||||
|
||||
新しい定数 [[yii\bootstrap4\ActiveForm::LAYOUT_DEFAULT]]、[[yii\bootstrap4\ActiveForm::LAYOUT_HORIZONTAL]]
|
||||
および [[yii\bootstrap4\ActiveForm::LAYOUT_INLINE]] が追加されました。
|
||||
これらによって、レイアウトの選択が容易になり、文字列がいつ何時変っても、リファクタリングが安全に出来るようになることが期待されます。
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
このクラスは bootstrap の要求を満たす正しいクラスと属性でパンくずリストをレンダリングするために導入されました。
|
||||
これは [[yii\widgets\Breadcrumbs]] と完全に互換です。
|
||||
|
||||
### 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
|
||||
|
||||
この新しいクラスを使うとボタン・ツールバーを描画することが出来ます。
|
||||
詳細は https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar を参照して下さい。
|
||||
|
||||
### Carousel
|
||||
|
||||
スライド間のアニメーションを制御する `$crossfade` というプロパティが導入されました。
|
||||
これが `true` に設定されると、スライド・アニメーションの代りにクロスフェイド・アニメーションが実行されます。
|
||||
|
||||
### LinkPager
|
||||
|
||||
この新しいクラスは [[yii\widgets\LinkPager]] のブートストラップ・バージョンです。
|
||||
詳細は https://getbootstrap.com/docs/4.3/components/pagination/ を参照して下さい。
|
||||
|
||||
### Modal
|
||||
|
||||
|
||||
次のプロパティの名前が変りました。
|
||||
* `$header` は `$title` に変更。
|
||||
* `$headerOptions` は `$titleOptions` に変更。
|
||||
|
||||
もう `<h2 class="modal-title></h2>` と書く必要はありません。自動的にそのようにレンダリングされます。
|
||||
|
||||
### Nav
|
||||
|
||||
`$dropdDownCaret` プロパティは削除されました。キャレットは (S)CSS によってのみ制御可能となりました。
|
||||
https://getbootstrap.com/docs/4.3/getting-started/theming/#sass-options を参照して下さい。
|
||||
|
||||
### NavBar
|
||||
|
||||
次のプロパティの名前が変りました。
|
||||
* `$containerOptions` は `$collapseOptions` に変更。
|
||||
|
||||
`$headerContent` プロパティは削除されました。NavBar のヘッダはもう有りません。
|
||||
トグラーがカスタマイズ可能になり、プロパティ `$togglerContent` および `$togglerOptions` が導入されました。
|
||||
|
||||
### Tabs
|
||||
|
||||
プロパティ `$panes` が導入されました。これによって、ペインの内容を `$items[0]['content']` ではなく、独立したプロパティによって定義することが出来るようになりました。
|
||||
ペインの配列のインデックスがアイテムのインデックスに対応します。
|
||||
例えば、`$items[0]` は `$panes[0]` に属します。
|
||||
|
||||
### ToggleButtonGroup
|
||||
|
||||
新しい定数 [[yii\bootstrap4\ToggleButtonGroup::TYPE_CHECKBOX]] および
|
||||
[[yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO]] が導入され、選択がより容易になり、
|
||||
いつ文字列が変ってもリファクタリングがより安全に出来るようになりました。
|
||||
|
||||
@ -3,13 +3,13 @@ Bootstrap の .sass ファイルを直接に使う
|
||||
|
||||
あなたが [Bootstrap CSS をあなたの sass ファイルに直接含める](http://getbootstrap.com/getting-started/#customizing) ことを望む場合は、
|
||||
オリジナルの 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) を以下のように構成します。
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -2,25 +2,28 @@ Yii ウィジェット
|
||||
================
|
||||
|
||||
複雑な bootstrap コンポーネントのほとんどは Yii ウィジェットでラップされて、より堅牢な構文を与えられ、フレームワークの諸機能と統合されています。
|
||||
全てのウィジェットは `\yii\bootstrap4` 名前空間に属します。
|
||||
全てのウィジェットは `\yii\bootstrap5` 名前空間に属します。
|
||||
|
||||
- [[yii\bootstrap4\Accordion|Accordion]]
|
||||
- [[yii\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
|
||||
## ウィジェットの CSS クラスをカスタマイズする <span id="customizing-css-classes"></span>
|
||||
@ -28,7 +31,7 @@ Yii ウィジェット
|
||||
これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。
|
||||
そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。
|
||||
|
||||
例えば、[[yii\bootstrap4\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
|
||||
例えば、[[yii\bootstrap5\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。
|
||||
このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。
|
||||
特定のボタン・クラスを指定するだけで十分です。
|
||||
|
||||
@ -40,7 +43,7 @@ echo Button::widget([
|
||||
```
|
||||
|
||||
しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。
|
||||
例えば、[[yii\bootstrap4\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、
|
||||
例えば、[[yii\bootstrap5\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、
|
||||
ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。
|
||||
単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。
|
||||
ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
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
|
||||
do lado do cliente do seu processo de desenvolvimento.
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@ Asset Bundles
|
||||
Bootstrap é uma solução complexa para front-end, o qual inclue CSS, JavaScript, fontes e assim por diante.
|
||||
A fim de permitir que você tenha controle mais flexível sobre componentes Bootstrap , esta extensão fornece vários asset bundles. Eles são:
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS.
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap4\BootstrapAsset]], contem os arquivos JavaScript.
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS.
|
||||
- [[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).
|
||||
Se você precisa apenas de estilos CSS, [[yii\bootstrap4\BootstrapAsset]] será o suficiente para você. No entanto , se
|
||||
você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap4\BootstrapPluginAsset]].
|
||||
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\bootstrap5\BootstrapPluginAsset]].
|
||||
|
||||
> Tip: a maioria dos widgets [[yii\bootstrap4\BootstrapPluginAsset]] registram automaticamente.
|
||||
> Tip: a maioria dos widgets [[yii\bootstrap5\BootstrapPluginAsset]] registram automaticamente.
|
||||
|
||||
@ -9,7 +9,7 @@ diretório `@app/assets`:
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // this line
|
||||
'yii\bootstrap5\BootstrapAsset', // this line
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
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
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'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.
|
||||
|
||||
@ -8,7 +8,7 @@ A maneira recomendada para instalar esta extensão é através do [composer](htt
|
||||
Então rode
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
Ou Adicione
|
||||
|
||||
@ -10,7 +10,7 @@ do seguinte modo:
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -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
|
||||
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\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Расширение Twitter Bootstrap для Yii 2
|
||||
======================================
|
||||
|
||||
Расширение включает поддержку разметки и компонентов фреймворка [Bootstrap 4](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента.
|
||||
Расширение включает поддержку разметки и компонентов фреймворка [Bootstrap 5](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента.
|
||||
|
||||
Ядро Bootstrap представлено двумя частями:
|
||||
|
||||
|
||||
@ -3,9 +3,9 @@ Asset Bundles
|
||||
|
||||
Bootstrap - это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. Для того чтобы обеспечить гибкий контроль над компонентами Bootstrap, расширение предоставляет несколько Asset Bundles. Вот они:
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы.
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - зависит от [[yii\bootstrap4\BootstrapAsset]], содержащий javascript файлы.
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы.
|
||||
- [[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]] автоматически.
|
||||
|
||||
@ -6,7 +6,7 @@ Yii не оборачивает базовый Bootstrap в PHP код, поск
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // подключение Bootstrap
|
||||
'yii\bootstrap5\BootstrapAsset', // подключение Bootstrap
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
Класс-помощник 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
|
||||
- `staticControl()` - позволяет отображать "статические элементы управления" формы
|
||||
|
||||
[[\yii\bootstrap4\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]], и может быть использован в качестве замены в ваших представлениях. Например:
|
||||
[[\yii\bootstrap5\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]], и может быть использован в качестве замены в ваших представлениях. Например:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> Attention: не путайте [[\yii\bootstrap4\Html]] и [[\yii\helpers\Html]]! Следите за тем какой класс вы используете в своих представлениях.
|
||||
> Attention: не путайте [[\yii\bootstrap5\Html]] и [[\yii\helpers\Html]]! Следите за тем какой класс вы используете в своих представлениях.
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
Для этого запустите команду
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
или добавьте
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
Использование .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
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [], // исключение исходных css-файлов из загрузки
|
||||
]
|
||||
]
|
||||
|
||||
@ -1,32 +1,35 @@
|
||||
Виджеты Yii
|
||||
===========
|
||||
|
||||
Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap4`:
|
||||
Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap5`:
|
||||
|
||||
- [[yii\bootstrap4\Accordion|Accordion]]
|
||||
- [[yii\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
|
||||
## Настройка CSS классов виджетов <span id="customizing-css-classes"></span>
|
||||
|
||||
Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета.
|
||||
|
||||
Например, вы можете использовать [[yii\bootstrap4\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки:
|
||||
Например, вы можете использовать [[yii\bootstrap5\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки:
|
||||
|
||||
```php
|
||||
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
|
||||
echo ButtonGroup::widget([
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Розширення Twitter Bootstrap для Yii 2
|
||||
======================================
|
||||
|
||||
З коробки Yii включає підтримку розмітки [Bootstrap 4](http://getbootstrap.com/) та компонентів фреймворку
|
||||
З коробки Yii включає підтримку розмітки [Bootstrap 5](http://getbootstrap.com/) та компонентів фреймворку
|
||||
(також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити
|
||||
процес розробки клієнтської частини сайту.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Yii не загортає основи bootstrap в код PHP, оскільки
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // цей рядок
|
||||
'yii\bootstrap5\BootstrapAsset', // цей рядок
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
Запустіть
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
або додайте
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
|
||||
Якщо ви хочете включити [CSS Bootstrap напряму до ваших sass файлів](http://getbootstrap.com/getting-started/#customizing)
|
||||
вам необхідно відключити завантаження оригінальних 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)
|
||||
`assetManager` наступним чином:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -2,22 +2,25 @@
|
||||
===========
|
||||
|
||||
Найбільш складні компоненти bootstrap загорнуті в віджети Yii, щоб забезпечити більш надійний синтаксис
|
||||
та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap4`:
|
||||
та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap5`:
|
||||
|
||||
- [[yii\bootstrap4\Accordion|Accordion]]
|
||||
- [[yii\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
基于Yii 2 的 Twitter Bootstrap 扩展
|
||||
=====================================
|
||||
|
||||
扩展包括对 [Bootstrap 3](http://getbootstrap.com/) 标记和组件框架的支持
|
||||
扩展包括对 [Bootstrap 5](http://getbootstrap.com/) 标记和组件框架的支持
|
||||
（也称为“Twitter Bootstrap”）。 Bootstrap是一个优秀的，响应式框架，可以大大加快
|
||||
客户端的开发过程。
|
||||
|
||||
|
||||
@ -5,10 +5,10 @@ Bootstrap是一个复杂的前端解决方案，其中包括 CSS ， JavaScript
|
||||
为了灵活的控制 Bootstrap 组件，此扩展提供了多个资源包。
|
||||
如下:
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件.
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - 包含 javascript 文件, 依赖于 [[yii\bootstrap4\BootstrapAsset]] .
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件.
|
||||
- [[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]] 。
|
||||
|
||||
@ -6,7 +6,7 @@ Yii不会将 bootstrap 合并到PHP代码中，因为HTML本身是非常简单
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // this line
|
||||
'yii\bootstrap5\BootstrapAsset', // this line
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -3,25 +3,25 @@ Html 助手
|
||||
|
||||
Bootstrap 引入了许多一致的 HTML 结构和骨架，允许创建不同的视觉效果。
|
||||
只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。
|
||||
但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap4\Html]] 重载.
|
||||
[[\yii\bootstrap4\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版.
|
||||
但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap5\Html]] 重载.
|
||||
[[\yii\bootstrap5\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版.
|
||||
它提供了很多实用的方法，例如:
|
||||
|
||||
- `icon()` - 生成Glyphicon图标
|
||||
- `staticControl()` - 生成表单静态组件 "static controls"
|
||||
|
||||
[[\yii\bootstrap4\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能，所以不需要在视图文件中同时引入这两个文件，如果需要，仅使用 [[\yii\bootstrap4\Html]] 即可.
|
||||
[[\yii\bootstrap5\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能，所以不需要在视图文件中同时引入这两个文件，如果需要，仅使用 [[\yii\bootstrap5\Html]] 即可.
|
||||
例如:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> 注意: 不要混淆 [[\yii\bootstrap4\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类.
|
||||
> 注意: 不要混淆 [[\yii\bootstrap5\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类.
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
直接运行
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
或者在项目目录的 `composer.json` 文件中添加如下代码
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
|
||||
如果引入 [直接使用Bootstrap的.sass文件](http://getbootstrap.com/getting-started/#customizing)
|
||||
则需要禁用原始加载的 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) 为如下:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -1,32 +1,35 @@
|
||||
Yii 小部件
|
||||
===========
|
||||
|
||||
大多数复杂的 bootstrap 组件被包装到 Yii 小部件中，以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap4` 下：
|
||||
大多数复杂的 bootstrap 组件被包装到 Yii 小部件中，以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap5` 下：
|
||||
|
||||
- [[yii\bootstrap4\Accordion|Accordion]]
|
||||
- [[yii\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
## 自定义小部件CSS类 <span id="customizing-css-classes"></span>
|
||||
|
||||
这些小部件可以快速构建基于 bootstrap CSS 样式的 bootstrap 组件，并直接生成 HTML 代码。
|
||||
特定组件的默认样式是自动添加的，也可以通过修改部件属性添加自定义样式类。
|
||||
|
||||
例如, 使用 [[yii\bootstrap4\Button::options]] 创建按钮。
|
||||
例如, 使用 [[yii\bootstrap5\Button::options]] 创建按钮。
|
||||
按钮中的 `btn` 样式将会被自动添加。只要再添加自己所需的按钮样式即可：
|
||||
|
||||
```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' 选项中的 'widget' 选项中定义即可:
|
||||
|
||||
|
||||
@ -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.
|
||||
They are:
|
||||
|
||||
- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files.
|
||||
- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap4\BootstrapAsset]], contains the javascript files.
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - contains only the main CSS 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.
|
||||
If you only need CSS styles, [[yii\bootstrap4\BootstrapAsset]] will be enough for you. However, if
|
||||
you intend to use Bootstrap JavaScript, you will need to register [[yii\bootstrap4\BootstrapPluginAsset]]
|
||||
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\bootstrap5\BootstrapPluginAsset]]
|
||||
as well.
|
||||
|
||||
> Tip: most of the widgets register [[yii\bootstrap4\BootstrapPluginAsset]] automatically.
|
||||
> Tip: most of the widgets register [[yii\bootstrap5\BootstrapPluginAsset]] automatically.
|
||||
|
||||
@ -80,7 +80,7 @@ In the `composer.json` of your project, add the following lines in order to prev
|
||||
|
||||
```json
|
||||
"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
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -105,16 +105,16 @@ return [
|
||||
'assetManager' => [
|
||||
// override bundles to use CDN :
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/',
|
||||
'css' => [
|
||||
'css/bootstrap.min.css'
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1',
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/,
|
||||
'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
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=4.2.1"
|
||||
"npm-asset/bootstrap": ">=5.0.2"
|
||||
},
|
||||
```
|
||||
|
||||
@ -153,13 +153,13 @@ return [
|
||||
'assetManager' => [
|
||||
// override bundles to use local project files :
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'css' => [
|
||||
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
|
||||
],
|
||||
],
|
||||
'yii\bootstrap4\BootstrapPluginAsset' => [
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'js' => [
|
||||
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
|
||||
|
||||
@ -9,7 +9,7 @@ convenient way to include bootstrap assets in your pages with a single line adde
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap4\BootstrapAsset', // this line
|
||||
'yii\bootstrap5\BootstrapAsset', // this line
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
@ -4,27 +4,27 @@ Html helper
|
||||
Bootstrap introduces many consistent HTML constructions and skeletons, which allow creating different visual effects.
|
||||
Only the most complex of them are covered by the widgets provided with this extension. The rest should be composed manually
|
||||
using direct HTML composition.
|
||||
However, several special Bootstrap markup cases are covered by the [[\yii\bootstrap4\Html]] helper.
|
||||
[[\yii\bootstrap4\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs.
|
||||
However, several special Bootstrap markup cases are covered by the [[\yii\bootstrap5\Html]] helper.
|
||||
[[\yii\bootstrap5\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs.
|
||||
It provides some useful methods like:
|
||||
|
||||
- `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.
|
||||
|
||||
For example:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap4\Html;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::icon('approve') . Html::encode('Save & apply'),
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'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.
|
||||
|
||||
@ -8,13 +8,13 @@ The preferred way to install this extension is through [composer](http://getcomp
|
||||
Either run
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
or add
|
||||
|
||||
```
|
||||
"yiisoft/yii2-bootstrap4": "~1.0.0"
|
||||
"yiisoft/yii2-bootstrap5": "~1.0.0"
|
||||
```
|
||||
|
||||
to the require section of your `composer.json` file.
|
||||
|
||||
@ -7,101 +7,31 @@ The most notable changes are summarized below:
|
||||
## General
|
||||
|
||||
* 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
|
||||
|
||||
* [[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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
@ -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)
|
||||
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:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap4\BootstrapAsset' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
|
||||
@ -2,25 +2,28 @@ Yii widgets
|
||||
===========
|
||||
|
||||
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\bootstrap4\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap4\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap4\Alert|Alert]]
|
||||
- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap4\Button|Button]]
|
||||
- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap4\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap4\Carousel|Carousel]]
|
||||
- [[yii\bootstrap4\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap4\Modal|Modal]]
|
||||
- [[yii\bootstrap4\Nav|Nav]]
|
||||
- [[yii\bootstrap4\NavBar|NavBar]]
|
||||
- [[yii\bootstrap4\Progress|Progress]]
|
||||
- [[yii\bootstrap4\Tabs|Tabs]]
|
||||
- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[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>
|
||||
@ -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 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.
|
||||
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.
|
||||
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.
|
||||
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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user