first commit
This commit is contained in:
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/README.md
vendored
Normal file
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/README.md
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
Twitter Bootstrap Erweiterung für Yii 2
|
||||
=======================================
|
||||
|
||||
Diese Erweiterung enthält Unterstützung für das [Bootstrap 5 Framework](https://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.
|
||||
|
||||
Die Basis von Bootstrap ist unterteilt in folgende 2 Bereiche:
|
||||
- CSS Basics: Grid Layout System, Typography, Helper-Klassen, Responsive Funktionen.
|
||||
- "Ready to use"-Komponenten: Formulare, Menus, Paginationen, Modals, Tabs etc.
|
||||
|
||||
Loslegen
|
||||
--------
|
||||
|
||||
* [Installation](installation.md)
|
||||
* [Assets Setup](assets-setup.md)
|
||||
* [Basic Usage](basic-usage.md)
|
||||
|
||||
Verwendung
|
||||
----------
|
||||
|
||||
* [Yii widgets](usage-widgets.md)
|
||||
* [Html helper](helper-html.md)
|
||||
* [Asset Bundles](asset-bundles.md)
|
||||
|
||||
Weitere Themen
|
||||
--------------
|
||||
|
||||
* [Using the .sass files of Bootstrap directly](topics-sass.md)
|
||||
* [Migration von yii2-bootstrap](migrating-yii2-bootstrap.md)
|
||||
18
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/asset-bundles.md
vendored
Normal file
18
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/asset-bundles.md
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
Asset Bundles
|
||||
=============
|
||||
|
||||
Bootstrap ist eine komplexe Front-End-Lösung, welche CSS, Javascript, Schriften usw. beinhaltet.
|
||||
Um Ihnen die flexibelste Kontrolle über die einzelnen Komponenten zu ermöglichen, enthält diese Erweiterung verschiedene Asset Bundles.
|
||||
|
||||
Das sind:
|
||||
- [[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]].
|
||||
- [[yii\bootstrap5\BootstrapIconAsset|BootstrapIconAsset]] - enthält die Bootstrap Icons.
|
||||
|
||||
Verschiedene Anwendungsanforderungen erfordern verschiedene Bundles (bzw. Kombinationen).
|
||||
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.
|
||||
Falls Sie die Icons von Bootstrap 5 verwenden möchten, fügen Sie `twbs/bootstrap-icons` zu ihrem `composer.json` in die
|
||||
`require` Sektion ein und registrieren Sie [[yii\bootstrap5\BootstrapIconAsset]] in Ihrer Applikation
|
||||
|
||||
> Tipp: Die meisten Widgets laden [[yii\bootstrap5\BootstrapPluginAsset]] automatisch.
|
||||
170
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/assets-setup.md
vendored
Normal file
170
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/assets-setup.md
vendored
Normal file
@ -0,0 +1,170 @@
|
||||
Asset-Konfiguration
|
||||
===================
|
||||
|
||||
Diese Erweiterung beruht auf [Bower](https://bower.io/) und/oder [NPM](https://www.npmjs.org/) Packages für die Asset Installation.
|
||||
Bevor Sie diese Erweiterung einsetzen, sollten Sie entscheiden, auf welche Weise Sie diese Packages installieren möchten.
|
||||
|
||||
## Verwendung des asset-packagist Repository
|
||||
|
||||
Sie können [asset-packagist.or](https://asset-packagist.org) als Package-Quelle für die Bootstrap-Assets angeben.
|
||||
Fügen Sie dazu folgende Zeilen zur `composer.json`-Datei ihres Projekts hinzu:
|
||||
|
||||
```json
|
||||
"repositories": [
|
||||
{
|
||||
"type": "composer",
|
||||
"url": "https://asset-packagist.org"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Passen Sie `@npm` und `@bower` in der Konfiguration ihrer Applikation wie folgt an:
|
||||
|
||||
```php
|
||||
return [
|
||||
//...
|
||||
'aliases' => [
|
||||
'@bower' => '@vendor/bower-asset',
|
||||
'@npm' => '@vendor/npm-asset',
|
||||
],
|
||||
//...
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
## Verwendung des composer asset Plugins
|
||||
|
||||
Installieren Sie das [composer asset plugin](https://github.com/francoispluchino/composer-asset-plugin/) global durch das Ausführen folgendes Befehls:
|
||||
|
||||
```
|
||||
composer global require "fxp/composer-asset-plugin:^1.4.0"
|
||||
```
|
||||
|
||||
Fügen Sie folgende Zeilen zur `composer.json`-Datei ihres Projekts hinzu um das Verzeichnis der Installation von Assets anzupassen
|
||||
falls Sie möchten, das Yii sie verwaltet:
|
||||
|
||||
```json
|
||||
"extra": {
|
||||
"asset-installer-paths": {
|
||||
"npm-asset-library": "vendor/npm",
|
||||
"bower-asset-library": "vendor/bower"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Daraufhin können Sie den composer install bzw. update Befehl ausführen um die Boostrap Assets zu installieren.
|
||||
|
||||
> Warnung: Das Plugin `fxp/composer-asset-plugin` verlangsamt den `composer update` Befehl signifikant verglichen zur
|
||||
"asset-packagist"-Methode.
|
||||
|
||||
## Direkte Verwendung des Bower/NPM Clients
|
||||
|
||||
Sie kännen die Bootstrap Assets direkt via Bower oder NPM Client installieren.
|
||||
Fügen Sie dafür folgende Zeilen zur `package.json`-Datei Ihres Projekts hinzu:
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"dependencies": {
|
||||
"bootstrap": "5.1",
|
||||
...
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
## Verwendung des CDN
|
||||
|
||||
Sie können die Bootstrap Assets vom [offiziellen CDN](https://www.bootstrapcdn.com) laden.
|
||||
|
||||
Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Asset mit den CDN Links):
|
||||
|
||||
```php
|
||||
return [
|
||||
'components' => [
|
||||
'assetManager' => [
|
||||
// override bundles to use CDN :
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
|
||||
'css' => [
|
||||
'css/bootstrap.min.css'
|
||||
],
|
||||
],
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => null,
|
||||
'baseUrl' => 'https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/',
|
||||
'js' => [
|
||||
'js/bootstrap.bundle.min.js'
|
||||
],
|
||||
],
|
||||
],
|
||||
],
|
||||
// ...
|
||||
],
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
## Kompilieren von den .sass Dateien
|
||||
|
||||
Falls Sie den Bootstrap Quelltext direkt anpassen möchten, können Sie das CSS direkt von den Quell *.sass-Dateien kompilieren.
|
||||
In diesem Fall macht die Installation der Bootstrap Assets via composer bzw. Bower/NPM kein Sinn, da Sie keine Dateien innerhalb
|
||||
des 'vendor'-Verzeichnisses bearbeiten können.
|
||||
Sie müssen die Bootstrap-Assets manuell herunterladen und sie irgendwo in Ihrem Projekt platzieren (z.B. 'assets/source/bootstrap').
|
||||
|
||||
Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen:
|
||||
|
||||
```json
|
||||
"replace": {
|
||||
"npm-asset/bootstrap": ">=5.1"
|
||||
},
|
||||
```
|
||||
|
||||
Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Assets):
|
||||
|
||||
```php
|
||||
return [
|
||||
'components' => [
|
||||
'assetManager' => [
|
||||
// override bundles to use local project files :
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'css' => [
|
||||
YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css',
|
||||
],
|
||||
],
|
||||
'yii\bootstrap5\BootstrapPluginAsset' => [
|
||||
'sourcePath' => '@app/assets/source/bootstrap/dist',
|
||||
'js' => [
|
||||
YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
|
||||
]
|
||||
],
|
||||
],
|
||||
],
|
||||
// ...
|
||||
],
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
Nach dem Verändern des Bootstrap Quellcodes, stellen Sie sicher, dass sie neu [kompiliert werden](https://getbootstrap.com/docs/5.1/getting-started/contribute/#using-npm-scripts), z.B. mittels `npm run dist`.
|
||||
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/basic-usage.md
vendored
Normal file
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/basic-usage.md
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
Grundlegende Verwendung
|
||||
=======================
|
||||
|
||||
Yii verpackt die Bootstrap Basics nicht in PHP Code, da dass HTML selbst sehr einfach aufgebaut ist. Sie finden mehr
|
||||
Informationen zur Verwendung der Basics unter [bootstrap documentation website](https://getbootstrap.com/docs/). Yii bietet
|
||||
aber eine einfache Methode zur Einbindung der Bootstrap Assets in Ihre Seite durch das Hinzufügen einer Zeile zu `AppAsset.ph`
|
||||
im `@app/assets` Verzeichnis:
|
||||
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap5\BootstrapAsset', // Diese Zeile
|
||||
];
|
||||
```
|
||||
|
||||
Die Verwendung von Bootstrap mittels des Yii Asset Manager erlaubt die Komprimierung und Kombinierung der Bootstrapressourcen
|
||||
mit den Applikationsressourcen (falls nötig).
|
||||
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/helper-html.md
vendored
Normal file
30
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/helper-html.md
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
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\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 wie z.B.
|
||||
|
||||
- `staticControl()` - erlaubt das erstellen von "[statischen Feldern](https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text)"
|
||||
|
||||
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\bootstrap5\Button;
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::tag('i', ['class' => 'fas fa-check']) . Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> Vorsicht: Verwechseln Sie [[\yii\bootstrap5\Html]] und [[\yii\helpers\Html]] Klassen nicht und bedenken Sie jeweils
|
||||
welche Sie in Ihren Views verwenden.
|
||||
20
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/installation.md
vendored
Normal file
20
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/installation.md
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
Installation
|
||||
============
|
||||
|
||||
## Mittels Composer Package
|
||||
|
||||
Der empfohlene Weg zur Installation dieser Erweiterung ist mittels [composer](https://getcomposer.org/download/).
|
||||
|
||||
Führen Sie entweder folgenden Befehlt aus
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
oder fügen Sie folgendes
|
||||
|
||||
```
|
||||
"yiisoft/yii2-bootstrap5": "~1.0.0"
|
||||
```
|
||||
|
||||
zur `require`-Sektion Ihrer `composer.json`-Datei hinzu.
|
||||
48
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/migrating-yii2-bootstrap.md
vendored
Normal file
48
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/migrating-yii2-bootstrap.md
vendored
Normal file
@ -0,0 +1,48 @@
|
||||
Migration von yii2-bootstrap4
|
||||
=============================
|
||||
|
||||
yii2-bootstrap4 ist eine komplette Überarbeitung des Projekts (siehe den Bootstrap 4 von Bootstrap 3 Migrationsguide).
|
||||
Die größten Änderungen finden Sie hier zusammengefasst:
|
||||
|
||||
## Allgemein
|
||||
|
||||
* Der Namespace ist nun `yii\bootstrap5` anstatt `yii\bootstrap4`
|
||||
* Die PHP Kompatibilität **ist beschränkt auf** `>=7.0`
|
||||
* Der "Schließen"-Button von Widgets wie [[yii\bootstrap5\Alert|Alert]] oder [[yii\bootstrap5|Modal|Modal]] wird neu
|
||||
via CSS dargestellt und hat keinen Inhalt mehr. Es ist daher beim Überschreiben sicherzustellen, dass die `btn-close`
|
||||
Klasse entfernt wird und die benötigten Stile manuell gesetzt werden.
|
||||
|
||||
## Widgets / Klassen
|
||||
|
||||
### BaseHtml
|
||||
|
||||
### ActiveField
|
||||
|
||||
### ActiveForm
|
||||
|
||||
Es gibt eine neue Konstante [[yii\bootstrap5\ActiveForm::LAYOUT_FLOATING]]. Sie repräsentiert ein
|
||||
[neues Formular-Layout](https://getbootstrap.com/docs/5.1/forms/floating-labels/) in Bootstrap 5.
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
### ButtonDropdown
|
||||
|
||||
### ButtonToolbar
|
||||
|
||||
### Carousel
|
||||
|
||||
### LinkPager
|
||||
|
||||
### Modal
|
||||
|
||||
### Nav
|
||||
|
||||
### NavBar
|
||||
|
||||
Es gibt nun die Möglichkeit der Erstellung einer [Offcanvas Navbar](https://getbootstrap.com/docs/5.1/components/navbar/#offcanvas).
|
||||
Dies ist zu erreichen, indem man die Eigenschaft `$collapseOptions` des Widgets [[yii\bootstrap5\NavBar|Navbar]] auf `false`
|
||||
und die Eigenschaft `$offcanvasOptions` auf ein array setzt (auch wenn leer).
|
||||
|
||||
### Tabs
|
||||
|
||||
### ToggleButtonGroup
|
||||
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/topics-sass.md
vendored
Normal file
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/topics-sass.md
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
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\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\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
]
|
||||
```
|
||||
97
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/usage-widgets.md
vendored
Normal file
97
vendor/yiisoft/yii2-bootstrap5/docs/guide-de/usage-widgets.md
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
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\bootstrap5` Namespace:
|
||||
|
||||
- [[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\Offcanvas|Offcanvas]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
## ActiveField: Weitere Input-Typen <span id="additional-fields"></span>
|
||||
|
||||
- [Range](https://getbootstrap.com/docs/5.1/forms/range/): `$form->rangeInput(['min' => 0, 'max' => 100, 'step' => 1])`
|
||||
- [Color picker](https://getbootstrap.com/docs/5.1/forms/form-control/#color): `$form->colorInput()`
|
||||
- [Switch](https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches): `$form->checkbox(['switch' => true])`
|
||||
|
||||
## Anpassen der Widget CSS-Klassen <span id="customizing-css-classes"></span>
|
||||
|
||||
Die Widgets erlauben die schnelle Erstellung von HTML-Markup der Bootstrap Komponenten.
|
||||
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\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:
|
||||
|
||||
```php
|
||||
echo Button::widget([
|
||||
'label' => 'Action',
|
||||
'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary"
|
||||
]);
|
||||
```
|
||||
|
||||
Manchmal möchte man aber die Standard-Klasse ersetzen.
|
||||
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:
|
||||
|
||||
```php
|
||||
echo ButtonGroup::widget([
|
||||
'options' => [
|
||||
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical'
|
||||
],
|
||||
'buttons' => [
|
||||
['label' => 'A'],
|
||||
['label' => 'B'],
|
||||
]
|
||||
]);
|
||||
```
|
||||
|
||||
|
||||
## Navbar widget <span id="navbar-widget"></span>
|
||||
|
||||
Das Navbar Widget hat so seine Eigenheiten. Bei der Verwendung des Widgets sollten Sie darauf achten, dass der Breakpoint,
|
||||
ab welchem die Navigation zugeklappt wird (Mobile Navigation) sowie das Farbschema definiert sind.
|
||||
|
||||
Diese Definition geschieht über CSS Klassen. Die Standartwerte lauten `navbar-light bg-light` fürs Farbschema und
|
||||
`navbar-expand-lg` für den brakpoint. Für weitere Informationen, konsultieren Sie die [Bootstrap Dokumentation](https://getbootstrap.com/docs/5.1/components/navbar/):
|
||||
```php
|
||||
Navbar::begin([
|
||||
'options' => [
|
||||
'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md']
|
||||
]
|
||||
]);
|
||||
[...]
|
||||
Navbar::end();
|
||||
```
|
||||
|
||||
Falls Sie die Reihenfolge des Logos und des "Toggle Buttons" ändern möchten, können Sie dies wie folgt tun:
|
||||
```php
|
||||
Navbar::begin([
|
||||
'brandOptions' => [
|
||||
'class' => ['order-1']
|
||||
],
|
||||
'togglerOptions' => [
|
||||
'class' => ['order-0']
|
||||
]
|
||||
]);
|
||||
[...]
|
||||
Navbar::end();
|
||||
```
|
||||
Reference in New Issue
Block a user