辅助

常用结构标签

为了让文档层次分明，H5增加了很多结构类标准，如下表：

媒体查询

在CSS3中，通过媒体查询(media query)功能，实现在不同媒体大小时，使用不同的类；也是实现响应式布局重要的原理。

如以下示例实现768px下显示蓝色背景，在768px上显示为橙色背景效果：

    <div class="demo-media">媒体查询</div>
    <style>
      .demo-media{background-color:#0ae;}
      @media (min-width:768px){
        .demo-media{background-color:#f60;}
      }
    </style>
  

通过媒体查询功能，可实现在不同设备下同一元素的宽、高、颜色、显示等效果。

在框架中，如容器、响应式对齐、响应式显示、网格系统、导航等都使用了媒体查询功能。

容器

容器为放置内容的一个盒子模型元素，为了定义元素的宽度，框架定义了以下几个容器：100%全屏宽的.layout、左右两边有填充的.container及根据终端大小固定的微小宽度.width-mini、小宽度.width-small、中宽度.width-middle、大宽度.width-big、特大宽度.width-large。

    <div class="layout">全屏宽</div>
    <div class="container">默认容器</div>
    <div class="width-mini">微小宽度</div>
    <div class="width-small">小宽度</div>
    <div class="width-middle">中宽度</div>
    <div class="width-big">大宽度</div>
    <div class="width-large">特大宽度</div>
  

因.layout和.container没有固定的宽度值，所以可以和有固定宽度值的.width-mini、.width-small、.width-middle、.width-big、.width-large叠加使用，如.container .width-small为两边带填充小宽度的容器。

响应容器

.container样式为响应式容器，响应式即为应用媒体查询功能，根据终端设备不同显示不同的宽度，在使用响应式的情况下起作用，下表是容器在不同设备下宽度（以默认16px字号计算）：

宽度

框架定义了元素宽度样式，名称为width的首字母.w数字，数字为1-12，与下节的网格系统数值相同。

    <div class="w1">.w1</div>
    <div class="w2">.w2</div>
    <div class="w3">.w3</div>
    <div class="w4">.w4</div>
    <div class="w5">.w5</div>
    <div class="w6">.w6</div>
    <div class="w7">.w7</div>
    <div class="w8">.w8</div>
    <div class="w9">.w9</div>
    <div class="w10">.w10</div>
    <div class="w11">.w11</div>
    <div class="w12">.w12</div>
  

响应宽度

在不同设备宽下，可根据媒体查询，响应显示不同的宽度，相关样式为：

注：*为数字1-12。

    <div class="w9 small-w6 big-w4">.w9.small-w6.big-w4</div>
  

响应效果：实现默认.w9、小屏.w6、大屏.w4效果

字符宽

框架同时定义了固定字符宽度样式，名称为.em数字，数字为1-12，即为1-12个字符的宽度。

    <div class="em1">一</div>
    <div class="em2">一二</div>
    <div class="em3">一二三</div>
    <div class="em4">一二三四</div>
    <div class="em5">一二三四五</div>
    <div class="em6">一二三四五六</div>
    <div class="em7">一二三四五六七</div>
    <div class="em8">一二三四五六七八</div>
    <div class="em9">一二三四五六七八九</div>
    <div class="em10">一二三四五六七八九十</div>
    <div class="em11">一二三四五六七八九十一</div>
    <div class="em12">一二三四五六七八九十一二</div>
  

在需要使用固定字符数量时，可以使用字符宽样式；因固定字符样式常用于标题，在其跟随元素可能还会使用到相同字符宽左边距，所以框架还定义了ml1-12样式供使用，意为margin-left1至12字符宽的左边距。

水平线

水平线在页面中用<hr />表示：

    <hr />
  

分隔水平线

分隔水平线为带文字的水平线，文字需要用span包含，同时可以使用对齐样式(下文有介绍)，使文字居中或居右：

    <h6 class="hr"><span>标题水平线</span></h6>
    <div class="hr align-center"><span>分隔水平线</span></div>
  

水平线颜色和大小

应用过程中，也可以使用颜色中的文本色、边框色，改变水平线条的颜色，同时使用.border-mini可使线条变粗：

    <hr class="border-main" />
    <h6 class="hr border-deep align-right"><span>标题水平线</span></h6>
    <div class="hr border-danger text-danger border-mini"><span>文字水平线</span></div>
  

水平线背景色

水平线文字背景色默认使用与body相同的颜色，在较深背景时，差异较为明显，这时给水平线加上相同的背景色即可。

    <div class="bg-info padding radius">
      <h6 class="hr bg-info border-black"><span>标题水平线</span></h6>
      <div class="hr bg-info border-white text-white"><span>文字水平线</span></div>
    </div>
  

引用

引用在页面中用blockquote标签定义，默认的引用样式为：

    <blockquote>引用</blockquote>
  

含背景色

除默认的引用样式外，框架还定义了.quote含背景的引用样式：

    <div class="quote">引用</div>
  

改变颜色

应用过程中，也可以使用颜色中的文本色、边框色，改变引用样式的颜色：

    <blockquote class="border-info text-info">引用</blockquote>
    <div class="quote border-danger alert-danger">引用</div>
  

快速浮动

浮动为将元素放在左边还是右边，左浮动为.float-left、右浮动为.float-right；框架也定义了两个清除浮动.float-none和.clearfix样式：

    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
    <div class="float-none">清除浮动</div>
    <div class="clearfix">清除浮动</div>
  

两个清除浮动差别为：.float-none只清除float浮动效果，还原为本身的无浮动状态；.clearfix为清除float浮动后，显示为块结构，也就是重新一整行显示。

浮动显示

在不同设备宽的情况下，展示不同的浮动方式，不同屏的响应命名方式为屏-样式类，如小屏右浮动.small-float-right：

图片约束

在一个容器中，有时图片的宽会超出容器的宽度，给图片添加.img-auto样式，可使图片最大宽度为容器的宽度，高度按比例缩小：

    <img class="img-auto" src="..." alt="..." />
  

另外一种情况是图片比容器小，需要占满整个容器，给容器添加.img-full样式，图片可占满整个容器空间：

    <img class="img-full" src="..." alt="..." />
  

文字约束

在一个容器中，有时需要对文字的排版做特别处理，如缩进、截断、换行等，为快捷开发，框架定义了相关样式：

文字缩进

文字缩进样式定义为.word-indent，在文本的开头，缩进2个字符。

    <div class="word-indent">文字缩进<div>
  

文字截断

文字截断，用.word-more定义，当内容超过容器的限制时，用...表示隐藏部份。

    <div class="word-more">文字截断<div>
  

强制换行

强制换行样式定义为.word-break，当文字内容超出容器最大宽度时，超出部份的文字会自动换行。

    <div class="word-break">文字强制换行<div>
  

强制不换行

强制不换行样式定义为.word-block，当文字内容超出容器最大宽度时，超出部份的文字不换行，仍在同一行内显示。

    <div class="word-block">文字换行<div>
  

字号响应

在不同设备宽的情况下，展示不同的字号大小：

对齐方式

对齐方式包含水平方向的左、中、右，以及垂直方式的上、中、下。

水平对齐

    <div class="align-left">左对齐</div>
    <div class="align-center">水平居中</div>
    <div class="align-right">右对齐</div>
  

水平响应对齐

在不同设备宽的情况下，展示不同的对齐方式：

垂直对齐

顶部对齐 垂直居中 底部对齐

    <span class="align-top">顶部对齐</span>
    <span class="align-middle">垂直居中</span>
    <span class="align-bottom">底部对齐</span>
  

行距

行距通常用于文本上下行之间的间际，包含微小行距、小行距、默认行距、大行距及特大行距五个等级；演示中背景色部份为行距的大小，其中微小行距为1em，默认行距与body定义的行距相同。

    <div class="line-mini">微小行距</div>
    <div class="line-small">小行距</div>
    <div class="line">默认行距</div>
    <div class="line-big">大行距</div>
    <div class="line-large">特大行距</div>
  

固定位置

将元素固定在页面的上、右、下、左、左上角、左下角、右上角、右下角等位置。

    <div class="fixed-top">上</div>
    <div class="fixed-right">右</div>
    <div class="fixed-bottom">下</div>
    <div class="fixed-left">左</div>
    <div class="fixed-left-top">左上角</div>
    <div class="fixed-left-bottom">左下角</div>
    <div class="fixed-right-top">右上角</div>
    <div class="fixed-right-bottom">右下角</div>
  

显示方式

定义元素的显示及隐藏。

    <div class="show">显示</div>
    <div class="hidden">隐藏</div>
  

响应显示

在不同设备宽的情况下，展示不同的显示方式：

定位显示

定义元素的内联显示、块显示、相对定位、绝对定位、水平居中等显示方式。

    <div class="inline">内联显示</div>
    <div class="block">块显示</div>
    <div class="relative">相对定位</div>
    <div class="absolute">绝对定位</div>
    <div class="center">水平居中</div>
  

打印响应

在页面打印print时，实现打印时显示.print-show（页面时隐藏状态）和打印时隐藏.print-hidden（页面时显示状态）样式：

    <div class="print-show">打印时显示</div>
    <div class="print-hidden">打印时隐藏</div>
  

窗口工具

前进、后退、返回顶部

    <button class="button" data-win="back">后退</button>
    <button class="button" data-win="forward">前进</button>
    <button class="button" data-win="top">返回顶部</button>
  

返回顶部监听

    <button class="button" data-win="top">返回顶部</button>
    <script>
      $(function(){
        $('[data-win="top"]').wintop();
      });
    </script>
  

刷新、打印、关闭窗口

    <button class="button" data-win="refresh">刷新</button>
    <button class="button" data-win="print">打印</button>
    <button class="button" data-win="close">关闭</button>