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.
电商信息安全监控包装材料营销型网站中山大学 网络安全互联网营销工具有哪些内容中国信息安全保护网中国民间网络安全协会中国信息安全认证中心特点南京营销策划推广公司常见的网络营销策略上海做网站的公广东省网络安全应急响应平台搜索营销师一封邀请函中埋藏了几千年的阴谋,九死一生的鬼校中没有置身事外,处处血流成河。一念之间定生死,百人齐心决成败。华国,罗斯国,印国,东洋国,澳国,五个大国面临前所未有的危机。却不知这一切,只是决战前夕。 程明远,(中共巢合庐中心县委书记,1942年5月-1943年2月) 原名程道富,化名程道福,安徽肥西聚星乡人,生于1900年,1926年参加革命,1929年加入中国共产党。历任中共合肥工委组织部长,合二区区委书记,合肥县委组织部长,县委书记,皖西北中心县委书记兼中央至鄂豫皖交通中心站站长,1943年任巢北支队政委,1943年7月任中共巢合县委书记,后任华东局国区部交通科长,江淮五地委书记兼军分区政委······萧易穿越到洪荒,成了一个刚要拜入截教的初代人族。 激活了极品负能量系统,收集别人的负面情绪,就能够变强! 从此,洪荒多了一个整日作死的截教大弟子。 “师傅!大师兄又闯祸了!他把剑冢的剑都融了!说要做大宝剑!” “师傅!大师兄炼器炸了一座山,把藏书阁埋了!!” “通天!你徒弟又作死!把我的坐骑四不像吃了!!!” “通天!你徒弟把我侍女掳走了!!” “.....” 通天整日惶恐,生怕自己大弟子闯祸... 直到这一日,鸿钧出关,宣布封神大劫起。 通天拒绝截教封神,以一敌五圣,截教面临大劫! 往日只会作死的截教大弟子:“我不装了,我已成圣!” 震惊,穿越异世界之后我和好兄弟竟成了“cp”?携手打怪升级却屡屡遭遇爆笑窘境 ,哥们,这究竟是什么鬼地方啊我想回家!!剑道信仰崩塌。 紫铜仙府问世。 活着,已是不易。 但我,选择守护。 不装了,我摊牌了,我是体修。 不是我看不起各位,说实话,就我这身体素质,在座的,都是垃圾。这是似忽是一个中世纪世界,但又有像九夏,阿拉汉,瀛洲这样的东方国家。 这个世界有淳朴的人类,有高洁的精灵,有可爱的兽人,有邪恶的魔族......至少林武刚穿越到这里时是这么认为的。 他是以一个人类的身份来到这个世界的,在他生活的人类国家里,有美丽的贵族小姐,善解人意的修女,英俊的骑士,开明的领主。你可以在城里的公会里注册成为一个冒险者,成为一个传说;又或是拜入领主麾下,成为一名骑士,征战四方;还是成为商人,富甲一方。 但林武看到衣着华丽的贵族,衣衫褴褛的农奴;金碧辉煌的宫殿,充满恶臭的贫民窟;摆满桌子的山珍海味,发霉的面包,林武觉得这第二次生命,应为这世界上最美好的事情奋斗,他将带领这些绝望的人换一个活法,一个更有意义的活法。在未来的某一天,一个人生极其平凡的青年被选中参与一项实验,他置换到了一处平行世界。新的人生并没有给他带来什么,宇宙有多浩瀚,他就有多孤独。后来,他发现自己最想做的竟是回到原来的世界。九幽。幽深之极地,墟,是一个残破的世界。我要前往那儿,埋葬那儿的魂。研究生毕业孙淼回家种田,他家的猫咪会 说话,乌龟会爬树,鹦鹉会唱歌,带你见识一个从小山村走向巅峰的人生。这个大陆叫尼尔大陆,整个大陆呈圆状分布,生活在这个大陆上的只有两类人,人类男性和精灵女性,人族男性生活在西大陆,精灵族女性生活在东大陆。 早在多年前,尼尔大陆经历过一场旷世之战,那一场战斗后,所有的种族都几近灭绝。 残留下来的其他种族,除了人族男性和精灵族女性,不知受到何种诅咒或是魔法的影响,都会快速衰老,几乎是2-3年内,身体器官就会枯竭。 可是,几百年过去了,这个诅咒还依旧扩散在这片大陆。 诅咒尚未解除,但是精灵族和人族的隔阂却在加大。 为了繁衍生息,精灵族和人族不得不允许精灵族的女性和人族的男性婚配。 但是精灵族是尤为高傲的种族,他们对人族充满了敌对和蔑视,认为人族是低阶种族,不屑于与人族通婚。 然而许多年过去,一名绝美的高阶女精灵法师带着她的军队在战场上横扫四方,几乎占领了人类种族四分之三的领土。 人族不得不退回最后的主城塞斯城!群龙无首的人族男性究竟要如何抵御精灵族女性呢。 我们的故事就从这里开始
信息安全上网行为管理 对网络安全提建议 打造公司的网站 网站建设落地页 合肥做网站 计算机网络安全现状及防范技术探讨网站设计架构 2014 信息安全会议 乐清网站优化推广 天津建网站 优秀企业网站欣赏 升迁障碍的原因分析咨询【www.richdady.cn】 如何提高孩子的阅读兴趣?咨询【www.richdady.cn】 家庭关系中的矛盾解决【www.richdady.cn】 存不住钱的环境影响咨询【www.richdady.cn】 如何识别外灵干扰的症状【www.richdady.cn】 情感心理咨询在线【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的文化背景威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的前世因果咨询【企鹅383550880】√转ihbwel 去世的父亲的前世因果【企鹅383550880】√转ihbwel 感情纠纷的咨询技巧咨询【企鹅383550880】√转ihbwel 有官司咨询【企鹅383550880】√转ihbwel 前世今生的轮回传说咨询【微:qq383550880 】√转ihbwel 发育倒退的自我提升咨询【企鹅383550880】√转ihbwel 老公家暴咨询【σσЗ8З55О88О√转ihbwel 灵魂化解的步骤【σσЗ8З55О88О√转ihbwel 孩子不爱读书的家长引导方法有哪些?【www.richdady.cn】√转ihbwel 婴灵的超度与慈悲心【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 无形干扰的前世因果咨询【www.richdady.cn】√转ihbwel 升迁障碍的咨询技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿的治疗方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 中山大学 网络安全 海外营销推广平台 上海做网站的公 中国信息安全测评中心隶属 网络安全系统日志分析工具 网站设计的评估 国家网络安全应急处理 医院做网站 建设企业网站平台主要的目的是 网站视频主持人 为加强信息安全管理windows系统的采用安全措施有哪些 营销公司竞争分析报告 饥饿营销弊端 信息安全和电子政务 优秀企业网站欣赏 制作网站的软件 服务厅网络安全管理 网络营销外包推广服务商 北京响应式的网站 上海做网站的公 江西信息安全 2017年国家网络安全 广元网站建设 注册信息安全专业人员 饥饿营销弊端 顺德网站建设公司信息 广东省网络安全应急响应平台 计算机网络安全现状及防范技术探讨网站设计架构 旅游业网络营销优势 深圳 网站制作 海外营销推广平台 广道网络安全审计 SNS网络营销办法 微网站首页 对网络安全提建议 如何建设好英文网站 2014 信息安全会议 网络安全组组织架构 网络营销促销的的定义 美国网络安全框架 pdf 重庆网络营销推广公司 宝鸡网站建设 网络信息安全 实验 一站式网络营销平台 网络营销能力秀群 北京响应式的网站 天津建网站 网络安全专科 社会大学生网络安全总体数据分析 中国信息安全保护网 2015中国个人信息安全问题 网络安全是指通过 联通网络安全 国家网络安全与 广元网站建设 昆明网站制作 信息安全云端攻击 杭州做网站 美国网络安全框架 pdf 中国信息安全测评中心隶属 信息安全测评备案 柳州建网站 合肥做网站 专题类网站 厚街网站建设公司 2016年信息安全威胁 酒店网络营销概念 网站网络安全方案 石家庄网站制作找谁 wow网络安全怎么做 徐州商城网站建设 如何用网络营销的方法有哪些方法有哪些 安徽网站推广 怎样设计网站 2016网络安全(中国)论坛 信息安全等级保护标准 中国信息安全保护网 广州市天河区网站设计公司 广州做手机网站信息 优秀企业网站欣赏 温州制作网站 安徽网站推广 信息安全测评备案 禅城区做网站策划 网络安全监测 厚街网站建设公司 移动网络安全 产业联盟 重庆网站开发商城 建手机网站的平台 建个简单网站 计算机网络安全现状及防范技术探讨网站设计架构 安全威胁信息安全,-1 中国信息安全认证中心特点 建立网站原则 响应式网站开发 网站制作新技术 承德网站制作公司 海外营销推广平台 符合国家信息安全产品 天津建网站 网络安全专科 信息网络安全 监 预警 机制 2017年网络安全峰会 2016年信息安全威胁 重庆网络营销推广公司 公司网站维护怎么做 站长工具网站关键词库的词不是自己提交的么?为什么会不断减少 内容营销优点 注册信息安全专业人员 自助外贸网站制作 自助外贸网站制作 承德网站制作公司 网络安全周简介 重庆网络营销推广公司 信息安全等级推荐 深圳h5网站公司 合肥做网站 广道网络安全审计 防火墙技术在网络安全中的应用 网络营销外包推广服务商 石家庄做网站 网站调试 建个简单网站 国务院负责统筹协调网络安全工作和相关 信息网络安全 监 预警 机制 美国网络安全框架 pdf 上海做网站的公 对网络安全提建议 如何建设好英文网站 江西信息安全 网络信息安全协议 网络安全监测 深圳品牌模板网站建设 徐州商城网站建设 医院做网站 大连营销外包公司怎么样 甲方信息安全 网站网络安全方案 福州建网站 做网页 360信息安全大会 国务院负责统筹协调网络安全工作和相关 网站主机500m数据库至少要多大的呢?200可以吗? 网站主机500m数据库至少要多大的呢?200可以吗? 如何建设好英文网站 制作网站的软件 甲方信息安全 信息安全的5大特征 中山大学 网络安全 昆明网站制作 网络安全组组织架构 网站色调为绿色 珠海网站制作 什么是企业信息安全,-1 网站页面优化 网络安全 资源平台 符合国家信息安全产品 信息安全技术 路由器安全技术要求 网站没更新 搜索营销师 网站静态页 乐清网站优化推广 信息安全上网行为管理 安全威胁信息安全,-1 合肥做网站 设计师网站 2017年网络安全峰会 衡水网站排名优化公司 网络营销促销的的定义 中国信息安全学会 大连营销外包公司怎么样 柳州建网站 网络安全系统日志分析工具 网站页面优化 信息安全等级保护标准 电商信息安全监控包装材料营销型网站 商贸行业网站建设公司机械厂网站建设 网络安全是指通过 互联网企业进入信息安全 打造公司的网站 互联网营销工具有哪些内容 建立网站原则 顺德网站建设公司信息 网络安全专科 广告网络营销策划 6月1日 个人信息安全 石家庄网站制作找谁 互联网营销工具有哪些内容 网络安全怎么办 江西网络安全公司 营销网络搭建方法 厦门网络营销师培训学校 美国网络安全框架 pdf 网络安全数据报告 国家信息安全甘肃招聘 网络安全实验班 营销公司竞争分析报告 SNS网络营销办法 医院做网站 公司信息安全方法网站主域名 中国信息安全测评中心隶属 营销第一网 电子商务网站seo 网络营销和普通销售 信息安全和电子政务 网络安全怎么办 浙江网站设计公司电话 网络营销促销的的定义 网络安全数据报告 微网站首页 营销第一网 优秀企业网站欣赏 安徽网站推广 网站视频主持人 深圳h5网站公司 北京响应式的网站 网络信息安全 实验 网络营销能力秀群 建站视频教程全套 asp网站源码网页制作设计建设视频教程百度云 禅城区做网站策划 广元网站建设 专题类网站 南京营销策划推广公司常见的网络营销策略 小米手机网络营销战略 杭州做网站 cigital公司网络安全 社会大学生网络安全总体数据分析 国家网络安全与 免费手机个人网站 中企动力制作的网站后台 衡水网站排名优化公司 网络安全信息化办公室 中国民间网络安全协会 深圳市计算机网络公共网络安全协会 乐清网站优化推广 建手机网站的平台 服务厅网络安全管理 广元网站建设 网络营销编辑是什么 如何用网络营销的方法有哪些方法有哪些 甲方信息安全 信息安全上网行为管理 深圳h5网站公司 网络安全专科 饥饿营销弊端 徐州商城网站建设 响应式网站开发 网络营销外包推广服务商 温州制作网站 福州建网站 做网页 南京营销策划推广公司常见的网络营销策略 注册信息安全专业人员 建立网站原则 浙江网站设计公司电话 社会大学生网络安全总体数据分析 西安营销型网站建设 2014 信息安全会议 信息安全的5大特征 网络安全监测 合肥做网站 信息网络安全 监 预警 机制 网络安全组组织架构 如何用网络营销的方法有哪些方法有哪些 酒店网络营销概念 网络安全系统日志分析工具 网络安全 资源平台 360信息安全大会 内容营销优点 自助外贸网站制作 响应式网站开发 好网站的标准 优秀企业网站欣赏 中国信息安全学会 微博网络营销的例子 中山大学 网络安全 深圳品牌模板网站建设 广道网络安全审计 2017年网络安全峰会 重庆网站开发商城 珠海网站制作 网络安全周简介 为加强信息安全管理windows系统的采用安全措施有哪些 符合国家信息安全产品 国务院负责统筹协调网络安全工作和相关 美国网络安全框架 pdf 网络营销编辑是什么 杭州做网站 微网站首页 国家信息安全甘肃招聘 打造公司的网站 合肥做网站 营销公司竞争分析报告 网站建设落地页 广州手机网站定制信息 2016年信息安全威胁 网络营销能力秀群 电子商务网站seo 甘肃网站制作公司有哪些 网络安全系统日志分析工具 网站建设落地页 信息安全云端攻击 国家信息安全等级保护制度 拨号访问控制 cigital公司网络安全 cigital公司网络安全 营销第一网 网络安全实验班 互联网营销工具有哪些内容 设计师网站 网站建设的后台登录 医院做网站 2015中国个人信息安全问题 深圳市计算机网络公共网络安全协会 网站价钱 网络营销和普通销售 广东省网络安全应急响应平台 网站页面优化 一站式网络营销平台 信息安全云端攻击 网络安全信息化办公室 网络安全周简介 社会大学生网络安全总体数据分析 信息安全测评备案 营销公司竞争分析报告 免费手机个人网站 江西网络安全公司 网站设计的评估 电商信息安全监控包装材料营销型网站 中国信息安全测评中心隶属 乐清网站优化推广 石家庄网站制作找谁 信息安全和电子政务 江西网络安全公司 建手机网站的平台 安徽网站推广 公司网站维护怎么做 企业网站建设定制 网络安全la是什么意思 ids技术在网络安全中的应用 自助外贸网站制作 2016年信息安全威胁 商贸行业网站建设公司机械厂网站建设 温州制作网站 信息安全测评备案 信息安全等级保护标准 深圳品牌模板网站建设 美国网络安全框架 pdf 好网站的标准 网站色调为绿色 广告网络营销策划 海外营销推广平台 网络安全 资源平台