卓忆翻译:英中对照:Odoo报表基础odoo报表基础

avatar 2015/10/2712:00:42卓忆翻译:英中对照:Odoo报表基础odoo报表基础已关闭评论 1,755 views

原文: Odoo report design basics

卓忆翻译:英中对照:Odoo报表基础,  转帖烦请注明 出处,谢谢

  1. 多图翻译加整理测试:英中对照:Odoo报表入门Step by Step,Odoo创建一份报表到打印下拉菜单中

  2. 卓忆翻译:英中对照:Odoo报表基础

  3. 卓忆翻译:英中对照:Odoo报表设计进阶篇

  4. 卓忆翻译:写模块进行Odoo Qweb报表的继承和修改

Odoo helps to uniform reports by providing an overall layout structure of individual rows subdivided into twelve columns.

Odoo 报表,提供一个 12列 的 结构细分:

qwebbase0

 

A

Every sheet in Odoo has a top, bottom, left and right margin specified in millimeters in Settings > Technical > Reports > Paper Formats.

 

在 设置- 技术- 报表 -报表格式 中 :

Odoo 中所有的表单都有 以毫米为单位的 上,下,左和右边距

B

Odoo subdivides a sheet into rows (CSS class “row”) with a top margin (CSS class “mt”) and a bottom margin (CSS class “mb”).  To define e.g. a row with 8px top margin and 32px bottom margin you need the following code:

 

Odoo 把表单 细分为 行 (CSS类的“行”)在 上边距(CSS 类 “mt”)和 下边距 (CSS类“mb”)。

要定义一个类似 8px(像素) 的上边距及32px(像素)的下边距,您需要下列代码:

 

<div class="row mt8 mb32">Your new line!</div>

Available margins are: mt0, mt4, mt8, mt16, mt32, mt48, mt64, mt92, mt128, mb0, mb4, mb8, mb16, mb32, mb48, mb64, mb92, mb128

 

可用的上下边距有: mt0, mt4, mt8, mt16, mt32, mt48, mt64, mt92, mt128, mb0, mb4, mb8, mb16, mb32, mb48, mb64, mb92, mb128

C

Odoo subdivides each row into twelve columns. To specify a certain position and width of a div container there are two CSS class names to use – for defining the width “col-[screensize]-[column-factor]” and for defining the position “col-[screensize]-[position-type]-[column-factor]”.

To define e.g. a centered div container of 50% width you need the following code:

Odoo 把每行分为12列。想要定义 位置和宽度 需要使用 另外2个 CSS 类

- 定义宽度 “col-[screensize]-[column-factor]”

定义 位置 “col-[screensize]-[position-type]-[column-factor]”.

要定义 一个 居中 的 50%宽度 您 需要下面的代码:

<div class="col-xs-6 col-xs-offset-3">Big centered container</div>

Explanation 说明:
col-xs-6 means a width of 6 columns. Because there is a total of 12 columns this is exactly the half of it – to say 50%

col-xs-6 表示宽度为6列。由于总共有12列,所以6列就是50%宽度。
col-xs-offset-3 means the container starts to display after a width of 3 columns. Because there is a total of 12 columns and the container itself is exactly 6 columns wide there are also 3 columns left on its right side. Thats why the container is in the middle of the sheet.

col-xs-offset-3 表示从第3列的后一列开始 ,总列数是12,宽度是6,从第3列之后一列开始,刚好就是居中的位置。

Available screensizes 可用的 屏幕尺寸
xs (width smaller than 768px), sm (min-width: 768px), md (min-width: 992px), lg (min-width: 1200px)

xs (宽度小于 768像素),sm(最小宽度:768像素),md (最小宽度:992像素),lg (最小宽度:1200像素)

Available column-factors  可用的
1,2,3,4,5,6,7,8,9,10,11,12

Available position-types 可用的位置类型:
offset (absolut horizontal position in a row),

offset ( 行内的绝对水平位置),
pull (relative position, on the left hand of the last div element),

pull ( 左起到末尾的相对位置),
push (relative position, on the right hand of the last div element)

push (右起到末尾的相对位置)

Example: to position a small container (only one column width) on the right side of the big one (see example above) with two columns distance you need the following code:

例: 在右边大一点的2列的 区块 边 定位1个(仅1列宽度)的区块(见最上方的示意图)   您需要下面的代码 :

<div class="col-xs-1 col-xs-push-2">Little container on the right</div>

 

 

翻译难免有所疏漏,望诸位海涵。谢谢大家。

 

Odoo报表设计入门可见:http://www.jointd.com/?p=2579

 

 

avatar