跳到主要内容

组件结构

主干和栅格是文档的骨骼,内容依赖组件进行呈现。

组件,主要是围绕交互体验对文字、图片、视频、表单等数据信息进行排版设计,以提供可复用、好维护、识别度统一规范的视觉呈现。

框架中会提供丰富的组件,便于快捷开发功能型网页应用;展示型网页建议开发者平时多积累一些常用图文视频组件。

通过 module 包裹组件,并设置各组件上下间距。

<div class="module">
<header class="module__header">
<h3 class="module__title">模块标题</h3>
</header>
<main class="module__container">
<!-- Component -->
</main>
<footer class="module__footer"></footer>
</div>

如按钮结构:

<button class="btn btn-default" type="button">按钮</button>
<button class="btn btn-primary btn_large" type="button">按钮</button>

如选项卡组件结构:

<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>

如手风琴结构:

<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>

如图文结构:

<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>

组件嵌套层级不要冗余,有条理,结构及命名要有语义。


更新日志:

  • 2015-07-20