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