bootstrap-widgets.md 2.15 KB
Newer Older
1 2
Bootstrap widgets
=================
3

Larry Ullman committed
4
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.
5

Larry Ullman committed
6
The core of Bootstrap is represented by two parts:
7

Larry Ullman committed
8
- CSS basics, such as a grid layout system, typography, helper classes, and responsive utilities.
Larry Ullman committed
9
- Ready to use components, such as menus, pagination, modal boxes, tabs etc.
10 11 12 13

Basics
------

Larry Ullman committed
14
Yii doesn't wrap the bootstrap basics into PHP code since HTML is very simple by itself in this case. You can find details
15 16 17 18 19
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
`config` directory:

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

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

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

Most complex bootstrap components are wrapped into Yii widgets to allow more robust syntax and integrate with
34 35 36 37 38 39 40 41 42 43 44 45 46 47
framework features. All widgets belong to `\yii\bootstrap` namespace:

- Alert
- Button
- ButtonDropdown
- ButtonGroup
- Carousel
- Collapse
- Dropdown
- Modal
- Nav
- NavBar
- Progress
- Tabs
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66


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.
You can do this by setting the css property of the `BootstrapAsset` to be empty.
For this you need to configure the `assetManagner` application component as follows:

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