辅助
辅助为在页面排版及内容处理中,快速调节元素样式的类操作。
常用结构标签
为了让文档层次分明,H5增加了很多结构类标准,如下表:
标签 | 名称 | 说明 |
---|---|---|
<header> | 头部 | 区块的标题或引导 |
<aside> | 侧栏 | 页面的附属信息 |
<nav> | 导航 | 区块的导航内容 |
<main> | 主体 | 页面的主体内容 |
<section> | 区块 | 内容区块或应用块 |
<article> | 文章 | 结构完整且独立的内容部分 |
<footer> | 底部 | 区块的尾部或附加信息 |
媒体查询
在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
。
.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字号计算):
容器样式 | 默认 | 微小屏 576px | 小屏 768px | 中屏 1024px | 大屏 1280px | 特大屏 1680px |
---|---|---|---|---|---|---|
.layout | 100% | |||||
.container | 100%-32px | 540px | 730px | 960px | 1200px | 1600px |
宽度
框架定义了元素宽度样式,名称为width的首字母.w
数字,数字为1-12,与下节的网格系统数值相同。
.w1
.w2
.w3
.w4
.w5
.w6
.w7
.w8
.w9
.w10
.w11
.w12
<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>
响应宽度
在不同设备宽下,可根据媒体查询,响应显示不同的宽度,相关样式为:
默认 | 微小屏 | 小屏 | 中屏 | 大屏 | 特大屏 | |
---|---|---|---|---|---|---|
屏宽 | 自动 | ≥576px | ≥768px | ≥1024px | ≥1280px | ≥1680px |
样式 | .w* | .mini-w* | .small-w* | .middle-w* | .big-w* | .large-w* |
注:*为数字1-12。
.w9.small-w6.big-w4
<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>
在需要使用固定字符数量时,可以使用字符宽样式;因固定字符样式常用于标题,在其跟随元素可能还会使用到相同字符宽左边距,所以框架还定义了ml
1-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
:
默认 | 微小屏 576px | 小屏 768px | 中屏 1024px | 大屏 1280px | 特大屏 1680px | |
---|---|---|---|---|---|---|
左浮动 | .float-left | .mini-float-left | .small-float-left | .middle-float-left | .big-float-left | .large-float-left |
右浮动 | .float-right | .mini-float-right | .small-float-right | .middle-float-right | .big-float-right | .large-float-right |
清除浮动 | .float-none | .mini-float-none | .small-float-none | .middle-float-none | .big-float-none | .large-float-none |
图片约束
在一个容器中,有时图片的宽会超出容器的宽度,给图片添加.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>
字号响应
在不同设备宽的情况下,展示不同的字号大小:
默认 | 微小屏 576px | 小屏 768px | 中屏 1024px | 大屏 1280px | 特大屏 1680px | |
---|---|---|---|---|---|---|
微小号 | .size-mini | .mini-size-mini | .small-size-mini | .middle-size-mini | .big-size-mini | .large-size-mini |
小号 | .size-small | .mini-size-small | .small-size-small | .middle-size-small | .big-size-small | .large-size-small |
默认 | .size | .mini-size-middle | .small-size-middle | .middle-size-middle | .big-size-middle | .large-size-middle |
大号 | .size-big | .mini-size-big | .small-size-big | .middle-size-big | .big-size-big | .large-size-big |
特大号 | .size-large | .mini-size-large | .small-size-large | .middle-size-large | .big-size-large | .large-size-large |
对齐方式
对齐方式包含水平方向的左、中、右,以及垂直方式的上、中、下。
水平对齐
<div class="align-left">左对齐</div> <div class="align-center">水平居中</div> <div class="align-right">右对齐</div>
水平响应对齐
在不同设备宽的情况下,展示不同的对齐方式:
默认 | 微小屏 576px | 小屏 768px | 中屏 1024px | 大屏 1280px | 特大屏 1680px | |
---|---|---|---|---|---|---|
左对齐 | .align-left | .mini-align-left | .small-align-left | .middle-align-left | .big-align-left | .large-align-left |
居中对齐 | .align-center | .mini-align-center | .small-align-center | .middle-align-center | .big-align-center | .large-align-center |
右对齐 | .align-right | .mini-align-right | .small-align-right | .middle-align-right | .big-align-right | .large-align-right |
垂直对齐
<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>
显示方式
定义元素的显示及隐藏。
响应显示
在不同设备宽的情况下,展示不同的显示方式:
默认 | 微小屏 576px | 小屏 768px | 中屏 1024px | 大屏 1280px | 特大屏 1680px | |
---|---|---|---|---|---|---|
显示 | .show | .mini-show | .small-show | .middle-show | .big-show | .large-show |
隐藏 | .hidden | .mini-hidden | .small-hidden | .middle-hidden | .big-hidden | .large-hidden |
定位显示
定义元素的内联显示、块显示、相对定位、绝对定位、水平居中等显示方式。
<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>