学习笔记5-bootstrap 排版

最新推荐文章于 2017-05-09 09:33:28 发布

落花新月

最新推荐文章于 2017-05-09 09:33:28 发布

阅读量928

点赞数

分类专栏： bootstrap&Metro UI 文章标签： bootstrap 排版字体文本特定格式

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/41990013

版权

bootstrap&Metro UI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。如：

<h1>h1. Bootstrap heading</h1>
<h2>标题h2</h2>              //运行结果：标题h2
<h3>h3. Bootstrap heading</h3>   //h3. Bootstrap heading
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

2.在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，就能得到一个字号更小的颜色更浅的文本。

<!---运行结果：h1.Bootstrap heading Secondary text--->

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h1>标题<small>副标题</small></h1>

3.页面主体：

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。如：

<p>...</p>

4.通过添加 .lead 类可以让段落突出显示。如：

<p class="lead">...</p>

5.通过增加 font-weight 值强调一段文本。如：

<strong>rendered as bold text</strong>

6.斜体：

<em>rendered as italicized text</em>

7.下划线：
<u>This line of text will render as underlined</u>

8.地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
  
  
   
   Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
   
   Full Name
first.last@example.com
  
  
  
  
   
   Copy
  
  
  
  
   
   <address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

落花新月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记5-bootstrap 排版

1.HTML 中的所有标题标签，到均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。如：h1. Bootstrap heading标题h2 //运行结果：标题h2h3. Bootstrap heading //h3. Bootstrap headingh4. Bootstrap heading
复制链接

扫一扫

专栏目录