widget-bootstrap.md 2.53 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
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset', // this line
Alexander Makarov committed
27
];
28 29
```

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

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

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

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


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.
59
You can do this by setting the css property of the [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] to be empty.
60
For this you need to configure the `assetManager` [application component](structure-application-components.md) as follows:
61 62 63 64 65 66 67 68 69 70

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