注意 本页内容与官方不同,如果不喜请查看原版

示例

$this->widget('bootstrap.widgets.TbButton',array(
    'label' => '主要',
    'type' => 'primary',
    'size' => 'large'
));
$this->widget('bootstrap.widgets.TbButton',array(
    'label' => '次要',
    'size' => 'large'
));

选项

你可以通过改变 size属性改变大小, large, small,或者 mini.

主要 主要 主要

进阶

名称 类型 默认值 描述
$buttonType string link callback类型,可选类型: 'link', 'button', 'submit', 'submitLink', 'reset', 'ajaxLink', 'ajaxButton' and 'ajaxSubmit'
$type string 按钮类型,可选类型: 'primary', 'info', 'success', 'warning', 'danger' and 'inverse'
$size string 按钮大小,可选类型: 'large', 'small' and 'mini'
$icon string 按钮图标,通过传入一个或者多个class名来实现
$label string 按钮文字
$url string 按钮链接
$block boolean false 是否撑满父元素的所有宽度
$active boolean false 是否是激活状态
$disabled boolean false 是否是禁用状态
$encodeLabel boolean false 是否处理label编码
$toggle boolean false 是否启用toggle功能
$loadingText string ajax加载时的文字
$completeText string ajax完成时文字
$items array 按钮下拉项目
$htmlOptions array array() 组件container的HTML属性
$ajaxOptions array array() 按钮的 ajax 选项 ('ajaxLink' 和 'ajaxButton'使用)
$dropdownOptions array array() 下拉菜单的属性
$visible boolean true 是否显示按钮

案例

两个基本选项,控制两个具体的变化。

一个按钮组

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
        array('label'=>'左', 'url'=>'#'),
        array('label'=>'中', 'url'=>'#'),
        array('label'=>'右', 'url'=>'#')
    ),
));
    

多个按钮组

<div class="btn-toolbar">
  <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'1', 'url'=>'#'),
       array('label'=>'2', 'url'=>'#'),
       array('label'=>'3', 'url'=>'#'),
       array('label'=>'4', 'url'=>'#'),
    ),
)); ?>
<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'5', 'url'=>'#'),
       array('label'=>'6', 'url'=>'#'),
       array('label'=>'7', 'url'=>'#'),
    ),
)); ?>
<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'8', 'url'=>'#'),
    ),
)); ?>
</div>
    

纵向按钮组

设置一组垂直堆叠的按钮.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'stacked'=>true,
    'buttons'=>array(
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-left'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-center'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-right'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-justify'),
    ),
));
    

复选和单选按钮组

控制显示, 调整 toggle 属性.

单选
复选
$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'type' => 'primary',
    'toggle' => 'radio',
    'buttons' => array(
       array('label'=>'左'),
       array('label'=>'中'),
       array('label'=>'右'),
    ),
));
    

概述和示例

给任意一个按钮加上.btn-group并设置下拉菜单的标记

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'size'=>'large',
    'type'=>'inverse', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'buttons'=>array(
       array('label'=>'逆操作', 'items'=>array(
       array('label'=>'动作', 'url'=>'#'),
       array('label'=>'其他动作', 'url'=>'#'),
       array('label'=>'其他...', 'url'=>'#'),
       '---',
       array('label'=>'分离链接', 'url'=>'#'),
    )),
    ),
));
    

适用于各种按钮尺寸

下拉按钮适用于各种按钮尺寸: 'size'=>'large', 'size'=>'small', or 'size'=>'mini'.


拆分按钮下拉菜单

基于按钮组的样式和标签,我们可以很容易做出分离式按钮,它左侧是标准按钮,右侧可以通过超链接弹出一个下拉列表

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'type' => 'primary', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'buttons' => array(
        array('label' => '动作', 'url' => '#'), // this makes it split :)
        array('items' => array(
            array('label' => '动作', 'url' => '#'),
            array('label' => '其他动作', 'url' => '#'),
            array('label' => '其他...', 'url' => '#'),
            '---',
            array('label' => '分离链接', 'url' => '#'),
        )),
    ),
));
    

尺寸

Utilize the size property mini, small, or large for sizing.

上拉菜单

通过添加 htmlOptions 属性将下拉改为上拉.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'htmlOptions' => array('class'=>'dropup'),  // easy stuff
    'buttons' => array(
        array('label' => '动作', 'url' => '#'),
        array('items' => array(
            array('label' => '动作', 'url' => '#'),
            array('label' => '其他动作', 'url' => '#'),
            array('label' => '其他...', 'url' => '#'),
            '---',
            array('label' => '分离链接', 'url' => '#'),
        )),
    ),
));
    

简易盒子

You use boxes to wrap up elements with a nice window effect. Boxes is a CPorlet type widget with the beauty of Bootstrap

简易盒子

My Basic Content (you can use renderPartial here too :))
$this->widget('bootstrap.widgets.TbBox', array(
    'title' => '简易盒子',
    'headerIcon' => 'icon-home',
    'content' => 'My Basic Content (you can use renderPartial here too :))' // $this->renderPartial('_view')
));
    

复杂内容

我们还可以这样包含数据.

NB盒子

# First name Last name Language Hours worked
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
<?php $box = $this->beginWidget('bootstrap.widgets.TbBox', array(
    'title' => 'NB盒子',
    'headerIcon' => 'icon-th-list',
    // when displaying a table, if we include bootstra-widget-table class
    // the table will be 0-padding to the box
    'htmlOptions' => array('class'=>'bootstrap-widget-table')
));?>
<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Language</th>
        <th>Hours worked</th>
    </tr>
    </thead>
    <tbody>
        <tr class="odd">
        <td>1</td><td>Mark</td><td>Otto</td><td>CSS</td><td>10</td>
        </tr>
        <tr class="even">
        <td>2</td><td>Jacob</td><td>Thornton</td><td>JavaScript</td><td>20</td>
        </tr>
        <tr class="odd">
        <td>3</td><td>Stu</td><td>Dent</td><td>HTML</td><td>15</td>
        </tr>
    </tbody>
</table>
<?php $this->endWidget();?>
    

带操作的盒子

You can also set actions to a box, so they can nicely display on its right corner as a dropdown button -icon actions on the way :)

头条!现在添加 任何类型 的按钮都行了

$this->widget('bootstrap.widgets.TbBox', array(
'title' => 'test',
'headerIcon' => 'icon-home',
'headerButtons' => array(
    array(
        'class' => 'bootstrap.widgets.TbButtonGroup',
        'type' => 'primary', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
        'buttons' => array(
            array('label' => '动作', 'url' => '#'), // this makes it split :)
            array('items' => array(
                array('label' => '动作', 'url' => '#'),
                array('label' => '其他动作', 'url' => '#'),
                array('label' => '其他...', 'url' => '#'),
                '---',
                array('label' => '分离链接', 'url' => '#'),
            )),
        )
    ),
    array(
        'class' => 'bootstrap.widgets.TbButtonGroup',
        'buttons'=>array(
            array('label'=>'左', 'url'=>'#'),
            array('label'=>'中', 'url'=>'#'),
            array('label'=>'右', 'url'=>'#')
        ),
    ),
)));
    

标签

效果 代码
默认 <span class="label">Default</span>
成功 <span class="label label-success">成功</span>
警告 <span class="label label-warning">Warning</span>
重要 <span class="label label-important">Important</span>
消息 <span class="label label-info">Info</span>
逆操作 <span class="label label-inverse">逆操作</span>
$this->widget('bootstrap.widgets.TbLabel', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'成功',
));
 

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
$this->widget('bootstrap.widgets.TbBadge', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'2',
));
 

标签

效果 代码
默认 <span class="label">Default</span>
成功 <span class="label label-success">成功</span>
警告 <span class="label label-warning">Warning</span>
重要 <span class="label label-important">Important</span>
消息 <span class="label label-info">Info</span>
逆操作 <span class="label label-inverse">逆操作</span>
$this->widget('bootstrap.widgets.TbLabel', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'成功',
));
 

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
$this->widget('bootstrap.widgets.TbBadge', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'2',
));
 

主角单元

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

我去, 这么大个!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<?php $this->beginWidget('bootstrap.widgets.TbHeroUnit', array(
    'heading'=>'Hello, world!',
)); ?>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>
    <?php $this->widget('bootstrap.widgets.TbButton', array(
    'type'=>'primary',
    'size'=>'large',
    'label'=>'Learn more',
)); ?>
</p>

<?php $this->endWidget(); ?>

Page header

Not part of any widget but worth to know: A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>
    

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

$this->widget('bootstrap.widgets.TbThumbnails', array(
    'dataProvider'=>$thumbDataProvider,
    'template'=>"{items}\n{pager}",
    'itemView'=>'_thumb',
));
    

Default alert

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
$this->widget('bootstrap.widgets.TbAlert', array(
    'block'=>true, // display a larger alert block?
    'fade'=>true, // use transitions?
    'closeText'=>'×', // close link text - if set to false, no close link is displayed
    'alerts'=>array( // configurations per alert type
        'success'=>array('block'=>true, 'fade'=>true, 'closeText'=>'×'), // success, info, warning, error or danger
    ),
));
    

案例

Basic

Default progress bar with a vertical gradient.

$this->widget('bootstrap.widgets.TbProgress', array(
    'type'=>'success', // 'info', 'success' or 'danger'
    'percent'=>60,
));
    

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

$this->widget('bootstrap.widgets.TbProgress', array(
    'type'=>'success', // 'info', 'success' or 'danger'
    'percent'=>60,
    'stripped'=>true
));
    

Animated

Set animated to true to animate the stripes right to left. Not available in all versions of IE.

$this->widget('bootstrap.widgets.TbProgress', array(
    'percent'=>40, // the progress
    'striped'=>true,
    'animated'=>true,
));
    

Stacked

Place multiple bars into the same .progress to stack them.

$this->widget('bootstrap.widgets.TbProgress', array(
    'stacked'=>array(
        array('type'=>'success', 'percent'=>30, 'htmlOptions'=>array('title'=>'Hey! I am a title here.')),
        array('type'=>'warning', 'percent'=>35),
        array('type'=>'danger', 'percent'=>30),
)));
    

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Detail Views

Basic Stuff

First nameMark
Last nameOtto
LanguageCSS
$this->widget('bootstrap.widgets.TbDetailView', array(
    'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),
    'attributes'=>array(
        array('name'=>'firstName', 'label'=>'First name'),
        array('name'=>'lastName', 'label'=>'Last name'),
        array('name'=>'language', 'label'=>'Language'),
    ),
));
    

Grid Views

In order to test the Grid Views we make use of the following data:

// $gridDataProvider
$mark = new Person();
$mark->id = 1;
$mark->firstName = 'Mark';
$mark->lastName = 'Otto';
$mark->language = 'CSS';
$mark->hours = 10;

$jacob = new Person();
$jacob->id = 2;
$jacob->firstName = 'Jacob';
$jacob->lastName = 'Thornton';
$jacob->language = 'JavaScript';
$jacob->hours = 20;

$stu = new Person();
$stu->id = 3;
$stu->firstName = 'Stu';
$stu->lastName = 'Dent';
$stu->language = 'HTML';
$stu->hours = 10;

$persons = array($mark, $jacob, $stu);

$gridDataProvider = new CArrayDataProvider($persons);

// $gridColumns
$gridColumns = array(
    array('name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 60px')),
    array('name'=>'firstName', 'header'=>'First name'),
    array('name'=>'lastName', 'header'=>'Last name'),
    array('name'=>'language', 'header'=>'Language'),
    array('name'=>'hours', 'header'=>'Hours worked'),
    array(
        'htmlOptions' => array('nowrap'=>'nowrap'),
        'class'=>'bootstrap.widgets.TbButtonColumn',
        'viewButtonUrl'=>null,
        'updateButtonUrl'=>null,
        'deleteButtonUrl'=>null,
    )
);

Default

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$this->widget('bootstrap.widgets.TbGridView', array(
    'dataProvider'=>$gridDataProvider,
    'template'=>"{items}",
    'columns'=>$gridColumns,
));

Striped

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'striped',
    'dataProvider'=>$gridDataProvider,
    'template'=>"{items}",
    'columns'=>$gridColumns,
));

Bordered

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'bordered',
    'dataProvider'=>$gridDataProvider,
    'template'=>"{items}",
    'columns'=>$gridColumns,
));

Condensed

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'condensed',
    'dataProvider'=>$gridDataProvider,
    'template'=>"{items}",
    'columns'=>$gridColumns,
));

Striped, bordered and condensed

#First nameLast nameLanguageHours workedEdit
 
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'striped bordered condensed',
    'dataProvider'=>$gridDataProvider,
    'template'=>"{items}",
    'filter'=>$person->search(),
    'columns'=>$gridColumns,
));

Vertical

Use the well as a simple effect on an element to give it an inset effect.

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'verticalForm',
    'htmlOptions'=>array('class'=>'well'),
)); ?>

<?php echo $form->textFieldRow($model, 'textField', array('class'=>'span3')); ?>
<?php echo $form->passwordFieldRow($model, 'password', array('class'=>'span3')); ?>
<?php echo $form->checkboxRow($model, 'checkbox'); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Login')); ?>

<?php $this->endWidget(); ?>

Search Form

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'searchForm',
    'type'=>'search',
    'htmlOptions'=>array('class'=>'well'),
)); ?>
<?php
    echo $form->textFieldRow($model, 'textField',
        array('class'=>'input-medium', 'prepend'=>'<i class="icon-search"></i>'));
?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Go')); ?>

<?php $this->endWidget(); ?>
    

Inline Form

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'inlineForm',
    'type'=>'inline',
    'htmlOptions'=>array('class'=>'well'),
)); ?>

<?php echo $form->textFieldRow($model, 'textField', array('class'=>'input-small')); ?>
<?php echo $form->passwordFieldRow($model, 'password', array('class'=>'input-small')); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Log in')); ?>

<?php $this->endWidget(); ?>
    

Horizontal

Legend

In addition to freeform text, any HTML5 text-based input appears like so.

Click inside! This is a super cool date field.

Click inside! An even a date range field!.

Nice bootstrap time picker

Color fields, not bad

Important Developers must obtain a license for RedactorJS to use it on their projects.

@
.00

Note: Labels surround all the options for much larger click areas.

<?php /** @var BootActiveForm $form */
    $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
        'id'=>'horizontalForm',
        'type'=>'horizontal',
    )); ?>

    <fieldset>

        <legend>Legend</legend>

        <?php echo $form->textFieldRow($model, 'textField',
        array('hint'=>'In addition to freeform text, any HTML5 text-based input appears like so.')); ?>
        <?php echo $form->datepickerRow($model, 'dateField',
        array('hint'=>'Click inside! This is a super cool date field.',
        'prepend'=>'>i class="icon-calendar">>/i>')); ?>
        <?php echo $form->dateRangeRow($model, 'dateRangeField',
        array('hint'=>'Click inside! An even a date range field!.',
        'prepend'=>'<i class="icon-calendar">>/i>',
        'options' => array('callback'=>'js:function(start, end){console.log(start.toString("MMMM d, yyyy") + " - " + end.toString("MMMM d, yyyy"));}')
        )); ?>
        <?php echo $form->timepickerRow($model, 'timepicker', array('hint'=>'Nice bootstrap time picker', 'append'=>'<i class="icon-time" style="cursor:pointer"></i>'));?>
        <?php echo $form->dropDownListRow($model, 'dropdown',
        array('Something ...', '1', '2', '3', '4', '5')); ?>
        <?php echo $form->dropDownListRow($model, 'multiDropdown',
        array('1', '2', '3', '4', '5'), array('multiple'=>true)); ?>
        <?php echo $form->select2Row($model, 'select2', array('asDropDownList' => false, 'options' => array(
        'tags' => array('clever','is', 'better', 'clevertech'),
        'placeholder' => 'type clever, or is, or just type!',
        'width' => '40%',
        'tokenSeparators' => array(',', ' ')
        )));?>
        <?php echo $form->fileFieldRow($model, 'fileField'); ?>
        <?php echo $form->textAreaRow($model, 'textarea', array('class'=>'span8', 'rows'=>5)); ?>
        <?php echo $form->redactorRow($model, 'redactor', array('class'=>'span4', 'rows'=>5)); ?>
        <?php echo $form->html5EditorRow($model, 'wysihtml5', array('class'=>'span4', 'rows'=>5, 'height'=>'200', 'options'=>array('color'=>true))); ?>
        <?php echo $form->ckEditorRow($model, 'ckeditor', array('options'=>array('fullpage'=>'js:true', 'width'=>'640', 'resize_maxWidth'=>'640','resize_minWidth'=>'320')));?>
        <?php echo $form->markdownEditorRow($model, 'markdown', array('height'=>'200px'));?>
        <?php echo $form->toggleButtonRow($model, 'toggle'); ?>
        <?php echo $form->uneditableRow($model, 'uneditable'); ?>
        <?php echo $form->textFieldRow($model, 'disabled', array('disabled'=>true)); ?>
        <?php echo $form->textFieldRow($model, 'prepend', array('prepend'=>'@')); ?>
        <?php echo $form->textFieldRow($model, 'append', array('append'=>'.00')); ?>
        <?php echo $form->checkBoxRow($model, 'disabled复选', array('disabled'=>true)); ?>
        <?php echo $form->checkBoxListInlineRow($model, 'inline复选es', array('1', '2', '3')); ?>
        <?php echo $form->checkBoxListRow($model, 'checkboxes', array(
        'Option one is this and that—be sure to include why it\'s great',
        'Option two can also be checked and included in form results',
        'Option three can—yes, you guessed it—also be checked and included in form results',
    ), array('hint'=>'<strong>Note:</strong> Labels surround all the options for much larger click areas.')); ?>
        <?php echo $form->radioButtonRow($model, 'radioButton'); ?>
        <?php echo $form->radioButtonListRow($model, 'radioButtons', array(
        'Option one is this and that—be sure to include why it\'s great',
        'Option two can is something else and selecting it will deselect option one',
    )); ?>

    </fieldset>

    <div class="form-actions">
        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'type'=>'primary', 'label'=>'Submit')); ?>
        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'reset', 'label'=>'Reset')); ?>
    </div>

<?php $this->endWidget(); ?>

Support For Yii Formbuilder Thanks to Joe Blocher

The community starts to add gems to the library. Now, YiiBooster has full support for yii's Form Builder.

Example

Formbuilder test form

This is a hint

  
// the TestFormBuilder model
class TestFormBuilder extends CFormModel
{
    public $search;
    public $agree;
    public $radiolist;

    public function rules()
    {
        return array(
            array('search', 'required'),
            array('agree,radiolist', 'boolean'),
            array('agree', 'compare', 'compareValue' => true,
                'message' => 'You must agree...'),

        );
    }

    // Change the labels here
    public function attributeLabels()
    {
        return array(
            'search' => 'Text search',
            'selectlist' => 'I agree',
        );
    }

    // return the formbuilder config
    public function getFormConfig()
    {
        return array(
            'title' => 'Formbuilder test form',
            'showErrorSummary' => true,
            'elements' => array(
                'search' => array(
                    'type' => 'text',
                       'maxlength' => 32,
                       'hint' => 'This is a hint',
                    'placeholder' => 'title',
                    'class' => 'input-large',
                    'append' => '<i class="icon-search"></i>',
                ),
                'agree' => array(
                    'type' => 'checkbox',
                    // 'hint' => 'Agree to terms and conditions',
                ),
                'radiolist' => array(
                    'type' => 'radiolistinline',
                    'items' => array('item1' => '1', 'item2' => '2', 'item3' => '3'),
                ),
            ),

            'buttons' => array(
                'submit' => array(
                    'type' => 'submit',
                    'layoutType' => 'primary',
                    'label' => 'Submit',
                ),
                'reset' => array(
                    'type' => 'reset',
                    'label' => 'Reset',
                ),
            ),
        );
    }
}

// rendering form
Yii::import('bootstrap.widgets.TbForm');
$formBuilderModel = new TestFormBuilder();

$form = TbForm::createForm($formBuilderModel->getFormConfig(),$formBuilderModel,
array(
    'htmlOptions'=>array('class'=>'well'),
    'type'=>'horizontal',
));

echo $form->render();

We have included the Select2 on roids plugin of Igor Vaynberg. The following is a simple example of the amount of possible features that this plugin can do. For further information on its use, please visit plugin docs.

$this->widget('bootstrap.widgets.TbSelect2', array(
    'asDropDownList' => false,
    'name' => 'clevertech',
    'options' => array(
        'tags' => array('clever','is', 'better', 'clevertech'),
        'placeholder' => 'disciplines',
        'width' => '40%',
        'tokenSeparators' => array(',', ' ')
)));    

The amazing work from Vitaliy Potapov, Yii-Boostrap-Editable, is also part of YiiBooster thanks to the generosity of its author.

Note: For a deeper understanding of the possibilities and configuration options of this widget, we highly recommend that you visit Bootstrap-editable documentation and Yii-Boostrap-Editable

Important Note: TbEditable has been updated to with X-Editable. Even though the current widgets work with the new JavaScript files, we are still checking compatibility issues regarding the widgets. We had to included it to the current version asap due that the anterior version not compatible with new Bootstrap version 2.2.0.

TbEditableField

Makes editable single attribute of model. Attribute should be safe (e.g. defined in rules() method of model) It can be one of several types:

1. Text

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'text',
   'model'     => $model,
   'attribute' => 'textField',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'enabled'   => true
));
    

2. TextArea

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'textarea',
   'model'     => $model,
   'attribute' => 'textArea',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'placement' => 'right',
   'enabled'   => true
));
    

3. Select

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'select',
   'model'     => $model,
   'attribute' => 'dropDown',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'source'    => array('Antonio', 'Ramirez', 'Cobos', 'Works', 'At', 'Clevertech'),
   'enabled'   => true
)); 

4. Date

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'date',
   'model'     => $model,
   'attribute' => 'dateField',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'format' => 'dd-mm-yyyy',
   'viewformat'  => 'dd/mm/yyyy',
   'placement'    => 'right',
   'enabled' => true
)); 

TbEditableDetailView

Makes editable several attributes of single model, shown as name-value table. Just define editable section inside attribute config. Only safe attributes become editable.

For more information: please visit EditableDetailView

Country codeCA
NameAlberta
$this->widget('bootstrap.widgets.TbEditableDetailView', array(
    'id' => 'region-details',
    'data' => Region::model()->findByPk(1),
    'url' => $this->createUrl('site/editable'),  //common submit url for all editables
    'attributes'=>array(
        'country_code',
        'name',
    )
));

TbEditableColumn

Do not get confused with TbJEditableColumn, this is the EditableColumn widget from Vitaliy Potapov.

Important: Choose between TbJEditableColumn or TbEditableColum, both types have conflicts if you are trying to use them together.

$this->widget('bootstrap.widgets.TbGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => new CActiveDataProvider('Region',array(
        'criteria'=>array('condition'=>'id < 5'))
    ),
    'template' => "{items}",
    'columns' => array(
        'country_code',
        array(
            'class' => 'bootstrap.widgets.TbEditableColumn',
            'name' => 'name',
            'sortable'=>false,
            'editable' => array(
                'url' => $this->createUrl('site/editable'),
                'placement' => 'right',
                'inputclass' => 'span3'
            )
        )),
));

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
    <div class="well">
      ...
    </div>
    

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
    <div class="well well-large">
      ...
    </div>
    
Look, I'm in a well!
    <div class="well well-small">
      ...
    </div>
    

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

    class="pull-left"
    
    .pull-left {
      float: left;
    }
    

.pull-right

Float an element right

    class="pull-right"
    
    .pull-right {
      float: right;
    }
    

.muted

Change an element's color to #999

    class="muted"
    
    .muted {
      color: #999;
    }
    

.clearfix

Clear the float on any element

    class="clearfix"
    
    .clearfix {
      *zoom: 1;
      &:before,
      &:after {
        display: table;
        content: "";
      }
      &:after {
        clear: both;
      }
    }
    

Create a wizard using the same settings and configuration as the Tabs component with minor additions to actually build a wizard.

Basic Wizard

首页 Content
资料 Content
消息 Content
$this->widget('bootstrap.widgets.TbWizard', array(
    'type' => 'tabs', // 'tabs' or 'pills'
    'tabs' => array(
        array('label' => '首页', 'content' => '首页 Content', 'active' => true),
        array('label' => '资料', 'content' => '资料 Content'),
        array('label' => '消息', 'content' => '消息 Content'),
    ),
));
    

As described above same configuration as the tabs widget apply to the wizard widget with the following additions:

options List of the wizard plugin JS options. See Wizard Github Page for a list of the available options
addTabsNavBar Adds extra div with navbar classes to change the appearance of the tab navigation
pagerContent The Next & Previous buttons displayed at the bottom of each tab content to move to the next and previous steps.

Wizard has 8 different events that it fires when certain actions are performed. onInit, onShow, onNext, onPrevious, onFirst, onLast, onTabShow, onTabClick

Example usage with events callbacks

首页 Content
资料 Content
消息 Content
$this->widget('bootstrap.widgets.TbWizard', array(
    'type' => 'tabs', // 'tabs' or 'pills'
    'options' => array(
        'onTabShow' => 'js:function(tab, navigation, index) { if((index+1) > 1) {alert("Tab #" + (index+1));} }',
        'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
    ),
    'tabs' => array(
        array('label' => '首页', 'content' => '首页 Content', 'active' => true),
        array('label' => '资料', 'content' => '资料 Content'),
        array('label' => '消息', 'content' => '消息 Content'),
    ),
));
    

Custom Next, Previous, First, Last Buttons & Progress Bar

首页 Content
资料 Content
消息 Content


$this->widget('bootstrap.widgets.TbWizard', array(
    'type' => 'tabs', // 'tabs' or 'pills'
    'pagerContent' => '<div style="float:right">
        <input type="button" class="btn button-next" name="next" value="Next" />
        <input type="button" class="btn button-last" name="last" value="Last" />
        </div>
        <div style="float:left">
            <input type="button" class="btn button-first" name="first" value="First" />
            <input type="button" class="btn button-previous" name="previous" value="Previous" />
        </div><br /><br />',
    'options' => array(
        'nextSelector' => '.button-next',
        'previousSelector' => '.button-previous',
        'firstSelector' => '.button-first',
        'lastSelector' => '.button-last',   
        'onTabShow' => 'js:function(tab, navigation, index) {
            var $total = navigation.find("li").length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            $("#wizard-bar > .bar").css({width:$percent+"%"});
        }',
        'onTabClick' => 'js:function(tab, navigation, index) {
            alert("Tab Click Disabled");return false;
        }',
    ),
    'tabs' => array(
        array('label' => '首页', 'content' => '首页 Content', 'active' => true),
        array('label' => '资料', 'content' => '资料 Content'),
        array('label' => '消息', 'content' => '消息 Content'),
    ),
));