Skip to content

Latest commit

 

History

History
66 lines (52 loc) · 2.49 KB

bootstrap-widgets.md

File metadata and controls

66 lines (52 loc) · 2.49 KB
Raw

Bootstrap widgets

Out of the box, Yii includes support for the Bootstrap 3 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.

The core of Bootstrap is represented by two parts:

  • CSS basics, such as a grid layout system, typography, helper classes, and responsive utilities.
  • Ready to use components, such as menus, pagination, modal boxes, tabs etc.

Basics

Yii doesn't wrap the bootstrap basics into PHP code since HTML is very simple by itself in this case. You can find details about using the basics at bootstrap documentation website. 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:

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset', // this line
    // 'yii\bootstrap\BootstrapThemeAsset' // uncomment to apply bootstrap 2 style to bootstrap 3
];

Using bootstrap through Yii asset manager allows you to minimize its resources and combine with your own resources when needed.

Yii widgets

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

  • [[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]]

Using the .less files of Bootstrap directly

If you want to include the Bootstrap css directly in your less files you may need to disable the original bootstrap css files to be loaded. You can do this by setting the css property of the [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] to be empty. For this you need to configure the assetManagner application component as follows:

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