概览

深入了解 wee 底层结构的关键部分，可以让我们的 web 开发变得更好、更快。

HTML5 文档类型

wee 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

栅格系统

设计理念

采用24栅格体系，支持传统的float布局，也支持flex布局。

布局的栅格化系统，基于行（row）和列（col）来定义信息区块的外部框架，以使页面的每个区块能够整齐排布，工作原理如下：

通过row在水平方向建立一组column（简写col）
你的内容应当放置于col内，并且，只有col可以作为row的直接元素
栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建
如果一个row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列

Float布局

固定宽度布局

使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列 Col 必须放在 Row 内。

col-4

col-20

col-6

col-18

col-8

col-16

col-10

col-14

col-12

col-24

<Row>
  <Col col="4">col-4</Col>
  <Col col="20">col-20</Col>
</Row>

偏移布局

通过使用 push 和 pull 就可以改变列（column）的偏移位置。

col-8 push-16

col-16 pull-8

col-16 push-4

col-12 push-6

col-8 push-16

col-10 push-14

col-12 push-12

col-14 push-10

<Row>
  <Col col="8" push="16">col-8 push-16</Col>
</Row>

Flex布局

布局用法说明

容器有两种

Col: 容器里的[栅格]以横向排列，与传统栅格化的Row一样
Row: 容器里的[栅格]以竖向排列，表示一层叠一层的排列方式
栅格化为24列，如果单行超过24列，即自动换行

布局

flex-col-12

flex-col-8

flex-col-16

flex-col-6

flex-col 自动填充宽度

flex-col-6

flex-col-14

flex-col 自动填充宽度

flex-col-16

flex-col-12

flex-col

<Row type="flex">
  <Col col="12">col-12</Col>
  <Col col="12">col-12</Col>
</Row>

垂直居中/水平居中

flex-col-6垂直居中

flex-col-6多行垂直居中

向左偏移

flex-col-12

flex-col-12 wee-flex-push-6

flex-col-10 wee-flex-push-14

排序

order越小排在越前面

flex-col-4 flex-order-4

flex-col-4 flex-order-3

flex-col-4 flex-order-2

flex-col-4 flex-order-1

左对齐/右对齐

flex-col-4

flex-col-6

flex-col-4 左对齐

flex-col-4 右对齐

flex-col-4 左对齐

flex-col-4 右对齐

flex-col-4 左对齐

flex-col-4 右对齐

顶对齐/底对齐

flex-col-6 底部对齐

flex-col-6 顶部对齐

flex-col-6 底部对齐

等宽对齐

自动调整栅格间距，保持两边间距相同

flex-col-4 等宽对齐

分散排列

与等宽对齐相同，但靠两侧的间距比[栅格]之间的间距大一倍

分散排列

flex-col-4 等宽对齐

排版与标题

排版样式

排版样式
Element / Class	Example
`<b>, <strong>`	Strong text
`<em>`	Italic text
`<abbr>`	ASAP
`<dfn>`	Definition
`<mark>`	Mark
`<small>`	Small text
`<sub>`	Text with _{Sub text}
`<sup>`	Text with ^{Sup text}
`<del>`	~~Deleted text~~

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

标题样式
Element / Class	HTML Output
h1 .h1	Heading 1
h2 .h2	Heading 2
h3 .h3	Heading 3
h4 .h4	Heading 4
h5 .h5	Heading 5
h6 .h6	Heading 6

<h1>h1. Wee Title heading</h1>
<h2>h2. Wee Title heading</h2>
<h3>h3. Wee Title heading</h3>
<h4>h4. Wee Title heading</h4>
<h5>h5. Wee Title heading</h5>
<h6>h6. Wee Title heading</h6>

页面主体

WEE 将全局 font-size 设置为 14px，line-height 设置为 20px。这些属性直接赋予 <body> 元素和所有段落元素。

对齐方式

通过文本对齐样式，可以简单方便的将文字重新对齐。

文字左对齐效果.

文字居中对齐效果.

文字右对齐效果.

实现两端对齐文本效果.

段落中的文本不进行换行.

<p class="text-left">文字左对齐效果.</p>
<p class="text-center">文字居中对齐效果.</p>
<p class="text-right">文字右对齐效果.</p>
<p class="text-justify">实现两端对齐文本效果.</p>
<p class="text-nowrap">段落中的文本不进行换行.</p>

列表

无序列表

我是列表文字
我是列表文字
我是列表文字
- 我是列表文字
- 我是列表文字
- 我是列表文字
- 我是列表文字
我是列表文字
我是列表文字

<ul>
  <li>...</li>
</ul>

有序列表

我是列表文字
我是列表文字
我是列表文字
我是列表文字
我是列表文字

<ol>
  <li>...</li>
</ol>

表格

基础表格

#	First Name	Last Name	Username
1	Mark	Jacob	Wasb
2	Jacob	Thornton	Ked
3	Larry	the Bird	Ewe

<table class="wee-table">
  <thead>
    ....
  </thead>
  <tbody>
    ....
  </tbody>
</table>

斑马纹表格

通过 .wee-table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

#	First Name	Last Name	Username
1	Mark	Jacob	Wasb
2	Jacob	Thornton	Ked
3	Larry	the Bird	Ewe

<table class="wee-table wee-table-striped">
  <thead>
    ....
  </thead>
  <tbody>
    ....
  </tbody>
</table>

鼠标悬停

通过添加 .wee-table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

#	First Name	Last Name	Username
1	Mark	Jacob	Wasb
2	Jacob	Thornton	Ked
3	Larry	the Bird	Ewe

<table class="wee-table wee-table-hover">
  <thead>
    ....
  </thead>
  <tbody>
    ....
  </tbody>
</table>

按钮

能够作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 标签添加对应的样式。

Link

<a class="wee-btn" href="#" role="button">Link</a>
<button class="wee-btn" type="submit">Button</button>
<input class="wee-btn" type="button" value="Input">
<input class="wee-btn" type="submit" value="Submit">

内置样式

默认按钮(default) Primary Secondary Success Danger Warning Info Light Dark link

<span class="wee-btn">默认按钮(default)</span>
<span class="wee-btn wee-btn-primary">Primary</span>
<span class="wee-btn wee-btn-secondary">Secondary</span>
<span class="wee-btn wee-btn-success">Success</span>
<span class="wee-btn wee-btn-danger">Danger</span>
<span class="wee-btn wee-btn-warning">Warning</span>
<span class="wee-btn wee-btn-info">Info</span>
<span class="wee-btn wee-btn-light">Light</span>
<span class="wee-btn wee-btn-dark">Dark</span>
<span class="wee-btn wee-btn-link">link</span>

按钮尺寸

按钮有大、中、小三种尺寸。

.wee-btn-lg 大按钮
.wee-btn-sm 小按钮

分别把按钮设为大、小尺寸，默认为常用中级按钮。

大按钮(lg) Primary Success

默认按钮 Primary Success

小按钮(sm) Primary Success

<p>
  <span class="wee-btn wee-btn-lg">大按钮(lg)</span>
  <span class="wee-btn wee-btn-lg wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-lg wee-btn-success">Success</span>
</p>
<p>
  <span class="wee-btn">默认按钮</span>
  <span class="wee-btn wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-success">Success</span>
</p>
<p>
  <span class="wee-btn wee-btn-sm">小按钮(sm)</span>
  <span class="wee-btn wee-btn-sm wee-btn-primary">Primary</span>
  <span class="wee-btn wee-btn-sm wee-btn-success">Success</span>
</p>

按钮类型

按钮类型：默认按钮、胶囊按钮、矩形按钮、圆形按钮、实心按钮、空心按钮、Block按钮。

<Button type="button" class="wee-btn">Default</Button>
<span class="wee-btn wee-btn-primary">Primary</span>
<span class="wee-btn wee-btn-success">Success</span>

<button class="wee-btn wee-btn-secondary">secondary</button>

<Button type="button" class="wee-btn wee-btn-round">Default</Button>
<Button type="button" class="wee-btn wee-btn-primary wee-btn-round">Primary</Button>

<Button type="button" class="wee-btn wee-btn-square">Default</Button>
<Button type="button" class="wee-btn wee-btn-primary wee-btn-square">Primary</Button>

<Button type="button" class="wee-btn wee-btn-circle">W</Button>
<Button type="button" class="wee-btn wee-btn-primary wee-btn-circle">A</Button>

<button class="wee-btn wee-btn-outline-primary">primary</button>

<button class="wee-btn wee-btn-primary wee-btn-block">primary</button>

图片

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="circle">
<img src="..." alt="..." class="thumbnail">

头像

有三种尺寸：大(wee-avatar-lg)、中(默认)、小(wee-avatar-sm)

有两种形状：圆形(默认)、方形(wee-avatar-square)

A B C 99A 99B C

D D D

99D 99+D 999+D 99D D

<span class="wee-avatar wee-avatar-lg">A</span>
<span class="wee-avatar">B</span>
<span class="wee-avatar wee-avatar-sm">C</span>

概览

HTML5 文档类型

栅格系统

设计理念

Float布局

固定宽度布局

偏移布局

Flex布局

布局用法说明

布局

垂直居中/水平居中

向左偏移

排序

左对齐/右对齐

顶对齐/底对齐

等宽对齐

分散排列

排版与标题

排版样式

标题

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

页面主体

对齐方式

列表

无序列表

有序列表

表格

基础表格

斑马纹表格

鼠标悬停

按钮

内置样式

按钮尺寸

按钮类型

图片

头像