Commits

Christoffer Niska  committed b623bd6

update documentation and demo

  • Participants
  • Parent commits 88f3dea
  • Branches 1.0.0-wip

Comments (0)

Files changed (12)

File assets/css/bootstrap-yii.css

 .input-block-level {
   display:block;
   width:100%;
-  min-height:28px;
+  min-height:30px;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   display:block;
 }
 .grid-view table.items tr.selected td { background:#eeeeee; }
-.grid-view .filters .filter-container { padding:0 10px 0 0; }
+.grid-view .filters .filter-container { padding:0 15px 0 0; }
 .grid-view .filters input, .grid-view .filters select {
   margin-bottom:0;
   width:100%;

File assets/less/bootstrap-yii.less

 
 	.filters {
 		.filter-container {
-			padding: 0 10px 0 0;
+			padding: 0 15px 0 0;
 		}
 
 		input,

File demo/css/styles.css

 .input-block-level {
   display:block;
   width:100%;
-  min-height:28px;
+  min-height:30px;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;

File demo/protected/views/site/index.php

 
     <h2>Buttons <small>bootstrap.widgets.TbButton</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><td>Default</td><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>buttonType</td><td>string</td><td><code>link</code></td><td>Button callback type. Valid values are <code>link</code>, <code>button</code>, <code>submit</code>, <code>submitLink</code>, <code>reset</code>, <code>ajaxLink</code>, <code>ajaxButton</code> and <code>ajaxSubmit</code>.</td></tr>
+			<tr><td>type</td><td>string</td><td></td><td>Button type. Valid values are <code>primary</code>, <code>info</code>, <code>success</code>, <code>warning</code>, <code>danger</code>, <code>inverse</code> and <code>link</code>.</td></tr>
+			<tr><td>size</td><td>string</td><td></td><td>Button size. Valid values are <code>large</code>, <code>small</code> and <code>mini</code></td></tr>
+			<tr><td>icon</td><td>string</td><td></td><td>Button icon, e.g. <code>ok</code> or <code>remove white</code>.</td></tr>
+			<tr><td>label</td><td>string</td><td></td><td>Button label text.</td></tr>
+			<tr><td>url</td><td>string</td><td></td><td>Button URL.</td></tr>
+			<tr><td>encodeLabel</td><td>boolean</td><td><code>true</code></code></td><td>Whether the label should be encoded.</td></tr>
+			<tr><td>block</td><td>boolean</td><td><code>false</code></td><td>Whether the button should span the full width of the a parent.</td></tr>
+			<tr><td>active</td><td>boolean</td><td><code>false</code></td><td>Whether the button is active.</td></tr>
+			<tr><td>disabled</td><td>boolean</td><td><code>false</code></td><td>Whether the button is disabled.</td></tr>
+			<tr><td>toggle</td><td>boolean</td><td><code>false</code></td><td>Whether the button can be toggled.</td></tr>
+			<tr><td>loadingText</td><td>string</td><td></td><td>Button loading text.</td></tr>
+			<tr><td>completeText</td><td>string</td><td></td><td>Button complete text.</td></tr>
+			<tr><td>items</td><td>array</td><td></td><td>Button dropdown menu items.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Button HTML attributes.</td></tr>
+			<tr><td>ajaxOptions</td><td>array</td><td></td><td>Button AJAX options (used by <code>ajaxLink</code> and <code>ajaxButton</code>).</td></tr>
+			<tr><td>dropdownOptions</td><td>array</td><td></td><td>Button dropdown menu HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/base-css.html#buttons" rel="no-follow" target="_blank">Button documentation</a></p>
+
+	<h3>Examples</h3>
+
     <div class="row">
         <div class="span3">
-            <h3>Large</h3>
+            <h4>Large</h4>
             <p>
                 <?php $this->widget('bootstrap.widgets.TbButton', array(
                     'label'=>'Primary', 'type'=>'primary', 'size'=>'large',
         </div>
 
         <div class="span3">
-            <h3>Normal</h3>
+            <h4>Normal</h4>
             <p>
                 <?php $this->widget('bootstrap.widgets.TbButton', array(
                     'label'=>'Primary', 'type'=>'primary',
         </div>
 
         <div class="span3">
-            <h3>Small</h3>
+            <h4>Small</h4>
             <p>
                 <?php $this->widget('bootstrap.widgets.TbButton', array(
                     'label'=>'Primary', 'type'=>'primary', 'size'=>'small',
         </div>
 
         <div class="span3">
-            <h3>Mini</h3>
+            <h4>Mini</h4>
             <p>
                 <?php $this->widget('bootstrap.widgets.TbButton', array(
                     'label'=>'Primary', 'type'=>'primary', 'size'=>'mini',
         </div>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButton', array(
 	'label'=>'Primary',
 	'size'=>'large', // null, 'large', 'small' or 'mini'
 )); ?>"); ?>
 
-    <h3>Dropdowns</h3>
+    <h4>Dropdowns</h4>
 
     <div class="btn-toolbar">
         <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
         )); ?>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<div class=\"btn-toolbar\">
 	<?php \$this->widget('bootstrap.widgets.TbButtonGroup', array(
 	)); ?>
 </div>"); ?>
 
-    <h3>Split dropdowns</h3>
+    <h4>Split dropdowns</h4>
 
     <div class="btn-toolbar">
         <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
     )); ?>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<div class=\"btn-toolbar\">
 	<?php \$this->widget('bootstrap.widgets.TbButtonGroup', array(
 	)); ?>
 </div>"); ?>
 
-    <h3>Stateful</h3>
+	<h4>Block</h4>
+
+	<div class="row">
+
+		<div class="span4">
+
+		<?php $this->widget('bootstrap.widgets.TbButton', array(
+			'type'=>'primary',
+			'label'=>'Block level button',
+			'block'=>true,
+		)); ?>
+
+		<?php $this->widget('bootstrap.widgets.TbButton', array(
+			'label'=>'Block level button',
+			'block'=>true,
+		)); ?>
+
+		</div>
+
+	</div>
+
+	<h5>Source code</h5>
+
+	<?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButton', array(
+	'type'=>'primary',
+	'label'=>'Block level button',
+	'block'=>true,
+)); ?>"); ?>
+
+    <h4>Stateful</h4>
 
     <p>
         <?php $this->widget('bootstrap.widgets.TbButton', array(
 		});
 	"); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButton', array(
 	'buttonType'=>'button',
 	}, 3000);
 });"); ?>
 
-    <h3>Single state</h3>
+    <h4>Single state</h4>
 
     <p>
         <?php $this->widget('bootstrap.widgets.TbButton', array(
     )); ?>
     </p>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButton', array(
 	'buttonType'=>'button',
 
         <div class="span3">
 
-            <h3>Checkbox</h3>
+            <h4>Checkbox</h4>
 
             <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
             'type' => 'primary',
 
         <div class="span3">
 
-            <h3>Radio</h3>
+            <h4>Radio</h4>
 
             <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
             'type' => 'primary',
 
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButtonGroup', array(
 	'type' => 'primary',
 
     <h2>Button groups <small>bootstrap.widgets.TbButtonGroup</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>buttonType</td><td>string</td><td><code>link</code></td><td>See <code>TbButton::buttonType</code>.</td></tr>
+			<tr><td>type</td><td>string</td><td></td><td>See <code>TbButton::type</code>.</td></tr>
+			<tr><td>size</td><td>string</td><td></td><td>See <code>TbButton::size</code>.</td></tr>
+			<tr><td>encodeLabel</td><td>boolean</td><td><code>true</code></td><td>See <code>TbButton::encodeLabel</code>.</td></tr>
+			<tr><td>stacked</td><td>boolean</td><td><code>false</code></td><td>Whether the button group appears vertically stacked.</td></tr>
+			<tr><td>toggle</td><td>boolean</td><td><code>false</code></td><td>See <code>TbButton::toggle</code>.</td></tr>
+			<tr><td>dropup</td><td>boolean</td><td><code>false</code></td><td>Whether dropdown menus should drop up instead.</td></tr>
+			<tr><td>buttons</td><td>array</td><td></td><td>Button configurations.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Button group HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#buttonGroups" rel="no-follow" target="_blank">Button group documentation</a></p>
+
+	<h3>Examples</h3>
+
     <div class="btn-toolbar">
         <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
         'buttons'=>array(
     )); ?>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButtonGroup', array(
 	'buttons'=>array(
 
 	<h2>Breadcrumbs <small>bootstrap.widgets.TbBreadcrumbs</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>separator</td><td>string</td><td><code>/</code></td><td>Separator between links in the breadcrumbs.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#breadcrumbs" rel="no-follow" target="_blank">Breadcrumbs documentation</a></p>
+
 	<?php $this->widget('bootstrap.widgets.TbBreadcrumbs', array(
 		'links'=>array(),
 	)); ?>
 		'links'=>array('Library'=>'#', 'Data'),
 	)); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbBreadcrumbs', array(
 	'links'=>array('Library'=>'#', 'Data'),
 
 	<h2>Menus <small>bootstrap.widgets.TbMenu</small></h2>
 
-	<h3>Basic tabs</h3>
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td></td><td>Menu type. Valid values are <code>tabs</code>, <code>pills</code> and <code>list</code>.</td></tr>
+			<tr><td>scrollspy</td><td>string|array</td><td></td><td>Scrollspy target or configuration.</td></tr>
+			<tr><td>stacked</td><td>boolean</td><td><code>false</code></td><td>Whether the menu should appear vertically stacked.</td></tr>
+			<tr><td>dropup</td><td>boolean</td><td><code>false</code></td><td>Whether dropdown menus should drop up instead.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#navs" rel="no-follow" target="_blank">Menu documentation</a></p>
+
+	<h3>Examples</h3>
+
+	<h4>Basic tabs</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbMenu', array(
 		'type'=>'tabs',
 		),
 	)); ?>
 
-	<h3>Stacked tabs</h3>
+	<h4>Stacked tabs</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbMenu', array(
 		'type'=>'tabs',
 		),
 	)); ?>
 
-	<h3>Basic pills</h3>
+	<h4>Basic pills</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbMenu', array(
 		'type'=>'pills',
 		),
 	)); ?>
 
-	<h3>Stacked pills</h3>
+	<h4>Stacked pills</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbMenu', array(
 		'type'=>'pills',
 		),
 	)); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbMenu', array(
 	'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
 	),
 )); ?>"); ?>
 
-	<h3>Nav list</h3>
+	<h4>Nav list</h4>
 
 	<div class="well" style="padding: 8px 0;">
 
 
 	</div>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbMenu', array(
 	'type'=>'list',
 
     <h2>Navbar <small>bootstrap.widgets.TbNavbar</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td></td><td>Navbar type. Set this value to <code>inverse</code> for a dark navbar.</td></tr>
+			<tr><td>brand</td><td>string</td><td></td><td>Brand link text.</td></tr>
+			<tr><td>brandUrl</td><td>string</td><td></td><td>Brand link URL.</td></tr>
+			<tr><td>brandOptions</td><td>array</td><td></td><td>Brand link HTML attributes.</td></tr>
+			<tr><td>fixed</td><td>string</td><td><code>top</code></td><td>Fix location of the navbar. Valid values are <code>top</code> and <code>bottom</code>.</td></tr>
+			<tr><td>fluid</td><td>boolean</td><td><code>false</code></td><td>Whether the navbar should span over the full width of the document.</td></tr>
+			<tr><td>collapse</td><td>boolean</td><td><code>false</code></td><td>Whether the navbar should collapse on narrow screens.</td></tr>
+			<tr><td>items</td><td>array</td><td></td><td>Navigation items.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Navbar HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#navbar" rel="no-follow" target="_blank">Navbar documentation</a></p>
+
+	<h3>Examples</h3>
+
     <?php $this->widget('bootstrap.widgets.TbNavbar', array(
 		'fixed'=>false,
 		'brand'=>'Default',
 		),
 	)); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbNavbar', array(
 	'type'=>'inverse', // null or 'inverse'
 
 	<h2>Detail views <small>bootstrap.widgets.TbDetailView</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>array</td><td><code>striped</code>, <code>condensed</code></td><td>Grid types. Valid values are <code>striped</code>, <code>bordered</code> and/or <code>condensed</code>.</td></tr>
+		</tbody>
+	</table>
+
+	<h3>Examples</h3>
+
 	<?php $this->widget('bootstrap.widgets.TbDetailView', array(
 		'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),
 		'attributes'=>array(
 		),
 	)); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbDetailView', array(
 	'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),
 
 	<h2>Grid views <small>bootstrap.widgets.TbGridView</small></h2>
 
-	<h3>Default</h3>
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+		<tr><td>type</td><td>array</td><td></td><td>Grid types. Valid values are <code>striped</code>, <code>bordered</code> and/or <code>condensed</code>.</td></tr>
+		</tbody>
+	</table>
+
+	<h3>Examples</h3>
+
+	<h4>Default</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbGridView', array(
 		'dataProvider'=>$gridDataProvider,
 		'columns'=>$gridColumns,
 	)); ?>
 
-	<h3>Striped</h3>
+	<h4>Striped</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbGridView', array(
 		'type'=>'striped',
 		'columns'=>$gridColumns,
 	)); ?>
 
-	<h3>Bordered</h3>
+	<h4>Bordered</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbGridView', array(
 		'type'=>'bordered',
 		'columns'=>$gridColumns,
 	)); ?>
 
-	<h3>Condensed</h3>
+	<h4>Condensed</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbGridView', array(
 		'type'=>'condensed',
 		'columns'=>$gridColumns,
 	)); ?>
 
-	<h3>Striped, bordered and condensed</h3>
+	<h4>Striped, bordered and condensed</h4>
 
 	<?php $this->widget('bootstrap.widgets.TbGridView', array(
 		'type'=>'striped bordered condensed',
 		'columns'=>$gridColumns,
 	)); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("\$gridDataProvider = new CArrayDataProvider(array(
 	array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),
 
 	<h2>Forms <small>bootstrap.widgets.TbActiveForm</small></h2>
 
-	<h3>Vertical</h3>
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td><code>vertical</code></td><td>Form type. Valid values are <code>vertical</code>, <code>inline</code>, <code>horizontal</code> and <code>search</code>.</td></tr>
+			<tr><td>inlineErrors</td><td>boolean</td><td></td><td>Whether to display errors as blocks.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="no-follow" target="_blank">Form documentation</a></p>
+
+	<h3>Examples</h3>
+
+	<h4>Vertical</h4>
 
 	<?php /** @var TbActiveForm $form */
 	$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 	<?php $this->endWidget(); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php /** @var BootActiveForm \$form */
 \$form = \$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 <?php \$this->endWidget(); ?>"); ?>
 
-	<h3>Search</h3>
+	<h4>Search</h4>
 
 	<?php /** @var TbActiveForm $form */
 	$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 	<?php $this->endWidget(); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php /** @var BootActiveForm \$form */
 \$form = \$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 <?php \$this->endWidget(); ?>"); ?>
 
-	<h3>Inline</h3>
+	<h4>Inline</h4>
 
 	<?php /** @var TbActiveForm $form */
 	$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 	<?php $this->endWidget(); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php /** @var BootActiveForm \$form */
 \$form = \$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 <?php \$this->endWidget(); ?>"); ?>
 
-	<h3>Horizontal</h3>
+	<h4>Horizontal</h4>
 
 	<?php /** @var TbActiveForm $form */
 	$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 	<?php $this->endWidget(); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php /** @var BootActiveForm \$form */
 \$form = \$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 <?php \$this->endWidget(); ?>"); ?>
 
-    <h3>Tabular</h3>
+    <h4>Tabular</h4>
 
     <?php /** @var TbActiveForm $form */
     $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
     <?php $this->endWidget(); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php /** @var TbActiveForm \$form */
 \$form = \$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
 
 	<h2>Hero unit <small>bootstrap.widgets.TbHeroUnit</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>heading</td><td>string</td><td></td><td>Heading text.</td></tr>
+			<tr><td>encodeHeading</td><td>boolean</td><td><code>true</code></td><td>Whether to encode the heading text.</td></tr>
+			<tr><td>headingOptions</td><td>array</td><td></td><td>Heading text HTML attributes.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Hero unit HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#typography" rel="no-follow" target="_blank">Hero unit documentation</a></p>
+
+	<h3>Examples</h3>
+
 	<?php $this->beginWidget('bootstrap.widgets.TbHeroUnit', array(
 		'heading'=>'Hello, world!',
 	)); ?>
 
 	<?php $this->endWidget(); ?>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->beginWidget('bootstrap.widgets.TbHeroUnit', array(
 	'heading'=>'Hello, world!',
 
     <h2>Thumbnails <small>bootstrap.widgets.TbThumbnails</small></h2>
 
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#thumbnails" rel="no-follow" target="_blank">Thumbnails documentation</a></p>
+
+	<h3>Examples</h3>
+
     <?php $this->widget('bootstrap.widgets.TbThumbnails', array(
     'dataProvider'=>$listDataProvider,
     'template'=>"{items}\n{pager}",
     'itemView'=>'_thumb',
 )); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbThumbnails', array(
 	'dataProvider'=>\$listDataProvider,
 
     <h2>Alerts <small>bootstrap.widgets.TbAlert</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>alerts</td><td>array</td><td></td><td>Alerts configurations.</td></tr>
+			<tr><td>closeText</td><td>string|boolean</td><td><code>&amp;times;</code></td><td>Close link text. Set to <code>false</code> in order to hide the close link.</td></tr>
+			<tr><td>block</td><td>boolean</td><td><code>true</code></td><td>Whether to display the alerts as blocks.</td></tr>
+			<tr><td>fade</td><td>boolean</td><td><code>true</code></td><td>Whether alerts should use transitions.</a></td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Container HTML attributes.</td></tr>
+			<tr><td>events</td><td>array</td><td></td><td>JavaScript event handlers.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#alerts" rel="no-follow" target="_blank">Alert documentation</a></p>
+
+	<h3>Examples</h3>
+
     <?php
     Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
     Yii::app()->user->setFlash('info', '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.');
 		),
 	)); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
 Yii::app()->user->setFlash('info', '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.');
 
     <h2>Progress bars <small>bootstrap.widgets.TbProgress</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td></td><td>Progress bar type. Valid values are <code>info</code>, <code>success</code>, <code>warning</code> and <code>danger</code>.</td></tr>
+			<tr><td>striped</td><td>boolean</td><td><code>false</code></td><td>Whether the bar should be striped.</td></tr>
+			<tr><td>animated</td><td>boolean</td><td><code>false</code></td><td>Whether the bar should be animated.</td></tr>
+			<tr><td>percent</td><td>integer</td><td><code>0</code></td><td>Progress in percent.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Progress bar HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#progress" rel="no-follow" target="_blank">Progress bar documentation</a></p>
+
+	<h3>Examples</h3>
+
     <div class="row">
 
         <div class="span4">
 
-            <h3>Basic</h3>
+            <h4>Basic</h4>
 
             <?php $this->widget('bootstrap.widgets.TbProgress', array(
             'percent'=>30,
 
         <div class="span4">
 
-            <h3>Striped</h3>
+            <h4>Striped</h4>
 
             <?php $this->widget('bootstrap.widgets.TbProgress', array(
             'type'=>'info',
 
         <div class="span4">
 
-            <h3>Animated</h3>
+            <h4>Animated</h4>
 
             <?php $this->widget('bootstrap.widgets.TbProgress', array(
             'type'=>'danger', // 'info', 'success' or 'danger'
 
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbProgress', array(
 	'type'=>'danger', // 'info', 'success' or 'danger'
 
     <h2>Labels <small>bootstrap.widgets.TbLabel</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td></td><td>Label type. Valid values are <code>success</code>, <code>warning</code>, <code>important</code>, <code>info</code> and <code>inverse</code>.</td></tr>
+			<tr><td>label</td><td>string</td><td></td><td>Label text.</td></tr>
+			<tr><td>encodeLabel</td><td>boolean</td><td><code>true</code></td><td>Whether to encode the label text.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Label HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#labels-badges" rel="no-follow" target="_blank">Label documentation</a></p>
+
+	<h3>Examples</h3>
+
     <p>
         <?php $this->widget('bootstrap.widgets.TbLabel', array('label'=>'Default')); ?>
         <?php $this->widget('bootstrap.widgets.TbLabel', array('type'=>'success', 'label'=>'Success')); ?>
         <?php $this->widget('bootstrap.widgets.TbLabel', array('type'=>'inverse', 'label'=>'Inverse')); ?>
     </p>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbLabel', array(
 	'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
 
     <h2>Badges <small>bootstrap.widgets.TbBadge</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td></td><td>Badge type. Valid values are <code>success</code>, <code>warning</code>, <code>important</code>, <code>info</code> and <code>inverse</code>.</td></tr>
+			<tr><td>label</td><td>string</td><td></td><td>Badge text.</td></tr>
+			<tr><td>encodeLabel</td><td>boolean</td><td><code>true</code></td><td>Whether to encode the badge text.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Badge HTML attributes.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/components.html#labels-badges" rel="no-follow" target="_blank">Badge documentation</a></p>
+
+	<h3>Examples</h3>
+
     <p>
         <?php $this->widget('bootstrap.widgets.TbBadge', array('label'=>'1')); ?>
         <?php $this->widget('bootstrap.widgets.TbBadge', array('type'=>'success', 'label'=>'2')); ?>
         <?php $this->widget('bootstrap.widgets.TbBadge', array('type'=>'inverse', 'label'=>'10')); ?>
     </p>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbBadge', array(
 	'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
 
     <h2>Carousel <small>bootstrap.widgets.TbCarousel</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>prevLabel</td><td>string</td><td><code>&amp;lsaquo;</code></td><td>Previous button text.</td></tr>
+			<tr><td>nextLabel</td><td>string</td><td><code>&amp;rsaquo;</code></td><td>Next button text.</td></tr>
+			<tr><td>slide</td><td>boolean</td><td><code>true</code></td><td>Whether the carousel items should slide.</td></tr>
+			<tr><td>displayPrevAndNext</td><td>boolean</td><td><code>true</code></td><td>Whether to display previous and next buttons.</td></tr>
+			<tr><td>items</td><td>array</td><td></td><td>Carousel item configuration.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Carousel HTML attributes.</td></tr>
+			<tr><td>options</td><td>array</td><td></td><td>JavaScript plugin options.</td></tr>
+			<tr><td>events</td><td>array</td><td></td><td>JavaScript event handlers.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#carousel" rel="no-follow" target="_blank">Carousel documentation</a></p>
+
+	<h3>Examples</h3>
+
     <div class="row">
 
         <div class="span8">
 
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbCarousel', array(
 	'items'=>array(
 
     <h2>Modals <small>bootstrap.widgets.TbModal</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>autoOpen</td><td>boolean</td><td><code>false</code></td><td>Whether to automatically open the modal.</td></tr>
+			<tr><td>fade</td><td>boolean</td><td><code>true</code></td><td>Whether the modal should use transitions.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Modal HTML attributes.</td></tr>
+			<tr><td>options</td><td>array</td><td></td><td>JavaScript plugin options.</td></tr>
+			<tr><td>events</td><td>array</td><td></td><td>JavaScript event handlers.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#modals" rel="no-follow" target="_blank">Modal documentation</a></p>
+
+	<h3>Examples</h3>
+
     <?php $this->beginWidget('bootstrap.widgets.TbModal', array(
     'id'=>'myModal',
     'events'=>array(
 
     <div class="modal-header">
         <a class="close" data-dismiss="modal">&times;</a>
-        <h3>Modal header</h3>
+        <h4>Modal header</h4>
     </div>
 
     <div class="modal-body">
     )); ?>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal')); ?>
 
 <div class=\"modal-header\">
 	<a class=\"close\" data-dismiss=\"modal\">&times;</a>
-	<h3>Modal header</h3>
+	<h4>Modal header</h4>
 </div>
 
 <div class=\"modal-body\">
 
     <h2>Popovers <small>bootstrap.widgets.TbPopover</small></h2>
 
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#popovers" rel="no-follow" target="_blank">Popover documentation</a></p>
+
+	<h3>Examples</h3>
+
     <div class="well">
         <?php $this->widget('bootstrap.widgets.TbButton', array(
-        'label'=>'Hover me',
+        'label'=>'Click me',
         'type'=>'danger',
-        'htmlOptions'=>array('data-title'=>'Heading', 'data-content'=>'Content ...', 'rel'=>'popover'),
+        'htmlOptions'=>array('data-title'=>'A Title', 'data-content'=>'And here\'s some amazing content. It\'s very engaging. right?', 'rel'=>'popover'),
     )); ?>
     </div>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbButton', array(
-	'label'=>'Hover me',
+	'label'=>'Click me',
 	'type'=>'danger',
-	'htmlOptions'=>array('data-title'=>'Heading', 'data-content'=>'Content ...', 'rel'=>'popover'),
+	'htmlOptions'=>array('data-title'=>'A Title', 'data-content'=>'And here\'s some amazing content. It\'s very engaging. right?', 'rel'=>'popover'),
 )); ?>"); ?>
 
     <a class="top" href="#top">Back to top &uarr;</a>
 
     <h2>Togglable tabs <small>bootstrap.widgets.TbTabs</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>type</td><td>string</td><td><code>tabs</code></td><td>See <code>TbMenu::type</code>.</td></tr>
+			<tr><td>placement</td><td>string</td><td></td><td>Tab placement. Valid values are <code>above</code>, <code>below</code>, <code>left</code> and <code>right</code>.</td></tr>
+			<tr><td>tabs</td><td>array</td><td></td><td>Tabs configuration.</td></tr>
+			<tr><td>encodeLabel</td><td>boolean</td><td><code>true</code></td><td>Whether to encode labels.</td></tr>
+			<tr><td>htmlOptions</td><td>array</td><td></td><td>Tabs HTML attributes.</td></tr>
+			<tr><td>events</td><td>array</td><td></td><td>JavaScript event handlers.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#tabs" rel="no-follow" target="_blank">Tabs documentation</a></p>
+
+	<h3>Examples</h3>
+
     <?php $this->widget('bootstrap.widgets.TbTabs', array(
     'type'=>'tabs', // 'tabs' or 'pills'
     'htmlOptions'=>array('class'=>'togglable-tabs'),
     ),
 )); ?>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbTabs', array(
 	'type'=>'tabs', // 'tabs' or 'pills'
 
         <div class="span6">
 
-            <h3>Tabs on the top</h3>
+            <h4>Tabs on the top</h4>
 
             <?php $this->widget('bootstrap.widgets.TbTabs', array(
                 'htmlOptions'=>array('class'=>'togglable-tabs'),
                 'tabs'=>$tabbable,
             )); ?>
 
-            <h3>Tabs on the left</h3>
+            <h4>Tabs on the left</h4>
 
             <?php $this->widget('bootstrap.widgets.TbTabs', array(
                 'placement'=>'left',
 
         <div class="span6">
 
-            <h3>Tabs on the bottom</h3>
+            <h4>Tabs on the bottom</h4>
 
             <?php $this->widget('bootstrap.widgets.TbTabs', array(
                 'placement'=>'below',
                 'tabs'=>$tabbable,
             )); ?>
 
-            <h3>Tabs on the right</h3>
+            <h4>Tabs on the right</h4>
 
             <?php $this->widget('bootstrap.widgets.TbTabs', array(
                 'placement'=>'right',
 
     <h2>Tooltips <small>bootstrap.widgets.TbTooltip</small></h2>
 
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#tooltips" rel="no-follow" target="_blank">Tooltip documentation</a></p>
+
+	<h3>Examples</h3>
+
     <p class="well">
         Lorem ipsum dolor sit <a href="#" rel="tooltip" title="First tooltip">amet</a>,
         consectetur adipiscing elit.
         <a href="#" rel="tooltip" title="Yet another tooltip">tempor</a> sed sem.
     </p>
 
-    <h4>Source code</h4>
+    <h5>Source code</h5>
 
     <?php echo $htmlLighter->highlight("<p class=\"well\">
 	Lorem ipsum dolor sit <a href=\"#\" rel=\"tooltip\" title=\"First tooltip\">amet</a>,
 
 	<h2>Typeahead <small>bootstrap.widgets.TbTypeahead</small></h2>
 
+	<h3>Properties</h3>
+
+	<table class="table table-bordered table-striped">
+		<thead>
+			<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
+		</thead>
+		<tbody>
+			<tr><td>options</td><td>array</td><td></td><td>JavaScript plugin options.</td></tr>
+		</tbody>
+	</table>
+
+	<p class="read-more"><a href="http://twitter.github.com/bootstrap/javascript.html#typeahead" rel="no-follow" target="_blank">Typeahead documentation</a></p>
+
+	<h3>Examples</h3>
+
 	<div class="well">
 
 		<?php $this->widget('bootstrap.widgets.TbTypeahead', array(
 
 	</div>
 
-	<h4>Source code</h4>
+	<h5>Source code</h5>
 
 <?php echo $phpLighter->highlight("<?php \$this->widget('bootstrap.widgets.TbTypeahead', array(
 	'options'=>array(

File widgets/TbActiveForm.php

 	 */
 	public $input;
 	/**
-	 * @var boolean flag that indicates if the errors should be displayed as blocks.
+	 * @var boolean indicates whether to display errors as blocks.
 	 */
 	public $inlineErrors;
 

File widgets/TbAlert.php

 	 */
 	public $alerts;
 	/**
-	 * @var string the string to use for the close link. If this is set false, no close link will be displayed.
+	 * @var string|boolean the close link text. If this is set false, no close link will be displayed.
 	 */
 	public $closeText = '&times;';
 	/**
 	 */
 	public $block = true;
 	/**
-	 * @var boolean indicates whether the modal should use transitions. Defaults to 'true'.
+	 * @var boolean indicates whether alerts should use transitions. Defaults to 'true'.
 	 */
 	public $fade = true;
 	/**
 	 */
 	public $htmlOptions = array();
 
-	private static $_containerId = 0;
-
 	/**
 	 * Initializes the widget.
 	 */
 		echo '</div>';
 
 		$selector = "#{$id} .alert";
-		$id .= '_'.self::$_containerId++;
 
 		/** @var CClientScript $cs */
 		$cs = Yii::app()->getClientScript();

File widgets/TbBaseMenu.php

 					if (isset($item['items']))
 						$classes[] = $this->getDropdownCssClass();
 
+					if (isset($item['disabled']))
+						$classes[] = 'disabled';
+
 					if (!empty($classes))
 					{
 						$classes = implode(' ', $classes);

File widgets/TbButton.php

 	const BUTTON_AJAXSUBMIT = 'ajaxSubmit';
 
 	// Button types.
-	const TYPE_LINK = 'link';
 	const TYPE_PRIMARY = 'primary';
 	const TYPE_INFO = 'info';
 	const TYPE_SUCCESS = 'success';
 	const TYPE_WARNING = 'warning';
 	const TYPE_DANGER = 'danger';
 	const TYPE_INVERSE = 'inverse';
+	const TYPE_LINK = 'link';
 
 	// Button sizes.
 	const SIZE_MINI = 'mini';
 	public $type;
 	/**
 	 * @var string the button size.
-	 * Valid values are 'small' and 'large'.
+	 * Valid values are 'large', 'small' and 'mini'.
 	 */
 	public $size;
 	/**
 	 */
 	public $url;
 	/**
+	 * @var boolean indicates whether the button should span the full width of the a parent.
+	 */
+	public $block = false;
+	/**
 	 * @var boolean indicates whether the button is active.
 	 */
 	public $active = false;
 	/**
-	 * @var array the dropdown button items.
+	 * @var boolean indicates whether the button is disabled.
 	 */
-	public $items;
+	public $disabled = false;
+	/**
+	 * @var boolean indicates whether to encode the label.
+	 */
+	public $encodeLabel = true;
 	/**
 	 * @var boolean indicates whether to enable toggle.
 	 */
 	 */
 	public $completeText;
 	/**
-	 * @var boolean indicates whether to encode the label.
-	 */
-	public $encodeLabel = true;
+	* @var array the dropdown button items.
+	*/
+	public $items;
 	/**
 	 * @var array the HTML attributes for the widget container.
 	 */
 	 */
 	public $ajaxOptions = array();
 	/**
-	 * @var array the HTML options for the dropdown menu.
+	 * @var array the HTML attributes for the dropdown menu.
 	 * @since 0.9.11
 	 */
 	public $dropdownOptions = array();
 		if (isset($this->size) && in_array($this->size, $validSizes))
 			$classes[] = 'btn-'.$this->size;
 
+		if ($this->block)
+			$classes[] = 'btn-block';
+
 		if ($this->active)
 			$classes[] = 'active';
 
+		if ($this->disabled)
+			$classes[] = 'disabled';
+
 		if ($this->encodeLabel)
 			$this->label = CHtml::encode($this->label);
 

File widgets/TbHeroUnit.php

 	 */
 	public $encodeHeading = true;
 	/**
-	 * @var array the HTML attributes for the widget container.
-	 */
-	public $htmlOptions = array();
-	/**
 	 * @var array the HTML attributes for the heading element.
 	 * @since 1.0.0
 	 */
 	public $headingOptions = array();
+	/**
+	 * @var array the HTML attributes for the widget container.
+	 */
+	public $htmlOptions = array();
 
 	/**
 	 * Initializes the widget.

File widgets/TbMenu.php

 	 */
 	public $type;
 	/**
-	 * @var boolean indicates whether to stack navigation items.
-	 */
-	public $stacked = false;
-	/**
-	 * @var string|array the scrollspy configuration.
+	 * @var string|array the scrollspy target or configuration.
 	 */
 	public $scrollspy;
 	/**
+	* @var boolean indicates whether the menu should appear vertically stacked.
+	*/
+	public $stacked = false;
+	/**
 	 * @var boolean indicates whether dropdowns should be dropups instead.
 	 */
 	public $dropup = false;

File widgets/TbModal.php

 class TbModal extends CWidget
 {
 	/**
-	 * @var boolean indicates whether to automatically open the modal when initialized. Defaults to 'false'.
+	 * @var boolean indicates whether to automatically open the modal. Defaults to 'false'.
 	 */
 	public $autoOpen = false;
 	/**

File widgets/TbNavbar.php

 	 */
 	public $brandOptions = array();
 	/**
-	 * @var array navigation items.
-	 * @since 0.9.8
-	 */
-	public $items = array();
-	/**
 	 * @var mixed fix location of the navbar if applicable.
 	 * Valid values are 'top' and 'bottom'. Defaults to 'top'.
 	 * Setting the value to false will make the navbar static.
 	 */
 	public $collapse = false;
 	/**
+	 * @var array navigation items.
+	 * @since 0.9.8
+	 */
+	public $items = array();
+	/**
 	 * @var array the HTML attributes for the widget container.
 	 */
 	public $htmlOptions = array();