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.
保护网络安全所采用的技术ppc营销中国信息安全的法律法规信息安全课程网站网站换主机营销培训课程网站域名怎么进行实名认证深圳 网络安全 产业衡水网站优化2017网络安全文件 一代大帝,君问,世人尊称为问帝,成名后高处不胜寒,打尽天下无敌手的他,最终选择逆天而行,破开时间长河,散尽一身修为,只为重生到年轻时,只是重回年少后,他收因果反噬,变成了一个废少,更是遭遇到前世未曾遭遇的退婚,就在他要喊出三十年河东三十年河西的时候,他发现好像不对劲,这个退婚怎么和他想象的不一样,渐渐的,他发现事情并不简单,当他发现一切都往反方向发展的时候,他选择开始摆烂了。 当一颗天外陨石坠落,给生物带来的是毁灭还是新生? 当冷司烈从噩梦中醒来,天赋正式觉醒。 面对铺天盖地的敌人,他不屑一笑 “我!就是太阳!” 单手向日! 烈阳!焚尽万物!一个巧合,一段经历。野微微因为一次意外被卷进了一个匪夷所思的世界。本是一个刚上高中的女孩确拥有了一种神奇的能力。无聊的曾纪宣泄了所有不幸,来到一个荒山道观,无意间学习了里面所有的道术青国大元帅:两国交战不斩来使,除非来的是金小宝。 皇圣祖:只要金小宝愿意,我的公主随他挑。 一品太傅:岂有此理,金小宝你别落我手里。 瑶池圣女:金小宝给我滚出来,你躲得了初一,躲不过十五! 二表姐:金小宝,你别躲,我就跺你一根手指头。 月女将军:金小宝,我这三千手下,随时可以为你上刀山下火海。 九州大陆,万国争霸! 穿越大秦,成为公子赢昊! 开局发配凉州,遭遇匈奴劫杀,觉醒无双大帝系统! 签到千人战场,获得七星战将华雄效忠! 签到万人战场,获得八星上将赵云效忠! 签到十万战场,获得九星大将吕布效忠! 签到百万战场,获得十星神将项羽效忠! …… 且看公子赢昊,如何征战天下,成就无双大帝! 天上仙人,染指人间久矣。 今我大秦既立,大秦国土之上,当无仙人立锥之地。 大秦诸位臣民,朕,先走一步了。 吾,大秦太子,以大秦之名,携人间之力,倒卷天上,从此,再无天上人间之分。 万年前,无敌于世间的剑尊惨败在一位无名刀客的手中。 此后剑道衰微,剑修凋零。 直到,万年后剑尊之徒许安然自沉睡中苏醒,沉寂已久的剑道才重焕生机。 面对这个物是人非的世界,许安然所能依仗的唯有手中残剑。 为重振剑道,许安然将用手中的剑荡尽诸敌,淋浴神血,登峰造极! 他要向世人证明,剑才是兵中帝王! 一座图书馆,一本普通的书,一个平凡的大学生,在那一天之后,命运产生了翻天覆地的变化这是一个关于跨时空给复仇的故事。 恶毒的地产商人为了逃避审判,制造了骇人听闻的火车惨案,主人公郑源父母双双在这次灾难中遇难,然而这样的通天大案竟然被压了下来,最后不了了之。 作为这次灾难中唯一的幸存者,在时隔50年后终于得知真相,他通过某种实验回到了30年前的世界,在这里他巧妙布局,一点一点揭露当初惨案的真相,最终将所有犯罪份子送上法庭。
系统信息安全 考信息安全认证 梧州网站设计 网络安全国际认证 美国信息安全厂商 九台网站网站推广策划 网络安全事件处理报告 工业网络安全企业 2014年中国计算机网络安全年会 网站优化的图片 忧郁症的原因分析咨询【www.richdady.cn】 暗恋的自我提升【www.richdady.cn】 与公婆前世的前世案例咨询【www.richdady.cn】 忧郁症【www.richdady.cn】 祖灵与家运的关系【www.richdady.cn】 儿子抑郁症的治疗方法咨询【www.richdady.cn】√转ihbwel 前世缘份对现世的影响【σσЗ8З55О88О√转ihbwel 什么原因意外的前世修行咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婚姻生活不顺的自我提升咨询【微:qq383550880 】√转ihbwel 去世的母亲在哪咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 解梦的前世因果【企鹅383550880】√转ihbwel 大龄剩女的婚恋现状如何改变?【微:qq383550880 】√转ihbwel 自闭症的案例分享咨询【企鹅383550880】√转ihbwel 性压抑的前世影响咨询【σσЗ8З55О88О√转ihbwel 无形干扰的解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 无形干扰【www.richdady.cn】√转ihbwel 老公家暴的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 耳鸣的前世记忆咨询【企鹅383550880】√转ihbwel 前世老婆的前世记忆【www.richdady.cn】√转ihbwel 存不住钱的财务规划威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 关于马云和网络营销 网站域名怎么进行实名认证 北京网站制作公司 免版权费自建网站 山东网络安全 网络安全的基本目标不包括 美国 信息安全人才 银川怎么做网站 信息安全服务三级资质 网站建设和优化的好处 网络安全评估资质 工业网络安全企业 网络安全知识ppt 营销外包是什么意思网站赞赏 考信息安全认证 西安信息安全培训 深圳 网络安全 产业 网络安全事件处理报告 英文网站设计 网站建设资源 东营设计网站建设 浪潮集团与信息安全 信息网络安全监测预警机制研究梁山做网站 网络安全工程学院 网络营销实训课程 中国信息安全的法律法规 网络安全态势分析 网络安全专家 网络安全 请示 网络安全的发展趋势 qq音乐网络营销方案 网站建设和优化的好处 营销培训课程 大连做网站公司 网络安全日郭启全致辞 保护信息安全软件 网络安全技术服务公司 国家网络安全教育计划 个人微信营销案例 信息安全国家标准目录 通信行业信息安全大赛,-1 美国信息安全厂商 营销劣势 网络安全法 研发安全 营销最大的特点是什么 信息安全人才培养计划 厦门免费建立企业网站 网络设置的网站 电子邮件营销文本 网络安全专家 最强的网站建设电话 网站参数 互联网网络安全态势 厦门免费建立企业网站 家具营销策划 优帮云 重庆营销策划 反思维营销 营销外包是什么意思网站赞赏 网络安全日郭启全致辞 网站信息安全等级测评保护 衡水网站优化 花呗营销 数据库网络安全措施 信息网络安全监测预警机制研究梁山做网站 网络安全评估资质 公信部信息安全 网络营销实训课程 网站建设资源 信息安全组织体系 网络安全国际认证 达内网络营销好不好 家具营销策划 优帮云 微商城网站建设平台 网站换主机 网站信息安全等级测评保护 2014 网络安全事件 网站建设资源 网站备案流程 长春制作门户网站的公司 深圳高端网站建设 营销培训课程 中国电子信息安全技术,-1 用自己电脑做网站 dns 网站定做 网站推广专家 虚拟化 网络安全 2014年中国计算机网络安全年会 行业网络安全与信息通报工作情况 教育网站设计案例 教育网站设计案例 上海信息安全中心地址 浪潮集团与信息安全 信息安全等级保护检查工具箱 旅社网站建设 网站单页 保护网络安全所采用的技术 网络营销战略和策略分析 美国 信息安全人才 2017网络安全文件 病毒性营销案例视频 网络安全通报实行 案例网站 校园网信息安全 2014年中国计算机网络安全年会 沧州网站备案 正定网站建设 2.信息安全有哪16个威胁请解释 网络安全工程学院 小米手机网络营销推广 网站推广专家 什么是外贸营销体系 qq音乐网络营销方案 反思维营销 做个网站多少钱 网络安全日郭启全致辞 信息安全 国家安全局 网站参数 社交网络营销策划 淘宝营销 考信息安全认证 行业网络安全与信息通报工作情况 信息安全顶级会议 社会化营销 i春秋 网络安全大片 免版权费自建网站 正定网站建设 网红 网络营销 饰品网站建设 淄博微网站建设 网络安全新闻案例分析 网络安全专家 网络设置的网站 西安信息安全培训 营销最大的特点是什么 长春制作门户网站的公司