Basics - Yiistrap, Twitter Bootstrap for Yii

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<?php echo TbHtml::lead('...'); ?>

Emphasis

Small

This line of text is meant to be treated as fine print.

<p><?php echo TbHtml::small('...'); ?></p>

Bold

The following snippet of text is rendered as bold text.

<p>The following snippet of text is <?php echo TbHtml::b('rendered as bold text'); ?>.</p>

Italic

The following snippet of text is rendered as italic text.

<p>The following snippet of text is <?php echo TbHtml::i('rendered as italic text'); ?>.</p>

Emphasis styles

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<?php echo TbHtml::muted('Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.'); ?>
<?php echo TbHtml::em('Etiam porta sem malesuada magna mollis euismod.', array('color' => TbHtml::TEXT_COLOR_WARNING)); ?>
<?php echo TbHtml::em('Donec ullamcorper nulla non metus auctor fringilla.', array('color' => TbHtml::TEXT_COLOR_ERROR)); ?>
<?php echo TbHtml::em('Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.', array('color' => TbHtml::TEXT_COLOR_INFO)); ?>
<?php echo TbHtml::em('Duis mollis, est non commodo luctus, nisi erat porttitor ligula.', array('color' => TbHtml::TEXT_COLOR_SUCCESS)); ?>

Abbrivations

An abbreviation of the word attribute is attr.

An abbreviation of the word attribute is <?php echo TbHtml::abbr('attr', 'attribute'); ?>.

Small

HTML is the best thing since sliced bread.

<?php echo TbHtml::smallAbbr('HTML', 'HyperText Markup Language'); ?> is the best thing since sliced bread.

Blockquotes

Default blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<?php echo TbHtml::quote('...'); ?>

Blockquote options

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<?php echo TbHtml::quote('...', array(
    'source' => 'Someone famous in',
    'cite' => 'Source Title',
)); ?>

Alternative displays

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<?php echo TbHtml::quote('...', array(
    'source' => 'Someone famous in',
    'cite' => 'Source Title',
    'pull' => TbHtml::PULL_RIGHT,
)); ?>

Inline

For example, <section> should be wrapped as inline.

For example, <?php echo TbHtml::code('<section>'); ?> should be wrapped as inline.

Code block

<p>Sample text here...</p>

<?php echo TbHtml::codeBlock('<p>Sample text here...</p>'); ?>

Default styles

<?php echo TbHtml::beginFormTb(); ?>
    <fieldset>
        <legend>Legend</legend>
        <?php echo TbHtml::label('Label name', 'text'); ?>
        <?php echo TbHtml::textField('text', '', array('placeholder' => 'Type something...')); ?>
        <?php echo TbHtml::checkBox('checkMeOut', false, array('label' => 'Check me out')); ?>
        <?php echo TbHtml::submitButton('Submit'); ?>
    </fieldset>
<?php echo TbHtml::endForm(); ?>

Optional layouts

Search form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_SEARCH); ?>
    <?php echo TbHtml::searchQuery('search'); ?>
    <?php echo TbHtml::submitButton('Submit'); ?>
<?php echo TbHtml::endForm(); ?>

Inline form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_INLINE); ?>
    <?php echo TbHtml::textField('email', '',
        array('placeholder' => 'Email', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
    <?php echo TbHtml::passwordField('password', '',
        array('placeholder' => 'Password', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
    <?php echo TbHtml::checkBox('rememberMe', false, array('label' => 'Remember me')); ?>
    <?php echo TbHtml::submitButton('Sign in'); ?>
<?php echo TbHtml::endForm(); ?>

Horizontal form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_HORIZONTAL); ?>
    <?php echo TbHtml::emailFieldControlGroup('email', '',
        array('label' => 'Email', 'placeholder' => 'Email')); ?>
    <?php echo TbHtml::passwordFieldControlGroup('password', '',
        array('label' => 'Password', 'placeholder' => 'Password')); ?>
    <?php echo TbHtml::checkBoxControlGroup('rememberMe', false, array(
        'label' => 'Remember me',
        'controlOptions' => array('after' => TbHtml::submitButton('Sign in')),
    )); ?>
<?php echo TbHtml::endForm(); ?>

Supported form controls

Inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => 'Text input')); ?>

Text area

<?php echo TbHtml::textArea('text', '', array('rows' => 3)); ?>

Checkboxes and radios

Default (stacked)

Option one is this and that—be sure to include why it's great
Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one

<?php echo TbHtml::checkBox('checkBox', '',
    array('label' => 'Option one is this and that—be sure to include why it\'s great')); ?>

<?php echo TbHtml::radioButtonList('optionsRadios', '', array(
    'option1' => 'Option one is this and that—be sure to include why it\'s great',
    'option2' => 'Option two can be something else and selecting it will deselect option one',
)); ?>

Inline checkboxes

1 2 3

<?php echo TbHtml::inlineCheckBoxList('inlineCheckbox', '', array(
    'option1' => '1',
    'option2' => '2',
    'option3' => '3',
)); ?>

Selects

<?php echo TbHtml::dropDownList('dropDown', '', array('1', '2', '3', '4', '5')); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1', '2', '3', '4', '5'), array('multiple' => true)); ?>

Extending form controls

Prepended and appended inputs

Default options

.00

<?php echo TbHtml::textField('prependedInput', '',
    array('placeholder' => 'Username', 'prepend' => '@', 'span' => 2)); ?>
<?php echo TbHtml::textField('appendedInput', '',
    array('append' => '.00', 'span' => 2)); ?>

Combined

$.00

<?php echo TbHtml::textField('appendedPrependedInput', '',
    array('prepend' => '$', 'append' => '.00', 'span' => 2)); ?>

Buttons instead of text

<?php echo TbHtml::textField('appendedInputButton', '',
    array('append' => TbHtml::button('Go!'), 'span' => 2)); ?>

<?php echo TbHtml::textField('appendedInputButtons', '',
    array('append' => TbHtml::button('Search') . ' ' . TbHtml::button('Options'), 'span' => 2)); ?>

Button dropdowns

<?php echo TbHtml::textField('appendedDropdownButton', '',
    array('append' => TbHtml::buttonDropdown('Action', array(...)), 'span' => 2)); ?>

<?php echo TbHtml::textField('prependedDropdownButton', '',
    array('prepend' => TbHtml::buttonDropdown('Action', array(...)), 'span' => 2)); ?>

<?php echo TbHtml::textField('appendedPrependedDropdownButton', '', array(
    'prepend' => TbHtml::buttonDropdown('Action', array(...)),
    'append' => TbHtml::buttonDropdown('Action', array(..)),
    'span' => 2,
)); ?>

Action

<?php echo TbHtml::textField('prependedSplitDropdownButton', '',
    array('prepend' => TbHtml::splitButtonDropdown('Action', array(...)))); ?>
<?php echo TbHtml::textField('appendedSplitDropdownButton', '',
    array('append' => TbHtml::splitButtonDropdown('Action', array(...)))); ?>

Search form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_SEARCH); ?>
<?php echo TbHtml::searchQuery('appendedSearch', '',
    array('append' => TbHtml::submitButton('Search'), 'span' => 2)); ?>
<?php echo TbHtml::searchQuery('prependedSearch', '',
    array('prepend' => TbHtml::submitButton('Search'), 'span' => 2)); ?>
<?php echo TbHtml::endForm(); ?>

Control sizing

Block level inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => '.input-block-level', 'block' => true)); ?>

Relative sizing

<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-mini', 'size' => TbHtml::INPUT_SIZE_MINI)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-small', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-medium', 'size' => TbHtml::INPUT_SIZE_MEDIUM)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-large', 'size' => TbHtml::INPUT_SIZE_LARGE)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-xlarge', 'size' => TbHtml::INPUT_SIZE_XLARGE)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-xxlarge', 'size' => TbHtml::INPUT_SIZE_XXLARGE)); ?>

Grid sizing

<?php echo TbHtml::textField('text', '', array('placeholder' => '.span1', 'span' => 1)); ?>
<?php echo TbHtml::textField('text', '', array('placeholder' => '.span2', 'span' => 2)); ?
<?php echo TbHtml::textField('text', '', array('placeholder' => '.span3', 'span' => 3)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 1)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 2)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 3)); ?>

<?php echo TbHtml::controls(TbHtml::textField('text', '', array('placeholder' => '.span5', 'span' => 5))); ?>
<?php echo TbHtml::controlsRow(array(
    TbHtml::textField('text', '', array('placeholder' => '.span4', 'span' => 4)),
    TbHtml::textField('text', '', array('placeholder' => '.span1', 'span' => 1)),
)); ?>
...

Uneditable inputs

Some value here

<?php echo TbHtml::uneditableField('uneditable', 'Some value here'); ?>

Form actions

<?php echo TbHtml::formActions(array(
    TbHtml::submitButton('Save changes', array('color' => TbHtml::BUTTON_COLOR_PRIMARY)),
    TbHtml::button('Cancel'),
)); ?>

Help text

Inline help

Inline help text

<?php echo TbHtml::textFieldControlGroup('text', '', array('help' => 'Inline help text')); ?>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.

<?php echo TbHtml::textFieldControlGroup('text', '',
    array('help' => '...', 'helpOptions' => array('type' => TbHtml::HELP_TYPE_BLOCK))); ?>

Form control states

Invalid inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => '[email protected]', 'required' => true)); ?>

Disabled inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => 'Disabled input here...', 'disabled' => true)); ?>

Validation states

<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with warning',
    'help' => 'Something may have gone wrong',
    'color' => TbHtml::INPUT_COLOR_WARNING,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with error',
    'help' => 'Please correct the error',
    'color' => TbHtml::INPUT_COLOR_ERROR,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with info',
    'help' => 'Username is taken',
    'color' => TbHtml::INPUT_COLOR_INFO,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with success',
    'help' => 'Woohoo!',
    'color' => TbHtml::INPUT_COLOR_SUCCESS,
)); ?>

<?php echo TbHtml::button('Default'); ?>
<?php echo TbHtml::button('Primary', array('color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Danger', array('color' => TbHtml::BUTTON_COLOR_DANGER)); ?>
<?php echo TbHtml::button('Warning', array('color' => TbHtml::BUTTON_COLOR_WARNING)); ?>
<?php echo TbHtml::button('Success', array('color' => TbHtml::BUTTON_COLOR_SUCCESS)); ?>
<?php echo TbHtml::button('Info', array('color' => TbHtml::BUTTON_COLOR_INFO)); ?>
<?php echo TbHtml::button('Inverse', array('color' => TbHtml::BUTTON_COLOR_INVERSE)); ?>
<?php echo TbHtml::button('Link', array('color' => TbHtml::BUTTON_COLOR_LINK)); ?>

Sizes

<?php echo TbHtml::button('Large button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Large button',
    array('size' => TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Default button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Default button'); ?>
<?php echo TbHtml::button('Small button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_SMALL)); ?>
<?php echo TbHtml::button('Small button',
    array('size' => TbHtml::BUTTON_SIZE_SMALL)); ?>
<?php echo TbHtml::button('Mini button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_MINI)); ?>
<?php echo TbHtml::button('Mini button',
    array('size' => TbHtml::BUTTON_SIZE_MINI)); ?>

Block

<?php echo TbHtml::button('Block button',
   array('block' => true, 'color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size'=>TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Block button',
   array('block' => true, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>

Disabled state

<?php echo TbHtml::button('Primary button',
   array('disabled' => true, 'size'=>TbHtml::BUTTON_SIZE_LARGE, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Button',
   array('disabled' => true, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>

Stateful

<?php echo TbHtml::button('Loading state',
    array('loading' => 'Loading...', 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>

Single toggle

<?php echo TbHtml::button('Single toggle',
    array('toggle' => true, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>

<?php echo TbHtml::imageRounded('holder.js/140x140'); ?>
<?php echo TbHtml::imageCircle('holder.js/140x140'); ?>
<?php echo TbHtml::imagePolaroid('holder.js/140x140'); ?>

ICON_GLASS
ICON_MUSIC
ICON_SEARCH
ICON_ENVELOPE
ICON_HEART
ICON_STAR
ICON_STAR_EMPTY
ICON_HEART
ICON_FILM
ICON_TH_LARGE
ICON_TH
ICON_TH_LIST
ICON_OK
ICON_REMOVE
ICON_ZOOM_IN
ICON_ZOOM_OUT
ICON_OFF
ICON_SIGNAL
ICON_COG
ICON_TRASH
ICON_HOME
ICON_FILE
ICON_TIME
ICON_ROAD
ICON_DOWNLOAD_ALT
ICON_DOWNLOAD
ICON_UPLOAD
ICON_INBOX
ICON_PLAY_CIRCLE
ICON_REPEAT
ICON_REFRESH
ICON_LIST_ALT
ICON_LOCK
ICON_FLAG
ICON_HEADPHONES
ICON_VOLUME_OFF
ICON_VOLUME_DOWN
ICON_VOLUME_UP
ICON_QRCODE
ICON_BARCODE
ICON_TAG
ICON_TAGS
ICON_BOOK
ICON_BOOKMARK
ICON_PRINT
ICON_CAMERA
ICON_FONT
ICON_BOLD
ICON_ITALIC
ICON_TEXT_HEIGHT
ICON_TEXT_WIDTH
ICON_ALIGN_LEFT
ICON_ALIGN_CENTER
ICON_ALIGN_RIGHT
ICON_ALIGN_JUSTIFY
ICON_LIST
ICON_INDENT_LEFT
ICON_INDENT_RIGHT
ICON_FACETIME_VIDEO
ICON_PICTURE
ICON_PENCIL
ICON_MAP_MARKER
ICON_ADJUST
ICON_TINT
ICON_EDIT
ICON_SHARE
ICON_CHECK
ICON_MOVE
ICON_STEP_BACKWARD
ICON_FAST_FORWARD
ICON_BACKWARD
ICON_PLAY
ICON_PAUSE
ICON_STOP
ICON_FORWARD
ICON_FAST_FORWARD
ICON_STEP_BACKWARD
ICON_EJECT
ICON_CHEVRON_LEFT
ICON_CHEVRON_RIGHT
ICON_PLUS_SIGN
ICON_MINUS_SIGN
ICON_REMOVE_SIGN
ICON_OK_SIGN
ICON_QUESTION_SIGN
ICON_INFO_SIGN
ICON_SCREENSHOT
ICON_REMOVE_CIRCLE
ICON_OK_CIRCLE
ICON_BAN_CIRCLE
ICON_ARROW_LEFT
ICON_ARROW_RIGHT
ICON_ARROW_UP
ICON_ARROW_DOWN
ICON_SHARE_ALT
ICON_RESIZE_FULL
ICON_RESIZE_SMALL
ICON_PLUS
ICON_MINUS
ICON_ASTERISK
ICON_EXCLAMATION_SIGN
ICON_GIFT
ICON_LEAF
ICON_FIRE
ICON_EYE_OPEN
ICON_EYE_CLOSE
ICON_WARNING_SIGN
ICON_PLANE
ICON_CALENDAR
ICON_RANDOM
ICON_COMMENT
ICON_MAGNET
ICON_CHEVRON_UP
ICON_CHEVRON_DOWN
ICON_RETWEET
ICON_SHOPPING_CART
ICON_FOLDER_CLOSE
ICON_FOLDER_OPEN
ICON_RESIZE_VERTICAL
ICON_RESIZE_HORIZONTAL
ICON_HDD
ICON_BULLHORN
ICON_BELL
ICON_CERTFICATE
ICON_THUMBS_UP
ICON_THUMBS_DOWN
ICON_HAND_RIGHT
ICON_HAND_LEFT
ICON_HAND_UP
ICON_HAND_DOWN
ICON_CIRCLE_ARROW_RIGHT
ICON_CIRCLE_ARROW_LEFT
ICON_CIRCLE_ARROW_UP
ICON_CIRCLE_ARROW_DOWN
ICON_GLOBE
ICON_WRENCH
ICON_TASKS
ICON_FILTER
ICON_BRIEFCASE
ICON_FULLSCREEN

How to use

<?php echo TbHtml::icon(TbHtml::ICON_GLASS); ?>

Icon examples

Coming soon!

Typography

Lead

Emphasis

Small

Bold

Italic

Emphasis styles

Abbrivations

Small

Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternative displays

Code

Inline

Code block

Forms

Default styles

Optional layouts

Search form

Inline form

Horizontal form

Supported form controls

Inputs

Text area

Checkboxes and radios

Default (stacked)

Inline checkboxes

Selects

Extending form controls

Prepended and appended inputs

Default options

Combined

Buttons instead of text

Button dropdowns

Search form

Control sizing

Block level inputs

Relative sizing

Grid sizing

Uneditable inputs

Form actions

Help text

Inline help

Block help

Form control states

Invalid inputs

Disabled inputs

Validation states

Buttons

Sizes

Block

Disabled state

Stateful

Single toggle

Images

Icons

How to use

Icon examples