FCE to create twitter bootstrap-conform sub-content areas with a dynamic number of columns and column widths

gistfile1.html

{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Content"/>
<f:section name="Configuration">
  <flux:flexform wizardTab="PRISMA" id="dynamicgrid" label="Dynamisches Grid">
    <flux:flexform.section name="columns" label="Spalten">
	    <flux:flexform.object name="column" label="Spalte">
	    	<flux:flexform.field.select name="columnClass" label="Spaltenbreite" items="span1,span2,span3,span4,span5,span6,span7,span8,span9,span10,span11,span12" maxItems="1" />
	    </flux:flexform.object>
    </flux:flexform.section>
    <flux:flexform.grid>
      <flux:flexform.grid.row>
        <f:for each="{columns}" as="column">
          <flux:flexform.grid.column>
            <flux:flexform.content name="column{column.column.columnClass}" label="Column: {column.column.columnClass}" />
          </flux:flexform.grid.column>
        </f:for>
      </flux:flexform.grid.row>
    </flux:flexform.grid>
  </flux:flexform>
</f:section>

<f:section name="Preview">
  <flux:widget.grid />
</f:section>

<f:section name="Main">
	<div class="row-fluid">
	<f:for each="{columns}" as="column">
		<div class="{column.column.columnClass}">
			<flux:flexform.renderContent area="column{column.column.columnClass}" />
		</div>
	</f:for>
	</div>
</f:section>