主干和栅格是文档的骨骼，内容依赖组件进行呈现。
组件，主要是围绕交互体验对文字、图片、视频、表单等数据信息进行排版设计，以提供可复用、好维护、识别度统一规范的视觉呈现。
框架中会提供丰富的组件，便于快捷开发功能型网页应用；展示型网页建议开发者平时多积累一些常用图文视频组件。
通过module包裹组件，并设置各组件上下间距。
1
2
3
4
5
6
7
8
9
|
<div class="module">
<header class="module__header">
<h3 class="module__title">模块标题</h3>
</header>
<main class="module__container">
|
如按钮结构：
1
2
|
<button class="btn btn-default" type="button">按钮</button>
<button class="btn btn-primary btn_large" type="button">按钮</button>
|
如选项卡组件结构：
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="tab">
<ul class="tab__nav">
<li class="tab__trigger tab__trigger_active">trigger 1</li>
<li class="tab__trigger">trigger 2</li>
<li class="tab__trigger">trigger 3</li>
</ul>
<div class="tab__panel">
<div class="tab__container tab__container_active">container 1</div>
<div class="tab__container">container 2</div>
<div class="tab__container">container 3</div>
</div>
</div>
|
如手风琴结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="accordion">
<div class="accordion__panel accordion__panel_active">
<div class="accordion__header">header 1</div>
<div class="accordion__container">container 1</div>
</div>
<div class="accordion__panel">
<div class="accordion__header">header 2</div>
<div class="accordion__container">container 2</div>
</div>
<div class="accordion__panel">
<div class="accordion__header">header 3</div>
<div class="accordion__container">container 3</div>
</div>
</div>
|
如图文结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="media-normal">
<div class="media__object">
<a href="#">
<img class="img-responsive" src="http://placeholder.qiniudn.com/220x132/ff9500/000" alt="一张配图" width="width" height="height">
</a>
</div>
<div class="media__caption">
<h4 class="media__title"><a href="#">一个标题</a></h4>
<div class="media__abstract">
<p>一段简要信息</p>
</div>
</div>
</div>
|
组件嵌套层级不要冗余，有条理，结构及命名要有语义。
（本篇结束）
扫描二维码关注公众号，回复：
79086 查看本文章
