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  and  in HTML5, but their usage has changed a bit.  is meant to highlight words or phrases without conveying additional importance while  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 .

Include an optional  element to cite your source and you'll get an em dash — 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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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.

温州网站优化某大学校园网络安全解决方案东阳做网站信息安信息安全网络安全密钥 surface装饰公司网站建站微机室网络安全管理信息安全服务要点,-1信息安全分级国内网络安全问题一段爱恨情仇,一代精神领袖,横跨三界,携美女畅游九州,奋战疆场,金戈铁马,策马奔腾,穿越万里河山,与夏王开华夏一统,与褒姒调丝竹之情,领勇士救刘邦,出入汉宫,霓裳羽衣,再现华夏文明,助太宗杀兄泡嫂,与李治共享武媚,环肥燕瘦,皆出其手,他,是英雄、是败类、是奸雄、还是淫贼,上下五千年,皆无定数,一切皆有后人评说……大坑村的傻子陈一鸣，偶然获得先祖传承，成为村里的神医，专治吹牛逼，还有各种疑难杂症，只是娇美村花要嫁给他，邻家小妹爱上他，城里的小姐也要倒追他，陈一鸣十分苦恼，他能制服全世界，却治不了自己的桃花源，怎么办，谁来解救？一朝穿越，江晓觉醒最强宗门系统，召唤异界各路神仙玩家，带领洪门崛起。天玄大陆从此变了天。 “禀告宗主，洪门弟子越战越勇、悍不畏死，我们的弟子根本阻挡不住……” “洪门弟子修建的“黑色长城”我们根本打不动，连山门都打进不去……” “灵药山洪门弟子把我们的灵药洗劫一空，连根灵草都没剩下，受伤的弟子已经没药疗伤……” 无上仙宗宗主：“洪门弟子实在太凶猛了，传令下去，所有弟子撤退！” “禀告宗主，洪门弟子已经把无上仙宗打下来了，我们已经无处可退……” “什么？难不成洪门上下，都是一群神仙？” 灵曦怎么也不会想到，这条路他要一个人走下去！他知道每个人的路都是不同的，也许会有交集、重叠，又或者平行而过。但是，不论最终如何，感谢你、他们曾经与他同行。转生为一条哈士奇，看本汪怎么用科学的方法拆拆家，助助兴。唉，那边的汽车真豪华，不错不错，来，标记标记下。哇，那边的沙发也挺不错，拆开看看是怎么材质。咦，这里有一大堆鬼画符，真难看，看本汪一泡尿标记标记。唉，你这个破道士想干什么，为什么一副深仇大恨的样子看着本汪，本汪可没干什么。嗷，看本狗一副铁齿铜牙，咬不死你…… 这部小说中，我把身边的好朋友换到了架空的古代舞台，用来纪念我们的青春。小说中大部分重要角色都有人物原型。在写作过程中，为尽量让书中人物与原型近似，许多人物的台词由其原型进行加工，一些剧情分支也由原型人物进行选择。新汉帝国处在最好的时代，也处在最坏的时代。一方面经济迅速发展，社会变革即将到来，一方面北方边患严重，内外敌人蠢蠢欲动。在这样的背景下，太史信与朋友们与各方敌人斗争，也与自己的弱点斗争。　　穿越九州世界，成为秦皇嬴政的十六公子——赢长歌。这里更是汇聚了九州历史所有朝代，武林世家。　　赢长歌自幼无所事事、贪图享乐，更是自己开了一个风月酒楼。　　这也成为咸阳城津津乐道的‘美谈’。　　岂料天道呈现，金榜公布！　　嬴政:“寡人大秦横扫六国，一统天下，这榜单必然是我大秦第一！” 　　汉高祖:“朕大汉马踏匈奴，镇杀西域，天下舍我其谁！” 　　然而伴随着金榜公布…… 　　嬴政大惊：“我儿长歌，有大帝之资！” 命运弄人，天地造化。不论前路有多么的不如意，皆要砥砺前行！灵兽人程森屮（che四声）十一岁丧母，十三岁遭灭族。程森屮，程猖，程狂兄弟三人幸存。一年后大哥程猖却操纵程森屮杀死小时密友和程猖，心灰意冷的程森屮消失了三个月后在长安佚名“山狼”靠杀人赚钱。两年后，“山狼”声名崛起无意间认识权门高氏二公子和洌氏二公，这时有人叫杀死两人。山狼不从，没曾想那人正是大哥程猖。几经挣扎后，山狼坠于程狂和卫天兰坠落的黑鹰崖。十年后顶级杀手——山狼，再次出现在高风舌眼前。正义也许会迟到，但永远不会缺席。“三个月后灵气复苏，全民兽化植物化！” “同时，蓝星原住民远古蛮兽会走出地壳，两极反转，人类危矣！” 重生回到灵气复苏时代降临三月前，白良提前变异成柳树。通过制造神迹，他被中州奉为通天建木！国家一边疯狂喂养白良，一边根据白良的指引开启一系列准备计划，每一天都在震惊全球！ “中州竟然开始迁都了！” “中州围绕江南市建立新天都！” “中州收回了所有外驻部队，千万军队围绕江南市建立绝密保护区！” “江南市上空有一层万米高空屏障！卫星完全侦察不到！” “中州江南到底隐藏了什么？” 三个月后，灵气复苏时代降临！全球人类深陷水深火热，弱肉强食！而此时白良于江南市公园中崛起，鞭劈八面蛮兽，以柳神之名抵抗四方兽王，甚至硬撼兽皇！这次，换他来守护中州族人！柳神庇护之下，其余国家人类还在四处躲避蛮兽之时，中州族人正在不断诞生一尊尊神！

Typography Headings, paragraphs, lists, and other inline type elements