• HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式；
    在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
实例
示范 引用变量 值

h1.标题内容 副标题内容

 @fontSize-largest ~34px

h2.标题内容 副标题内容

 @fontSize-larger ~24px

h3.标题内容 副标题内容

 @fontSize-large ~18px

h4.标题内容 副标题内容

 @fontSize-small ~16px
h5.标题内容 副标题内容
 @fontSize-smaller ~14px
h6.标题内容 副标题内容
 @fontSize-smallest ~12px 
            
<h1/2/3/4/5/6 (class="h1/2/3/4/5/6")>
  ...
  <small (class="small")>
    ...
  </small>
</h1/2/3/4/5/6>
主体内容 字体尺寸类 行高类

主体内容

  • BrickPlus 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> 被重置所有外边距为 0； 通过添加 .lead 类可以让段落突出显示。
实例

钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。中国最大の投資の早期と長期のリスク投資ファンド。


2014年、会社は広州天河CBDセンター区の中核に位置し、現在従業員は百人近く、深センに事務所を設立。钱途連携は国内初のフォーカスモードに基づいてインターネットを通じて、企業の取引の過程の電子登録システム（ブランド名「E +口座」）、ドッキング良質の金融資源は中小企業に付加価値を提供し、新型のサプライチェーンの融資や革新支払い決済の金融サービス産業。


現在、钱途連携業務は放射線の金融、不動産、飲食、医薬品など多くの産業として允リットル工業、山東高速、万科産、九州通など数百有名な企業と緊密な協力関係の確立によって、パートナーの実際的な需要にカスタマイズ製品、実現E +口座機能の基礎の上に協力パートナードッキング良質金融資源、安全かつ高効率に解決し、融資と決済需要増値、および産業金融分野の業務開拓やシーンを建て。钱途連携の革新的な能力と専門のサービスも数多くパートナーと業界団体の高さを認可し、2015年の国際的なトップを獲得し风投機構IDG資本投資。

            
<p (class="lead")>
  ...
</p>

字体尺寸类

  • BrickPlus 采用递归的计算方式生成定义字体大小的工具类 fs-(12~36)，由最低 12 像素到最高 36 像素的字体尺寸。
  • 公式设定为每 2 像素计算出一个尺寸类，所以在 fs-(12~36) 中是每一次偶数为一个有效工具类，如：fs-12、fs-14、fs-16...。
  • 字符尺寸类并没有定义最高优先级，因为这种类的引用是最后且最低效的设计手段，它会让项目的维护变得不灵活。
实例

字体尺寸类：fs-(12~36)

            
<p class="fs-(12~36)">
  ...
</p>

行高类

  • BrickPlus 采用递归的计算方式生成定义行高尺寸的工具类 lh-(12~36)，由最低 12 像素到最高 36 像素的字体尺寸（是的，行高并没有使用相对单位，因为行高类和其他排版类一样是最后的设计应对手段，需要做到一致的需求）。
  • 公式设定为每 2 像素计算出一个行高类，所以在 lh-(12~36) 中是每一次偶数为一个有效工具类，如：lh-12、lh-14、lh-16...。
  • 行高尺寸类并没有定义最高优先级，因为这种类的引用是最后且最低效的设计手段，它会让项目的维护变得不灵活。（2016/07/04以后现在又定义了最高优先级，尽情的扇我的脸吧）。
实例

行高尺寸类：lh-(12~36)

            
<p class="lh-(12~36)">
  ...
</p>
  • 在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。
实例
标记文本 <mark>

用标记元素 高亮 文本内容

删除文本 <del>

用删除标签就能标记一段被删除的文本

无用文本 <s>

这段文本就被标记为一段作废文本

插入文本 <ins>

这里有一段作为插入文本的示范内容 “ 插入文本 ” 已经被标记起来

文本下划线 <u>

对有需要的文本使用下划线标签，但语义上和插入文本不同

小号文本 <small>

相对主要内容来说（某些需要作为辅助内容存在的语句）

着重文本 <strong>

有时候在无需高亮文本的时候，强调语句也是一种选择

斜体文本 <em>

下面的代码片段的文本呈现为 斜体文本。

  • 通过对齐工具类，可以简单方便的将行内元素或字符串重新对齐。
实例

.text-align-left 左对齐

.text-align-center 居中对齐

.text-align-right 右对齐

.text-align-justify 两端对齐

.text-nowrap 不换行

.word-wrap 强制换行

.text-hide 截字

            
<p class="text-align-( left / center / right / justify ) / text-nowrap / word-wrap / text-hide">
  ...
</p>
  • 通过这几个类可以改变文本的大小写。
实例

Lowercased text.

Uppercased text.

Capitalized text.

            
<p class="text-lowercase / text-uppercase / text-capitalize">
  ...
</p>
  • 当鼠标悬停在缩写和缩写词上时就会显示完整内容，BricksPlus 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title属性。
实例
这里显示的是一个基本缩略语：attr
这里显示的是一个首字母缩略语，为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。：html 
            
<abbr title="..." class="initialism">...</abbr>
  • 让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
实例
广东钱途互联商务服务有限公司 （以下简称“钱途互联”）

广东省广州市天河区
体育西路109号高盛大厦8层
tel: 020-61847588
            
<address>...</address>
默认样式的引用 多种引用样式

默认样式的引用

  • 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
实例

钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。中国最大の投資の早期と長期のリスク投資ファンド。

            
<blockquote>...</blockquote>

多种引用样式

  • 对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容； 命名来源：添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite> 标签中。
实例

钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。中国最大の投資の早期と長期のリスク投資ファンド。


ここはあなたの引用のコピーを表示しての出所
另一种展示风格：通过赋予 <.blockquote-reverse> 类可以让引用呈现内容右对齐的效果。

钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。中国最大の投資の早期と長期のリスク投資ファンド。


ここはあなたの引用のコピーを表示しての出所
            
<blockquote (class="blockquote-reverse")>
  <p>...</p>
  <footer>
    ...
    <cite>
      ...
    </cite>
  </footer>
</blockquote>
无序列表 有序列表 无样式列表 水平列表 描述

无序列表

  • 排列顺序无关紧要的一列元素，BrickPlus 并没有对 <ul> 标签进行样式重置，而是引用一个样式，重塑一个 BrickPlus 风格的无序列表；
    在 <ul> 上引用 .ul-standard 类就能得到一个 BrickPlus 风格的无序列表。
实例
  • List Item One
  • List Item One
  • List Item Three
    • Lv2 List Item One
      • Lv3 List Item One
      • Lv3 List Item Two
      • Lv3 List Item Three
    • Lv2 List Item Two
    • Lv2 List Item Three
  • List Item Four 
            
<ul class="ul-standard">
  ...
</ul>

有序列表

  • 排列顺序至关紧要的一列元素，和无序列表同理，在 <ol> 上引用 .ol-standard 类就能得到一个 BrickPlus 风格的有序列表。
实例
  1. List Item One
  2. List Item One
  3. List Item Three
    1. Lv2 List Item One
      1. Lv3 List Item One
      2. Lv3 List Item Two
      3. Lv3 List Item Three
    2. Lv2 List Item Two
    3. Lv2 List Item Three
  4. List Item Four 
            
<ul class="ol-standard">
  ...
</ul>

无样式列表

  • 移除了默认的 list-style 样式和左侧外边距和内边距的一组元素（包括并只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
实例
  • List Item One
  • List Item One
  • List Item Three
    1. Lv2 List Item One
      • Lv3 List Item One
      • Lv3 List Item Two
      • Lv3 List Item Three
    2. Lv2 List Item Two
    3. Lv2 List Item Three
  • List Item Four 
            
<ul / ol class="list-unstyled">
  ...
</ul / ol>

水平列表

  • 移除了默认的 list-style 样式和左侧外边距和内边距的一组元素（包括并只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
    在列表上引用 .list-inline 类就能得到一个 BrickPlus 风格的水平列表（没有 list-style 属性设置）。
    通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
  • 由于是行内元素排列，所以同样的排版类 .text-align-left / center / right 已经预先设置好对 .list-inline 模式的排版样式，引入就行，父类中添加 text-align: 属性则没有效果，这点需要注意。
实例
  • List Item One
  • List Item One
  • List Item Three
  • List Item Four 
            
<ul / ol class="list-inline ( text-align-left / center / right )">
  ...
</ul / ol>

描述

  • 移除了默认的 list-style 样式和左侧外边距和内边距的一组元素（包括并只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
    在列表上引用 .list-inline 类就能得到一个 BrickPlus 风格的水平列表（没有 list-style 属性设置）。
    通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行；
    通过给 <dl> 引用 .dl-horizontal 类可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着宽度逐渐展开而排列在一行。
  • 由于是行内元素排列，所以同样的排版类 .text-align-left / center / right 已经预先设置好对 .list-inline 模式的排版样式，引入就行，父类中添加 text-align: 属性则没有效果，这点需要注意。
  • 水平排列的描述列表在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。
实例
記述のリスト
記述目録用語を定義することに絶好です。
2015年の国際的なトップを獲得し风投機構IDG資本投資
現在、钱途連携業務は放射線の金融、不動産、飲食、医薬品など多くの産業として允リットル工業、山東高速、万科産、九州通など数百有名な企業と緊密な協力関係の確立によって、パートナーの実際的な需要にカスタマイズ製品、実現E +口座機能の基礎の上に協力パートナードッキング良質金融資源、安全かつ高効率に解決し、融資と決済需要増値、および産業金融分野の業務開拓やシーンを建て。
中国最大の投資の早期と長期のリスク投資ファンド
钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。
水平排列的描述
記述のリスト
記述目録用語を定義することに絶好です。
2015年の国際的なトップを獲得し风投機構IDG資本投資
現在、钱途連携業務は放射線の金融、不動産、飲食、医薬品など多くの産業として允リットル工業、山東高速、万科産、九州通など数百有名な企業と緊密な協力関係の確立によって、パートナーの実際的な需要にカスタマイズ製品、実現E +口座機能の基礎の上に協力パートナードッキング良質金融資源、安全かつ高効率に解決し、融資と決済需要増値、および産業金融分野の業務開拓やシーンを建て。
中国最大の投資の早期と長期のリスク投資ファンド
钱途連携獲得した全世界最大の情報技術の出版、研究、開発とリスクの投資会社――アメリカ国際データグループ（インターナショナルデータイーストグループ、IDG）の投資。現在IDGすでにななじゅう社以上が投票公開上場会社を買収や、約さんじゅう万人の雇用機会。 
            
<dl (class="dl-horizontal")>
  <dt>
    ...
  </dd>
</dl>
内边距 外边距

内边距

  • 和字符尺寸的工具类一样，BrickPlus 也采用递归的计算方式生成定义内边距大小的工具类，由最低 0 像素到最高 50 像素的边距尺寸；
    分为七大类：.fn-pa-xx（全内边距），.fn-pt-xx（上内边距），.fn-pb-xx（下内边距），.fn-pl-xx（左内边距），.fn-pr-xx（右内边距），.fn-plr-xx（左右内边距），.fn-ptb-xx（上下内边距）。
  • 公式设定为每 5 像素计算出一个尺寸类，所以在内边距工具类的界限 0 ~ 50 像素中是每一次整除 5 后得出一个有效工具类，如：fn-pa-0、fn-pa-5、fn-pa-10...。
  • 内边距尺寸类并没有定义最高优先级，因为这种类的引用是最后且最低效的设计手段，它会让项目的维护变得不灵活。（2016/07/04以后现在又定义了最高优先级，尽情的扇我的脸吧）。
实例

全内边距：.fn-pa-(0~50)

上内边距：.fn-pt-(0~50)

下内边距：.fn-pb-(0~50)

左内边距：.fn-pl-(0~50)

右内边距：.fn-pr-(0~50)

上下内边距：.fn-ptb-(0~50)

左右内边距：.fn-plr-(0~50)

            
<p class="fn-( pa / pt / pb / pl / pr / plr / ptb )-( 0~50 )">
  ...
</p>

外边距

  • 外边距工具类也采用递归的计算方式生成定义外边距大小的工具类，由最低 0 像素到最高 50 像素的边距尺寸；
    分为七大类：.fn-ma-xx（全外边距），.fn-mt-xx（上外边距），.fn-mb-xx（下外边距），.fn-ml-xx（左外边距），.fn-mr-xx（右外边距），.fn-mlr-xx（左右外边距），.fn-mtb-xx（上下外边距）。
  • 公式设定为每 5 像素计算出一个尺寸类，所以在外边距工具类的界限 0 ~ 50 像素中是每一次整除 5 后得出一个有效工具类，如：fn-ma-0、fn-ma-5、fn-ma-10...。
  • 外边距尺寸类并没有定义最高优先级，因为这种类的引用是最后且最低效的设计手段，它会让项目的维护变得不灵活。（2016/07/04以后现在又定义了最高优先级，尽情的扇我的脸吧）。
实例

全外边距：.fn-ma-(0~50)

上外边距：.fn-mt-(0~50)

下外边距：.fn-mb-(0~50)

左外边距：.fn-ml-(0~50)

右外边距：.fn-mr-(0~50)

上下外边距：.fn-mtb-(0~50)

左右外边距：.fn-mlr-(0~50)

            
<p class="fn-( ma / mt / mb / ml / mr / mlr / mtb )-( 0~50 )">
  ...
</p>
  • 递归的计算方式生成定义宽度大小的工具类，由最低 50 像素到最高 400 像素的宽度尺寸；
  • 公式设定为每 10 像素计算出一个宽度类，所以在宽度类的界限 50 ~ 400 像素中是每一次整除 10 后得出一个有效工具类，如：w-50、w-60、w-70...。
  • 宽度类并没有定义最高优先级，因为这种类的引用是最后且最低效的设计手段，它会让项目的维护变得不灵活。（2016/07/04以后现在又定义了最高优先级，尽情的扇我的脸吧）。
实例

宽度：.w-(50~400)

            
<p class="w-( 50~400 )">
  ...
</p>