widget-bootstrap.md 2.59 KB
Newer Older
Qiang Xue committed
1
Bootstrap Widgets
2
=================
3

4
> Note: This section is under development.
Qiang Xue committed
5

6 7 8
Out of the box, Yii includes support for the [Bootstrap 3](http://getbootstrap.com/) markup and components framework
(also known as "Twitter Bootstrap"). Bootstrap is an excellent, responsive framework that can greatly speed up the
client-side of your development process.
9

Larry Ullman committed
10
The core of Bootstrap is represented by two parts:
11

Larry Ullman committed
12
- CSS basics, such as a grid layout system, typography, helper classes, and responsive utilities.
13
- Ready to use components, such as forms, menus, pagination, modal boxes, tabs etc.
14 15 16 17

Basics
------

Larry Ullman committed
18
Yii doesn't wrap the bootstrap basics into PHP code since HTML is very simple by itself in this case. You can find details
19 20
about using the basics at [bootstrap documentation website](http://getbootstrap.com/css/). Still Yii provides a
convenient way to include bootstrap assets in your pages with a single line added to `AppAsset.php` located in your
21
`@app/assets` directory:
22 23

```php
Alexander Makarov committed
24
public $depends = [
25 26 27
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset', // this line
    // 'yii\bootstrap\BootstrapThemeAsset' // uncomment to apply bootstrap 2 style to bootstrap 3
Alexander Makarov committed
28
];
29 30
```

31
Using bootstrap through Yii asset manager allows you to minimize its resources and combine with your own resources when
32 33 34 35 36 37
needed.

Yii widgets
-----------

Most complex bootstrap components are wrapped into Yii widgets to allow more robust syntax and integrate with
38 39
framework features. All widgets belong to `\yii\bootstrap` namespace:

40
- [[yii\bootstrap\ActiveForm|ActiveForm]]
41 42 43 44 45 46 47 48 49 50 51 52
- [[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]]
53 54 55 56 57 58 59


Using the .less files of Bootstrap directly
-------------------------------------------

If you want to include the [Bootstrap css directly in your less files](http://getbootstrap.com/getting-started/#customizing)
you may need to disable the original bootstrap css files to be loaded.
60
You can do this by setting the css property of the [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] to be empty.
it3rmit committed
61
For this you need to configure the `assetManager` application component as follows:
62 63 64 65 66 67 68 69 70 71

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