Typographic scale

The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Emphasis, address, and abbreviation

Element Usage Optional
<strong> For emphasizing a snippet of text with important None
<em> For emphasizing a snippet of text with stress None
<abbr> Wraps abbreviations and acronyms to show the expanded version on hover

Include optional title attribute for expanded text

Use .initialism class for uppercase abbreviations.
<address> For contact information for its nearest ancestor or the entire body of work Preserve formatting by ending all lines with <br>

Using emphasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example addresses

Here are two examples of how the <address> tag can be used:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

Blockquotes

Element Usage Optional
<blockquote> Block-level element for quoting content from another source

Add cite attribute for source URL

Use .pull-left and .pull-right classes for floated options
<small> Optional element for adding a user-facing citation, typically an author with title of work Place the <cite> around the title or name of source

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous</small>
</blockquote>

Example blockquotes

Default blockquotes are styled as such:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Lists

Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description

<dl class="dl-horizontal">

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
互联网 网站建设网络安全配乐大规模网络安全态势感知网络营销咨询网站源码网络安全威胁发现态势快讯营销软件信息安全运维资质太原网站设计h5经典营销案例简单的网站陈岁年离婚了,前妻嫌贫爱富,抛夫弃女。 没想到,刚离婚就觉醒了系统。 拥有了一块每天都能刷新出各种蔬菜、水果、药材的肥沃土地。 陈岁年决定在犹如世外桃源般的桃花村定居,没想到,系统隔三差五就送给他各种技能。 没过多久,陈岁年还发现,那块神奇的土地,仅仅只是系统的冰山一角! 更多的秘密,在等待着他去揭开!意外穿越,自带外挂? 弱肉强食,适者生存? 修仙世界就没有人权? 看周奇如何在天玄大陆混的风生水起。 若无法,我来定。 若无正义,我来伸张。 若无将来,我来探寻。 帝令一出,万族臣服,莫敢不从…… 古老的生物相继苏醒,神明与人类将争夺世界霸主的宝座,一场战争即将开始,这是造物主与造物的战争,更是一场阴谋。 十七年前人类终于用科技创造出了第一位人造神明,他,将成为人类的一把利剑,扫灭一切神明,成为那个最强且属于人类的神。长生路上行人少,只是仙客与道家 一个平平凡凡的普通人,发现自己突然来到了一个神秘莫测的修仙世界,好在他的丹田内,有一块神奇的玉佩。 且看吕乐如何一步步逆流而上,最终飞升上界。李文重生成了一颗灵气复苏时代的柳树,这个时代强者横空绝世,坐镇一方。   异兽咆哮山河,占地为王。   还好有进化系统无限强化自己,自身的生命灵液让万灵不断进化。   结出来的生命果实让无数生命疯狂。   有人称他为树神拯救一方生命,有人更愿意叫他魔树,树根一出抽取数万里精华……商界天才在车祸中丧生,却意外重生在一个底层小人物体内。 时间倒退二十年,突然多了一个可爱女儿,该哭还是该笑?老婆这么漂亮,会不会不安全? 这是一个满地黄金的时代,机遇多如星辰密布,淘金者多如过江之鲫。 林皓文决定彻底释放野性,化身一头吸金巨兽。 林皓文:“各位商界大佬你们好,我是来教你们做人的。”《周易》不等同于《易经》。《周易》是产生于西周后期的一部曾借用前人创立的记事序数(商代已经使用)“六十四画符号”(被后人用之和称之的“六十四卦”)为题序而编写出六十四篇短文所组成的为“君子”(周天子血统的诸侯、贵族)们讲述“修身、齐家、治国”的道理书,按现代哲学分类,应属政治哲学书。《周易》是我国乃至世界上最早的一部政治哲学。1白飞,穿越到游戏行业第一的世界后,发现自己欠了两千万的债务,绑定系统后发布了爆火的神作,同时开始靠着系统里的游戏,逐步走向了这个世界的行业巅峰……“我不后悔,因为无论怎么选,最后都会后悔。”不知为何,我重生到初三的那个暑假,既然回来了,我就不会辜负这个机会
互联网 网站建设 郑州网站建设怎样 2017网络信息安全考试时间 电信手机网络安全设定 .防火墙技术在网络安全防护方面存在哪些不足? 快讯营销软件 想开一家网络营销公司 网站搭建价格 网站定制与模板开发 大规模网络安全态势感知 忧郁症的咨询技巧【www.richdady.cn】 官司咨询【www.richdady.cn】 去世的父亲的前世故事【www.richdady.cn】 外灵干扰的环境影响咨询【www.richdady.cn】 家庭关系的前世记忆【www.richdady.cn】 前世缘份的缘分奇迹咨询【www.richdady.cn】√转ihbwel 事业不顺的职场提升路径有哪些?咨询【微:qq383550880 】√转ihbwel 亲子关系中的沟通艺术有哪些?【www.richdady.cn】√转ihbwel 感情纠纷的情感调解技巧有哪些?咨询【σσЗ8З55О88О√转ihbwel 头脑混沌的原因及对策咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的前世记忆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的描述与传说咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系中的矛盾解决咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的真实案例有哪些?咨询【微:qq383550880 】√转ihbwel 老公家暴的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心慌胸闷头晕的解决方法【σσЗ8З55О88О√转ihbwel 缺心眼的案例分享威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与男友前世的因果关系咨询【σσЗ8З55О88О√转ihbwel 去世的母亲在哪咨询【σσЗ8З55О88О√转ihbwel 亲子关系的教育理念【σσЗ8З55О88О√转ihbwel 2017 信息安全会议 市场研究机构idc信息安全中国信息安全专业排名 信息安全就是网络安全 百度 营销策划 重庆营销策划 优帮云 互联网 网站建设 信息安全的特征包括 网路营销以什么为基础整合营销的定义 互联网营销的基础理念 网络安全法主题 如何推广网站 网站建设总结 网络营销咨询网站源码 网络与信息安全讲座,-1 静安微信手机网站制作 网站建设公司运营 珠海网站设计 王老吉营销 吉安网站 大型网站建设方案 信息安全研究生院 外国网络营销参考书 建网站怎么上线 做网站平台的公司 网站收录多少才有排名 网站更新后为什么不显示 深圳手机网站建设多少钱 网络和信息安全领导小组 网站图片类型 2017网络信息安全考试时间 网络和信息安全领导小组 网络安全的特点 网络信息安全实用教程 帮人做网站 如何免费创建网站 电商做网站 电力工控信息安全专题交流会 建立http网站 网络安全领域 证书 建大网站 2012网络安全事件 营销标题党 网站搭建价格 市场研究机构idc信息安全中国信息安全专业排名 大连企业做网站 关于我国网络信息安全与法律保护措施调查 网络安全 宣传周长沙网站改版 旅游网站建站 网站建设总结 网络营销的推广形式 首届国家网络安全宣传周专题 郑州网站建设怎样 温州网站制作的公司 2014年网吧计算机信息网络安全员培训考试答案 国家信息安全形式 互联网营销的基础理念 电信手机网络安全设定 网站制作新技术 微网站系统 维护网络安全我会做到 关于我国网络信息安全与法律保护措施调查 安徽省信息安全测评中心地址 怎么找网络营销 手机网站生成app 徐州商城网站建设 快讯营销软件 信息安全运维资质 大型网站建设方案 网站加黑链 国家信息安全形式 安康网站建设 怎么找网络营销 营销标题党 网络安全 宣传周长沙网站改版 网络和信息安全领导小组 2015网络安全广西 淘宝营销课程 沈阳网络营销 网站收录多少才有排名 大连企业做网站 网站托管公司 长沙建网站 维护网络安全我会做到 镇江网站seo 建立http网站 医院营销学 深圳手机网站建设多少钱 加强网络安全意识 营销策划的含义 网站设计) 口碑营销 失败 案例 2012网络安全事件 很有风格的网站有哪些 长春网站优化公司 电力工控信息安全专题交流会 网络安全创新项目 帮人做网站 网络安全领域 证书 网站更新后为什么不显示 如何推广网站 如何推广网站 深圳手机网站建设多少钱 简单的网站 电力工控信息安全专题交流会 深圳营销推广报价 网络安全赚钱 百度 营销策划 网络与信息安全讲座,-1 重庆的网站建设公司 如何免费创建网站 2017 信息安全会议 信息安全的特征包括 大连企业做网站 市场研究机构idc信息安全中国信息安全专业排名 2012网络安全事件 玉微营销 微营销杂志 布吉网站建设 旅游网站建站 肯德基网络营销组合 网络信息安全就业前景 网络和信息安全领导小组 优秀企业网站欣赏 关于我国网络信息安全与法律保护措施调查 建企业网站行业网 简单建网站 想开一家网络营销公司 h5经典营销案例 金盾网络安全法讲解 学网络营销 市场研究机构idc信息安全中国信息安全专业排名 人性是最高的营销 人性是最高的营销 旅游网站建站 目前流行的网络安全软件 想开一家网络营销公司 国家信息中心信息安全研究与服务中心 移动互联网营销特点 郑州网站建设怎样 简述市场营销6p理论 做网站平台的公司 谷安网络安全 2015年 网络营销4p策略案例分析 科技营销 信息安全的特征包括 网络信息安全实用教程 网络信息安全作文400 网站搭建价格 网络营销服务售后 建国外网站 网络安全威胁发现态势 百度 营销策划 网站设计 价格 银监会信息安全大检查,-1 太原网站设计 长春网站优化公司 网络安全法主题 西安网站制作 网络营销的推广形式 吉安网站 银监会信息安全大检查,-1 成都网站设计 网络游戏中营销植入 安庆网站优化 安庆网站优化 做网站平台的公司 信息安全是指战略安全 宝安做网站 网络营销咨询网站源码 常州制作网站价格 建企业网站行业网 2017网络信息安全考试时间 信息安全分类 企业网站首页布局尺寸 南昌网站开发 太原网站改版 静安微信手机网站制作 上海网站建设联 成都网站设计 网站建设公司运营 简单的网站 2014信息技术与信息安全 营销标题党 网站设计 价格 网站定制与模板开发 珠海网站设计 虚拟专用网络安全问题 王老吉营销 内容营销软件 网站细节企业网络信息安全培训班 谷安网络安全 国际网络安全法 珠海网站设计 石家庄网站建设 闸北区网站建设 太原网站设计 大型网站建设方案 信息安全分类 科技营销 网络安全 宣传周长沙网站改版 信息安全研究生院 微网站菜单 网络安全特征包括哪些方面 互联网 网站建设 简述市场营销6p理论 论坛营销的技巧 帮人做网站 目前流行的网络安全软件 建网站怎么上线 重庆网站营销案例 王老吉营销 上海网站建设要多少钱 企业网站首页布局尺寸 肯德基网络营销组合 网络营销好就业吗?网络安全系统测试报告 网站定制与模板开发 网络信息安全管理规范,-1 沈阳做网站哪个好 国际信息安全公司 2016网络安全案例分析 建大网站 h5经典营销案例 大连企业做网站 网络安全领域 证书 维护网络安全我会做到 电商做网站 温州网站制作的公司 网络安全法和等级保护 网络安全威胁发现态势 想开一家网络营销公司 信息安全的一级学科 网络安全赚钱 口碑营销 失败 案例 互联网 网站建设 关于我国网络信息安全与法律保护措施调查 建立http网站 如何免费创建网站 安康网站建设 金盾网络安全法讲解 电信手机网络安全设定 网站更新后为什么不显示 镇江网站seo 网站建设总结 2014信息技术与信息安全 网络安全的特点 网站设计佛山顺德 国家信息中心信息安全研究与服务中心 网络和信息安全领导小组 百度 营销策划 2012网络安全事件 外国网络营销参考书 安徽省信息安全测评中心地址 企业支付宝 营销策略 吉安网站 论坛营销的技巧 学网络营销 网络安全领域 证书 如何推广网站 建立http网站 国际信息安全公司 国家信息安全形式 信息安全技术发展历程,-1 互联网营销的基础理念 移动互联网营销特点 优秀企业网站欣赏 网络与信息安全讲座,-1 很有风格的网站有哪些 沈阳网络营销 欢乐颂2 网络营销 简单的网站 传统企业网络营销意义 营销策划的含义 市场研究机构idc信息安全中国信息安全专业排名 玉微营销 如何推广网站 医院营销学 安康网站建设 互联网营销的基础理念 大规模网络安全态势感知 传统企业网络营销意义 网站制作新技术 营销是什么意思 重庆的网站建设公司 广州招聘SEO营销 网站收录多少才有排名 手机网站生成app 静安微信手机网站制作 .防火墙技术在网络安全防护方面存在哪些不足? 学网络营销 人性是最高的营销 微营销杂志 深圳网站建设迅美 深圳手机网站建设多少钱 怎么找网络营销 加强网络安全意识 网络营销就业怎样 电商做网站 外国网络营销参考书 网站 模板 如何免费创建网站 计算机网络安全指什么 目前流行的网络安全软件 徐州商城网站建设 网络信息安全就业前景 微信营销 咨询公司 网路营销以什么为基础整合营销的定义 哪些因素营销网站权重 信息安全的一级学科 信息安全的一级学科 网站收录多少才有排名 微网站系统 珠海网站设计 建企业网站行业网 长春网站优化公司 互联网 网站建设 网站建设落地页 移动终端信息安全,-1 网络安全标示 建网站怎么上线 网站支付接口 成都网站设计 深圳网站建设迅美 网站搭建价格 信息安全技术发展历程,-1 网站制作帐户设置 网站图片类型 网络信息安全管理规范,-1 最流行的网站设计风格 虚拟专用网络安全问题 2017网络信息安全考试时间 网络安全法主题 温州网站制作的公司 论坛营销的技巧 信息安全是指战略安全 国际网络安全法 重庆网站营销案例 闸北区网站建设 网站建设公司运营 安庆网站优化 建国外网站 建国外网站 移动终端信息安全,-1 品牌营销和网络推广 沈阳做网站哪个好 网络安全特征包括哪些方面 王老吉营销 计算机网络安全指什么 西安网站制作 2015年 网络营销4p策略案例分析 信息安全就是网络安全