bootstrap风格框架开发说明——信息展示页面

页面效果如图:

image

除基本库以外,需要引用的文件:

  • default.css
  • bootstrap-extends.js

以上两个文件,封装了若干页面控件,通过这些控件的组合,实现原型图中的页面效果。为了保证页面风格的统一,尽量不要自己定义样式,必要的时候先定义通用样式再在页面中使用。

页面标题

<div class=”page-header”>

<h1>您好:xxx <small>当前日期:2012年8月1日星期一 农历八月十五(<strong>中秋节快乐</strong>)</small></h1>

</div>

class=page-header的div中,使用h1标签定义标题内容,使用small标签定义副标题内容,以上html代码的效果为:

image

段落

<section class=”info-section” id=”work” data-title=”工作概览”>

</section>

使用html5标签section,通过data-title属性定义段落的标题。在section标签中,可以该段落的实际内容。以上代码的效果为:

image

内容组

<div class=”span6 field-group” data-title=”今日工作”>

<p>

<span class=”btn-group”>

<button class=”btn”>按钮组1</button>

<button class=”btn”>按钮组2</button>

<button class=”btn”>按钮组3</button>

</span>

</p>

<p>文字内容(其中<span class=”label label-warning”>3名</span>必须于今日内完成) <a href=”###“>查看详情</a></p>

<p>文字内容 <a href=”###“>查看详情</a></p>

<p>文字内容 <a href=”###“>查看详情</a></p>

</div>

使用class为field-group的div包含详细内容,data-title属性指定标题。该div可以使用需要的其他属性,如包含在row内的时候,可以使用spann属性定义大小。在div内部,可以使用p标签包含具体内容,也可以使用表格、超链接等元素,与一般的html的用法相同。

由于已经定义了该div的标题样式和背景样式,因此不需要使用class=well控制背景色。

说明

示例代码可以参考已有的代码。理想情况下,页面中应该只包含业务信息和各元素的class、id等属性,即强调代码的语义含义,弱化代码的样式含义。实际中可能做不到理想情况,但要尽量减少页面中的样式信息。

具体的显示样式在公共的css和js中定义。示例页面中的边框、背景、分割线都是由公共代码自动添加的,这样做的好处是,如果想把灰色风格改变为蓝色风格,不需要改动具体页面的代码,或改动量非常小。

bootstrap风格框架开发说明——首页菜单

image

现共支持2级菜单,数据结构如下:

一级菜单:

  • name:显示的中文名称
  • children:数组,每个元素表示二级菜单

二级菜单:

  • name:显示的中文名称
  • url:点击之后,刷新iframe的地址
  • icon:显示的图标,使用bootstrap官网上介绍的第三方图标插件。为空时默认为”tasks”

bootstrap风格框架开发说明——表格式表单

样式示例:

image

主要用于满足以下需求:

需要用表格布局的表单,如需要每行字段个数一致,但具体个数不能确定,因此无法使用统一的css样式。

form的class指定为“form-table”,具体的样式定义在default.css中。

表单内容需要分节时,节标题使用<legend>标签。

每一节使用一个table,不指定任何样式元素,用tr和td排版即可

 

===

很多人都要demo,补个链接吧