yii2/docs/guide-uk/widget-bootstrap.md

Віджети Bootstrap

Примітка: Цей розділ знаходиться на стадії розробки.

З коробки Yii включає підтримку розмітки Bootstrap 3 та компонентів фреймворку (також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити процес розробки клієнтської частини сайту.

Ядро Bootstrap представлене двома частинами:

• Основи CSS, такі як система макету сітки, типографія, допоміжні класи і адаптивні утиліти.
• Готові до використання компоненти, такі як форми, меню, нумерація сторінок (pagination), модальні вікна, вкладки (tabs) і т.д.

Основи

Yii не загортає основи bootstrap в код PHP, оскільки в цьому випадку, сам по собі HTML є дуже простим. Ви можете знайти детальну інформацію про використання основ на сайті документації bootstrap. Проте Yii забезпечує зручний спосіб підключення ресурсів bootstrap до ваших сторінок за допомогою всього одного рядка до файла AppAsset.php, розташованого в каталозі @app/assets:

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset', // цей рядок
];

Використання bootstrap через менеджер ресурсів Yii дозволяє мінімізувати свої ресурси і обʼєднати із вашими власними ресурсами коли це необхідно.

Віджети Yii

Найбільш складні компоненти bootstrap загорнуті в Yii віджети, щоб забезпечити більш надійний синтаксис та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен \yii\bootstrap:

• yii\bootstrap\ActiveForm
• yii\bootstrap\Alert
• yii\bootstrap\Button
• yii\bootstrap\ButtonDropdown
• yii\bootstrap\ButtonGroup
• yii\bootstrap\Carousel
• yii\bootstrap\Collapse
• yii\bootstrap\Dropdown
• yii\bootstrap\Modal
• yii\bootstrap\Nav
• yii\bootstrap\NavBar
• yii\bootstrap\Progress
• yii\bootstrap\Tabs

Використання .less файлів в Bootstrap

Якщо ви хочете включити CSS Bootstrap напряму до ваших less файлів вам необхідно відключити завантаження оригінальних bootstrap css файлів. Ви можете зробити це, встановивши CSS властивість yii\bootstrap\BootstrapAsset порожньою. Для цього вам необхідно налаштувати компонент додатка assetManager наступним чином:

    'assetManager' => [
        'bundles' => [
            'yii\bootstrap\BootstrapAsset' => [
                'css' => [],
            ]
        ]
    ]