Bootstrap

Include Bootstrap

Include bootstrap css and js to HTML:

\Phoenix\Script\BootstrapScript::css();
\Phoenix\Script\BootstrapScript::script();

Tooltips

Init tooltips:

\Phoenix\Script\BootstrapScript::tooltip();

Then use hasTooltip in element class to enable tooltip.

<a class="hasTooltip" title"Tooltip Text">...</a>

Custom tooltip class:

\Phoenix\Script\BootstrapScript::tooltip('.my-tooltips');

Checkbox

Use Awesome Bootstrap Checkboxes:

\Phoenix\Script\BootstrapScript::checkbox();

// Or use font-awesome icons

\Phoenix\Script\BootstrapScript::checkbox(BootstrapScript::FONTAWESOME);

See Awesome Bootstrap Checkbox

Iframe Modal

Add iframe modal to links:

\Phoenix\Script\BootstrapScript::modal();

Now add hasModal to <a> as class:

<a class="hasModal" href="http://windwalker.io">Open Link in Modal</a>

Then this link will open a modal with target page in iframe after clicked.

Calendar

Convert an input to bootstrap calendar:

\Phoenix\Script\BootstrapScript::calendar();

HTML

<input class="hasCalendar" name="date">

You can add some options to configure your calendar:

\Phoenix\Script\BootstrapScript::calendar('.selector', 'YYYY-MM-DD', [
    'sideBySide' => true,
    'calendarWeeks' => true
]);

See Bootstrap Datepicker

Tab State

Use tab-state.js to remember last used tab panel when you back to same page:

\Phoenix\Script\BootstrapScript::tabState();

\Phoenix\Script\BootstrapScript::tabState('#selector');

Button Radio

Convert HTML radio to Bootstrap radio:

\Phoenix\Script\BootstrapScript::buttonRadio();

Add btn-group to radio field to enable this feature:

class EditDefinition extends AbstractFieldDefinition
{
    public function doDefine()
    {
        $this->radio('state')
            ->setClass('btn-group')
            ->option('Published', 1)
            ->option('Unpublished', 0);

        // ...
    }
}

You can change the color class and selector options to fit different templates:

\Phoenix\Script\BootstrapScript::buttonRadio([
    'selector' => '.btn-group .radio',
    'buttonClass' => 'btn',
    'activeClass' => 'actice',
    'color' => [
        'default' => 'btn-default',
        'green'   => 'btn-success',
        'red'     => 'btn-danger',
        'blue'    => 'btn-primary',
    ]
]);

If you found a typo or error, please help us improve this document.