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.
长沙高端网站制作公司深圳网站建设服务公司国家网络安全网页设计的交流网站国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少自学网络安全看什么书南昌市做网站的公司邮件营销反馈率网络安全协会 活动信息安全公开课一个宅男穿越到日本战国时代,逢凶化险,不断适应成长的历险故事。为了家族的利益,夏家二小姐被迫嫁给叶家的傻子长子。 结婚后才发现对方并不傻,反而知识渊博、心思缜密。 平白无故多了个美女老婆,叶风也很无奈。 他只想偷偷修炼报前世之仇,但是有这么一个美女老婆成天跟在自己身边,碰又不能碰,甩又甩不掉。 还要小心翼翼隐藏自己的大佬身份。 叶风心里苦啊!建筑集团老总许勇,穿回到1986怂人狗娃的身上。 前后两世记忆一融合,他瞬间变得强大。 拳打村霸,棒扫混混英雄救村花。 夜总会遇伯乐,他的人生从此开挂。 组建乡村建筑队、办醋厂、种果树。 直到集团公司上市。 用超前三十多年的人生经验赚这个时代的钱,岂不是很容易? 看《超级农民工》为自己补办一场错过的人生盛宴。 少女珂玥秘密守护着“时间之刃”——能将时空伸缩、折叠及扭曲的远古神器。魔界使者姽媚奉命转世追杀夺宝。暗物质世界(异次元时空)的蜥族人创立空玄教,寻找上古神族基因,欲统天下……神秘的“觉醒者”,似乎无处不在,却让人看不见摸不着。珂玥几近绝望之际,才发现“觉醒者”竟然是……?城市发生了大乱,惊吓,恐怖,杀人,城市到处是烟雾弥漫,。凡是国家领导级都不见了踪影,本以为是简单的讨论国家大事。却神秘的消失。所有人的记忆被磨除了记忆一般。没有人记得他们是谁。主人公兰成,突然从梦中醒来。一次车祸,让他偶然醒来。也只有他记得自己的父母,但是他们神秘消失了,全部都因一封信邀约。来往寂城。兰成找了这个城市1年,找到了,打开,大门才知道这是空城。当年父母到底发生了什么。。。有的人穿越了,但是没有完全穿越。 因为他的妹妹也跟他一起穿越了,并且两人共用一个系统,所以在地球统一的穿越通道中停留了好几年,终于等到了自己的妹妹。 兄妹俩穿越到三光大陆成为了应月宗的大长老和宗主。 “师尊,小师妹差点被渣男骗了!” 秦时关:“敢欺负我应月宗弟子,徒弟们上!给我围殴他!死了算罪有应得,没死算罪不至死!” “师尊,小师弟被退婚了!” 秦时关:“什么?传我指令,让圣城圣女给我小弟子当媳妇。” 秦时关:“我也不想护犊子啊,可是他们叫我师尊诶!”这是我自己幻想出来而写的小说作品主要讲述了覃淋,梁珂,李梦夕侦破一件件案件的故事 第一次写作,希望大家多多支持! 此书以第一人称叙述了“我”的经历。 本书共分为两个部分,第一部分讲述了“我”在学校与同学卜秋发生的各种不愉快的事情以及保护副班长梁雪的故事。第二部分则写去魔界寻找妹妹以及奇异果。 首席长官探地府,储君王子访东洲。 修堂建舍传道业,唯有梁柱最难求。 自古帝王有神助,从来名将须抛头。 滚滚河水断恩义,凛凛雄威鬼神愁……
金融行业 信息安全培训 亚马逊网站的营销策略 网站设配色 济南网站设计建设公司 网站设配色 电子商务网站模板 企业营销网站建设公司哪家好 喀什网站建设 网站三合一 大连网站制作.net 去世的母亲在哪咨询【www.richdady.cn】 精神不振的案例分享【www.richdady.cn】 特殊学校的教学方法【www.richdady.cn】 灵性成长工作坊咨询【www.richdady.cn】 与公婆前世的记忆解析咨询【www.richdady.cn】 升迁障碍威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 忧郁症的心理调适【企鹅383550880】√转ihbwel 为什么过世的前世故事咨询【σσЗ8З55О88О√转ihbwel 前世老婆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学习成绩差的案例分享威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 老公家暴咨询【σσЗ8З55О88О√转ihbwel 家庭关系的问题分析【企鹅383550880】√转ihbwel 脑部不清晰可能是哪些疾病的表现【微:qq383550880 】√转ihbwel 大龄剩女的幸福指南有哪些?咨询【企鹅383550880】√转ihbwel 失业的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 失业的职业规划咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心特别累的前世因果咨询【微:qq383550880 】√转ihbwel 与公婆前世的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的重逢有什么迹象?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业期间的心理调适方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 超实用网站 自贡网站优化 南宁网站忧化 信息安全 linux,-1 网络安全培训课程视频 网站建设与维护 唐山网站建设报价 网站设配色 众筹网站建设 网络带营销 大连网站制作.net 景区网络营销方法 做网站赚钱 网络安全领域什么漏洞 提供佛山顺德网站建设 国家信息安全 检测 2017信息安全泄漏事件 网站默认图 网站的类型 网站怎么加背景音乐 网络营销技术基础语言 网络安全模式下 有限的访问权限 信息安全学校平台 邮件营销反馈率 贵阳企业网站设计制作 营销机构号 网络营销研究的范畴 合肥全网营销系统 用户信息安全事件定义 电子商务网站模板 济源网站建设 深圳网站建设服务公司 网络营销与运营区别与联系 企业网站建设服务热线 移动网站建设 济南网站设计建设公司 网页设计的交流网站 植入式营销的形式开展网络安全认证检测风险评估等活动 卫龙辣条网络营销分析 提供佛山顺德网站建设 陆宝华 信息安全 国家信息安全标准规范 景区网络营销方法 中国网络安全公司招聘 网站的类型 信息安全原则 专业邮件营销 网络安全实用教程 肯德基网络营销组合 互联网整合营销传播 专业的营销网站建设公司排名 icp网络安全防护 在网站中添加百度地图中络信息安全有限公司,-1 唐山网站建设报价 信息安全 linux,-1 信息安全指什么 免费企业网站模板 免费企业网站模板 帮人做网站 设计有关的网站 icp网络安全防护 新建网站‘’网络安全优化方案 超实用网站 网络营销技术基础语言 长沙高端网站制作公司 什么是网络安全宣传周 中国信息安全排名 信息安全逆向和渗透 网站微博营销哪个好用吗 网站原创性 网络营销遇到的问题及对策 上海市信息安全测评认证中心待遇 网络安全摘要 北京网诺信息安全技术有限公司 网站设计 广州 bat招聘信息安全专业 铁人三项信息安全大赛 网站建设与维护 广州品牌设计网站建设 织梦网站图片代码 北京网站改版 瑞星网络安全工程师 优营销项目案例 网络营销网站 网络安全协会 活动 破解"工业控制系统信息安全"迷 网站设配色 建官网个人网站 最重要的网络营销工具 专业的营销网站建设公司排名 什么是网络安全宣传周 医疗行业微信营销案例 上海电子商城网站制作 汽车网络安全攻击视频 网络安全培训课程视频 鄂州网站建设 手机网站范例 起跑线网营销公司 唐钱钱 网络营销 信息安全学校平台 网站换程序 2017网络安全行业 自贡网站优化 网站多少钱 网络营销技术基础语言 制定网络营销策略须考虑 手机营销网站 免费网站模板下载 金融行业 信息安全培训 网络营销的机会与威胁 信息安全局 营销类的公众号名称 网站默认图 网站系统 建网站哪家好新闻 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 电商类网站 国家网络安全 邳州做网站 网站开发与维护的内容 深圳网站建设服务公司 优营销项目案例 旅游营销推广中心 营销机构号 网站建设的收费标准 国家信息安全标准规范 众筹网站建设 衡水网站建设供应商 网络安全产品网上销售 手机营销的方式有哪些 淮南网站推广 网络营销行业数据 鞍山网站建设 网站换程序 网站建设与维护 网站默认图 网络营销系统的建设 解释网络营销服务 国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少 合肥全网营销系统 网页设计的交流网站 网络安全实用教程 电子商务网络安全 邮件营销反馈率 济南网站设计建设公司 杭州公共信息安全系统 信息安全局 一个优秀的网站 营销策 电子商务网络安全 唐山网站建设报价 亚马逊网站的营销策略 专业邮件营销 破解"工业控制系统信息安全"迷 网络安全 日本 互联网网站开发 免费网站模板下载 网络安全协会 活动 国家信息安全标准规范 济源网站建设 苏州网站优化 陆宝华 信息安全 如何建网站 国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少 长沙高端网站制作公司 信息安全加大监管 淮南网站推广 大连网站制作.net 网站微博营销哪个好用吗 营销要素是指 网络信息安全保险 微信公众号 网络安全 网络安全实用教程 制定网络营销策略须考虑 网站示例 邳州做网站 铁人三项信息安全大赛 网络营销的机会与威胁 商丘市做网站的公司 中央网信办网络安全协调局局长赵泽良 做网站赚钱 网站示例 企业网站建设服务热线 网站三合一 邮件营销反馈率 网络营销与运营区别与联系 网络安全好学吗 景区网络营销方法 网络安全领域什么漏洞 伍佰亿官方网站 网站需要几个人 设计有关的网站 什么是整合营销理念 且网站制作 思而忧网站如何保障国家信息安全 目前使用的信息安全系统有那些外贸英文网站设计 提供佛山顺德网站建设 企业营销网站建设公司哪家好 2017网络安全行业 企业网站建设服务热线 网站开发与维护的内容 如何建网站 景区网络营销方法 上海市信息安全测评认证中心待遇 目前使用的信息安全系统有那些外贸英文网站设计 解释网络营销服务 菜鸟做网站 中国网络安全公司招聘 金融行业 信息安全培训 秦皇岛建网站公司 信息安全原则 移动网站建设 怎么建好网站 做网站赚钱 营销有哪些职能 网络营销网站 电商类网站 宝山北京网站建设 高端大气网站 植入式营销的形式开展网络安全认证检测风险评估等活动 深圳网站建设服务公司 网站图片尺寸 喀什网站建设 银行信息安全建设 陆宝华 信息安全 信息安全公开课 一个优秀的网站 网站怎么加背景音乐 互联网网站开发 佛山新网站建设代理商 医院网站建设方案 营销有哪些职能 网络安全模式下 有限的访问权限 网络安全产品网上销售 植入式营销的形式开展网络安全认证检测风险评估等活动 网站多少钱 网站怎么加背景音乐 网页设计的交流网站 马鞍山网站建设 专业邮件营销 网络营销研究的范畴 客户信息安全管理体系,-1 互联网营销案例 南方信息安全测评中心 网络营销行业数据 马鞍山网站建设 卫龙辣条网络营销分析 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 网络安全好学吗 wifi网络安全审计 免费企业网站模板 北京网诺信息安全技术有限公司 bat招聘信息安全专业 在网站中添加百度地图中络信息安全有限公司,-1 汽车网络安全攻击视频 网络营销遇到的问题及对策 亚马逊网站的营销策略 什么是整合营销理念 长沙高端网站制作公司 手机营销网站 唐钱钱 网络营销 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 鞍山网站建设 南宁网站忧化 信息安全指什么 信息安全指什么 北京网诺信息安全技术有限公司 专业的营销网站建设公司排名 手机营销网站 营销机构号 网络软文营销的优点 网站需要几个人 衡水网站建设供应商 网络营销技术基础语言 北京网站改版 起跑线网营销公司 大连网站制作.net 网络营销行业数据 用户信息安全事件定义 思而忧网站如何保障国家信息安全 信息安全 linux,-1 东莞网络营销推广模式 最重要的网络营销工具 网络信息安全保险 旅游营销推广中心 合肥全网营销系统 且网站制作 自贡网站优化 超实用网站 织梦网站图片代码 手机网站范例 网站系统 网络安全大赛 电子商务网站模板 网站原创性 唐山网站建设报价 建官网个人网站 建官网个人网站 网络营销技术基础语言 优营销项目案例 国内汽车网络媒体的无差异化竞争严重突破式的营销创新太少 新手如何做网站 网络营销论文题目 新建网站‘’网络安全优化方案 广州品牌设计网站建设 网络营销系统的建设 怎么建好网站 手机营销的方式有哪些 信息安全逆向和渗透 营销策 在网站中添加百度地图中络信息安全有限公司,-1 超实用网站 网站设配色 网站多少钱 网络带营销 解释网络营销服务 合肥全网营销系统 电商类网站 信息安全公开课 互联网整合营销传播 喀什网站建设 专业邮件营销 且网站制作 杭州公共信息安全系统 移动网站建设 中央网信办网络安全协调局局长赵泽良 提供佛山顺德网站建设 网站的类型 医院网站建设方案 工信部考试中心用的计算机网络信息安全理论与实践教程,-1 企业内部网络营销需求 破解"工业控制系统信息安全"迷 网络信息安全保险 国家信息安全 检测 制定网络营销策略须考虑 网站图片尺寸 设计有关的网站 海宁网站建设 济南网站设计建设公司 网络带营销 鄂州网站建设 目前使用的信息安全系统有那些外贸英文网站设计 怎么建好网站 佛山新网站建设代理商 卫龙辣条网络营销分析 网络营销研究的范畴 东莞网络营销推广模式 营销要素是指 网络安全好学吗 上海市信息安全测评认证中心待遇