[Bootstrap]全局样式(二)

实际排版

1、标题和标题类 <h1>
~<h6>和.h1~h6|副标题<small>和.small

              font-size                    margin-top               
margin-bottom

h1         36px                          20px                         
10px

h2         30px                          20px                         
10px

h3         24px                          20px                         
10px

h4         18px                          10px                         
10px

h5         14px                          10px                         
10px

h6         12px                          10px                         
10px

e.g.:<h*>这是标题<small>这是相符标题</small></h*>

 

2、内容、p段落  font-size:14px; line-height:20px;margin-bottom:10px;

e.g.:<p>这是段落</p>

 

3、强调突出内容 
.leader{margin-bottom:20px;font-size:16px(min-width:768:21px);font-weight:300;}

e.g.:<p class=”leader”>这是段落 突出展示</p>

 

4、标记文本<mark>和.mark  {padding/background-color}

e.g.:<mark>这是标志文本</mark>||<*
class=”mark”>这是都标记显示的文本</*>

 

5、删除的文本<del>  浏览器自带样式

e.g.:<del>这是剔除的文本</del>

 

6、无用的文本<s>  浏览器自带样式

e.g.:<s>这是无济于事的文本</s>

 

7、插入的文本<ins>  浏览器自带样式

e.g.:<ins>这是插的文本</ins>

 

8、带下划线文本<u>  浏览器自带样式

e.g.:<u>这是下划线的文本</u>

 

9、小号文本<small>和.small  {font-size:85%;}

e.g.:<small>这是小号文本</small>||<*
class=”small”>这是既小号显示的文本</*>

 

10、着重<strong>  浏览器自带样式  有口气

e.g.:<strong>这是最主要的文件 加粗显示</strong>

 

11、斜体<em>  浏览器自带样式  有文章

e.g.:<em>这是任重而道远的文本 斜体显示</em>

 

12、高亮文本<b>  浏览器自带样式  不带来语气

e.g.:<b>这是加粗的文本</b>

 

13、斜体<i>  浏览器自带样式  不牵动语气  一般用来技术词汇、发言

e.g.:<i>这是斜体的文本</i>

 

14、文本对齐  .text-left  .text-center  .text-right  .text-justify 
.text-nowrap

e.g.:<p class=”text-left”>文本左对齐</p>||<p
class=”text-center”>文本居中针对齐</p>||<p
class=”text-right”>文本右对齐</p>||<p
class=”text-justify”>文本两端对齐</p>||<p
class=”text-nowrap>文本禁止换行</p>

 

15、字母大小写  .text-lowercase  .text-uppercase  .text-capitalized

e.g.:<p class=”text-lowercase”>字母转换小写显示<p>||<p
class=”text-uppercase”>字母转换大写显示<p>||<p
class=”text-capitalized”>字母首许母大写著<p>

 

16、缩略语  <abbr title=””>  {cursor/border-bottom}

e.g.:<abbr>提示文本 鼠标经过显示title内容</abbr>

 

17、首字母缩略语  <abbr title .initialism>
{font-size:90%/uppercase}

e.g.:<p><abbr
class=”initialism”>首字母内容</abbr>首字母后面内容</p>

 

18、地址  <address>  {font-style}

e.g.:<address>姓名<br/>地址<br>号码</address>
一般配合<br />使用

 

19、引用  <blockquote>  {padding/font-size/border-left}

e.g.:<blockquote><p>这是援文本</p></blockqoute>
直接引用一般配合<p>使用

 

20、引用+命名来源  <footer>  <cite>

e.g.:<blockquote>这是引用文本<footer>这是引用来源描述<cite>这是援引名称</cite></footer></blockquote>

 

21、引用反向风格  .blockquote-reverse

e.g.:<blockquote
class=”blockquote-reverse”>这是引用文本<footer>这是援引来源描述<cite>这是援名称</cite></footer></blockquote>
右对伙同显示

 

22、无序列表 <ul>  {margin-top/margin-bottom}

e.g.:<ul><li>这是无序列表内容</li></ul>

 

23、有序列表  <ol>  {margin-top/margin-bottom}

e.g.:<ol><li>这是板上钉钉列表内容</li></ol>

 

24、无样式列表  .list-unstyled  {padding-left/list-style}

e.g.:<ul class=”list-unstyled”><li>这是无序列表
层叠默认样式显示</li></ul>||<ol
class=”list-unstyled”><li>这是板上钉钉列表
层叠默认样式显示</li></ol>

 

25、内联样式  .list-inline  {padding-left/margin-left/list-style} 
{display/padding}

e.g.:<ul class=”list-inline “><li>这是凭序列表
一行显示</li></ul>||<ol
class=”list-inline “><li>这是发出序列表
一行显示</li></ol>

 

26、定义列表  <dl>  {margin-top/margin-bottom}  {font-weight} 
{margin-left}

e.g.:<dl><dt>定义标题</dt><dd>定义内容</dd></dl>

 

27、定义列表水平排列  .dl-horizontal

e.g.:<dl
class=”dl-horizontal”><dt>定义标题</dt><dd>定义内容</dd></dl>
标题和内容在一行显示

 

28、代码  <code> 
{padding/font-size/color/background-color/border-radius}

e.g.:<code>代码有</code> 特殊字符一般坐字符实体表示

 

29、用户输入  <kbd> 
{padding/font-size/color/background-color/border-radius /box-shadow}

e.g.:<kbd>键盘输入的内容</kbd>

 

30、代码块  <pre> 
{padding/margin/font-size/color/background-color/word-break/word-wrap/border/border-radius}

e.g.:<pre>代码块内容</pre> 特殊字符一般坐字符实体表示

 

31、变量  <var>  浏览器自带样式

e.g.:<var>程序中的变量</var>

 

32、程序输出  <samp>  {font-family}

e.g.:<samp>程序输出的情</samp>

相关文章