Evgeniy Moiseenko
8 years ago
committed by
Alexander Makarov
7 changed files with 160 additions and 0 deletions
@ -0,0 +1,27 @@ |
|||||||
|
Расширение Twitter Bootstrap для Yii 2 |
||||||
|
===================================== |
||||||
|
|
||||||
|
Расшинение включает поддержку разметки и компонентов фреймворка [Bootstrap 3](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента. |
||||||
|
|
||||||
|
Ядро Bootstrap представлено двумя частями: |
||||||
|
|
||||||
|
- CSS основа, такая как система разметки, типографика, вспомогательные классы, и утилиты адаптивности. |
||||||
|
- Готовые к использованию компоненты, такие как формы, меню, нумерация страниц, модальные окна, вкладки и т.д. |
||||||
|
|
||||||
|
Как начать |
||||||
|
--------------- |
||||||
|
|
||||||
|
* [Установка](installation.md) |
||||||
|
* [Базовое использование](basic-usage.md) |
||||||
|
|
||||||
|
Ипользование |
||||||
|
----- |
||||||
|
|
||||||
|
* [Виджеты Yii](usage-widgets.md) |
||||||
|
* [Html helper](helper-html.md) |
||||||
|
* [Asset Bundles](asset-bundles.md) |
||||||
|
|
||||||
|
Дополнительно |
||||||
|
----------------- |
||||||
|
|
||||||
|
* [Использование .less файлов Bootstrap напрямую](topics-less.md) |
@ -0,0 +1,14 @@ |
|||||||
|
Asset Bundles |
||||||
|
============= |
||||||
|
|
||||||
|
Bootstrap это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. |
||||||
|
Для того чтобы обеспечить вам самый гибкий контроль над компонентами Bootstrap, это расширение предоставляет несколькоо asset bundles. |
||||||
|
Вот они: |
||||||
|
|
||||||
|
- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы. |
||||||
|
- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - зависит от [[yii\bootstrap\BootstrapAsset]], содержащий javascript файлы. |
||||||
|
- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - зависит от [[yii\bootstrap\BootstrapAsset]], содержащий Bootstrap CSS темы по умолчанию. |
||||||
|
|
||||||
|
Конкретные приложения могут потребовать различного использования. Если вам нужны только CSS стили, то [[yii\bootstrap\BootstrapAsset]] будет достаточным для вас. Тем не менее, если вы хотите использовать Bootstrap JavaScript, вам необходимо зарегистрировать [[yii\bootstrap\BootstrapPluginAsset]]. |
||||||
|
|
||||||
|
> Tip: большинство виджетов регистрируются [[yii\bootstrap\BootstrapPluginAsset]] автоматически. |
@ -0,0 +1,13 @@ |
|||||||
|
Базовое использование |
||||||
|
=========== |
||||||
|
|
||||||
|
Yii не оборачивает базовый Bootstrap в PHP код, поскольку HTML, в этом случае, прост сам по себе. Вы можете найти подробную информацию об использовании на [сайте документации bootstrap](http://getbootstrap.com/css/). Тем не менее, Yii обеспечивает удобный способ включения bootstrap assets на ваших страницах добавленим одной строки в `AppAsset.php` расположенной в вашей `@app/assets` директории: |
||||||
|
|
||||||
|
```php |
||||||
|
public $depends = [ |
||||||
|
'yii\web\YiiAsset', |
||||||
|
'yii\bootstrap\BootstrapAsset', // this line |
||||||
|
]; |
||||||
|
``` |
||||||
|
|
||||||
|
Использование загрузки Bootstrap через Yii asset manager позволяет минимизировать ресурсы и объединить с вашими собственными ресурсами, когда это будет необходимо. |
@ -0,0 +1,25 @@ |
|||||||
|
Html helper |
||||||
|
=========== |
||||||
|
|
||||||
|
Bootstrap вводит много последовательных HTML конструкции и каркасов, которые позволяют создавать различные визуальные эффекты. Только самые сложные из них передставлены виджетами, поставляемые с данным расширением. Остальные должны быть собраны вручную используя напрямую HTML. |
||||||
|
Тем не менее, несколько специальных Bootstrap разметок предоставляются в [[\yii\bootstrap\Html]] помощнике. |
||||||
|
[[\yii\bootstrap\Html]] является расширенной версией регулярного [[\yii\helpers\Html]] удовлетворяющий потребности Bootstrap. |
||||||
|
Он предоставляет несколько полезных методов: |
||||||
|
|
||||||
|
- `icon()` - позволяет отображать иконки Glyphicon |
||||||
|
- `staticControl()` - позволяет отображать "статические элементы управления" формы |
||||||
|
|
||||||
|
[[\yii\bootstrap\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]] и может быть использован в качестве замены внутри ваших представлений. Например: |
||||||
|
|
||||||
|
```php |
||||||
|
<?php |
||||||
|
use yii\bootstrap\Html; |
||||||
|
?> |
||||||
|
<?= Button::widget([ |
||||||
|
'label' => Html::icon('approve') . Html::encode('Save & apply'), |
||||||
|
'encodeLabel' => false, |
||||||
|
'options' => ['class' => 'btn-primary'], |
||||||
|
]); ?> |
||||||
|
``` |
||||||
|
|
||||||
|
> Attention: не путайте [[\yii\bootstrap\Html]] и [[\yii\helpers\Html]], будте осторожны, какой класс вы используете в своих представлениях. |
@ -0,0 +1,20 @@ |
|||||||
|
Установка |
||||||
|
============ |
||||||
|
|
||||||
|
## Получение Composer пакета |
||||||
|
|
||||||
|
Предпочтительный способ установки расширения через [composer](http://getcomposer.org/download/). |
||||||
|
|
||||||
|
Для этого запустите |
||||||
|
|
||||||
|
``` |
||||||
|
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap |
||||||
|
``` |
||||||
|
|
||||||
|
или добавьте |
||||||
|
|
||||||
|
``` |
||||||
|
"yiisoft/yii2-bootstrap": "~2.0.0" |
||||||
|
``` |
||||||
|
|
||||||
|
в секцию require вашего `composer.json`. |
@ -0,0 +1,14 @@ |
|||||||
|
Использование .less файлов Bootstrap напрямую |
||||||
|
=========================================== |
||||||
|
|
||||||
|
Если вы хотите включить [Bootstrap CSS непосредственно в ваши less файлы](http://getbootstrap.com/getting-started/#customizing), вам может понадобится отключить исходные css bootstrap файлы из загрузки. Вы можете сделать это установив [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] свойство пустым. Для этого вам необходимо настроить [компонент приложения](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) `assetManager` следующим образом: |
||||||
|
|
||||||
|
```php |
||||||
|
'assetManager' => [ |
||||||
|
'bundles' => [ |
||||||
|
'yii\bootstrap\BootstrapAsset' => [ |
||||||
|
'css' => [], |
||||||
|
] |
||||||
|
] |
||||||
|
] |
||||||
|
``` |
@ -0,0 +1,47 @@ |
|||||||
|
Виджеты Yii |
||||||
|
=========== |
||||||
|
|
||||||
|
Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap`: |
||||||
|
|
||||||
|
- [[yii\bootstrap\ActiveForm|ActiveForm]] |
||||||
|
- [[yii\bootstrap\Alert|Alert]] |
||||||
|
- [[yii\bootstrap\Button|Button]] |
||||||
|
- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]] |
||||||
|
- [[yii\bootstrap\ButtonGroup|ButtonGroup]] |
||||||
|
- [[yii\bootstrap\Carousel|Carousel]] |
||||||
|
- [[yii\bootstrap\Collapse|Collapse]] |
||||||
|
- [[yii\bootstrap\Dropdown|Dropdown]] |
||||||
|
- [[yii\bootstrap\Modal|Modal]] |
||||||
|
- [[yii\bootstrap\Nav|Nav]] |
||||||
|
- [[yii\bootstrap\NavBar|NavBar]] |
||||||
|
- [[yii\bootstrap\Progress|Progress]] |
||||||
|
- [[yii\bootstrap\Tabs|Tabs]] |
||||||
|
|
||||||
|
|
||||||
|
## Настройка CSS классов виджетов <span id="customizing-css-classes"></span> |
||||||
|
|
||||||
|
Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета. |
||||||
|
|
||||||
|
Например, вы можете использовать [[yii\bootstrap\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически чтобы вы не беспокоились об этом. Все, что вам нужно, это указать конкретный класс кнопки: |
||||||
|
|
||||||
|
```php |
||||||
|
echo Button::widget([ |
||||||
|
'label' => 'Action', |
||||||
|
'options' => ['class' => 'btn-primary'], // создаст класс "btn btn-primary" |
||||||
|
]); |
||||||
|
``` |
||||||
|
|
||||||
|
Тем не менее, иногда вам может понадобиться заменить классы по умолчанию альтернативными. Например, виджет [[yii\bootstrap\ButtonGroup]] использует класс `btn-group` для контейнера `div` по умолчанию, но вам, возможно, прийдется использовать `btn-group-vertical` чтобы выровнять кнопки по вертикали. |
||||||
|
С помощью опции `class` просто добавить `btn-group-vertical` к `btn-group`, которая даст не правильный результат. Для того, чтобы переопределить классы виджета по умолчанию, необходимо указать параметр `class` как массив, содержащий определение класса настроенное в ключе `widget`: |
||||||
|
|
||||||
|
```php |
||||||
|
echo ButtonGroup::widget([ |
||||||
|
'options' => [ |
||||||
|
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' |
||||||
|
], |
||||||
|
'buttons' => [ |
||||||
|
['label' => 'A'], |
||||||
|
['label' => 'B'], |
||||||
|
] |
||||||
|
]); |
||||||
|
``` |
Loading…
Reference in new issue