使用blueprintcss制作表单布局

在做项目时经常遇到客户要求把一个纸质的表单电子化，而且要求尽量和纸质的相一致。我们常用的做法是用HTML的table套table的做法，遇到复杂的表单就非常难办了。最近我们做的一个产品中是通过在可视化的IDE画线来把表单的框架画出来，其实运行时是用JS来化线实现的。虽然可能比用table套table的方式好了些，不过还是有些缺点的：

• 太依赖于IDE，离开IDE代码不好理解
• 画线操作不是很好用，即使用photoshop来画也不见得好画，何况一般的IDE要考虑转换成JS和HTML有很多限制，所以也做不了Photoshop那么强大
• 线框和里面的东西没有容器的关系，只是通过绝对定位定在那里，其实是互不相干的
• 调整起来不容易

今天使用blueprintcss 这个CSS框架试着做了一个布局，我觉得很好用，代码简洁，效果也不错。

 上面这个表单子用的了简单的几行代码：

<div class="container formtable">
		<!-- 第一行 -->
		<div class="span-12 cell">会议议题：<input style="width:380px;" class="lineinput"/></div>
		
		<div class="span-12 last cell">
			主持嘉宾：
			<input name="abc" type="radio">郭德纲
			<input name="abc" type="radio" checked>王小丫
			<input name="abc" type="radio">小沈阳
		</div>
		
		<!-- 第二行 -->
		<div class="span-10 cell">
			与会人员：<input style="width:200px;" class="lineinput"/>
		</div>
		<div class="span-10 cell">
			参会人员：<input style="width:200px;"  class="lineinput"/>
		</div>
		<div class="span-4 last cell">
				补充说明：<input style="width:80px;"  class="lineinput"/>
		</div>
		
		<!-- 第三行 -->
		<div class="span-24 last cell" style="height: 150px">
			<textarea
			style="height: 120px; width: 930px">请输入意见！</textarea>
		</div>

		<!-- 第四行 -->
		<div class="span-6 cell">记录员：林冲</div>
		<div class="span-6 cell">填报时间：2009-1-1</div>
		<div class="span-6 cell">负责人：宋江</div>
		
		<div class="span-6 last cell">开会地点：聚义厅</div>
</div>

 代码很容易读懂，就不解释了，附上全部的源码。

 

blueprint有个ruby的脚本文件，可以做很多自定义，打算有时间定义一个符合自己需求的版本，主要包括总体的宽度以及合适的单元格宽度。