组件结构

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

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

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

通过 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>
1
2
3
4
5
6
7
8
9

如按钮结构:

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

如选项卡组件结构:

<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

如手风琴结构:

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

如图文结构:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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


更新日志:

  • 2015-07-20

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai